Repositório de Micro Front-Ends - Parceljs + Jails

Fala pessoal,

Queria compartilhar aqui um side-project que criei há pouco tempo pra tentar concretizar da forma mais fácil possível uma maneira de se criar Micro Frontends.

A matéria de como desenvolver MFE's é um pouco polêmica, cada projeto cria da sua forma, mas eu queria ver até onde a biblioteca que trabalho há um tempo poderia entrar nesse tópico em específico, do jeito mais simples que eu poderia pensar.

Para me ajudar, tirei da gaveta um projeto que faz um tempo que não mexia, que é o Parcel. Vale super a pena conhecer se você ainda não conhece. Mega útil e rápido pra criar soluções web com pouca ou zero configuração, utilizando-se do que é mais atual em termos de bundling e language features.

Ele se integra com uma vasta variedades de "linguagens" template systems etc. Utilizei um destes template systems que é o Pug para tornar os html's dos meus MFE's dinâmicos. Me ajudou a economizar algumas linhas de html também.

Desenho

A idéia era criar um repositório "host" simples onde eu hospedaria estes MFE's estáticos e disponibilizaria para qualquer outra aplicação consumir.

A aplicação "Cliente" apenas apontaria para o css, html e js do MFE para montá-lo na aplicação em qualquer ponto que desejar.

A Aplicação

Escolhi usar o Jails como motor porque me possibilita criar componentes complexos com muito pouco js, além de ser compatível com qualquer biblioteca, como o Swiper e o Rive que utilizei de exemplo no Hello World.

Dessa forma, qualquer aplicação que carregue o arquivo main.js (que possui apenas ~5kb gzipado), poderia desfrutar do motor do jails pra fazer qq MFE funcionar.

Com o main.js carregado, basta dizer qual MFE do repositório quer renderizar e onde.

<div id="hello-world"></div>

<script src="https://mfe-jails.netlify.app/main.js"></script>

<script>
	window.MFE.add('mfe-hello-world', '#hello-world').start()
</script>

Finito

É isso, só queria compartilhar com vocês essa idéia, talvez não alguém não conheça algumas das ferramentas que comentei, todas muito boas e super recomendo dar uma olhada.

Vai me ser muito útil para alguns projetos onde tenho funcionalidades muito parecidas, que preciso reutilizar, talvez seja útil para mais alguém.

Pretendo subir alguns MFE's públicos nesse repositório também, estou sem muitas idéias quais ainda. =)

O Repositório é público, fique à vontade para clonar, subir na sua própria infra e usar para seus projetos escrevendo os seus próprios componentes se fizer sentido. Lá você vai encontrar também o código fonte do exemplo.

• https://github.com/jails-org/MFE

Valeu!