Écosystème web en 2021 :
welcome to the jungle

 

Vincent Ogloblinsky - @vogloblinsky

Orange Innovation - ARoD Team 🤘

Vincent Ogloblinsky

Compodoc maintainer

@vogloblinsky

Google Developer Expert on Web Technologies

Software architect

Orange Innovation / Data & IA

Agenda

Disclaimer

@vogloblinsky

https://2020.stateofjs.com/en-US/technologies/

@vogloblinsky

Languages

HTML 5.3

Web Content Accessibility Guidelines (WCAG) 2.2

 

autocapitalize attribute

 

defaultPlaybackRate attribute

 

decoding attribute for images

@vogloblinsky

CSS

CSS Modules

 

CSS aspect-ratio

 

CSS Variables

 

@support

 

flexbox gap

@vogloblinsky

content-visibility

 

scroll-snap

 

:is & :where

JavaScript

@vogloblinsky

JavaScript

ES MODULES everywhere : script tags & web workers !

 

ES2021 :

- Promise.any : // request, first win

- String.prototype.replaceAll : enfin !

- Logical Assignment Operators : a ??= b ===> a = a ?? (a = b)

- Numeric Separators : 1__000__000

- Intl.DisplayNames : 

var currencyNames = new Intl.DisplayNames(['en'], {type: 'currency'});
console.log(currencyNames.of('USD')); // "US Dollar"

@vogloblinsky

JavaScript

ES2022 :

 

- Class public and private fields - getter/setters

 

- Static class fields and private static methods

 

- Top-level await

const translationKeys = await import(`/i18n/${navigator.language}`);

@vogloblinsky

Frameworks

Frameworks

@vogloblinsky

Frameworks

Approche classique

@vogloblinsky

Orchestrateurs de composants

 

Runtime du framework sur le poste client

 

Lockin fort...

 

Over-engineering de librairies...

Frameworks

Angular

@vogloblinsky

Stable : v12, v13 en cours

 

Strict type by default

 

Proposal pour des modules optionnels

Frameworks

Vue.js

@vogloblinsky

Version : 3.2

 

Composition API (meilleure séparation du code)

 

L'écosystème migre vers la v3

Frameworks

Approche légère : Svelte

@vogloblinsky

A mi-chemin entre framework et compilateur :

analyse poussée au build pour maximiser le code au runtime dans le navigateur

Outils

Outils

@vogloblinsky

Outils

Lighthouse - Core Web Vitals (LCP - Largest Contentful Paint, FID - First Input Delay, CLS - Cumulative Layout Shift)

 

webpack / rollup / parcel

 

vite / snowpack

 

CLI de vos frameworks favoris

@vogloblinsky

Outils

Minification / bundling / transpiling

 

swc (Rust)

 

esbuild (go)

 

spack (rust)

 

rome (JS/rust)

@vogloblinsky

Outils

Node.js 16

 

- Apple M1 support

- npm v7

@vogloblinsky

Outils

@vogloblinsky

APIs

APIs

@vogloblinsky

APIs

@vogloblinsky

The Stackless Way

@vogloblinsky

https://javascript.plainenglish.io/using-the-platform-instead-of-frameworks-33b4607fc3cc

Merci pour votre attention !

Des questions ?

Slides : bit.ly/3otoogi

@vogloblinsky