Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Angular ❤️ CMS from #AngularUp
Ähnlich wie Angular ❤️ CMS from #AngularUp (20)
Mehr von Filip Bruun Bech-Larsen
Mehr von Filip Bruun Bech-Larsen (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Angular ❤️ CMS from #AngularUp
- 1. Angular ❤ CMS a journey in dynamic content with @filipbech @IMPACTdigitaldk
- 3. "
- 5. #commerceExperience #weAreHiring #denmark #lisbon
- 6. …enough about me let’s talk about using Angular with a CMS!
- 7. Angular ❤ CMS a journey in dynamic content with @filipbech @IMPACTdigitaldk
- 8. Let’s do like angular 1
- 9. NOPE
- 10. need to bootstrap a component
- 12. …but we have no root component?
- 13. 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)
- 15. Initial data and content
- 17. NOPE
- 18. Because • Root-components cannot have inputs • Root-components cannot use content-projection (transclusion) https://github.com/angular/angular/issues/1858
- 19. How about a <body>- component then?
- 21. Eeeewwwww
- 22. • even though it works - it feels terrible and wrong! • and we need the parser at runtime • so no AOT and bad perf
- 23. Elements
- 25. still no animated page-transitions…
- 26. We need a SPA
- 27. Single Page Application • so we can also share state between routes • animate route-changes • and much more…
- 28. Demo-time to heighten the suspense…
- 30. It starts with a router
- 32. …thats not very dynamic
- 33. 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
- 34. So I talked to the Angular team…
- 35. …let the CMS output route-config
- 36. 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
- 37. One route to rule them all
- 40. Get the data in a resolve
- 42. PageResolve is just a class with resolve(route)-method on it
- 43. 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
- 44. All possible PageComponents with individual *ngIf’s
- 46. Eeeewwwww
- 47. 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!
- 48. but (for now) it works…
- 49. until you navigate around (nothing happens)
- 50. you’re not changing the route just its options (so: no new resolve, no new ngOnInit)
- 51. Refactoring • Listen for route-changes and handle resolving data manually
- 53. The problem cascades • When we go from one product-detail-page to another product-detail-page… • Refactor init-logic into ngOnChanges
- 54. Then came rc4 ComponentFactoryResolver adds beauty and power to generic components…
- 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) • the cli can pretty much do it for you
- 85. 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
- 88. CACHING OF SSR can’t work with personalisation
- 89. 3 strategies at client bootstrap at 1st user interaction no SSR
- 93. We made it
- 94. Packaged up on npm as @impactdk/ngx-routing-utils
- 95. Thank you, this was: “Angular ❤ CMS” I’m @filipbech @IMPACTdigitaldk @impactdk/ngx-routing-utils Code-snippets made with carbon