Shulou(Shulou.com)06/03 Report--

This article shows you what micro-front-end framework you should know in web front-end, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Discover the best tools to help you build a great micro front end.

The decomposition of long-term back-end holdings into micro-services allows for new discovery of efficiency and scale in the back-end development process. However, most of today's front-end application architectures are still monolithic, making it difficult to accelerate and scale the front-end development process.

The idea of a micro-front end is to break the front end into smaller, more manageable pieces. Each team can have its own functionality end-to-end, work in its own code base, release versions independently, continuously provide small incremental upgrades, or integrate with other teams through API so that they can write and manage pages and applications.

There are many ways for a micro-front end, from intelligent build time integration of components to run-time integration using custom routers. In this list, I have collected the most prominent tools to help build a micro-front end. Please feel free to add feedback or suggestions in the comments!

1. Bit

Bit allows you to write and manage front ends from independent components. This is probably the most popular and popular production solution on the list.

If you look at the bit.dev home page, you will notice that it has separate components built by different teams, in different code bases, and all integrated together to create a cohesive product.

> Example-Micro frontends with Bit components

Bit CLI is a popular component-driven development tool. With bits, you can build, integrate, and write independent components together.

Although a micro-front-end is generally thought of as a composition that occurs at run time, it allows developers to effectively form a build-time front-end to enjoy the best choice between two worlds: the security and robustness of the "traditional whole" and the simplicity and extensibility of the micro-front-end.

With Bit, different teams can build, publish, and expose components independently, while working with other teams to transform the Web development process into a modular composition of functions and components.

In addition to the component-driven development tools of the OSS tool, bit provides a cloud platform for teams to build changes and work together on components so that they can effectively manage and scale, while leaving all teams completely independent of team delivery.

To ensure that each front end gets its own independent and fast build process, a unique CI / CD process, 100% component driver, is also provided, which means that different teams can safely integrate changes without waiting, fighting for control, or breaking anything. Developers can continuously and securely propagate changes to components in all affected applications.

> Component-driven CI: X50 Faster

As a result, the workflow is enhanced with simple decoupled bars, autonomous teams, small definition API, independent release pipes, and continuous incremental upgrades.

If your team is building using components and is looking for a solution to unlock the micro-front-end and modularization work, be sure to check out the OSS tools and platforms that you may need for Bit.

2. WebPack 5 and module federation

Multiple separate builds should form a single application. These separate builds should not be dependent on each other, so they can be developed and deployed separately. La Micro Frontends .

Module federation is the JavaScript architecture invented by Zack Jackson, and then proposes to create a WebPack plug-in for it. The WebPack team helped bring plug-ins into WebPack 5, which is currently in Beta.

In short, module syndication allows JavaScript applications to dynamically import code from another application at run time. This module builds a unique JavaScript entry file that can be downloaded by other applications by setting the WebPack configuration.

It also solves the problem of code dependencies and increasing the size of the bundle by enabling dependency sharing. For example, if you are downloading the React component, your application will not import the React code twice. This module will skillfully use the React source you already have and import only the component code. Finally, you can use React.Lazy and React.Suspense if the imported code is for some reason, please provide a return, and if for some reason, make sure that the user experience is not uninterrupted by the version.

This unlocks some of the very beneficial potential of building a micro-front-end.

3. Apply SPA to a single page

A single SPA defines itself as a "JavaScript framework for front-end microservices". In short, it applies to the lifecycle of each application. Each application can respond to URL routing events and must know how to boot, mount, and uninstall itself from DOM. The main difference between traditional SPA and single-level SPA applications is that they must be able to coexist with other applications, and not each of them has its own HTML page.

So if you want to put different front ends or frameworks into a single DOM and aim to integrate at run time, check out this interesting experiment.

4. SystemJS

SystemJS is not a mini-framework, but it does provide a solution for cross-browser management of independent modules, which is the key to implementing MFS (and is actually used by a single SPA).

