Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Universal apps lightning talk


Published on

The lead developer 2018

Published in: Engineering
  • Login to see the comments

  • Be the first to like this

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.