Browser is the new server

Dr. Gleb Bahmutov PhD

glebbahmutov.com

github.com/bahmutov

@bahmutov

Work at Kensho

A DATA ANALYTICS AND MACHINE INTELLIGENCE COMPANY

Boston / NYC

@bahmutov

I love solving AngularJS performance problems

@bahmutov

Web App performance: 2 parts

  1. Initial bootstrap time (cold or hot)
  2. Running

< 16ms, Virtual DOM, WebWorkers

@bahmutov

How to quickly start a web app?

Using CDN, parallel downloads, caching, small images, above the fold, etc.

@bahmutov

JS

CSS

Framework

app

draw

get data

HTML

Hosting / ops

App author

@bahmutov

JS

CSS

Framework

app

draw

get data

HTML

Cached by the browser

You should cache

@bahmutov

JS

CSS

Framework

app

draw

get data

HTML

This part can be expensive!

@bahmutov

PivotalTracker HOT reload

@bahmutov

why am I waiting?

The data does not change between the reloads*

I do not interact with the page in the first 500ms

@bahmutov

nice

what?

Even more frustrating

Initial HTML loads

Application code loads

<html>
  <script src="app.js"></script>
  <body>
    <h1>My awesome app</h1>
    <div id="app"></div>
    <footer>...</footer>
  </body>
</html>

@bahmutov

- App loads data

- App updates page

<html>
  <script src="app.js"></script>
  <body>
    <h1>My awesome app</h1>
    <div id="app"></div>
    <footer>...</footer>
  </body>
</html>

Even more frustrating

@bahmutov

- App loads data

- App updates page

Sudden change in the page!

<html>
  <script src="app.js"></script>
  <body>
    <h1>My awesome app</h1>
    <div id="app">
      <ul>
        <li>Clean my room</li>
        <li>Learn Italian</li>
        <li>Finish the slides</li>
      </ul>
    </div>
    <footer>...</footer>
  </body>
</html>

Even more frustrating

app

HTML

data

loads

renders

HTML = APP(data)

same

same

@bahmutov

app

HTML

data

loads

renders

Cache

@bahmutov

Load # N

- App loads data

- App updates page

Load # N + 1

Load HTML QUICKLY from localStorage

- load normally ...

Save data + HTML in localStorage

idea!

@bahmutov

Hydration

glebbahmutov.com/hydrate-vue-todo/

@bahmutov

Hydration

Single small JS library bahmutov/hydrate-app

<div id="app">
  ...
</div>
<script src="hydrate-app.js" id="app"></script>

Works with any web framework

// hydrate-app gives you window.bottle
bottle.drink()  // app has loaded and ready to take over
bottle.refill() // save DOM for next reload

@bahmutov

app

HTML

data

loads

loads

renders

<div id="app">
  <ul>
    <li>Clean my room</li>
    <li>Learn Italian</li>
    <li>Finish the slides</li>
  </ul>
</div>
<div id="real-app" class="hidden">
</div>

hydrate.js loads cached "app" HTML

HTML

@bahmutov

app

HTML

data

loads

loads

renders

<div id="app">
  <ul>
    <li>Clean my room</li>
    <li>Learn Italian</li>
    <li>Finish the slides</li>
  </ul>
</div>
<div id="real-app" class="hidden">
  <ul>
    <li>Clean my room</li>
    ...
  </ul>
</div>

Web app renders into hidden DOM element

HTML

hydrate.js loads cached "app" HTML

app

HTML

data

loads

loads

renders

bottle.drink()

Live web app content replaces static cached HTML snapshot

Progressive web app for $0.05

HTML

@bahmutov

<div id="app">
  <ul>
    <li>Clean my room</li>
    ...
  </ul>
</div>

More info

My website: glebbahmutov.com

Hydrate library: bahmutov/hydrate-app

Blog post with examples: Hydrate your apps

@bahmutov

Not good enough

There is a flash

<body>
  <header>...</header>
  <div id="app"></div>
  <script src="hydrate-app.js"></script>
</body>
const html = localStorage.get ...
$('#app').innerHTML = '...'

Self-rewriting page is never going to be as smooth as server-side rendering

@bahmutov

glebbahmutov.com/hydrate-vue-todo/

@bahmutov

Server-side rendering

https://todomvc-express.gleb-demos.com/

@bahmutov

The page HTML arrives ready to be rendered by the browser

The browsers are REALLY REALLY good at rendering static pages

@bahmutov

If only there was a way to give browser the full page from a web app

@bahmutov

ServiceWorker

Server

browser

Web Workers

ServiceWorker

Transforms

the response

Transforms

the request

@bahmutov

Smart caching

OFFLINE SUPPORT

Image / video transcoding

Background data sync

@bahmutov

@bahmutov

Server

browser

service

worker

No changes to the page 😊

Load ServiceWorker

