Demystifying Angular Universal

An Introduction to Angular Universal, Server-Side Rendering

Transcript

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

   View Slide

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
   

   View Slide

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

   View Slide

4. What is Server-Side
   Rendering?
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

8. View Slide

9. View Slide

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

    View Slide

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

    View Slide

12. Why Server-Side Rendering?
    

    View Slide

13. 1) Search Engine
    Optimisation
    

    View Slide

14. Site Previews
    

    View Slide

15. 2) Performance
    

    View Slide

16. View Slide

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
    

    View Slide

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

    View Slide

19. 3) Progressive Enhancement
    

    View Slide

20. Slow Connections
    

    View Slide

21. Limited Browsers
    

    View Slide

22. Basic Phones
    

    View Slide

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

    View Slide

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

    View Slide

25. How does Server-Side
    Rendering Work?
    

    View Slide

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

    View Slide

27. 1) Initial Server Render
    

    View Slide

28. Two Approaches
    Pre-Rendering Re-Rendering
    

    View Slide

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

    View Slide

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

    View Slide

31. 2) Server View to Client View
    Transition
    

    View Slide

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/
    

    View Slide

33. Angular Universal Codelab
    

    View Slide

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

    View Slide

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

    View Slide