Angular server side rendering with NodeJS - In Pursuit Of Speed
1 like449 views
The document discusses Angular server-side rendering with Node.js, highlighting benefits like improved search engine optimization and faster initial page load times. It covers topics such as Angular compilation, dependency injection, and the role of zone.js in managing asynchronous operations. The necessity of code sharing between platforms and the functionality of Angular modules, as well as handling different application states, is also addressed.
![A B O U T M E
{
"name": "Ilia Idakiev",
"experience": [
"Developer / Manager / Owner @ HNS",
"Lecturer in 'Advanced JS' @ FMI",
"Contractor / Consultant",
"2 Angular Courses @ HB (2016 - 2017)",
"JavaScript Courses"
],
"involvedIn": [
"SofiaJS", "BeerJS", "Angular Sofia"
]
}](https://image.slidesharecdn.com/angularserversiderendering-171120113125/85/Angular-server-side-rendering-with-NodeJS-In-Pursuit-Of-Speed-2-320.jpg)
Angular server side rendering with NodeJS - In Pursuit Of Speed
- 1. A N G U L A R S E R V E R S I D E R E N D E R I N G I N P U R S U I T O F S P E E D W I T H N O D E . J S
- 2. A B O U T M E { "name": "Ilia Idakiev", "experience": [ "Developer / Manager / Owner @ HNS", "Lecturer in 'Advanced JS' @ FMI", "Contractor / Consultant", "2 Angular Courses @ HB (2016 - 2017)", "JavaScript Courses" ], "involvedIn": [ "SofiaJS", "BeerJS", "Angular Sofia" ] }
- 3. I 💜 V I N Y L A N D A L S O
- 4. I N T R O D U C T I O N T O S S R A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 5. A P P L I C AT I O N B O O T S T R A P ( H T T P / 1 . 1 ) Browser Server / Bootstrap /api/data inline.bundle.js ... main.bundle.js
- 6. N O S S R " / " R E S P O N S E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S Bootstrap
- 7. S E R V E R S I D E R E N D E R I N G ( H T T P / 1 . 1 ) Browser Server / Bootstrap inline.bundle.js ... main.bundle.js Bootstrap
- 8. S S R " / " R E S P O N S E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S Bootstrap
- 9. Angular Universal generates static application pages on the server through a process called server-side rendering A N G U L A R U N I V E R S A L A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 10. • Search Engine Optimization • Fast First Initial Paint • Social Networks Link Preview B E N E F I T S O F S S R A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 11. A N G U L A R C O M P I L AT I O N
- 12. An Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by an Angular compiler. A N G U L A R C O M P I L AT I O N A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 13. • Just In Time (JIT) - Compile application in the browser (slower and larger size) • AOT - Serve pre-compiled version of the application A N G U L A R C O M P I L AT I O N A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 14. A N G U L A R I S B R O W S E R A N D D O M I N D E P E N D E N T. I T C A N R U N O N M U LT I P L E P L AT F O R M S .
- 15. • Browser • Server • WebWorker • Mobile ( NativeScript ) A N G U L A R P L AT F O R M S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 16. A N G U L A R R E N D E R E R
- 17. H O W I T W O R K S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S A N G U L A R C O M P O N E N T C O M P O N E N T T E M P L AT E R E N D E R E R D O M
- 18. A N G U L A R M O D U L E S
- 19. • Angular apps are modular and Angular has its own modularity system called NgModules. • Every Angular app has at least one NgModule class, the root module, conventionally named AppModule. • While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. A N G U L A R M O D U L E S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 20. A N G U L A R M O D U L E S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S Angular Module P R O V I D E R S C O M P O N E N T SD I R E C T I V E S O T H E R M O D U L E I M P O RT S
- 21. A B O U T 4 M O N T H S A G O . . . A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S https://github.com/iliaidakiev/angular-cli-ssr
- 22. O F F I C I A L A N G U L A R 5 . 0 . 1 U N I V E R S A L S T Y L E G U I D E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S https://next.angular.io/guide/universal
- 23. • A coding pattern in which a class receives its dependencies from external sources rather than creating them itself. • Angular has its own dependency injection framework, and you really can't build an Angular application without it. D E P E N D E N C Y I N J E C T I O N A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 24. D E P E N D E N C Y I N J E C T I O N A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 25. D E P E N D E N C Y I N J E C T I O N C O N TA I N E R A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 26. • Class • Value • Factory P R O V I D E R T Y P E S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 27. S H A R I N G C O D E B E T W E E N P L AT F O R M S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 28. H T T P I N T E R FA C E B R O W S E R H T T P S E R V I C E I M P L E M E N TAT I O N S E R V E R H T T P S E R V I C E I M P L E M E N TAT I O N A P P B R O W S E R M O D U L E A P P S E R V E R M O D U L E HttpService HttpServiceServer { provide: HttpService, useClass: HttpService } { provide: HttpService, useClass: HttpServiceServer } RESTOFAPPLICATION S H A R I N G C O D E B E T W E E N P L AT F O R M S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S HttpService Browser build Server build
- 29. D E M O
- 30. A N G U L A R Z O N E S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 31. • Small Library written by the Angular team that is inspired by DART. • It provides a mechanism for encapsulating and intercepting asynchronous activities in the browser • A zone is an execution context that persists across asynchronous tasks. It allows us to control execution of the code within the zone. • Proposal in stage 0 of the TC39 process (EcmaScript standard) W H AT I S Z O N E . J S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 32. • Useful for accessing data which persist across async operations. • Useful for frameworks / applications to be able to schedule and intercept async tasks. • Helps us detect the VM turns. • Useful for error handling, debugging, testing and profiling Z O N E . J S U S A G E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 33. • The library monkey patches all the async browser / server APIs. • Creates a <root> zone. • Redirects all the async operations trough a zone of interception. • Provides a global Zone object used for zone management. H O W Z O N E . J S W O R K S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 34. W H AT ' S M O N K E Y PAT C H I N G ? 🙈
- 35. • A monkey patch is a way for a program to extend or modify supporting system software locally (affecting only the running instance of the program). M O N K E Y PAT C H I N G 🙉 A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S Source: wikipedia
- 36. M O N K E Y PAT C H I N G D E M O
- 37. • MicroTask - work which will execute ASAP on empty stack frame. A microtask is guaranteed to run before host environment performs rendering or I/O operations. (process.nextTick, Promises*, Object.observe, MutationObserver) • MacroTask - Macro tasks are interleaved with rendering and I/O operations of the host environment. Macro tasks are guaranteed to run at least once or canceled. Macro tasks have an implied execution order. (setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering) J AVA S C R I P T E N G I N E TA S K S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S *difference across engines
- 38. J AVA S C R I P T E V E N T L O O P A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S S TA C K M I C R O TA S K Q U E U E M A C R O TA S K Q U E U E Event Loop
- 39. Z O N E . J S D E M O
- 40. https://github.com/angular/angular -> /packages/core/src/zone/ng_zone.ts T H E A N G U L A R Z O N E R E V I E W A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 41. Angular Application is stable whenever there are no micro tasks left. T H E A N G U L A R Z O N E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 42. A N G U L A R C H A N G E D E T E C T I O N A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S C D C D C DC D C D
- 43. A N G U L A R C H A N G E D E T E C T I O N A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S C D C D C DC D C D
- 44. A N G U L A R C H A N G E D E T E C T I O N A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S C D C D C DC D C D
- 45. It's perfect when our application is running in the browser! What about if it's running on the server ? A N G U L A R Z O N E S A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 46. O U R A N G U L A R A P P A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S SERVER A P I A N G U L A R A P P V I E W M O D E L S B L O G P O S T S S E R V I C E R O U T E R C O M P O N E N T S
- 47. S E R V E R S I D E A N G U L A R ( C A S E 1 ) A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S /blogPosts RESPONSE REQUEST pre-rendered html for req url SERVER D B NodeJS G E T B L O G P O S T S F R O M D B P R O V I D E B L O G P O S T S B U I L D A N G U L A R A P P
- 48. Works fine, but if we have to write handlers for each url. Isn't there another way so we can reuse what we have already written inside our Angular app? S E R V E R S I D E A N G U L A R ( C A S E 1 ) A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 49. D E P E N D E N C Y I N J E C T I O N T O T H E R E S C U E B L O G P O S T S S E R V I C E B L O G P O S T S S E R V E R S E R V I C E { provide: BlogPostService, useClass: BlogPostService } { provide: BlogPostService, useClass: BlogPostServerService }
- 50. S E R V E R S I D E A N G U L A R ( C A S E 2 ) A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S /blogPosts RESPONSE REQUEST pre-rendered html for req url SERVER D B NodeJS B U I L D A N G U L A R A P P B L O G P O S T S M O D E L B L O G P O S T S S E R V E R S E R V I C E
- 51. 🙉 Why isn't it working ??? C A S E 2 R E S U LT S T O A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 52. • Zone.js monkey patches all the async browser / server APIs. • Angular Application is stable whenever there are no micro tasks left. • When Angular is stable the change detection is fired and our application is rendered. (in our case it's rendered before the async callback is called) C A S E 2 A N G U L A R Z O N E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 53. Zone.current.scheduleMicroTask / Zone.current.scheduleMacroTask C A S E 2 A N G U L A R Z O N E S O L U T I O N A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 54. D E M O
- 55. A N G U L A R 5 ( 2 3 S E P. ) A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 56. A N G U L A R 5 N O O P Z O N E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S Change detection will not be triggered automatically anymore. We need to explicitly tell Angular when to trigger it.
- 57. • ChangeDetectorRef.detectChanges • ApplicationRef.tick M A N U A L LY T R I G G E R I N G C D A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 58. C U R R E N T S C E N A R I O A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S A N G U L A R S E R V E R A P P S E R V E R A P P S TAT E A N G U L A R B R O W S E R A P P B R O W S E R A P P S TAT E Node Server Request Browser D B / A P I H T M L Response
- 59. T R A N S F E R R I N G S TAT E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 60. I N J E C T I N G S TAT E A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S A N G U L A R S E R V E R A P P A P P S TAT E A N G U L A R B R O W S E R A P P A P P S TAT E Node Server Request Browser D B / A P I Response A P P S TAT E HTML
- 61. S E R V E R S TAT E T R A N S F E R A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 62. B R O W S E R S TAT E T R A N S F E R * A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S * This won't work if Angular is running inside a web worker!
- 63. B R O W S E R S TAT E T R A N S F E R * A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S For more information check the implementation of Renderer2
- 64. D E M O
- 65. P R E B O O T A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 66. • Record and play back events • Respond immediately to certain events in the server view • Maintain focus even page is re-rendered • Buffer client-side re-rendering for smoother transition • Freeze page until bootstrap complete for certain events (ex. form submission) P R E B O O T A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S State transition from a server-generated web view to a client-generated web view helper.
- 67. H T T P S : / / G I T H U B . C O M / A N G U L A R / P R E B O O T
- 68. T I P S A B O U T P R E B O O T
- 69. • HTTP/2 • Service Workers G O I N G FA S T E R A N G U L A R S E R V E R S I D E R E N D E R I N G W I T H N O D E . J S
- 70. F U T U R E E V E N T S • 30 Nov - Angular Sofia - Introduction to Apollo (presented by Aleksander Kostov) • 01-02 Dec - hack-ng (Angular Hackathon) - Predictable Reactive State Management for Enterprise applications with NGRX/platform (presented by me) • ~20 Dec - SofiaJS/BeerJS/AngularSofia event (being planned) • ~ January - Progressive Web Applications Workshop (by me and Aleksander Kostov)
- 71. C O N TA C T S • GitHub - https://github/iliaidakiev (/slides/ - list of future and past events) • Twitter - @ilia_idakiev
- 72. T H A N K Y O U !