This document discusses Angular Universal, which allows Angular applications to render on both the server and client. It provides an overview of web history from static pages to single-page applications (SPAs) and the problem of increased load times and SEO issues with client-side rendering alone. Angular Universal solves this by combining server rendering with client rendering. Key points covered include pre-rendering, routing, syncing state between server and client rendering, and limitations to consider for server-side rendering with Angular.

1. ANGULAR UNIVERSAL
MICHAEL HABERMAN
INDEPENDENT CONSULTANT

2. ABOUT ME
• Fullstack independent consult
• AWS Solution Architect
• Microsoft certified trainer
• Google developer group organizer
• Enough about me, lets talk Angular

3. WEB HISTORY
• Directory browsing
Browser Backend
Request page
Static page

4. WEB HISTORY
• Dynamic pages
Browser Backend
Request page
Static page
Query DB &
Generate HTML

5. WEB HISTORY
• Dynamic pages + Javascript
Browser Backend
Request page
Static page + javascript
Query DB &
Generate HTML
Form validation
Animation

6. WEB HISTORY
• Client side rendering - SPA
Browser Backend
Request page
Bundled app
Rendering &
App state

7. PROBLEM WITH CLIENT SIDE RENDERING
• Increase load time
• Crawler / Bots:
• SEO (SEO speed test)
• Social sharing (Open graph debugger)

8. INCREASE LOAD TIME

9. HOW TO SOLVE IT?
• Combine server rendering with client rendering

10. WEB HISTORY
• Client side rendering - SPA
Browser Backend
Request page
Static page + Bundled app
1) Render static page
2) Bootstrap angular

11. RENDERING OPTIONS
• Pre-render:
• While building render HTML
• Fast (just serve, store in CDN)
• Static
• Re-render
• Render in runtime
• More flexible
• Lest performance

12. COMBINE SERVER AND CLIENT RENDERING

13. WHERE AM I ?!
• Detect platform:
• Show different UI
• Log different data
• Access different resource ( DB vs API )

14. CHECK PLATFORM

15. ROUTING
• Domain.com/about
• Need to render index.html + component
• Declare in angular
• Declare in express

16. ROUTING

17. CLIENT-SERVER SYNC
• Server render is complete, angular is booting
• User had input text to control
• Angular takes over….
• We lost state!!

18. PREBOOT
• Solve sync issue
• Re-fire DOM events
• Maintain focused element
• https://universal.angular.io/api/preboot/index.html

19. 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

20. LIMITATIONS
• Browser API & DOM (document.getElementById, jquery, localStorage)
• isPlatformServer()
• Don’t use nativeElement, user elementRef
• Consider API calls
• Angular 2 and above

21. MORE FRAMEWORKS
• Node.js ( express, hapi.js and more )
• .NET core
• More to come…

22. ANGULAR 1
• No out-of-the-box solution
• Node.js headless Chrome

23. SEED PROJECT
• https://github.com/AngularClass/angular-starter

24. QUESTIONS

25. • Thank you!
• Michael@haberman.io
• @hab_mic