Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Angular ❤️CMS
Similaire à Angular ❤️CMS (20)
Plus de Filip Bruun Bech-Larsen
Plus de Filip Bruun Bech-Larsen (20)
Dernier
Dernier (20)
Angular ❤️CMS
- 1. Angular ❤ CMS a journey in dynamic content with @filipbech @IMPACTdigitaldk
- 4. "
- 7. …enough about me let’s talk about using Angular with a CMS!
- 8. Angular ❤ CMS a journey in dynamic content with @filipbech @IMPACTdigitaldk
- 9. Let’s do like angular 1
- 10. NOPE
- 11. need to bootstrap a component
- 13. …but we have no root component?
- 14. Bootstrapping multiple components • 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)
- 16. Initial data and content
- 18. NOPE
- 19. Because • Root-components cannot have inputs • Root-components cannot use content-projection (transclusion) https://github.com/angular/angular/issues/1858
- 20. How about a <body>- component then?
- 22. Eeeewwwww
- 23. • even though it works - it feels terrible and wrong! • and we need the parser at runtime • so no AOT and bad perf
- 26. go see Pascals talk tomorrow
- 28. still no animated page-transitions…
- 29. We need a SPA
- 30. Single Page Application • so we can also share state between routes • animate route-changes • and much more…
- 31. Demo-time to heighten the suspense…
- 33. It starts with a router
- 34. …thats not very dynamic
- 35. 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
- 36. So I talked to the Angular team…
- 37. …let the CMS output route-config
- 38. 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
- 39. One route to rule them all
- 42. Get the data in a resolve
- 43. PageResolve is just a class with resolve(route)-method on it
- 44. In angularJS 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
- 45. All possible PageComponents with individual *ngIf’s
- 47. Eeeewwwww
- 48. 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!
- 49. but (for now) it works…
- 50. until you navigate around (nothing happens)
- 51. you’re not changing the route just its options (so: no new resolve, no new ngOnInit)
- 52. Refactoring • Listen for route-changes and handle resolving data manually
- 54. The problem cascades • When we go from one product-detail-page to another product-detail-page… • Refactor init-logic into ngOnChanges
- 55. Then came rc4 ComponentFactoryResolver adds beauty and power to generic components…
- 56. The theory
- 58. What components should be available?
- 60. we still can’t animate page-transitions cause its really not…
- 65. What about Rich-text content from the CMS?
- 68. ng-bind-html
- 70. Perfect, except for links
- 71. the router doesn’t “hijack” a[href]-clicks like uiRouter
- 72. enter the [href] directive
- 73. NOPE
- 75. * in reality it’s a little more complicated
- 76. Sweeeet all we ever wanted
- 77. Without all the ugly Flexibility real routes => getting data in resolve + animations Rich Text
- 78. Same approach for the dynamic content spots * we add another directive so we can repeat via *ngForOf
- 79. AOT #justWorks
- 81. SEO, social previews and faster perceived load-times
- 82. Seems hard to wrap your head around universal
- 83. 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)
- 84. Can’t touch this (the DOM) (no direct window, querySelector, localstorage)
- 87. Maintaining state we want to maintain state, so we don’t re-do all fetches and calculations when the client boots up
- 89. CACHING OF SSR can’t work with personalisation
- 90. 3 strategies at client bootstrap at 1st user interaction no SSR
- 94. We made it to nirvana
- 95. Thank you, this was: “Angular ❤ CMS” I’m @filipbech code: https://github.com/filipbech/ng-dynamic-spa @IMPACTdigitaldk Office hours at 13.45