Demystifying Angular Universal

Slide 1

Slide 1 text

Demystifying Angular Universal Ire Aderinokun at Angular Nigeria (ng)2 Meetup

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Agenda • What is Server-Side Rendering? • Why Server-Side Rendering? • How does Server-Side Rendering Work? • Angular Universal Codelab

Slide 4

Slide 4 text

What is Server-Side Rendering?

Slide 5

Slide 5 text

How a Page Loads https://bitsofco.de/understanding-the-critical-rendering-path/

Slide 6

Slide 6 text

Client-Side Rendering 1. Browser downloads HTML, CSS, and Application JavaScript 2. Browser parses HTML, CSS, and Application JavaScript 3. Browser displays page

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Server-Side Rendering is NOT… • … A replacement for your API server • … A server-side MVC application (e.g. Meteor, Sails)

Slide 11

Slide 11 text

Server-Side Rendering is only for the Initial Render of the page

Slide 12

Slide 12 text

Why Server-Side Rendering?

Slide 13

Slide 13 text

1) Search Engine Optimisation

Slide 14

Slide 14 text

Site Previews

Slide 15

Slide 15 text

2) Performance

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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.ﬁlamentgroup.com/lab/mv-initial-load-times.html

Slide 18

Slide 18 text

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ Server-Rendered Client-Rendered

Slide 19

Slide 19 text

3) Progressive Enhancement

Slide 20

Slide 20 text

Slow Connections

Slide 21

Slide 21 text

Limited Browsers

Slide 22

Slide 22 text

Basic Phones

Slide 23

Slide 23 text

A Comparison Server-Side Application Client-Rendered Application Server-Rendered Application SEO Fast Initial Load Fast Interactions Progressive Enhancement

Slide 24

Slide 24 text

Server-Side Rendering is only for the Initial Render of the page

Slide 25

Slide 25 text

How does Server-Side Rendering Work?

Slide 26

Slide 26 text

High-Level Overview 1) Initial Server Render 2) Server View to Client View Transition

Slide 27

Slide 27 text

1) Initial Server Render

Slide 28

Slide 28 text

Two Approaches Pre-Rendering Re-Rendering

Slide 29

Slide 29 text

Pre-Rendering • Static HTML is generated at build time and deployed to a CDN. Server view served by the CDN.

Slide 30

Slide 30 text

Re-Rendering • Server dynamically generates static view at run time when the GET request is sent for the page.

Slide 31

Slide 31 text

2) Server View to Client View Transition

Slide 32

Slide 32 text

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 reﬂect 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/

Slide 33

Slide 33 text

Angular Universal Codelab

Slide 34

Slide 34 text

Join In! Install the Angular Universal CLI at: github.com/devCrossNet/universal-cli

Slide 35

Slide 35 text

Demo github.com/ireade/angular-universal-demo