ESNext, Service Workers, and the Future of the Web

ScotlandJS 2016 @JemYoung

June 17, 2015

ES6

let template literals

modules

spread

rest

Symbols

class

default parameters

Map

const

Set

generators

Proxies

WeakMap

integer literals

destructuring

Promises

Iterables

arrow functions

Jem Young Senior UI Engineer

@jemyoung

✦TC39 and ECMAScript✦Service Workers ✦The Future

Why should you listen to me?

https://young.github.io/service-worker/

Why should you listen to me?

TC39 and ECMAScript

TC39

ECMAScript

JavaScript ActionScriptJScriptboooo

boooo

TC39

ECMAScriptES6

ES2016ES7

ES7

Array.includes

Exponentiation operator

ES7

Array.includes

ES7

Exponentiation operator

ESNext

ESNext

String.prototype.padStart

ESNext

String.prototype.padEnd

ESNext

Object.values/Object.entries

Object.getOwnPropertyDescriptors

Service Workers

“Everything seems to point at ServiceWorker being the most significant addition to the web

platform since the introduction of AJAX” -Nicolás Bevacqua

A persistent, fully asynchronous, separately threaded event based worker with the ability to intercept

network requests and cache responses.

Service Worker

Web Worker Service Worker

Service Worker

Web Page Internet

Gimme cats!

OK!

Service Worker

Web Page Internet

Service Worker

Web Page InternetService Worker

Gimme cats!

MDN - Service Workers

Service Worker

A persistent, fully asynchronous, separately threaded event based worker with the ability to intercept network

requests and cache responses.

persistent fully asynchronous separately threadedevent based

cache responsesintercept network

requests

Service Worker

persistent

fully asynchronous

separately threaded

event based

cache responses

intercept network requests

• Exists outside of the browser tab • Knows to when to expire

• Similar to Web Workers

• Does not die when the tab is closed

• No direct control from main thread • install, activate, fetch, message

• Cannot use local storage or XHR • Heavy utilization of Promises

• Proxy Fetch events • Modify requests/responses

• Persistent • Cache Storage/Cache API

Service Worker

Events

Or

W3C spec

Service Worker

Initialization

Service WorkerInstall

Offline cookbook

Service Worker

Service WorkerFetch

Service Worker

Service Worker

Ola Gasidlo - I’m Offline, Cool! What Now?

Service Worker

Service Worker

Service Worker

Service Worker

Service Worker

Service Worker

https://github.com/young/live-transpile

Service Worker

The Future of the Web

The Future FIDO

The FutureF ID Oast entity nline

The Future

Web Bluetooth

The Future

Web Bluetooth

Dan Jenkins - “Getting Physical with Web Bluetooth”

The Future

What is the future of the web?

https://young.github.io/service-worker/

What is the future of the web?

What is the future of the web?

-Service Workers -Progressive Web Applications -ESNext -You!

Links

Is Service Worker Ready?

Service Worker Experiments

MDN - Using Service Workers

Offline cookbook

Service Worker Cookbook

TC39 proposals

ESNext, Service Workers, and the Future of the Web

ScotlandJS 2016 @JemYoung