I M P A C TI M P A C T

SINGLE PAGE APPLICATIONS MED ANGULAR1 1 . M A J 2 0 1 6

I M P A C T

OM MIG• Filip Bruun Bech-Larsen• Frontend Manager, IMPACT• Passioneret omkring internettet

@filipbech

I M P A C T

HVAD ER EN SPA• En web-applikation som passer på en

webpage med det formål at give en mere flydende bruger-oplevelse, sammenlignelig med desktop + mobile-apps. [wikipedia]

• I praksis i JS-router, som styrer visninger ud fra url’er.

I M P A C T

HVORFOR?• Bedre oplevelse– Gennemført oplevelse– Ingen ”hop”– Animationer, spinners, etc.– Preloade indhold– Hurtigere side-skift (færre og mindre

requests, mindre JS-parsing)

I M P A C T

HVORDAN• Simple (naiv)– Alt up-front

• Avanceret (dynamisk)– Alt dynamisk

I M P A C T

MED ANGUL AR 1 .X I DAG • ui.router• state()

I M P A C T

AND NOW FOR SOME LIVE-CODING…

I M P A C T

UDFORDRINGERNE …• Caching (invalidering)• Memory-management• Initial content (seo, indexering mm)• Javascript afhængighed • Onload (analytics, 3rd-party scripts)• document.write

I M P A C T

SPØRGSMÅL???

I M P A C T

THANKS…• @filipbech (slides, video mm)• fbb@impact.dk