Live coding démo d'une application Micro Frontend rassemblant des modules en Angular, AngularJS, VueJS et React en utilisant le plugin Module Federation de Webpack 5.

Le terme Micro-Frontends est apparu pour la première fois dans ThoughtWorks Technology Radar à la fin de 2016. Il étend les concepts de micro-services au monde du FrontEnd.

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 possède un domaine d’activité ou une mission qui lui est propre dans lequel elle se spécialise et développe ses fonctionnalités de bout en bout, càd de la base de données à l'interface utilisateur.

Webpack est un modules bundler open source. Son objectif principal est de regrouper des fichiers JavaScript pour les utiliser dans un navigateur.

Dans sa version 5, Webpack apporte un nouveau plugin appelé 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.