Successfully reported this slideshow.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Universal apps lightning talk

  1. 1. Universal Apps: Architecture for the Modern Web Elyse Kolker Gordon Twitter: @sfdrummerjs, Github: @elyseko Director, Web Platforms, Vevo
  2. 2. Deep dive with the book!
  3. 3. Topics ● Overview ● Why build it? ● Tools and Frameworks ● Challenges/Tradeoffs
  4. 4. Overview: What is a Universal App?
  5. 5. Server-side rendered applications Overview User Request Fetch Data JSONHTML
  6. 6. Single Page Application (SPA) Overview JSON Fetch data
  7. 7. Why not both? Overview
  8. 8. HTML & Server State (JSON) Fetch Data Overview User Request Fetch Data JSON JSON Then the SPA cycle
  9. 9. Why build it?
  10. 10. #1 SEO Getting your website (or cat video) to rank the highest can make or break your success as a business. Why build it?
  11. 11. #2 Perceived Performance Users should think the site is fast. This means showing content (not loading spinners) as soon as possible. Why build it?
  12. 12. Everything is JavaScript! Most of your code will run on both the server and the browser. #3 Maintenance and Developer benefits Why build it?
  13. 13. How to build it?
  14. 14. Write code once, run it in two environments (node & browser). How to build it
  15. 15. Universal Libraries/Frameworks How to build it
  16. 16. Out of the box solutions How to build it
  17. 17. Serialize and Hydrate the Data How to build it { user: {...}, cart: {...}, products: {...} } “{“user”:{...},”cart”:{...}”products”:{...}“ Create a string from the data
  18. 18. window.__INITIAL__STATE = { user: {...}, cart: {...}, products: {...} } Serialize and Hydrate the Data
  19. 19. createApp(window.__INITIAL__STATE) Serialize and Hydrate the Data
  20. 20. How to build it HTML generated on the server. Debugger set before the app hydrates the server state.
  21. 21. Challenges and Tradeoffs
  22. 22. Competing envs Challenges and Tradeoffs ● Set environment flags via webpack ● Use a single source of truth user session info ● Npm packages must be isomorphicWhere’s the window object?
  23. 23. Performance Challenges and Tradeoffs Rendering hundreds of UI elements can be slow ● Implement caching ● Render less items ● Use streams (node.js)
  24. 24. Testing Challenges and Tradeoffs There are always two states. ● Initial load: when the user first comes to the app. ● SPA lifecycle: any user interaction after initial load
  25. 25. Universal architecture adds complexity, but gives you clear benefits for SEO and performance.