SmashingMagazine: Making A Service Worker: A Case Study

navigator.serviceWorker.register(
    'app/my-service-worker.js')

Chrome, Opera

Firefox behind a flag

Must be https

@bahmutov

Inside ServiceWorker

self.addEventListener('install', ...)
self.addEventListener('activate', ...)
self.addEventListener('message', ...)
self.addEventListener('push', ...)
self.addEventListener('fetch', function (event) {
  console.log(event.request.url)
  event.respondWith(...)
})
// Cache API

ServiceWorker API docs

Cache API docs

@bahmutov

browser web worker service worker
window self self
localStorage IndexedDB, Cache API (async) IndexedDB, Cache API (async)
XMLHttpRequest, fetch XMLHttpRequest,
fetch		 fetch
document

Environment

Promises, postMessage

WebWorker APIs

@bahmutov

Instant pages using SW: Bottle-service

Server

browser

ServiceWorker

<html>
<body>
  <header>...</header>
  <div id="app"></div>
  <footer>...</footer>
</body>
</html>
<html>
<body>
  <header>...</header>
  <div id="app">
   <ul>
     <li>Clean my room</li>
     ...
   </ul>
  </div>
  <footer>...</footer>
</body>
</html>
<ul>
  <li>Clean my room</li>
  ...
</ul>

Cache

Inserts cached HTML fragment into response body HTML

@bahmutov

self.addEventListener('fetch', function (event) {
  event.respondWith(
    fetch(event.request)
      .then(function (response) {










      })
  )
})
        // merge HTML
        var responseOptions = {
          status: 200,
          headers: {
            'Content-Type': 'text/html charset=UTF-8'
          }
        }
        return new Response(resultHtml, responseOptions)

Instant pages using SW: Bottle-service

@bahmutov

Demos: https://instant-todo.gleb-demos.com, https://glebbahmutov.com/bottle-service

The library: bahmutov/bottle-service

Blog post with examples: Instant web application

Instant pages using SW: Bottle-service

@bahmutov

If the server goes down in the forest ...

@bahmutov

Stop treating browser like a child

@bahmutov

Fetch event

browser

ServiceWorker

Request

Response

HTML5 Request docs

HTML5 Response docs

Server

@bahmutov

Input => output

Server

browser

ServiceWorker

Request

Response

express.js

http.ClientRequest

JavaScript

http.ServerResponse

JavaScript

https://nodejs.org/api/http.html

@bahmutov

browser

ServiceWorker

Server

express.js

@bahmutov

child-like app

Server

browser

ServiceWorker

express.js

http.ClientRequest(Request)

http.ServerResponse(Response)

@bahmutov

grown up app using SW

express.js + middleware

ServiceWorker env

browserify

https://www.npmjs.com/

@bahmutov

var express = require('express')
var app = express()
var url = require('url')
self.addEventListener('fetch', function (event) {

Express-service

"app" is a regular Express.js application

  const parsedUrl = url.parse(event.request.url)
  var req = {
    url: parsedUrl.href,
    method: event.request.method,
    body: body,
    headers: {
      'content-type': event.request.headers.get('content-type')
    },
    unpipe: function () {}
  }
  var res = { /* our mock Node http Server Response object */ }
  event.respondWith(new Promise(function (resolve) {
    app(req, res)
  }))
})

Express-service

Demo at: https://express-service.gleb-demos.com

The library: github.com/bahmutov/express-service

Blog post with examples: Run Express server in your browser

@bahmutov

Express-service

There is no client-side* JavaScript :)

<link rel="serviceworker" scope="/" href="/sw.js">

Proposal

*after first ServiceWorker registration

Express-service

bonus

$ npm i -g nativefier
$ nativefier https://express-service.gleb-demos.com/

github.com/jiahaog/nativefier

Packaging app for platform darwin x64 using electron v1.1.3
App built to /Users/gleb/git/ExpressService-darwin-x64

@bahmutov

Express-service stand alone desktop app

@bahmutov

want to know more?

Mozilla SW recipes serviceworke.rs

Jake Archibald (Google) - Using ServiceWorker in Chrome today, The ServiceWorker is coming, look busy

Matt Gaunt (Google) - Unit testing ServiceWorker

@bahmutov

isomorphic

universal

jumping?

grown up?

independent?

need good name

Browser is the new server

slides.com/bahmutov/browser-is-the-new-server

Instant apps

Server in the browser

Code transpiling, coverage, testing

@bahmutov

Browser is the new server - NodeConf EU

By Gleb Bahmutov

Browser is the new server - NodeConf EU

The line between the server and the modern browser is blurry. Transpiling code, rendering static markup, smart caching were traditionally done on the server. These features made the jump to the browser by using ServiceWorkers. Video at https://www.youtube.com/watch?v=5zOaN_FYXwk

  • 5,890

More from Gleb Bahmutov