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

What are the misunderstandings about the micro-front-end in the web front-end? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

What this article shares with you is about the misunderstandings about the micro-front-end, which the editor thinks is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Micro-front-end is a new trend that has been traced back over the years. Equipped with new ways and solving challenges, they are now slowly entering the mainstream. Unfortunately, many misunderstandings clearly make it difficult for many people to master the difficulties of micro-protest.

In short, the micro-front end is about bringing some of the benefits of micro-services into the front end. What's more, one should not forget that microservers don't have silver bullets.

Tip: to share React / Angular / Vue components between a micro-front end or any other project, use a tool similar to bits. Bits allow you to "harvest" components from any code base and combine them with bitwise collections. It makes your components available to your team for use and development in any buyback. Use it to optimize collaboration, accelerate development, and maintain a consistent UI.

> Example: searching for shared React components in bit.dev

Misunderstanding 1. The micro front end needs JavaScript.

Of course, many of the currently available micro-front-end solutions are the JavaScript framework. But how can this be wrong? JavaScript is no longer optional. Everyone wants highly interactive experiences, and JS plays an important role in providing them.

In addition to the given advantages, you should also consider fast load time, accessible Web applications, and other factors. As a result, many JavaScript frameworks provide the ability to render imaging. Finally, this leads to the ability to stitch not only on the client but also on the server. Depending on the performance required (that is, the first meaningful initial time) this option sounds cute.

Keep in mind that backend rendering has its own challenges.

However, even without the homogeneous rendering of the JavaScript solution, we are in good shape here. If we want to establish a micro-front-end state without JavaScript, we can certainly do so. There are many patterns, and a large number of them do not require JavaScript.

Consider one of the "older" modes: using the

Do I hear you laughing? Well, back in the old days, people have been allowed to try to do some of the divisions today (more about the following). A page (maybe rendered by another service?) Responsible for the menu, while the other page is responsible for the title.

Today we use more flexible (and still actively supported) elements. They provide some good capabilities-the most important thing is that they shield different micro-front ends from each other. It is still possible to communicate through PostMessage.

two。 The micro-front end is only applicable to the client

After the misunderstanding of JavaScript, this is a next level. Of course, there are a variety of technologies to implement the micro-front on the client side, but in fact, we don't even need any or similar methods to get the micro-front.

The micro-front end can be as simple as "including" on the server side. With advanced technology, such as the edge side includes, this becomes more powerful. If we want to rule out scenarios implemented in the micro-store segment function, then even simple links are fine. Finally, the microarchive solution can be as simple as a tiny, separate server-side renderer. Each renderer can be as small as a single page.

The following figure illustrates a more advanced splicing that occurs in a reverse proxy.

> Server-side stitching via a reverse proxy

Of course, JavaScript may have several advantages, but it still highly depends on how you try to solve the problem with a micro-front end. Depending on your needs, the server-side solution may still be the best (or at least better) option.

3. Multiple frameworks should be used

In almost every tutorial on micro-front-end, different parts are developed not only by different teams, but also using different technologies. This is false.

Yes, different technologies should be used to use different micro-front ends, but it should not be the target. We also don't do microservices just to have a real patchwork (or we should say "chaos" on our back end). If we use multiple technologies, it is only because we have a specific advantage.

Our goal should always be a certain unity. The best way is to consider a green area: what will we do? If the answer is "use a single framework", we are on the right track.

Now, in the long run, multiple frameworks may become obvious in your application. It may be due to inheritance. This may be a convenience. It may be a proof of concept. Whatever the reason: it's still good to be able to play in this situation, but it should never be the required state.

No matter how efficient your micro-front-end framework is-using multiple frameworks will always be implemented at a cost that cannot be ignored. Not only does the initial rendering take longer, but memory consumption can also be taken in the wrong direction. Convenience models (for example, the pattern library of a frame) cannot be used. Further repetition is needed. Finally, incorrect errors, inconsistent behavior, and the perceived responsiveness of the application will be affected.

4. Split by technical components

Generally speaking, this does not make much sense. I haven't seen a server in the microservice backend in one service, and API in another service. Typically, a service consists of multiple layers. Although some technicians such as logging will certainly be brought to a common service, techniques such as side cars are sometimes used. In addition, common programming techniques within the service are expected.

For micro-front ends, this is the same. Why can a micro-front end only make menus? Isn't it a menu, and each micro-front end is filled accordingly? The split should be done by business requirements, not through technical decisions. If you have read about domain-driven design, you know that it is about defining all the domains of these domains-and that this definition has nothing to do with any technical requirements.

Consider the following split:

> Decomposition into microfrontends by layout

These are technical components. This is not about Microfrontends. In real micro-front-end applications, the screen may prefer the following:

> Decomposition into microfrontends by domain

Drawing stitches is more complicated here, but this is a sound micro-street application that should be provided for you!

5. You shouldn't share anything.

