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
    * Timings

Things I'd like to cover

Main V8 Goals

  1. Mobile First
  2. Bandwidth/Network Sensitive
  3. 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