Au commencement
- HTML
- CSS
- JavaScript
C'est aussi basique que ça...
La révolution du JavaScript
Le JavaScript ou JS pour les intimes est en réalité ECMAScript 5.1 (3 pour les vieux navigateurs). À partir de 2015, ECMAScript (ES6) a évolué beaucoup plus vite que les navigateurs.
Pour pallier a cette évolution rapide et au navigateur peu réactif, Babel a fait son apparition. C'est un outil qui transpille un code ES en module en un code JS compréhensible par les navigateurs. Plus récemment, esbuild réalise la même chose, mais beaucoup plus rapidement.
Loin de nous l'époque de browserify qui permettait de regrouper et de minifier son code (il a suivi la tendance et peut aussi traiter l'ES module).
Ces outils sont aussi capables de sélectionner très précisément les bouts de code utiliser dans un projet et ne pas charger une librairie complète.
La révolution du CSS
Même si le CSS a aussi beaucoup évolué dernièrement avec l'arrivée des variables native et de houdini pour des fonctions plus complexes, cela n'a pas toujours été le cas. Nous avons vu l'arrivée de préprocesseur CSS tel que SASS, LESS ou Stylus. Leurs avantages : l'imbrication des sélecteurs CSS pour une meilleure maintenance et lisibilité, la possibilité d'utiliser des variables et des fonctions dans le style. Et la modularisation des fichiers avec des méthodes d'import.
Une autre approche complémentaire ou en remplacement est le PostCSS qui permet la dynamisation sur un fichier CSS natif, remplacement de variable, minification, nettoyage, mutualisation de règles identiques.
La révolution du HTML
Sans doute pas la plus grande, mais qui a son importance. Au tout début, nous avons connu Moustache, Jade ou les view de Backbone qui sont des outils de templating. Et maintenant beaucoup des librairies comme React ou Vue utilise le JSX pour générer de l'HTML avec le JavaScript. La manipulation du DOM dans le web moderne est un élément primordial de la performance.
Les transpilers
Ils sont indispensables pour rendre un code lisible par les navigateurs ou même les briques back comme Node et Deno. Plus récemment c'est Microsoft qui s'est lancer dans l'aventure avec TypeScript, c'est une base de ECMAScript avec un typage fort en plus. Pour interpréter du TS il est impératif d'avoir un transpiler.
Les bundlers
Ils sont le regroupement de toutes les briques HTML, CSS et JavaScript listé plus haut. Ils sont le liant entre toutes les technologies utilisées dans un projet. Les bundlers peuvent aussi faire bien plus, tel que la manipulation, copier de fichiers et dossiers; la compression, conversion d'image et de svg; la création de webfonts; la réalisation de sourcemaps; Les analyses de code, de performance ou de standard du web.
Les premiers bundlers que j'ai utilisé ont étés Gulp et Grunt, leurs configurations sont uniquement manuelles. Chaque action est à décrire très précisément et leurs performances loin d'être bonne pour le peu de travail fait.
Ensuite est arrivé Webpack, une révolution, tout fonctionne par défaut. Des performances hors du commun (à l'époque). Il est aussi beaucoup plus intelligent, car il permet aussi de spliter le code en de multiples fichiers plus légers, de générer lui-même les imports dans le HTML, de lancer un serveur de développement, faire ses manipulations en RAM et non plus en fichier.. Il peut également activer BrowserSync, Hot reloading et HMR.
Des alternatives sont arrivées sur le marché en parallèle de l'évolution continue de Webpack. On parle de Rollup qui permet de faire des conversions en plusieurs formats de sortie (très utilisé par les créateurs de projet open source). Parcel qui promet un bundler avec zéro configuration.
Et dernièrement, c'est Vite qui a tout chamboulé. Son principe fait la même chose que les autres, mais en beaucoup plus rapide. Pour cela, il va utiliser un transpilleur différent en mode développement et production. Il va aussi traiter les sources uniquement quand elles sont demandées. Par défaut il s'occupera uniquement du point d'entrée de l'application, puis en naviguant une ressource va être demandé, si elle est disponible et est automatiquement renvoyée, si elle n'existe pas encore elle est traitée puis renvoyée.
