spangulumbracoSingle Page Applications with Angular and Umbraco

Rene PjengaardTech Lead at Skybrud.dk@pjengaard

Filip Bruun Bech-LarsenFrontend Manager at IMPACT@filipbech

So what is a SPA anyway

• Web-app that handles routing between states based on urls

Why would anybody want that?

• User experience

• Animating page-transitions

• Performance

• Preloading

• Less parsing

• Only send diffs

• Caching

How is it done• Simple

• Everything up front

• Advanced

• Everything is dynamic

In Angular 1.x today • UI.router

• state()

What can Umbraco give us?

• API´s to handle navigation, content and settings

• Cache invalidation

• Initial template

• Grid as data

Invalid cache when…• you deploy new JS files

• content changes from Umbraco editors

How?• Watchers

• FileWatcher

• ContentWatcher

One template to rule them all

Grid as data• Skybrud.Umbraco.GridData by @abjerner

• Create SpaGridJsonConverter

• Create GridValueConverter for each grid datatype

• Register SpaGridJsonConverter in IApplicationStartup

• Decorate your grid-property on your models

GridContent

Animations

What are the gotchas• Initial content => SEO / indexing

• Cache-invalidation

• Memory management in JS

• JS dependency

• document.write

• no on-load. Manually handle analytics

Links

https://github.com/skybrud/sky-gridhttps://github.com/skybrud/sky-spa

https://github.com/skybrud/sky-spa-api-example-code

http://made.dk/http://essfood.com/

http://www.roskilde-gymnasium.dk/

Thats itquestions?

Rene PjengaardTech Lead at Skybrud.dk@pjengaard

Filip Bruun Bech-LarsenFrontend Manager at IMPACT@filipbech