The State of the Web

A bunch of cool stuff in 2017


Stablished technologies

Service Workers
Background services in the browser
Push notifications
Receive and show Push notifications
Async functions
JS syntax enhancement to ease asynchrnonous programming
Feature Queries
Check the existence of CSS features withour JavaScript

Recently added technologies

CSS Variables
Store repeated values in CSS variables
Web Animations
Native performance on dynamic animations
CSS Grid
A new CSS layout to build 2D grids
WebGL 2.0
JavaScript API to access OpenGL ES 3 hardware capabilities
Web Assembly
A new language inside the browser

Patterns, trends & topics (1/2)

Offline First
Connectivity as a progressive enhancement
A technique to use other languages rather than JavaScript
RAIL & Optimistic UI
Performance models and techniques to keep the illusion of real time

Patterns, trends & topics (2/2)

Privacy, security & safeness
Be aware of the threads of the Web
Progressive Enhancement
Web development approach that puts effort on baseline
Progressive Web Apps
Web applications offering native-like user experiences

Coming soon (1/2)

A faster evolution of HTTP
Be aware of recovering connectivity
Allows your website to better integrate with the OS
Payment Request
JavaScript API to improve payment UX

Coming soon (2/2)

Credential Management
JavaScript API to improve login UX
Request Idle Callback
An API to get a browser idle time window
A JavaScript API to use VR devices

Service workers

Go to index

Can I Use serviceworkers? Data on support for the serviceworkers feature across the major browsers from

Functional events are fetch, push, sync and other

Run when an external event is triggered regardless there were open views of the website.

Original purpose was to intercept resource requests.

Complete infographic

