“What will be hot and what to learn in 2022? This article is participating in the” Talk about 2022 Technology Trends “essay campaign.

Have you seen the pages of project C embedded in project A?

Have you seen that A project outsourced A module to others? Did you finally consider how to introduce it? How to log in?

Have you ever seen project A go somewhere in project D?

I think the micro front end will be even hotter in 2022

Once my back-end colleagues adopted micro services in the project, so my boss asked me if there was a similar framework in the front end. I said before that I would promote the implementation of micro services technology, which is in vain. It seems that only real practice in the project can truly understand it!

Business confused

Small companies often face the problem of trying to productize a project, only to have the customer take the requirements down the drain. However, my boss doesn’t care about these things. He thinks that if I finish a project, I can just cram it into another one, so that I can fulfill my ‘perfect’ needs.

The business problem

Shoehorning projects into projects creates many problems

  1. The prototype is not unified, the company does not have a unified business components, even the minimum background logic is fragmented;
  1. The UI is not uniform, the style is conservative and limited to the boss and customers;
  1. The most important thing is the front and back end code, to change to change, already is out of sight for net;

Initial solution

The code merge

Merge the previous project code

advantages

1, the weekly newspaper has a header

2. Learn code, whether it’s your own or someone else’s,

3, enhance the understanding of the project, equal to review,

disadvantages

1. Waste of time

2. Your eyes will go blind

iframe

Deploy the project to be embedded, given the corresponding URL

advantages

1. Iframe can show the original version of the embedded web page;

2. Module separation, easy to change, if there are multiple pages reference IFrame, only need to modify the content of iframe, you can call each page content change, convenient and quick;

3. If the header and version of a web page are the same in order to unify the style, it can be written as a page and nested with iframe to increase the reuse of the code;

4. Iframe can solve the problem of slow loading of third-party content such as ICONS and advertisements;

5. Reload the page does not need to reload the entire page, only need to reload a frame page page;

6. Easy to make navigation bar.

disadvantages

1. Style and script need extra link, call external page, need extra call CSS, increase the page extra request times, increase the server HTTP request;

2. The code is complex, the biggest drawback of using the frame structure in the web page is that the “spider” program of the search engine can not read this page, which will affect the search engine optimization and is not conducive to the website ranking;

3. The frame structure sometimes makes people confused. Besides occupying limited page space, the scroll bar will make the iframe layout chaotic, and also distract the attention of visitors and affect the user experience;

4. Link navigation questions. When using a frame structure, you must ensure that all navigation links are correctly configured, otherwise it will cause a lot of trouble for your visitors. For example, the linked page appears in the navigation frame, in which case the visitor is stuck because he has no other place to go.

5. Multiple pages are generated, which is difficult to manage;

6. Most small mobile devices (PDA phones) can not fully display the frame, poor device compatibility

\

The solution for 2022 — the micro front end

Why recommend

The reason why micro front end will fire is mainly because of ‘cloud native’ and business separation

For suture strange, it is necessary to use suture method

Personal view

  • The micro front-end fits the needs of my company, or a small company, on a project
  • The open source microfront-end frameworks of big companies, such as Qiankun of Alibaba, Bytecode and MicroApp of JINGdong, show that many companies have business difficulties and needs in microfront-end to meet the needs of developers and users

How to fall to the ground

1. Using the framework of micro front-end qiankun, familiar with documents and documents

2. Business separation of existing projects

Because one project is only one phase, already has tens of thousands of packages, already bloated. Develop the master container first, put the shelves together, and then detach the individual business logic,

3. Risk assessment

  • Data communication between master container and child container; Login credentials can be shared, including localStorage or sessionStorage.
  • The development of
  • Component split
  • Styles: Style isolation and common styles
  • Deployment: How to deploy to the server, nginx agent

The above is my plan for the company’s project;