Demystifying Angular Universal

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
8. None
9. None

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

16. None

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