Mon Browser,
ma VM,
mon Amour…

Les 7 différences

Les 7 différences

Les 7 différences

Les 7 différences

Les 7 différences

Les 7 différences

Browsers!

Les 7 différences

Le Web est partout

• Navigateurs
• OS (Mac, Windows, Linux)
• Mobiles (Firefox OS, Tizen)
• Micro-embarquée (Tessel, Espruino)

C'est quoi, un navigateur ?

Moteur de rendu

HTML

C'est quoi, un navigateur ?

Moteur graphique

CSS

(et ses petits copains Canvas et WebGL)

C'est quoi, un navigateur ?

Moteur d'exécution logique

JavaScript

Alors, c'est quoi le Web ?

On assiste depuis quelques années à ce que j'appelle un changement de paradigme.

Alors, c'est quoi le Web ?

Web Consultatif

Alors, c'est quoi le Web ?

Web Collaboratif

Alors, c'est quoi le Web ?

Web Asynchrone

Alors, c'est quoi le Web ? - Web Asynchrone

Stratégie de cache

CACHE MANIFEST
# 2010-06-18:v2

CACHE:
/favicon.ico
index.html
stylesheet.css
scripts/main.js

NETWORK:
*

FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg

Alors, c'est quoi le Web ? - Web Asynchrone

PouchDB / CouchDB

var db = new PouchDB('users');

db.put({
  _id: 'code@m4dz.net',
  name: 'M4Dz'
});

db.changes().on('change', function() {
  console.log('Local DB updated!');
});

db.replicate.to('http://example.com/users');

Alors, c'est quoi le Web ? - Web Asynchrone

Offline storage

• Web Storage
• Web SQL Database
• Indexed Database
• File Access

Web API

Service Workers

var scope = 'hello/';
function register() {
  navigator.serviceWorker.register('service-worker.js', {scope: scope})
    .then(function(serviceWorker) {
      console.log('registered: ');
      console.log(serviceWorker);
    })
    .catch(function(whut) {
      console.error('uh oh... ');
      console.error(whut);
    });
}

from GoogleChrome GitHub

Web API

Service Workers

self.onfetch = function(event) {
  console.log('got a request');

  var salutation = 'Hello, ';
  var whom = decodeURIComponent(event.request.url.match(/\/([^/]*)$/)[1]);
  var energy_level = (whom == 'Cleveland')
      ? '!!!' // take it up to 11
      : '!';
  var version = '\n\n(Version 1)';

  var body = new Blob([salutation, whom, energy_level, version]);

  event.respondWith(new Response(body));
};

from GoogleChrome GitHub

Web API

ASM.js / Emscripten

Web API

WebGL

from get.webgl.org

Web API

Hardware APIs

GetUserMedia

Web API

Hardware APIs

• Battery
• Lux Sensor
• DataStore

Aria

Définissez des Roles

• Tab / Tabpanel
• Button
• Dialog
• Menuitem
• Tooltip

General

Aria

Utilisez des états

• aria-busy
• aria-hidden
• aria-invalid
• aria-controls

Aria

Ciblez avec CSS

div[aria-hidden=true] {
  display: none;
  visibility: hidden;
}

div[aria-busy=true]::after {
  content: '';
  position: absolute;
  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Keep Lightweight

Web Components

Keep Lightweight

Web Components requirements

• Custom Elements
• Shadow DOM
• Template
• HTML Imports

Keep Lightweight

Web Components polyfills

• Bosonic
• Polymer
• X-Tag

Keep Lightweight

Memory management (en 3 points)

• Design
• Code
• Optimize

Keep Lightweight

Memory management (dans le cambouis)

• Last DOM Reference
• Circular dependencies
• Keep a clean scope
• Unbind events
• Use local cache

Keep Lightweight

Memory management (la victoire en chantant)

• Amélioration de l'autonomie
• Interactions fluides
• Webapp en utilisation longue
• Fini les owwww snap!

Keep Lightweight

Module Pattern

• Require
• Browserify

Keep Lightweight

Hardware Diff

Brique de confiance

Tests

• Unitaires
• Fonctionnels
• Monkeys / Users

Brique de confiance

Homogénéisez

Gherkin + Cucumber + [le reste de la Terre]

Brique de confiance

Release Early, release often

Intégration et Déploiement

Brique de confiance

Feature flipping

• Dans le code
• Dans l'URL
• Pour des sets utilisateurs

Pourquoi ?

C'est quoi
un navigateur ?

Pourquoi ?

C'est une VM !