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

Made with Slides.com