Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular ❤️CMS

406 views

Published on

We want all the shiny features of Angular, but still want our editors to be in charge of the content and pages...

Published in: Technology
  • Be the first to like this

Angular ❤️CMS

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

×