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 ?
Slides : bit.ly/snowpack-vs-webpack
Crédit photos - Unsplash.com