Welcome, reader!

Here are some useful links for you before you start:

repository for this slides (and more)notes (resources + some explanations)discuss on twitter #WebOnFIREor follow me @noel_macestay tuned for my next posts on dev.to
INTRO LECTEUR

Requirements

If you want everything to work in this slides, you need:

Chrome 79+ (Canary or Dev)
to go to chrome://flags
set #enable-experimental-web-platform-features to enabled
set #enable-built-in-module-all to enabled
INTRO LECTEUR

Requirements

Optionally, for demos (scripts in the demo folder), you need:

GNU/Linux (or MacOS ... and I guess git bash is ok too)
an Android device with Dev Mode enabled, connected to your computer using USB
a Windows 10 VM in VirtualBox named "WinDev" (aka.ms/windev_VM_virtualbox)
INTRO LECTEUR

Lighting F.I.R.E. in

Days Hours Minutes Seconds

The Web is on 🔥 F.I.R.E. 🔥

Deep-dive

Devoxx

Belgium 2019

@noel_mace

Noël Macé

Noël Macé

Independent Dev Advocado 🥑 for the Web Platform

@noel_macein/noelmace

Slides

Part 1

Past & Present

FIRE & PWA

FIRE origins

June 15, 2015

Escaping Tabs Without Losing Our Soul

Alex Russel
Alex Russellsoftware engineer at Google
Frances Berriman
Frances BerrimanFreelance designer & front-end engineer
PWA

There is now another way. An evolution has taken place in browsers.

Just websites that took all the right vitamins.

Sites have to earn some rights over time as you use them more and more.

They progressively become “apps”.

pwa
PWA

F.I.R.E.

Fast
Integrated
Reliable
Engaging

F.I.R.E.

App Shell
Manifest
Service Worker
Push API

App Shell

Application Shell architecture

Manifest

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

A2HS is supported by

A2HS Support - WIP

Since oct. '17
P3 - Oct. 10, '19

A2HS Support - 🤦

SW support

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

Is Service Worker Ready ?

Push API

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

Notification API

Can I Use notifications? Data on support for the notifications feature across the major browsers from caniuse.com.

cleaning your mind after the party

Keeping Up!

Methodology

  1. watch & discuss
  2. experiment & give feedbacks
  3. release (beta) feature
World Wide Web Consortium
w3c logo

W3C Process

mozilla google apple opera ibm oracle microsoft université de lyon sony netflix facebook adobe paypal amazon

So it begins

1997-1999

  • HTML 3.2 & 4
  • W3C stops HTML evolution
  • HTML 4.01

1998 - 2004

  • un-standardized HTML APIs
  • 👉 DOM standard

2003: XForms

2004

  • W3C close DOM WG
  • W3C reject the proposal to reopen HTML's evolution

What was needed

  • backward compatibility
  • matching implementations
  • details

XHTML™ 2.0

HTML4 + XHTML1 + DOM2 HTML

& more!

WHATWG
WHATWG logo
WICG
WICG logo

Controversies

Encrypted Media Extensions

W3C Recommendation, 14 December 2017

netflix
youtube
mozilla
fsf
eff

Ohh... just one more thing...

Ecma International, Technical Committee 39
TC39 logo

TC39 Process

  • review at TC39 Meeting 👉 Stage 0: Strawman
  • pick champions 👉 Stage 1: Proposal
  • first spec text 👉 Stage 2: Draft
  • spec complete 👉 Stage 3: Candidate
  • test 262 👉 Stage 4: Finished
Internet Engineering Task Force
ietf logo

Integrators

Methodology

  1. watch drafts
  2. experiment prototype
  3. β feature origin trial
  4. release

Part 2

The future 🧙‍♂️🔮

tendencies

  1. 🏆 put an end to native apps
  2. 👐 adapt to user preferences
  3. 🦸 reduce the need for libraries / frameworks

An integrated Web

A2HS

a new approach

The mini-infobar

interim experience

becomes annoying

