shengchuang-wong/note-web-at-google-io-2019

Note-Google-IO-2019

Table of Contents

• What's new on chrome or the web
• WebAssembly
• Javascript Feaatures

What's new on chrome or the web

• Lazy loading
• Lighthouse budget
• Portals
• Perception toolkit

Lazy Loading

Lighthouse budget

Portals - web page transition

Perception toolkit

WebAssembly

• WebAssembly

Javascript Features

• v8 engines is used in chrome, node.js, electron, and soon in microsoft edge
• Node.js v7 - Node.js v12 (Speed improve by x11)
• Class method (value instantiator and private value)

class IncreasingCounter {
  _counter = 0
  #counter = 0 <<< private (mean it can't be direct access, but we can create a getter)
}

• string.matchAll
• 1_000 is equal to 1000, 1_000_000 = 1000000
• BigInt to resolved large integers calculation
• array.flat()

// Flatten one level:
const array = [1, [2, [3]]]
array.flat()
// -> [1, 2, [3]]

// flatten recursively until the array contains no more nested arrays:
array.flat(Infinity)
// -> [1, 2, 3]

• array.flatMap()
• object.fromEntries()

// convert object into map
const map = new Map(Object.entries(object))

// convert map into object
const object = Object.fromEntries(map)

• globalThis value
• new Intl
• top level await
• Promise.allSettled - All APIs called are finish (no matter success or fail)
• Promise.any - Any of the promise is fulfilled, catch when all of the promises are rejected
• WeakMap and WeakSet, WeakRef

Project bundle improvement

• webpack-bundle-analyzer <<< check for big dependencies and reasonable dependencies in the bundle
• source-map-explorer <<< show detailed of minified code, example duplicate code in the bundle

Securing Web Apps with Modern Platform Features

• Nonce-based CSP (Prevent Script XSS)
• Trusted Types (Prevent DOM XSS)
• Fetch Metadata request headers
• Cross-Origin Opener Policy

Going Big: PWAs Come to Desktop and Chrome OS

• More native-app-likes feature are coming

Rendering on the Web: Performance Implications of Application Architecture (Server side rendering)

• Streaming html to client to reduce first byte time (used for chunk that is at least 16kb)
• Partial and Progressive hydration
• Truth about SEO
  • Client-side rendering will negatively affect SEO for crawlers that do not support Javascript
  • There are ways to improve the discoverability of client-side rendered site without full SSR

Protecting Users from Deception

• FIDO
• FIDO2
• Implement WebAuthn Create and Get methods

Unlocking New Capabilities for the Web

• Web Share API
• Intersection Observer API
• Web Bluetooth API
• Web Share Target
• Media Session API
• Shapde Detection API
• Badge for installed app
• Wake lock API
• File System
• Serial API
• WebHID
• Contacts Picker
• Font Access API

Taking Chrome Full Screen with Trusted Web Activities

Modern Web Testing and Automation with Puppeteer

• Browser context - faster speed of testing

Next-Generation 3D Graphics on the Web

• Examples of library
  • A-Frame
  • babylon.js
  • CLNYGL
  • PixiJS
  • PLAYCANVAS
  • three.js
• React Three Fiber 2.0
• WebGPU

Faster Web Navigation with Predictive Prefetching

• Guess.js