No, no. You should share and share meaningful reasons. You will never share everything (see the next point). But to be consistent, you need to share at least one set of principles. Now, it doesn't matter if you're sharing libraries, sharing URL, or just documents used when building or designing your application.

For micro services, this "no sharing" architecture looks like the following figure.

> "Share nothing" architecture applied to microservices

In browsers, this will lead to use, because there is currently no other way to prevent resource leakage. You can isolate shadow DOM CSS, but you can still touch everything at the script level.

Even if we want to follow the architecture, we will run into trouble. Repetitive resources just to keep simple components alive will paralyze perceptual performance.

Granted, sharing deeper (for example, using shared libraries attached to DOM) can be problematic. However, on the other hand, loose sharing is the inconsistency that can occur (for example, just a document that specifies basic design elements).

6. You should share everything.

Absolutely not. If that's the idea, then a boulder makes more sense. Being wise may already be a problem. What are we too lazy to load? Can we delete anything? But the real problem is relying on management. There is nothing to update, because it may break something.

The beauty of shared parts is a consistent guarantee.

Now, if we share everything, we will introduce complexity to achieve consistency. But this consistency cannot be maintained, because complexity will introduce errors in every corner.

The origin of this problem lies in "dependence on hell". The following figure shows a slight illustration.

> Entering the dependency hell

In short, if it all depends on everything we have the problem of dependence. Only need to update a single box to have an impact on the entire system. Continuous? Really. Simple? Absolutely not.

7. The micro-front end is limited to websites only.

Why do they or why? Really, most of us have touched the web so far, but we can bring concepts and ideas to any type of application (mobile applications, client applications, …... Even if it is a CLI tool I see it in a way that the micro-front end is just a fancy new word for "plug-in architecture". Now how to design the plug-in interface and what is required to run the application using the plug-in is a different story.

The following figure shows a fairly general plug-in architecture. Credit enters Omar Elgabry.

> Generic plugin architecture

There is no concept of where to run. It can run on a mobile phone. It can run on Windows. It can run on the server.

8. Micro-front end requires large-scale team

Again, why? If the solution is super complex, then I will certainly look for a simpler one. Some problems require complex solutions, but in general, a good solution is a simple solution.

Depending on the scenario, you may not even need a distributed team. Distributed teams are one of the reasons why micro-front-end freaks make sense in the first place, but they are not the only reason. Another good reason is the granularity of features.

If you look at the micro-front end from a business perspective, you will see that it may make sense to have the ability to turn specific functions on and off. For different markets, different micro-front ends can be used. Has returned to a simple level of privilege, which makes sense. You do not need to write code to turn something on or off based on certain conditions. All of this is left to the common layer and can be activated or deactivated based on (possible dynamic) conditions.

This approach can (or should) not be used and will not be passed. Although this should not be a protective layer, it is definitely a convenient (and performance) layer. Users are not confused because all they see is what they can do. They don't see the function. This feature is not even passed, so there are no bytes wasted on code that cannot be used.

9. The micro front end cannot be debugged.

I'm afraid it's partly true, but generally speaking, it shouldn't be with (spoiler!) It doesn't have to be. For any type of implementation (or the underlying architecture that conforms to the argument), the development experience can be paralyzed. The only way to fight is for the developer-first. The first rule in implementation should be: can be debugged and developed. Embrace standard tools.

Some micro-front-end frameworks don't embrace this at all. Some require online connection, dedicated environment, multiple services, … This should not be the norm. It is definitely not the norm.

10. Micro services require a micro front end (or vice versa)

Although the modular back end of the conjunctiva may be a good basis for front-end decoupling, this is usually not the case. It is completely feasible and can have a monolithic back end that requires a modular front end, for example, allowing simplified personalization to be combined with authorization, permissions, and marketing.

In fact, in the same sense, the microservice back end is not just a standard for applying similar patterns to the front end. Many micro-service backends are operated by single-purpose applications that don't grow up in functionality, but just look and feel.

11. The micro front end requires a single code warehouse

I've read it several times to create a miniature state solution that can take advantage of Mono Repo, preferably with tools such as Lerna. I don't believe it. Of course, a single code warehouse has some advantages, but they also have clear disadvantages.

Although there are mini-frames that require joint CI / CD construction. The requirements for joint CI / CD builds often result in a single code repository because it needs to be set up more simply in the first place. But for me-this is a repackaged boulder. If you have a federated version in a single code, you can mark two very important factors to make the micro-front end more interesting in the first place:

Independent deployment

Independent development

In any case, if you see a micro-front-end solution that requires a single code warehouse: run. In all the problems of the long-awaited distributed system, elaborate boulders may be better.

A good alternative to monorepos / lerna is bit. Bit allows you to collaborate with components in the repository-enabling the team to provide functionality independently.

Conclusion

Micro-front ends are still not for everyone. I do not believe that micro-front ends are the future, but I am also a positive role for them to play an important role in the future.

The answers to the questions about the misunderstandings about the micro-front-end in the web front-end are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.