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.

Building a dynamic SPA website with Angular

933 views

Published on

or "how to use Angular with your CMS" from AngularCamp 2017 in Barcelona

Published in: Technology
  • Be the first to comment

Building a dynamic SPA website with Angular

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

×