Single page Application with Angular and Umbraco, for u-hangout 1. july 2016 with Rene Pjengaard

1. spangulumbraco
Single Page Applications with Angular and Umbraco
Rene Pjengaard
Tech Lead at Skybrud.dk
@pjengaard
Filip Bruun Bech-Larsen
Frontend Manager at IMPACT
@filipbech

2. So what is a SPA
anyway
• Web-app that handles routing between states based
on urls

3. Why would anybody want
that?
• User experience
• Animating page-transitions
• Performance
• Preloading
• Less parsing
• Only send diffs
• Caching

4. How is it done
• Simple
• Everything up front
• Advanced
• Everything is dynamic

5. In Angular 1.x today
• UI.router
• state()

10. What can Umbraco give us?
• API´s to handle navigation, content and settings
• Cache invalidation
• Initial template
• Grid as data

13. Invalid cache when…
• you deploy new JS files
• content changes from Umbraco editors

14. How?
• Watchers
• FileWatcher
• ContentWatcher

18. One template to rule them all

19. 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

21. GridContent

23. Animations

25. What are the gotchas
• Initial content => SEO / indexing
• Cache-invalidation
• Memory management in JS
• JS dependency
• document.write
• no on-load. Manually handle analytics

26. Links
https://github.com/skybrud/sky-grid
https://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/

27. Thats it
questions?
Rene Pjengaard
Tech Lead at Skybrud.dk
@pjengaard
Filip Bruun Bech-Larsen
Frontend Manager at IMPACT
@filipbech