Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Demystifying Angular Universal

Demystifying Angular Universal

An Introduction to Angular Universal, Server-Side Rendering


Ire Aderinokun

January 28, 2017


  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

  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

  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