Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Building a dynamic SPA website with Angular
Similaire à Building a dynamic SPA website with Angular (20)
Plus de Filip Bruun Bech-Larsen
Plus de Filip Bruun Bech-Larsen (20)
Dernier
Dernier (20)
Building a dynamic SPA website with Angular
- 1. Building a dynamic SPA a journey with @filipbech @IMPACTdigitaldk
- 3. !
- 7. …enough about me let’s use Angular for dynamic content
- 8. Building a dynamic SPA a journey with @filipbech @IMPACTdigitaldk
- 9. or “How to use Angular with your cms”
- 10. Let’s do like angular 1
- 11. NOPE
- 12. need to bootstrap a component
- 14. …but we have no root app? • multiple entrypoints
- 15. Bootstrapping multiple applications • its a little harder to maintain state between applications (but possible) • the cms now needs to know what components are angular-components, so they can all be bootstrapped. (and their DOM-nodes if multiple of the same component)
- 17. Initial data • We need to feed data (settings, initial data) into some of the components (from the cms), and put content inside them.
- 19. NOPE
- 20. Because • Root-components cannot have inputs • Root-components cannot use content-projection (transclusion) https://github.com/angular/angular/issues/1858
- 21. How about a <body>- component then?
- 23. Eeeewwwww
- 24. • even though it works - it feels terrible and wrong! • and we need the parser at runtime • so no AOT and bad perf
- 25. We need a SPA
- 26. Single Page Application • so we can also share state between routes • animate route-changes • and much more…
- 27. Demo-time to heighten the suspense…
- 29. It starts with a router
- 30. …thats not very dynamic
- 31. We have too many routes with no patterns • “/“ is a frontpage • “/om/os” is a content-page • “/mejeri“ is a category-page • “/mejeri/ost“ is a sub-category-page • “/ost-i-skiver-mild-13-cheasy-200-g” is a product-page
- 32. So I talked to the Angular team…
- 33. …let the CMS output route-config
- 34. Two issues with that approach • Need to build and invalidate the bundle’s cache every time an editor makes a change • Users get stuck on the route-config they get at first load
- 35. One route to rule them all
- 38. Get the data in a resolve
- 39. PageResolve is just a class with resolve(route)-method on it
- 40. In angular 1.x we could use templateFactory and select a template based on the api-response But we cannot do that in Angular 2+, because there is no template-parser at runtime
- 41. All possible PageComponents with individual *ngIf’s
- 43. Eeeewwwww
- 44. Even though all the *ngIfs in the template are AOT compiled into something more acceptable… It still seems wrong to have it in the template!
- 45. but (for now) it works…
- 46. until you navigate around (nothing happens)
- 47. you’re not changing the route just its options (so: no new resolve, no new ngOnInit)
- 48. Refactoring • Listen for route-changes and handle resolving data manually
- 50. The problem cascades • When we go from one product-detail-page to another product-detail-page… • Refactor init-logic into ngOnChanges
- 51. Then came rc4 ComponentFactoryResolver adds beauty and power to generic components…
- 52. The theory
- 54. What components should be available?
- 56. We need a routeChange for animations and it would feel a lot better too
- 60. What about Rich-text content from the CMS?
- 63. ng-bind-html
- 65. Perfect, except for links
- 66. the router doesn’t “hijack” a[href]-clicks like uiRouter
- 67. enter the [href] directive
- 68. NOPE
- 70. * in reality it’s a little more complicated
- 71. Sweeeet all we ever wanted
- 72. Without all the ugly Flexibility real routes => getting data in resolve + animations Rich Text
- 73. Same approach for the dynamic content spots * we add another directive so we can repeat via *ngForOf
- 74. AOT #justWorks
- 76. Add PageComponents to ngModule entryComponents
- 77. Faster and lighter Initial parse goes from 450ms to 250ms
- 80. SEO, social previews and faster perceived load-times Angular Universal is so hot right now…(in core)
- 81. Hard to wrap your head around universal
- 82. The idea • server.module and a client.module • they both import the app.module • server and client module then replaces the dependencies that are different with appropriate environment-versions (eg. xhr or node-fetch, DOM or virtual-dom)
- 83. Can’t touch this (the DOM) (no direct window, querySelector, localstorage)
- 86. Maintaining state we want to maintain state, so we don’t re-do all fetches and calculations when the client boots up
- 87. StateTransfer Service holds data + hooks for dehydrate/rehydrate via json * idea credit to the universal creators…
- 92. CACHING OF SSR can’t work with personalisation
- 93. 3 strategies at Launch at user interaction just don’t
- 97. We made it to nirvana
- 98. Thank you, this was: “building a dynamic SPA with Angular” I’m @filipbech code: https://github.com/filipbech/ng-dynamic-spa @IMPACTdigitaldk