- Universal apps allow code to run on both the server and client for benefits like SEO and perceived performance - They render HTML on the server and initialize the single page application with the same server-rendered data - Frameworks like React support universal patterns, requiring code to run in both Node.js and browser environments - Challenges include ensuring environments match, handling performance of rendering large amounts of content, and testing both initial page load and subsequent single page application interactions

1. Universal Apps: Architecture
for the Modern Web
Elyse Kolker Gordon
Twitter: @sfdrummerjs, Github: @elyseko
Director, Web Platforms, Vevo

2. Deep dive with
the book!

3. Topics
● Overview
● Why build it?
● Tools and Frameworks
● Challenges/Tradeoffs

4. Overview: What is a
Universal App?

5. Server-side rendered applications
Overview
User Request Fetch Data
JSONHTML

6. Single Page Application (SPA)
Overview
JSON
Fetch data

7. Why not both?
Overview

8. HTML & Server
State (JSON)
Fetch Data
Overview
User Request Fetch Data
JSON
JSON
Then the SPA cycle

9. Why build it?

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. #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. 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. How to build it?

14. Write code once, run it in two
environments (node & browser).
How to build it

15. Universal Libraries/Frameworks
How to build it

16. Out of the box solutions
How to build it

17. Serialize and Hydrate the Data
How to build it
{
user: {...},
cart: {...},
products: {...}
}
“{“user”:{...},”cart”:{...}”products”:{...}“
Create a
string from
the data

18. window.__INITIAL__STATE = {
user: {...},
cart: {...},
products: {...}
}
Serialize and Hydrate the Data

19. createApp(window.__INITIAL__STATE)
Serialize and Hydrate the Data

20. How to build it
HTML generated on the server.
Debugger set before
the app hydrates the
server state.

21. Challenges and
Tradeoffs

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. Performance
Challenges and Tradeoffs
Rendering hundreds of UI
elements can be slow
● Implement caching
● Render less items
● Use streams (node.js)

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. Universal architecture adds complexity, but gives
you clear benefits for SEO and performance.