Skip to main content

· 3 min read
Paolo Martinoli

Micro-frontends are very powerful, but you need to orchestrate them to provide a consistent experience. This is exactly the reason why we at Mia-Platform developed micro-lc and released it as open-source.
If you are not familiar with it, in a nutshell, micro-lc is an open-source micro-frontends orchestrator: you can find further information in the documentation introduction, or you can read this blog post to get a more discursive overview.

We are proud to announce micro-lc v2.0! A lot of new features have been implemented and optimized, making the tool more powerful than ever. Micro-frontends keep evolving, and so does micro-lc.

Let's take a closer look to what has changed.

A new live playground

One of the main news is the new playground available on the website. Here you can try micro-lc live, without the need to install anything: in the box on the right you will directly see the result. You are free to do all the experiments you like and test the full potential of micro-lc.

What are you waiting for? Unleash your creativity!

micro-lc has never been lighter

If you are familiar with micro-lc and you have already used it, you will love this new feature. If you are a new user, you will love it too, don't worry.

micro-lc can now be used through a CDN: this means that the download will be much lighter and the interface will be easier. This because micro-lc and microlc-element-composer (which used to be a separated core plugin) are now tightened together.
The bundle size is very low and so pages load faster, ensuring higher performances to your micro-frontends.

In addition, the code that makes micro-lc run is available as a standalone library that you can download via npm. Just run the following command:

npm i @micro-lc/orchestrator

New YAML integration

Besides the already supported JSON, we introduced the possibility to write configuration in YAML. Since YAML syntax is far more easily understandable for humans, this feature will boost you building your micro-frontends.

But, if you are a JSON lover, you can continue to use it as you have been doing until now. You can also use the converter available in the Playground section to easily convert your YAML to JSON, and viceversa.

... and a lot of other cool stuff

Besides all the above, other new features and improvements have been added:

  • New communication method between applications;
  • micro-lc now supports centralized states from plugin;
  • micro-lc is embeddable everywhere, so you can use it without downloading it;
  • You can have custom layouts by default.
  • The documentation has been updated and fully restyled!

That's it for now, but we will keep updating and improving micro-lc.

If you want to contribute to the project, take a look at the open issues, and feel free to open a new one if you don't find what you are looking for.
Moreover, the blog section has been introduced on the website, so consider writing a post for sharing your experience building awesome micro-frontends!

· 5 min read

Post originally published on Mia-Platform’s blog.

info

This blog post refers to micro-lc v1.x and some information are outdated.

micro-lc v2.0 is out now: read the updated documentation and the presentation blog post.

We are happy to announce the release of micro-lc, the new micro frontend orchestrator developed by Mia‑Platform.

This project stems from our experience of recent years with micro frontend development. We know the challenges and needs of those who work with micro frontends and we want to give a concrete contribution to the developers who use them. For this reason, we have released the project in open‑source mode: it is already available on GitHub and all the community can freely contribute.

What is micro frontend orchestration? And, what are the benefits of micro-lc? Read the article below to discover everything you need to know about it.

micro-lc architecture

Micro frontends: what are they and what do you need them for?

In the last decades, developers have been used to breaking down the most complex elements into small, independent, standardized components and therefore more easily manageable and reusable.

The microservices architectural pattern has become popular as it allows to simplify and speed up the development of applications; in the same way micro frontends were born and they apply to the frontend the same decoupling logic that microservices perform for the backend. The goal is to unpack a frontend application into a series of reusable and modular components. This also allows you to improve the agility of new frontend features releases.

micro-lc: characteristics and benefits

micro-lc is the component for micro frontend orchestration created by Mia‑Platform, which allows you to make the development experience consistent. micro-lc simplifies the management of micro frontends through an application. It includes all the backend and frontend parts, and allows their extension via plugins, which is necessary to develop frontend applications, thus speeding up the time-to-market of new solutions.

micro-lc is composed of two releasable entities: a frontend part and a backend part.

The frontend part consists of a container that provides a series of cross-application functionalities that can be used to configure each connected frontend.

Among the features you can find:

  • The basic elements of the layout, namely the top bar and the menu (of three types: sidebar menu, collapsible sidebar menu and top bar menu);
  • Application colors;
  • Logo and Favicon;
  • Window title;
  • Darkmode / lightmode;
  • User data;
  • Google analytics;
  • Plugin Management.

Mia‑Platform also provides a series of core and open‑source plugins for micro-lc.
microlc-element-composer, for example, allows you to compose the UI of the page dynamically, to create horizontal micro frontends.

From the backend section you can manage the configurations that define the elements of the frontend, the user authentication, and configurations in general. micro-lc does not manage or authenticate users directly, but allows you to configure authentication endpoints, which will then be managed by an Authentication Provider.

The frontends are designed with Qiankun, a framework that injects the frontends into the DOM. In this way it is as if they are organically inside your application and integrated with each other (as opposed to what happens with iframes, where the frontends are isolated).

micro-lc is integrated with Mia‑Platform Console: if you already use Mia‑Platform Console you can select the Plugin from the Marketplace and start a frontend application in a few clicks.

micro-lc communication

The benefits of micro frontend orchestration with micro-lc

As anticipated, the use of a micro frontend orchestrator like micro-lc allows you to improve the micro frontend development experience, simplifying the orchestration and abstracting the language used.

micro-lc is a component integrated into the Runtime phase.
Unlike the Buildtime integration - which requires you to release all the elements every time a change is made - the Runtime integration allows you to simplify the release.
Once a new configuration has been released from the backend section, you need to simply reload the page to see the changes of the individual components, without releasing all the elements individually.

micro-lc is so flexible that allows you not only to create new frontend applications, but also to migrate from a monolith frontend to a micro frontend architecture, which will be faster and more agile.

micro-lc is extremely configurable: the layout can be modified by inserting the brand's graphic assets, thus offering a personalized user experience.

micro-lc is an open‑source project: this means that anyone who is part of the community can give feedback and contribute to the evolution of the product. Try micro-lc, let us know what you think and contribute with your ideas!

Go to the GitHub project or to the documentation.

If you want to learn more about all Mia‑Platform open‑source software, take a look at this page on our website. Here you can find the full description of our culture, a brief overview of each project, and the link to their websites.