Prevent mini-infobar

Prevent mini-infobar

Omnibox Button

Firefox Mobile

App Patterns

Inline Patterns

Special Patterns

Closing the App Gap

New Capabilities

🚀 Launched

Web Share Target

Async Clipboard API (images)

🚧 in flight

Badging API

Shape Detection API

Contact Picker API

Get Installed Related Apps API

Native File System API

Wake Lock API

Async Clipboard API

From specific to generic

Current Limitations w/ images

  • Chrome 76+ only
  • PNG only
  • only one ClipboardItem

Web Share Target

Web Share API

web-share - support

Can I Use web-share? Data on support for the web-share feature across the major browsers from caniuse.com.

Web Share Target

Share to a Web App

Demo

Share a text

Share an image

text

Copy an image

image

Manifest

Handling

Badging API

Behavior

Initial/Clear

Set

API

V2 - set

V2 - clear

⚠️ Support

  • Only available in Chrome
  • behind #enable-experimental-web-platform-features
  • on Windows & macOS

An adaptive Web

darkness

prefers-color-scheme

Conditionally either load the light or the dark stylesheet. The matching file will be downloaded with `highest`, the non-matching file with `lowest` priority. If the browser doesn't support `prefers-color-scheme`, the media query is unknown and the files are downloaded with `lowest` priority (but above I already force `highest` priority for my default light experience).

prefers-color-scheme - demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

prefers-color-scheme - demo

prefers-color-scheme - variables

prefers-color-scheme - support

Can I Use prefers-color-scheme? Data on support for the prefers-color-scheme feature across the major browsers from caniuse.com.

Wrong: enabled in Chrome for Android 76

prefers-color-scheme - fallback

If `prefers-color-scheme` is not supported, fall back to light mode. In this case, light.css will be downloaded with `highest` priority.

color-scheme

Left: glaring and without transformations. Right: the easier-on-the-eyes UA default
motion

prefers-reduced-motion - CSS

prefers-reduced-motion - JS

prefers-reduced-motion

Can I Use prefers-reduced-motion? Data on support for the prefers-reduced-motion feature across the major browsers from caniuse.com.

other media queries

prefers-reduced-transparency

prefers-contrast

prefers-color-scheme

scripting

light-level

forced-colors

A Modular Web

ES Modules

Can I Use es6-module? Data on support for the es6-module feature across the major browsers from caniuse.com.

Bare specifiers

This restriction is in place so that in the future we can allow custom module loaders to give special meaning to "bare" import specifiers, like import "jquery" or import "web/crypto". For now any such imports will fail, instead of being treated as relative URLs.

Import Maps

Chrome Status

built-in modules

BUILT-IN MODULES

KV Storage

import storage, {StorageArea} from 'std:kv-storage';

faster than localStorage API...

easier than IndexDB

closer to Map & Chromium storage API

Polyfill

Polyfill - Import

Web Components
Web Components

Custom Elements

Custom Element
Custom Elements
CUSTOM ELEMENTS

Shadow DOM

Shadow DOM
Shadow DOM
SHADOW DOM

ES Modules

ES Module
ES Modules
ES MODULES

HTML Template

HTML Template
HTML Template
HTML TEMPLATE

Browser Support

built-in elements

DECIDE

Virtual Scroller

The <virtual-scroller> will manage the rendering of its children. It will prioritize rendering things that are in the viewport and not render children that are far away, such that we are only paying as little rendering cost as possible while still allowing them to work with find-in-page, accessibility features, focus navigation, fragment URL navigation, etc.
You can add, remove, modify children of the <virtual-scroller> as you would a regular element, using DOM APIs. When the set of actually-rendered children is about to change, the <virtual-scroller> will fire a "rangechange" event with the new range of rendered children.

Switch

show toastToast

Conclusion

Let's "wrap" this up

resources

@noel_mace

Github

dev.to/noelmace

Noël Macé's DEV Profile

noelmace/slides-wof-conf

Github

Slides