Scribd
Upload
67 views25 pages

Angular Universal: Michael Haberman Independent Consultant

This document discusses Angular Universal, which allows rendering Angular applications on the server as well as the client for improved SEO and performance. It covers the history of web development from static to dynamic client-side rendering. The problem of increased load times with client-side rendering is addressed through server-side rendering. Options for rendering include pre-rendering at build time or re-rendering at runtime. Platform detection, routing, and maintaining state between server and client rendering are also discussed.

Uploaded by

Rajesh Vhadlure
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
67 views25 pages

Angular Universal: Michael Haberman Independent Consultant

This document discusses Angular Universal, which allows rendering Angular applications on the server as well as the client for improved SEO and performance. It covers the history of web development from static to dynamic client-side rendering. The problem of increased load times with client-side rendering is addressed through server-side rendering. Options for rendering include pre-rendering at build time or re-rendering at runtime. Platform detection, routing, and maintaining state between server and client rendering are also discussed.

Uploaded by

Rajesh Vhadlure
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

ANGULAR UNIVERSAL

MICHAEL HABERMAN

INDEPENDENT CONSULTANT
ABOUT ME

• Fullstack independent consult


• AWS Solution Architect
• Microsoft certified trainer
• Google developer group organizer

• Enough about me, lets talk Angular


WEB HISTORY

• Directory browsing

Request page
Browser Backend
Static page
WEB HISTORY

• Dynamic pages

Query DB &
Request page Generate HTML
Browser Backend
Static page
WEB HISTORY

• Dynamic pages + Javascript

Query DB &
Request page Generate HTML
Browser Backend
Static page + javascript

Form validation
Animation
WEB HISTORY

• Client side rendering - SPA

Request page
Browser Backend
Bundled app

Rendering &
App state
PROBLEM WITH CLIENT SIDE RENDERING

• Increase load time


• Crawler / Bots:
• SEO (SEO speed test)
• Social sharing (Open graph debugger)
INCREASE LOAD TIME
HOW TO SOLVE IT?

• Combine server rendering with client rendering


WEB HISTORY

• Client side rendering - SPA

Request page
Browser Backend
Static page + Bundled app

1) Render static page


2) Bootstrap angular
RENDERING OPTIONS

• Pre-render:
• While building render HTML
• Fast (just serve, store in CDN)
• Static

• Re-render
• Render in runtime
• More flexible
• Lest performance
COMBINE SERVER AND CLIENT RENDERING
WHERE AM I ?!

• Detect platform:
• Show different UI
• Log different data
• Access different resource ( DB vs API )
CHECK PLATFORM
ROUTING

• Domain.com/about
• Need to render index.html + component
• Declare in angular
• Declare in express
ROUTING
CLIENT-SERVER SYNC

• Server render is complete, angular is booting


• User had input text to control
• Angular takes over….
• We lost state!!
PREBOOT

• Solve sync issue


• Re-fire DOM events
• Maintain focused element

• https://universal.angular.io/api/preboot/index.html
TRANSFER FROM SERVER TO CLIENT

• User gets static HTML


• Preboot creates hidden div & record events
• Angular bootstrapping + loading external resource
• Angular call notify preboot once completed
• Preboot re-fire event to angu;ar
• Preboot witch view & cleanup
LIMITATIONS

• Browser API & DOM (document.getElementById, jquery, localStorage)


• isPlatformServer()

• Don’t use nativeElement, user elementRef


• Consider API calls
• Angular 2 and above
MORE FRAMEWORKS

• Node.js ( express, hapi.js and more )


• .NET core
• More to come…
ANGULAR 1

• No out-of-the-box solution
• Node.js headless Chrome
SEED PROJECT

• https://github.com/AngularClass/angular-starter
QUESTIONS
• Thank you!

• [email protected]
• @hab_mic

You might also like