SnowCamp 2022

Live coding démo d'une application Micro Frontend rassemblant des modules en [Angular](https://angular.io/), [AngularJS](https://angularjs.org/), [VueJS](https://vuejs.org/) et [React](https://reactjs.org/) en utilisant le plugin Module Federation de [Webpack 5](https://webpack.js.org/).

Le terme Micro-Frontends est apparu pour la première fois dans [ThoughtWorks Technology Radar](https://www.thoughtworks.com/radar) à la fin de 2016. Il étend les concepts de micro-services au monde du FrontEnd (désigne les éléments que l’on voit à l’écran et avec lesquels on peut interagir).

Le Micro-Frontend est donc une architecture particulière pour une application frontend qui a pour but d'assembler plusieurs modules d'applications différentes pour former ensemble une seule et même application.

L’idée derrière Micro-Frontends est de penser à un site web ou une application web comme une composition de fonctionnalités qui appartiennent à des équipes indépendantes. Chaque équipe a un domaine d’activité ou une mission qui lui est propre et dans lequel elle se spécialise. Une équipe est interfonctionnelle et développe ses fonctionnalités de bout en bout, de la base de données à l’interface utilisateur.

[Webpack](https://webpack.js.org/) est un modules bundler open source. Son objectif principal est de regrouper des fichiers JavaScript pour les utiliser dans un navigateur. Cet outil est également capable de transformer, regrouper ou empaqueter à peu près n’importe quelle ressource.

Dans sa version 5, Webpack apporte un nouveau plugin appelé [Module Federation](https://webpack.js.org/concepts/module-federation/), celui-ci permet d'assembler des fichiers et modules "distants", est-à-dire exposés sur une autre machine.

Ce plugin ouvre les porte d'une nouvelle façon de réaliser des applications Micro-FrontEnds et c'est ce que je vous propose de découvrir.