[Service Workers 101]( [Service Workers Recipes in the Service Worker Cookbook]( [Beyond Offline]( [2016 - The year of web streams](


Go to index

Can I Use push-api? Data on support for the push-api feature across the major browsers from

Push allows to receive information even with the browser
Notifications should be... * **Timely** to not annoy the user. * **Relevant** for the user to pay attention. * **Precise** to say just what is necessary.
[Push demos at the Service Worker Cookbook]( [Push libraries]( [Timely, Relevant and Precise by Joseph Medley](

Async functions

Go to index

Can I Use async-functions? Data on support for the async-functions feature across the major browsers from

function search(query) {
  return fetch(`/search/?q=$(query)`)
         .then(response => response.json())
         .then(json =>
         .catch(reason => console.log(reason));
function search(query) {
  var resp;
  return fetch(`/search/?q=$(query)`)
         .then(response => {
           resp = response;
         .then(json => {
  => doSomething(result, resp));
         .catch(reason => console.log(reason));
async function search(query) {
  try {
    let response = await fetch(`/search/?q=${query}`);
    let json = await response.json();
    return => doSomething(result, response));
  catch (reason) {

Feature Queries

Go to index

Can I Use css-featurequeries? Data on support for the css-featurequeries feature across the major browsers from

The following example is from Using Feature Queries in CSS by Jen Simmons

Try it in Safari which supports initial-letter.

The carrot is a root vegetable, usually orange in colour, though purple, black, red, white, and yellow varieties exist. Carrots are a domesticated form of the wild carrot, Daucus carota, native to Europe and southwestern Asia. The plant probably originated in Persia and originally cultivated for its leaves and seeds. The most commonly eaten part of the plant is the taproot, although the greens are sometimes eaten as well. The domestic carrot has been selectively bred for its greatly enlarged, more palatable, less woody-textured taproot.

#feature-queries p::first-letter {
  color: #FE742F;
  font-weight: bold;

@supports (-webkit-initial-letter: 4) or (initial-letter: 4) {
  #feature-queries p::first-letter {
    -webkit-initial-letter: 4;
            initial-letter: 4;
    margin-right: 0.5em;
There is also a [JavaScript API to test `support`]( ```js CSS.supports('--answer-of-life', 42); ```

Custom Properties (CSS Variables)

Go to index

Can I Use css-variables? Data on support for the css-variables feature across the major browsers from

The highlight color, #b4ff43, is used in many contexts like links or selection. And also in borders and decorative elements.

:root { --hl-color: #84b830; }

.container {
  font-size: calc(var(--font-factor, 1) * 1em);
  box-shadow: 0 0 100px 10px rgba(128, 128, 128, var(--shadow-alpha, 0.1));

.container a:link { color: var(--hl-color); }
.container p::selection { background-color: var(--hl-color); }
.container p { border: 3px solid var(--hl-color); }
.container span { color: var(--hl-color); }

.container:hover {
  --font-factor: 2;
  --shadow-alpha: 1.0;

It's Time To Start Using Custom Properties

Local CSS Vars

Web Animations

Go to index

Can I Use web-animation? Data on support for the web-animation feature across the major browsers from

    { transform: 'rotate(0deg)' },  // from
    { transform: 'rotate(360deg)' } // to
  { duration: 1200, iterations: Infinity }
* Some properties does not trigger a layout recalculation. * Animations on `transform` and `opacity` run on compositor. * CSS property `will-change` helps the browser to optimize animations.
[Animating like you just don't care with Element.animate()]( [Web Animations examples](

CSS Grid

Go to index

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from

CSS Grid Example

Layout never was so easy to declare. Come with some fancy ASCII art and you'll see how your elements are gracefully placed around.

.container {
  display: grid;
    "t t t t n n"
    "a a b b n n"

header { grid-area: t; }
nav { grid-area: n; }
article { grid-area: a; }
footer { grid-area: b; }
> So there is your choice. Do you want to let your content control the way it is displayed, on a row by row or column by column basis? **That’s flexbox**. > Or, do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. **That’s grid**. Rachel Andrew in [Should I use grid or flexbox](
[Learning CSS Grid]( [A Complete Guide to Grid](

WebGL 2.0

Go to index

Can I Use webgl2? Data on support for the webgl2 feature across the major browsers from

Based on [OepnGL ES3](
* GLSL 3.00 ES * Mesh instantiation * 3D textures * Uniform buffers * Transform feedback [WebGL 2 New Features](
[WebGL 2 Samples]( [WebGL 2 from WebGL 1]( [WebGL 2 What's New](

Web Assembly

Go to index

Can I Use wasm? Data on support for the wasm feature across the major browsers from

![In WASM, parse, compilation and execution times shrink and re-optimization and garbage collection are completely avoided](./imgs/js-wasm-execution.png) Figure from [A Cartoon Intro to WebAssembly, by Lin Clark](
[A crash course in memory management]( [Creating a WebAssembly module instance with JavaScript](

Offline First

Go to index
Offline First is the design philosphy of considering **network as an enhancement** over an offline experience.
Visit the [Offline First site]( Join [Offline Camp](


Go to index



Elm Lang

[What are the best languages that compile to JavaScript?]( [List of languages that compile to JS](

RAIL & Optimistic UI

Go to index
* **Response**: react in less that 100 ms to feel instant. * **Animation**: keep 60 fps. * **Idle**: maximize idle time. * **Load**: go interactive under 1 second.
![Optimistic UI](./imgs/optimistic-ui.gif) Optimistic UI acts as if everything goes OK, **guessing, instead of knowing,** the true outcome of the performed operation.
[The RAIL performance model]( [Optimistic UIs in under 1000 words](

Privacy, security & safeness

Go to index
Intrusive advertisement, phishing, [data leakage](, [finger-printing](, centralization, man-in-the-middle attacks, impersonation...
[Internet Health Report]( Download [PDF version](
### Ad-blockers * Chrome is experimenting with tracking protection * Firefox has _Tracking protection_ in Private Mode * Brave bases its revenue model on curating ads.
[Google is the internet's largest ad company. So why is it building an ad blocker?]( [Why People Block Ads and what it means for marketers and advertisers?](
### [Web Authentication] * An API for accessing public key credentials. * I.e. means to access security hardware. * Several devices: tokens, biometrics, one-shot passwords...
[Web authentication and Windows Hello]( [Web Authentication Spec](
### [Web Crypto]( * Available through `crypto.subtle` * Set of primitives: _digest_, _mac_, _sign_/_verify_, _encrypt_/_decrypt_, _key generation_, _key wrapping_... * Don't interact with dedicated hardware: smart cards, USB dongles, randomness generators...
### [Subresource integrity]( ```html <script src="" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" crossorigin="anonymous"></script> ```
### HTTPS [Let's encrypt]( * It is a CA * It's **free** * Focused on [automating](
![Number of websites using HTTPs has reach almost 50%](./imgs/https-numbers.png)
[How to Secure Nginx with Let's Encrypt on Ubuntu 14.04](

Progressive Enhancement

Go to index
1. It is an **app design pattern** 2. Which puts core functionality **first** 3. And then enhances the experience based on **user capabilities**
Baseline choice and each enhancment implies discrimination. Each choice **must be conscious**.
[How Does my Site Cost?]( [Popular Devices by Country]( [Progressive Enhancement is not dead but it smells funny]( [WWW: World Wide Web, Not Wealthy Westerners' Web ](

Progressive Web Apps

Go to index
![Audience is higher in the Web, engagement is higher in native](../web-platform-when-why/imgs/audience-vs-loyalty.png)
Web sites delivering a _native-like_ experience.

Can you tell what is the native app?

Twitter Home Screen icons

And now?

Twitter Native Application Twitter Web Application Without Browser UI

But you certainly do now.

Twitter Native Application Twitter Web Application

Or now.

Twitter Native Application
A word of caution: * PWA are **no more than regular websites**. * The installation banner **is not** an standard. * Operating Systems **must embrace** the Web, _not the other way around_. * Technology **must preserve** Web principles.
[Progressive Web Apps: Escaping Tabs Without Losing Our Soul]( [Regressive Web Apps]( [Progressive Web Apps are a toolkit, not a recipe]( [Deeply Integrated Progressive Web Apps (WebAPKs) are Live for Chrome on Android]( [Why Are App Install Banners Still A Thing?](
**This conference**: [PWA Summit 2016](


Go to index


With multiplex, several request can be performed with only one
            TCP connection.

Push / Server Hint

Push can take advantage of one of the connections to send
            related resources.


HPACK is an algorithm to compress the headers of a request,
            safer than GZIP.
[HTTP2 implementations]( [Link headers and server hints]( [A Comprehensive Guide To HTTP/2 Server Push](


Go to index
[Add Background Sync to CanIUse]( Currently supported by Chrome and Edge 15.
Sync triggers an event when recovering connectivity.
Simulate a sync event with the Service Worker tab in
                 Chrome DevTools.


Go to index

Can I Use web-app-manifest? Data on support for the web-app-manifest feature across the major browsers from

Web Manifest

    "name": "Flipkart Lite",
    "short_name": "Flipkart Lite",
    "icons": [ {
      "src": "",
      "sizes": "192x192",
      "type": "image/png"
    } ],
    "start_url": "/?start_url=homescreenicon",
    "orientation": "portrait",
    "display": "standalone",
    "theme_color": "#006cb4",
    "background_color": "#006cb4"

Partial manifest from Flipkart Lite.

Flipkart specifying the theme color Flipkart theme Flipkart splashscreen

Web Payments

Go to index

Can I Use payment-request? Data on support for the payment-request feature across the major browsers from

This is not a payment method.

The browser becomes a mediator to manage payment instruments and sensible data in a safe way.

bitcoin bitcoin bitcoin
Payment request flow
[Payment Request API: an Integration Guide]( [Payment Resquest Spec]( [Payment Handler Spec](

Credential Management

Go to index

Can I Use credential-management? Data on support for the credential-management feature across the major browsers from

Credential management flow.
[Credential Management]( [Credential Management Spec](

Request Idle Callback

Go to index

Can I Use requestidlecallback? Data on support for the requestidlecallback feature across the major browsers from

![Piechart for a frame](./imgs/frame-piechart.png) Around 2 ~ 3 ms are free to perform other operations.
![Timeline for a frame](./imgs/frame-timeline.png) GC is quite unpredictible.
`requestAnimationCallback()` allows to schedule a callback in the idle window to perform additional computations. The callback is passed the **duration of the idle window**.
[Cooperative Scheduling with requestIdleCallback](


Go to index

Can I Use webvr? Data on support for the webvr feature across the major browsers from

Presence + Reach = WebVR


A 360 picture viewer in 6 lines of HTML code.

See the Pen 360º panorama viewer by Salvador de la Puente González (@lodr) on CodePen.

### React VR ```js import React from 'react'; import {AppRegistry, Pano, Text, View} from 'react-vr'; class WelcomeToVR extends React.Component { render() { // Displays "hello" text on top of a loaded 360 panorama image. // Text is 0.8 meters in size and is centered three meters in front of you. return ( <View> <Pano source={asset('chess-world.jpg')}/> <Text style={{ fontSize: 0.8, layoutOrigin: [0.5, 0.5], transform: [{translate: [0, 0, -3]}], }}> hello </Text> </View> ); } }; AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR); ```
[WebVR Spec]( [WebVR Experiments]( [WebVR on MDN]( [A-Frame]( [React VR](

Salvador de la Puente González


## Questions?