Meiko: A Micro-Frontend Implementation Project

This project is based on micro frontend implementation. First, let’s see what exactly is a micro frontend architecture.

Micro frontend architecture

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface. — micro-frontends.org

Figure 1: Each micro frontend is deployed to production independently. Source

Figure 2: You can usually derive your architecture from the visual structure of the page. Source

Now, you’ll start to understand how micro frontend architecture works. In order to implement micro frontends, you should have a container application to hold them (like in figure 2). That’s what we initially built, a container/ entry point application named meiko.

meiko

Figure 3: Describes the whole idea of meiko and our project. Source.

meiko is the container application for our project. I created a simple Node.js server that serves index.html.

Here’s the pull request to meiko:

Adding container meiko by ThanoshanMV · Pull Request #1 · 99xt-incubator/meiko

Once our container app was ready, we had to think about the micro fronends and how can we assemble them in our container app.

We decided to include each micro frontend as a package dependency to meiko.

Creating meiko-angular

meiko-angular is a simple Angular application that’s used to demonstrate our micro frontend implementation idea.

After creating it, I made some source code changes and bundled it for production (build files).

We chose AWS S3 for storing our build files.

So I made a simple server in Node.js to upload meiko-angular build files (dependencies) to AWS S3.

Figure 5: Shows the S3 bucket that has build files and a gzipped tarball.

I added that S3 bucket to our meiko as a dependency.

Here’s the pull request to meiko-angular:

Adding meiko-angular by ThanoshanMV · Pull Request #5 · 99xt-incubator/meiko-angular

What’s next?

Micro frontend is an evolving technology that offers great benefits. I’m looking forward to work on this project further with my mentors’ guides.

Conclusion

I would like to sincerely thank my mentors: Rajika Imal, Afaz Deen, Lakindu, Isuru Edrisinghe and Linisha Siriwardana. They guided and pointed me next major steps of the project. They were super friendly and helpful.

I am extremely grateful to the organizing committee of Hacktitude and 99X Technology for providing me this opportunity.

I’ve gained so much experience and have explored different technologies throughout the whole project.

Thank you!