Demystifying Angular Universal

An Introduction to Angular Universal, Server-Side Rendering

Transcript

1. Demystifying Angular Universal Ire Aderinokun at Angular Nigeria (ng)2 Meetup
2. Hello! • Ire Aderinokun • UI/UX Designer and Front- End Developer • Blogger at bitsofco.de • Head of Technology at Big Cabal • Google Expert in Web Technologies
3. Agenda • What is Server-Side Rendering? • Why Server-Side Rendering? • How does Server-Side Rendering Work? • Angular Universal Codelab
4. What is Server-Side Rendering?
5. How a Page Loads https://bitsofco.de/understanding-the-critical-rendering-path/
6. Client-Side Rendering 1. Browser downloads HTML, CSS, and Application JavaScript 2. Browser parses HTML, CSS, and Application JavaScript 3. Browser displays page
7. Server-Side Rendering 1. Browser downloads and parses HTML and CSS 2. Browser displays page 3. Browser downloads and parses Application JavaScript asynchronously 4. Browser displays updated page
10. Server-Side Rendering is NOT… • … A replacement for your API server • … A server-side MVC application (e.g. Meteor, Sails)
11. Server-Side Rendering is only for the Initial Render of the page
12. Why Server-Side Rendering?
13. 1) Search Engine Optimisation
14. Site Previews
15. 2) Performance
17. 0 1250 2500 3750 5000 Angular 1.3.6 Backbone 1.1.2 Ember 1.9.0 Ampersand React 0.12.0 Average Load Time https://www.filamentgroup.com/lab/mv-initial-load-times.html
18. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ Server-Rendered Client-Rendered
19. 3) Progressive Enhancement
20. Slow Connections
21. Limited Browsers
22. Basic Phones
23. A Comparison Server-Side Application Client-Rendered Application Server-Rendered Application SEO Fast Initial Load Fast Interactions Progressive Enhancement
24. Server-Side Rendering is only for the Initial Render of the page
25. How does Server-Side Rendering Work?
26. High-Level Overview 1) Initial Server Render 2) Server View to Client View Transition
27. 1) Initial Server Render
28. Two Approaches Pre-Rendering Re-Rendering
29. Pre-Rendering • Static HTML is generated at build time and deployed to a CDN. Server view served by the CDN.
30. Re-Rendering • Server dynamically generates static view at run time when the GET request is sent for the page.
31. 2) Server View to Client View Transition
32. The Steps 1. Preboot creates hidden div that will be used for client bootstrap and starts recording events 2. Browser makes async requests for additional assets (i.e. images, JS, CSS, etc.) 3. Once external resources loaded, Angular client bootstrapping begins 4. Client view rendered to the hidden div created by Preboot 5. Bootstrap complete, so Angular client calls preboot.done() 6. Preboot events replayed in order to adjust the application state to reflect changes made by the user before Angular bootstrapped (i.e. typing in textbox, clicking button, etc.) 7. Preboot switches the hidden client view div for the visible server view div https://universal.angular.io/overview/
33. Angular Universal Codelab
34. Join In! Install the Angular Universal CLI at: github.com/devCrossNet/universal-cli
35. Demo github.com/ireade/angular-universal-demo