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
Tweet

More Decks by Ire Aderinokun

Other Decks in Programming

Transcript

  1. 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
  2. Agenda • What is Server-Side Rendering? • Why Server-Side Rendering?

    • How does Server-Side Rendering Work? • Angular Universal Codelab
  3. Client-Side Rendering 1. Browser downloads HTML, CSS, and Application JavaScript

    2. Browser parses HTML, CSS, and Application JavaScript 3. Browser displays page
  4. 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
  5. Server-Side Rendering is NOT… • … A replacement for your

    API server • … A server-side MVC application (e.g. Meteor, Sails)
  6. 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
  7. Pre-Rendering • Static HTML is generated at build time and

    deployed to a CDN. Server view served by the CDN.
  8. 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/