Building a dynamic SPA website with Angular

1. Building a dynamic SPA a journey with @ﬁlipbech @IMPACTdigitaldk

2. Filip @ﬁlipbech

4. #weAreHiring #denmark

5. https://www.facebook.com/groups/ngAarhus/

6. https://developers.google.com/experts/people/ﬁlip-bruun-bech-larsen

7. …enough about me let’s use Angular for dynamic content

8. Building a dynamic SPA a journey with @ﬁlipbech @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-conﬁg

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-conﬁg they get at ﬁrst load

35. One route to rule them all

37. **-route + generic PageComponent

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

57. Custom RouterReuseStrategy

60. What about Rich-text content from the CMS?

63. ng-bind-html

65. Perfect, except for links

66. the router doesn’t “hĳack” a[href]-clicks like uiRouter

67. enter the [href] directive

68. NOPE

69. @Hostlistener => router.go()

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

78. Without AOT With AOT

79. Server Side Rendering

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 diﬀerent 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

94. enter no-ssr directive

97. We made it to nirvana

98. Thank you, this was: “building a dynamic SPA with Angular” I’m @ﬁlipbech code: https://github.com/ﬁlipbech/ng-dynamic-spa @IMPACTdigitaldk

Building a dynamic SPA website with Angular

Building a dynamic SPA website with Angular

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Building a dynamic SPA website with Angular

Similar to Building a dynamic SPA website with Angular(20)

More from Filip Bruun Bech-Larsen

More from Filip Bruun Bech-Larsen(20)

Recently uploaded

Recently uploaded(20)

Building a dynamic SPA website with Angular