Tree V8 Architecture
V8 Purpose
* Bandwidth Sensitive Payload
* Heavy Client Cache
* Conditional Get
* Selective Download
* Mobile First
* Mobile Phone Library
* Performant
* Page Load
* Web Page Test
* Experience
* Mobile Phone Testing
* Web components
* Sharable
* Native
* Self Contained
* Polymer
* Progressive Web App https://developers.google.com/web/progressive-web-apps/checklist
* Single Page App
* PRPL
* Push critical resources for the initial URL route.
* Render initial route.
* Pre-cache remaining routes.
* Lazy-load and create remaining routes on demand.
* Caching
* IndexedDB
* Cacheable Objects
* Person (4 sizes)
* Pedigree (4 sizes)
* Conditional Get
* Cache hashed version number of object
* Cached data is rendered
* Send version number to server
* Server responds with data if it’s different or empty response and 304 if it hasn’t
* New data is rendered if it has changed
* Page Load
* Payload
* Requests
* TimingsThings I'd like to cover
Main V8 Goals
- Mobile First
- Bandwidth/Network Sensitive
- Performance
Web Components
Browser Native
(with polyfill backups)
Self Contained/Easily Sharable
<!-- Import the component -->
<link rel="import" href="fs-person-card.html">
<!-- Use the component -->
<fs-person-card person-id="KWC1-867"></fs-person-card>Polymer
Progressive Web App
PWA Checklist
- Pages are responsive on tablets & mobile devices
- Metadata provided for Add to Home screen
- First load fast even on 3G
- Page transitions don't feel like they block on the network
- Each page has a URL
- Pages use the History API
- Site uses cache-first networking
- etc
PRPL Pattern
- Push critical resources for the initial URL route.
- Render initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.
PRPL Loading Structure
Client-side Caching
Conditional Get
Demo
Page Load
v7 vs v8 page speed
From Australia with 3G network and latency simulation
Visual Progress
Timings
Number of Requests
Payload Size
Tree V8 Architecture
By Tyler Graf
