Jails — Micro-Frontends Repository

Hi There! I want to share here a side project that I just created to make it as easy as possible to build and share Micro Frontends.

The topic of how to develop MFEs is a bit controversial; each project creates them in its own way. But I wanted to see how far Jails could go in this specific topic, in the simplest way I could think of.

The Bundler 📦

To help me out, I pulled out a project from the drawer that I hadn’t touched in a while, which is Parcel. It’s definitely worth checking out if you haven’t already. Super useful and fast for creating web solutions with little or zero configuration, using the latest in terms of bundling and language features.

It integrates with a wide variety of template systems, etc. I used one of these template systems, which is Pug, to make the HTML of my MFEs dynamic. It also helped me save some lines of HTML.

The Design

The idea was to create a simple “host” repository where I would host these static MFEs and make them available for any other application to consume.

The “Client” application would simply point to the CSS, HTML, and JS of the MFE to assemble it in the application wherever desired.

The Application

I chose to use Jails as the engine because it allows me to create complex components with very little JavaScript, and it’s compatible with any library, such as Swiper and Rive, which I used as an example in the Hello World.

This way, any application that loads the main.js file (which is only ~5kb gzipped) could benefit from the Jails engine to make any MFE work. With the main.js loaded, you just need to specify which MFE from the repository you want to render and where.

<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

That’s it, I just wanted to share this idea with you all. Maybe someone doesn’t know some of the tools I mentioned, all of them are very good, and I highly recommend taking a look.

It will be very useful for some projects where I have very similar functionalities that I need to reuse, perhaps it will be useful for someone else too.

I intend to upload some public MFEs to this repository as well, I’m not sure yet which ones. =)

The repository is public, feel free to clone it, upload it to your own infrastructure, and use it for your projects by writing your own components if it makes sense. There you will also find the source code of the example.

GitHub - jails-org/MFE: A repository for Micro Front-end Applications

Thanks!

Jails — Micro-Frontends Repository was originally published in Jails-org on Medium, where people are continuing the conversation by highlighting and responding to this story.