The system js can be thought of as the command of the JS module. It allows us to use functions related to different JS modules, such as dynamic import, import maps, etc., without relying on native browser support-and all close to local performance. Some obvious features include the Polyfill of the old browser, the name of the module using the name (by mapping to the path), and a single network request for multiple JS modules (by setting multiple modules to a single file by using their API).

It also has easy access to its Module Registry to let you know which modules are available in your browser at any time. see.

5. Piral.

The goal of Piral is to make it easy for you to build portal applications using a micro-front end. Piral enables you to create a modular front-end application that extends at run time and includes a decoupling module called a cap that leverages the micro-front-end architecture. Pilet can be developed independently and with the necessary code and all other related assets.

The prerequisites are pretty good, and as a developer, you only need your favorite editors, terminals, Internet browsers and Node.js. Piral instances (application shell) and Pilets (application shell) can be executed and debugged in an emulator on the local development machine.

6.Open Components

The Open Components project declares its goal as "a service-free architecture in the front-end world". More specifically, OC aims to be a micro-front-end framework, providing everything a place needs to make it a rich and complex system, including tools from component processing to the registry to templates and even CLI tools. OpenComponents has two parts:

Components are small unit agent code and are mainly composed of HTML,JavaScript,CSS. They can optionally include some logic that allows server-side node .js applications to write models for rendering views. After rendering, they are pure HTML to be injected into any HTML page.

Consumers are websites or microfunds (all small deployable sites connected by the front door service or any routing mechanism) that require components to render part of their pages.

7.Qiankun

Qiankun says it is "the implementation of a SPA-based micro-front end, but it is ready to build it". The project aims to solve the major problems that make up larger applications around smaller sub-applications, such as publishing static resources, integrating sub-applications, ensuring that sub-applications are independent of each other during development and deployment, and that they are run-time isolated. deal with common dependencies, deal with performance issues, and so on.

In traditional Chinese culture, Qiandai means that heaven and Kun represent the earth, so Qiankun is the universe. A...

8. Luigi

Luigi is a micro-front-end JavaScript framework that allows you to create administrative user interfaces driven by local and distributed views. Luigi allows Web applications to communicate with the micro-front end that the application contains. To ensure smooth communication, you can configure settings such as routing, navigation, authorization, and UX elements.

Luigi consists of Luigi core applications and Luigi client libraries. They use PostMessage API to establish secure communication between core applications and micro-front ends. Find yourself.

This is a test playground to let you know how it works. Give it a try and view this great project on GitHub through SAP.

9. FrintJS

Frintjs is a "modular JavaScript framework for building scalable and responsive applications". It allows you to load applications from a separate Bundlers, provide a structure for your application, and deal with authenticity concerns such as routing, dependencies, and so on. The project also supports RN and Vue through other packages, but it mainly records and tests React.

Try a live demonstration at the playground here, or visit the project on Github to learn more.

10.Mosaic 9

Mosaic is a set of services, libraries, and a specification that defines how its components interact with each other to support a micro-service-style architecture for large-scale websites. Mosaic uses separate service fragments and is composed at run time according to template definitions.

It consists of a bunch of packets, including dealing with different issues, such as routing, layout, template storage and even displaying UI.

11. PuzzleJS

Puzzlejs is a "micro-front-end framework for scalable and fast websites". It allows you to create gateways and storefront projects that talk to each other. It is inspired by Facebook's BigPipe, toward the micro direction.

PuzzleJS provides the creation of gateways or storefronts (separate storefronts (each other) and connects them by providing configuration files. It allows you to compile HTML templates into JavaScript functions at compile time. This operation is completely independent of the request, so Puzzlejs can use this feature to send the first block. It is also SEO-friendly and is written and rendered on the server side. And when the API required for the fragment drops, the PuzzleJs ensures that the other page fragments are still working. This is a real example.

What are the micro-front-end frameworks that should be known in the web front-end? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.