Snowpack

l'anti Webpack !

Vincent Ogloblinsky - @vogloblinsky

Vincent Ogloblinsky

Architecte logiciel

SWAT - SII Ouest

Compodoc maintainer

Google Developer Expert on Web Technologies

Agenda

1.

A l'origine, ES6

2.

Mais pourquoi on bundle tout le temps ?

3.

Snowpack

4.

Conclusion

A l'origine,

ES6

ES6 modules everywhere

Modules ES6 natifs disponibles dans les navigateurs depuis 2017

La plupart des librairies web modernes sont full ES6 (three.js, lodash, date-fns, redux, ...)

La syntaxe ES6 est également disponible dans Node.js 13.2.0 (Lien)

ES6 modules - Les apports

Syntaxe moderne

Analysable statiquement (tree-shaking, ...)

Code plus léger

Séparation claire des contextes dans un fichier

Mais pourquoi on bundle tout le temps ?

Mais pourquoi on bundle tout le temps ?

Performance de chargement (minification)

Nettoyage de code (tree-shaking)

Limites du multiplexing HTTP/2

Support des vieux navigateurs (IE11)

Snowpack - Origines

Pika.dev | CDN de librairies full ES6

90% du code d'un site provient de l'OSS/librairies

En séparant le code (avec ESM), on met en cache et 🚀

Pourquoi ne pas baser tout notre outillage là-dessus

Snowpack - Origines

Evolution vers 2 outils : snowpack et skypack

Snowpack - What ?

Outil de développement centré sur la partie "dev local"

Tire partie à 100% des modules ES6

Expose une version non packagée de votre application

Se branche sur votre packageur favori pour le build final

Snowpack - How ?

Snowpack - How ?

Construit chaque fichier de manière isolé

Chaque fichier est ensuite mis en cache par le navigateur

Tant qu'il ne change pas, on ne le recharge pas

Snowpack - How ?

Chaque dépendance npm est exposée en ESM (si possible)

//node_modules/react/**/*     -> http://localhost:3000/web_modules/react.js
//node_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js

import React from 'react';

Si c'est du full ES6 c'est mieux

Snowpack - Démo

Conclusion

📋 A Retenir

Très orienté Developer eXperience

Utile sur la phase de "codage"

Approche intéressante

Encore jeune

Equipe réduite (avec pas mal de contributeurs)

Merci pour votre attention !

Des questions ?

Crédit photos - Unsplash.com

Snowpack, l'anti Webpack !

By Vincent Ogloblinsky

Snowpack, l'anti Webpack !

  • 1,540