The front-end trend you should know-front-end technology wave and application

This time, I will mainly talk about the current front-end things front-end infrastructure and front-end new direction

Front-end infrastructure

First talk about the traditional front-end direction, which is what we often call the front-end infrastructure . What is infrastructure? All the capacity building that directly or indirectly contributes to business development that is conducive to the improvement of research and development efficiency is the infrastructure .

Infrastructure involves many topics, such as component libraries, specifications, packaging, and so on. This time, I will talk about the status quo of the front-end infrastructure industry, application fields, and solutions in the industry from these four aspects (the industry has wheels). Not much nonsense, let's take a look at the front-end visualization first.

01. Front-end visualization

front-end visualization can be divided into two categories, namely page visualization and data visualization:

• Page visualization is WebIDE;
• Data visualization, as the name implies, displays the data visually for others to see.

01-1. Page visualization construction

The front-end industry efficiency improvement analysis is mainly divided into four categories:

• pro code
• low code
• no code
• auto code

You can see the process difference between these methods from the figure below. Based on such an efficiency improvement analysis, I have completed the industry's research on the wheels of page visualization to improve efficiency. About 22+ wheels have been investigated. Which ones are there? Please see the breakdown of last time: front-end visualization construction tool industry wheel .

①Page visualization background-front-end industry efficiency improvement analysis

②Industry-front-end industry efficiency-improving wheels

The figure may not be clear, specific reference: distal visualization construction tool industry wheels .

③Background-Summary of efficiency-improving wheels

These may be familiar to everyone. After so many researches, there are relatively new ideas and solutions, such as Taobao’s imgcook, which stands at the forefront to solve inefficiency problems. Next, let’s introduce a visual construction tool imgcook, which is more advanced in the industry. , how to get on the intelligent shuttle bus to be the front-end efficiency tool.

④Analysis of efficiency improvement in intelligent related industries

Before looking at this imgcook, let's take a look at the following pictures.

The above two pictures are the evolution, composition and support of intelligent Industry 4.0; the following two pictures show the real cases and benefits of smart industry; it can be seen that the impact of intelligence on these industries is very large; in summary , After the intelligence of various industries, it will improve efficiency and reduce costs, certain types of personnel will be reduced, certain types of personnel will be transformed and upgraded, and will bring about quality improvement or business increment .

So analogy to the front-end industry, intelligent for a few years, the overall efficiency will be greatly improved. Some simple and repetitive tasks will be replaced by intelligence, and some new positions may be born , such as business logic configuration engineers (and code generation Robot collaboration) and so on, the front-end upgrades to do more challenging work content. So if you can intelligently generate code with one click, it will definitely bring huge benefits to the front end.

Simple analysis :

Figure 1. Figure 2. For example, Industry 4.0 with intelligence as the background proposed in recent years, the core strategy of Industry 4.0 is probably manufacturing process intelligence, visualization, standardized management collaboration, and cross-field integration to achieve Efficient production; analogous to the front-end industry and gradually standardized (data standardization, service standardization, etc.), front-end engineering is mature, cross-PD/designer/server collaborative R&D integration, business personality Customization, production visualization, and intelligence, these strategies also exist in the front-end industry.

Figure 3. Looking at the results of intelligence again, its leading project Xiamen Yuanhai fully automated intelligent terminal has reduced front-line personnel by 70% and increased efficiency by 20%;

Figure 4. In the financial industry, which is known as the mother of the industry, the proportion of operating counter staff in its typical smart banking outlets has dropped by 15%; after the transformation of operating counter staff, the number of compound talents has increased to 90%; super counters have been added After the machines, self-service foreign exchange machines, and virtual teller machines, the area of outlets and tellers will be reduced to further reduce costs.

⑤Example Visualization Build one of the examples to see the front-end visualization-imgcook

There are too many visual construction tools in the industry, just take one that I think is relatively novel and creative based on the cutting-edge technology of intelligence to explain in detail. Let’s take a look at the picture below to see where this visual construction is new?

from (design draft, prototype draft, PRD, APIHub, CodeHub and other resources) through intelligent means.

imgcook's core function : imgcook's current external core function is to directly generate code from design drafts through comprehensive methods such as CV/NLP and other deep learning, traditional machine learning, expert rule systems, and algorithm engineering.

The following introduces the product operation process, you can read the following explanation against the picture:

Let’s take a look at the current product usage process in detail. After importing the design draft, you can generate code with one click, you can edit in the visual editor as you see it, and then you can generate various DSLs (React/Vue/Rax/Mini Program DSL) Etc.), and then the code can be directly introduced into its own project project through the VS Code plug-in, imgcook-cli, etc. Each team project may have its own project catalog specification, and it also supports customization through the Plugin extension. The imgcook team is advanced Customization capabilities support customization capabilities in various dimensions to meet the code generation requirements of different scenarios.

• Step 1: Import the design draft
• Step 2: Visual intervention
• Step 3: View the generated code (optional)
• Step 4: Enter the project link (directly import the vs code plug-in)
• Optional step: Advanced team customization (Plugin settings)

From bottom to top:

• ①Based on algorithm engineering framework and products;
• ②Based on CV analysis and NLP analysis of visual drafts;
• ③Multi-dimensional identification of the elements to be generated code;
• ④ Visualize it after recognition;
• ⑤If there is an error in the identification, visually intervene and visually supplement additional logic;
• ⑥ (Left one) Then the application is integrated into their respective project links (VSCode plug-in, WebIDE plug-in, imgcook-cli);
• ⑦(Right first) The generated code also supports customization, the most commonly used are DSL (React/vue/small program DSL...) and Plugin (different teams have different catalog specifications, etc.) customization;
• ⑧ (Second from right) At the same time, what we pay most attention to in the entire technical system is the technical metrics, such as the actual code availability, model accuracy, and efficiency improvement data.

The following introduces the core technical difficulties:

Let's take a look at the part of this technical big picture that has relatively high implementation complexity: intelligent recognition and expression disassembly, intuitive analysis, in order to generate the code required for expression, multi-dimensional information input and extraction are required, and various details are required. Meta-information (images, texts, styles, attributes, etc.), and at the same time, it is necessary to extract reusable units (materials) with different granularities, as well as the dynamic logic behind the extraction (dynamic fields, loops, interaction logic, etc.).

The first is the disassembly problem of intelligent recognition expression here. There is no direct end-to-end solution available in the industry. The industry also has solutions similar to pix2code , screenshot2code . One is too granular to solve the problem of component identification, and the other is availability. Not high, especially for the C-end visual draft reduction degree, the C-end designer does not accept pixel-level deviation.

Specifically, let’s take a look at how to break it down into solvable problems. From an intuitive analysis, in order to generate the code required for expression, multi-dimensional information input and extraction are required, and various detailed meta-information (images, texts, styles, attributes) are required. At the same time, it is necessary to extract reusable units (materials) of different granularities, as well as the dynamic logic behind the extraction (dynamic fields, loops, interaction logic, etc.).

First, from top to bottom, input the design draft and process the layer information. The details of each layer are as follows:

• Layer processing layer: It mainly separates the layers in the design draft or image, and combines the recognition results of the previous layer to organize the layer meta information.
• Material recognition layer: mainly recognize materials in images through image recognition capabilities (module recognition, atomic module recognition, basic component recognition, business component recognition).
• Layer reprocessing layer: further normalize the layer data of the layer processing layer.
• Layout algorithm layer: Convert the absolute positioning layer layout in 2D to relative positioning and Flex layout.
• Semantic layer: semantically express the layer at the end of the code generation through the multi-dimensional features of the layer.
• Field binding layer: Bind the dynamic data field of the interface to the static data in the layer combined with the data interface.
• Business logic layer: Generate business logic code protocol through business logic identification and expresser for the configured business logic.
• Visual arrangement: finally output the code protocol that has been intelligently processed by each layer, and use the visualization engine to display what you see, which can be visualized intervention and supplement.
• Code output engine layer: Finally, after manual intervention, the more accurate protocol is internal, and various DSL codes are output through the expressive ability (protocol transcoding engine).
• Engineering link layer: Finally, through the vs code plug-in, webIDE plug-in, output to each engineering project environment.

01-2. Data visualization

①Data visualization-the status quo of the industry

This picture is a big picture of the technology and market in 2020: There are many modules on this picture, and you may not be able to see it clearly. Let me sort it out for you. It will mainly be divided into so many groups:

• The first three I marked out: graph database (bottom storage), graph computing engine (middle layer cutting and processing), graph visualization (graph analysis), these three are actually the core technology of the entire graph technology;
• The following four are just the application fields represented by graph technology: For example, in the knowledge graph field, there are actually many commercialized products coming out, and there are also anti-fraud, social network analysis, and network security, etc., these four are in This big picture has a very wide range of applications.

So based on such a field, let’s talk about the next topic, Data Visualization Application Field-Core Technology Processes and Challenges .

②Application areas: core technology process and challenges

• ①What landing scenarios do we have for data visualization: In addition to the first four that are already in the picture, there are regulatory compliance and personal security guarding. In addition to these businesses, many companies also have many mature products based on the core process of such an application field : Data storage, data processing, and finally to visual display and application;
• ②Based on this field, we found that the core processes are actually the same. Just mentioned the three types: data acquisition, structured loading, finally to a storage, after storage, we will perform a loading analysis on the data and finally reach a stage of visual display and application;

• ③The front-end students will encounter great challenges in this: how to visualize the graph from the case study of a graph? There are three pain points:

  • 1. It can be seen: how to visualize the huge picture data;
  • 2. Comprehensible: How to understand with data;
  • 3. Analyzable: how to analyze insights after understanding.

Let's visualize what we just said, for example: For example, this is a 100-node graph data. Traditionally, it would be very troublesome to look at it. If you simply use graph visualization technology, you will find that it is very easy.

③Application area: Big picture with ideal graph visualization ability

These are the three difficult details of the visual front-end just mentioned: see, understand, and analyze .

In fact, how to quickly render nodes and edges. In addition to regular data relationships, we will also have some time series data, locations such as map location information, and massive amounts of data. All need a complete set of engines to do it. Specification of nodes, styles, etc.

④AntV Ant Financial-Visualization Solution

For an introduction to visualization, Ali actually has a complete set of solutions for data visualization: AntV-Visualization Solution .

0608a2f4a2f458 handles different data separately to solve different data visualization problems. For example, for the technical selection of statistical charts, you can use the G2 stack. You can G2/G6/F2/L7

⑤Data visualization-summary of industry solutions and wheels

Let's take a look at what other data visualization products besides the Ali industry.

Among them, the digital space of rookie uses the digital twin mentioned in the 2020 emerging technology trend chart Gartner. This is a relatively cutting-edge exploration in the industry.

What is a digital twin? digital twin is to make full use of the physical model, sensor update, operation history and other data, integrate multi-disciplinary, multi-physical, multi-scale, multi-probability simulation process, complete the mapping in the virtual space, so as to reflect the full life of the corresponding physical equipment Periodic process . digital twin is a concept that transcends reality and can be regarded as one or more important, interdependent digital mapping systems .

02. Front-end cross-end cross-stack

When it comes to the Internet of Things, you may first think of a variety of devices. Our cross-end scenario is to run on a variety of devices.

①Front-end cross-end cross-stack-scene

cross-terminal development plan: mainly solve the problem of technology stack fragmentation ; and the just mentioned: mainly solve the problem of flat fragmentation and UI fragmentation . The combination of the two can further reduce costs and increase efficiency.

②Front end cross-end cross-site-cross-end characteristics

cross-end and cross-stack : Our application is characterized by strong interaction, many types of functions, and many devices. Its business scenarios are different. We have a long technical precipitation cycle in different equipment fields, so we need For our application, look at the development of our application from a relatively long timeline.

Cross-terminal and cross-stack advantages : A set of code multi-terminal reuse, more efficient release process, and platform consistency. Despite the above-mentioned advantages, it is by no means without any disadvantages. Its main disadvantages include possible lower performance and slightly worse user experience and user interface.

③Front end cross-end cross-site-cross-end plan thinking

How to maximize cross-terminal reuse?

When the application we want to develop has a relatively long life cycle, and when we have tasted some technology stack iterations, we have to consider how to enable our application to follow the upgrade of the technology stack to continuously update our technology stack, and Not tied to a frame. The application is dismantled horizontally in the dimension of technical responsibilities, and after dismantling, different cross-terminal processing is carried out according to the technical characteristics of each piece.

④Front-end cross-end cross-site-cross-end scheme

How to get rid of the historical burden and continuously upgrade the cross-terminal solution?

This picture simply shows a simple indication of module management. We developed a module management system to manage our source code and compile modules for the codes on each platform. The general idea of cross-end and cross-site is roughly as shown in the figure above.

⑤Front-end cross-end cross-stack-industry framework

What are the excellent frameworks in the industry based on the above-mentioned cross-end and cross-stack, you can take a look.

In terms of cross-terminal development, the RN status is very mature, or there is not much development prospects, because the current version is still at version 0.61, it seems that version 1.0 is still in the foreseeable future. Therefore, this year many teams have moved to Flutter, especially the first Release of Flutter for Web, to rekindle hope and eagerness for the web front end.

At the same time, Apple also released a new UI system-SwiftUI; SwiftUI for Web in the open source community is already on the way, can SwiftUI for Android be far behind?

Let me take one of them, Taro, to give a brief introduction.

⑥Front-end cross-end cross-site Demo

Taro's architecture

Taro is an open source multi-terminal unified development framework. It allows us to write a single code and run this program on various small terminals, H5 terminals, and RN terminals. It has gained a lot from the industry in the past two years of open source. Pay attention, and now there are 25,000+ Stars on github, and there are also many teams in the industry using the Taro framework for development.

First look at the current Taro. It is divided into two parts. The first part is compile time and the second part is runtime .

compiled, will first compile the user's React code and convert it into code that can be run by the small programs on each end, and then match a corresponding runtime framework on each small program end to adapt, and finally Let this code run on each small terminal.

But this architecture also has some problems: JSX support is not perfect during compilation, source-map debugging is not convenient, maintenance and iteration are very difficult, and other minor problems, so another Taro Next appeared.

Taro Next architecture

This is the overall architecture diagram of Taro Next. When compiling, the JSX support is not perfect and the inconvenience of source-map debugging is not supported by Taro Next. This Tara Next is more powerful, faster and more flexible.

⑦Front-end cross-end cross-site-other architectures

Attached are the architecture diagrams of uni-app and Didi Chameleon. If you are interested, you can check the information to see the detailed principles.

⑧Front-end cross-end cross-site-summary

The above sums up the industry with so many cross-end and cross-site solutions, and there is no best solution in terms of technology selection. Only the most suitable solution has its pros and cons, and the most suitable is the best.

03. Micro front end

Let's take a look at the micro front end in the front-end traditional infrastructure.

First of all, I will briefly introduce the concept of micro front end. I think it is necessary to have a preliminary understanding of what the so-called micro front end is.

①Micro front end-concept introduction

The micro front end was proposed as early as in a technical forum in 2016. It is actually born out of the concept back-end microservices. In the past, a single web application was generally responsible for the entire team, including the front-end and back-end parts.

With the development of technology, the division of responsibilities is further divided into fields, and the team responsible for a project will be divided into a front-end team and a back-end team. In this scenario, the back-end capabilities are actually aggregated together.

, the backend will split some capabilities of the backend according to the functional dimension, and then add a layer of 1608a2f4a2f80a aggregation layer middle layer when interacting before and after, such as graphQL or rely on some BFF layers to do it Data aggregation, including some gateway processing.

micro-front end as a micro-service-like architecture, it actually applies the concept of micro-services to the browser side. We also split a single front-end web application into functional dimensions, and then aggregate it into a whole Below the application architecture, this is the micro-front-end concept .

The micro front end is a micro service-like architecture that applies the concept of micro service to the browser side.

What kind of scenarios will require such a technical architecture? There are two main scenes.

②Micro front-end business background-business dilemma

The first scenario, table scene , based on the latitude of the product experience; second scenario, large single application , this scenario is more focused on the technical want to optimize dimensions.

workbench scene actually means that there will be many system platforms in some companies, and the daily operation process will involve cross-system operations, then there will be problems of inconsistent experience interaction between different systems, and some unnecessary page jumps. It will also lead to inefficient operation. Moreover, in multiple independent systems, whether it is at the BFF layer or some intermediate gateway processing layer, or some basic capabilities of the front-end, there will be a lot of duplication of construction. Multiple systems are independent of each other, and most of the systems are actually unable to control their specific implementation logic .

The second scenario is relatively more common. The large-scale monolithic application is what we usually talk about as some monolithic application . The characteristic of this kind of application is very obvious, its system volume is very large. For example, judging from the file size built by the bundle alone, the single file may exceed 10M. This amount of construction will seriously affect the development experience and efficiency during daily debugging and development.

Another key issue is that when the business needs to perform functional iterations or technical architecture upgrades, for a Jushi application, its development and collaboration costs are very high. Because of the large volume, the impact of the changes is also very wide.

Finally, if there are some second-party requirements and functions, when you want to reuse this ability directly, it is actually difficult to achieve based on the current SPA architecture. Basically, you need to implement the same on the existing system. Code logic.

Combining the problems of the above two scenarios, we hope to have a suitable technical architecture that can assist the business to establish a system with good experience and sustainable maintenance.

③Micro front-end-business background-technology selection

Based on some of the above demands, what are the technical solutions in front of us?

​
To summarize briefly, in fact, each of the four methods has advantages and disadvantages. The core business scenarios of the micro front-end solution are more about finding a balance between experience and efficiency.

• Jushi application: With the increase of pages, the development efficiency and stability cannot meet the requirements🤕
• iframe: In addition to user experience issues, it is actually a very good solution💀
• Framework components: Not satisfying the mind of a system, and long-term maintenance costs are high 💩
• Micro front end: In the business scenario of a large system, the balance point between experience and efficiency 🚀

Based on the above survey and comparison, many businesses will finally decide to choose a micro-front-end technical solution to upgrade their business architecture.

The above is a micro front-end architecture implemented by Taobao, which is a representative scenario.

So why can the micro front-end architecture achieve such an ability to integrate multiple systems? Next, I will introduce one of the micro front-end solutions icestark 's ability and thinking in architecture design.

④eg.icestark architecture design

icestark-front-end solution

Next, let's take a look at what the overall plan of the micro front end will include. The following figure is a big picture of the overall micro-front-end solution, micro-front-end icestark will mainly distribute applications according to routing changes, including application lifecycle management, application loading, communication, isolation, and sandbox operation . When the framework application accesses the micro front-end, there is no need to care about the processing of the micro application, the core only needs to complete the configuration of the micro application. In addition to the processing of micro-application configuration in the framework application, some authentication logic or application embedding logic and other business practices may also be involved.

The following will disassemble the capabilities provided by the icestark architecture.

icestark- architecture design concept

Icestark is a micro-front-end solution, and its architecture design adheres to the four concepts .

• The first point is that the technology stack has nothing to do with . When a micro application is connected, we don’t care what its technology stack looks like. Whether it is using React or Vue, or Angular, it is even an ancient code (jQuery ), applications can be accessed. But why do we recommend a unified technology stack for a single technology system in practice? It seems that they are two contradictory concepts, but in fact our thinking is that the micro-front end can integrate some independent systems or applications into one system through the ability to have nothing to do with the technology stack. In the process of integration, I hope it can do some technical unification, rather than not do any control, let it grow . Therefore, in the specific practice of the micro-front-end architecture, we adhere to the concept that under a single local system, technical unification is required. Even if migration is not currently based on cost considerations, the technology system must be gradually converged in the long run. For example, if our department requires React in the technical architecture, the existing Vue system will also integrate it, but in the subsequent incremental demand development, it will definitely be gradually upgraded by React's technical system. In the past, to do this, it was necessary to consider the coexistence of multiple technology stacks, and the natural support of the micro front-end architecture provided a basic guarantee for the smooth migration
• The second design concept is that the development experience is consistent. . The introduction of a set of micro-front-end solutions in the technical architecture today does not mean that there are many new concepts to learn, including new syntax, construction logic, and even overall coding methods. There is a change, which is something we don’t expect to see. Therefore, when designing, one of the core propositions is the . Developers do not need to learn some new concepts and processes, and keep consistent with the original development logic .
• The third point is actually a core capability in the micro-front-end solution- routing capability , in icestark, routing is actually a centralized management, all routing information is maintained in the framework application, based on routing changes Distribution and management of routing.
• The fourth point is that independently develops and deploys . In fact, to a certain extent, it will reflect the consistent development experience problem mentioned above. The previous application was developed and deployed independently, and it remains the same now, and there is no change before the micro-front-end architecture is connected.

icestark-core concept

The core concept introduced in icestark has two main points: framework application and micro-application .

• ① The framework application is responsible for the overall layout and micro-application configuration and registration rendering. As you can see from the above picture, the framework application will have a common header, sidebar sidebar, sidebar sidebar. In addition to Layout, you also need to configure micro-application information, such as bundle url, base routing and other information.
• ② The micro-application is actually some applications that are separated according to the business dimension. Generally speaking, it may be a SPA application and will contain at least one or more pages or routes.

framework application only does two things: the overall layout of the system, the configuration and registration of all micro-applications ; the framework application try to avoid including specific page UI code , if the framework application does too many things will bring the following problem:

• Too many frame application style codes will increase the probability of conflicts between micro-applications and frame application styles;
• Framework applications provide micro-applications with other capabilities such as some global APIs, which will destroy the independence of micro-applications and increase mutual coupling;
• The framework application is essentially a centralized part. After the change, it is necessary to return to all micro-applications in principle. Therefore, is required to ensure the simplicity of responsibilities . The simpler the thing, the more stable it is.

icestark-working principle-micro application registration

The above figure is the way the framework application registers micro-application information at the code level.

The path in the configuration information represents the base route, that is, the micro-application will be loaded when the routing address is declared, and the other is the url, which represents the application's bundle resource.

The types in the bundle resource may be diverse, it may be a JS resource, or it may contain a CSS bundle.

In addition to JS and CSS, especially in scenarios where frameworks such as Angular strongly rely on the content logic of html at runtime, iceSrarck also provides a way to directly set the entry to introduce html.

icestark-working principle-process

First of all, let's take a look at the overall workflow after accessing the micro front-end architecture. We can see this picture from two perspectives: micro-application independent development process, framework application access process .

• ① One perspective is the development model of micro-applications on the left. Micro application development has an independent warehouse and independent development, testing, and deployment processes. After the development, testing, and deployment, the release products of the application are registered in the framework application. These products may be JS bundles or html resources.
• ②On the right is the overall process of a framework application. The framework application maintains the registration information of the micro-application. When the user accesses the system, it can accurately match the application information that needs to be loaded according to the routing information it previously registered, and load the application resources according to the corresponding information and finally render the application.

user clicks to trigger the jump, if the routing change triggers an internal application jump, the application will directly render the page according to the internal routing logic of the application. If it involves some cross-application jumps, it returns to the routing search process above.

icestark-how it works-routing rules

Next, we will conduct some disassembly of the core processes in the framework application. First, let's understand how route hijacking is done. routing hijacking is a more important capability in the micro front-end solution. If you don’t hijack the application’s routing, you cannot determine which application resource needs to be loaded or which interface to render.

The routing rules in icestark are relatively simple. For those familiar with react-router, it is not difficult to find that the two actually have many similarities in configuration. For example, the configuration rules of path and exact are similar to those of react-router.

When we visit the framework application page, icestark will do a routing distribution internally. The three micro-application configurations are registered in the above figure. When accessing the /seller route, the first registration information is matched. When accessing /data or /message ? As a result, the third route is matched. Pay attention to the excat attribute in the first registration configuration. path as / in the micro-application architecture, it is actually used as a bottom route for the entire system, and all routes that do not match the registered configuration will be rendered by the bottom route. The bottom routing will be used as the landing page in the scenario where it is used, the 404 page or the rendering bottom of the exit page will generally be a general page, which will have a strong coupling with the framework application. So in practice, we also use the bottom routing as the rendering of the framework application's own routing.

Why can such a route distribution operation be completed?

Through a url change, how is the internal hijacking handled? How to determine which registered application needs to be loaded? This involves our routing hijacking principle.

icestark-how it works-route hijacking

• ① hijacks two types of routing events , one is popstate and hashChange in the history API, and the other is the routing events pushState and replaceState on the window. These two events are used for forward and backward operations on the browser. Time will trigger.
• ②Once a jump occurs between applications, the corresponding routing information can be obtained through the hijacking of the above events, and then according to the matching of the routing, it is determined which micro-application to mount.
• ③A micro-application may have multiple routing settings. If there is no inter-application jump, since the current micro-application is matched, the resource will not be loaded again. The is based on the micro-application. The application's own routing configuration decides to render .
• ④ If the micro application configuration of the entire framework application is uninstalled, the hijacked content will be removed at this time and restored to the original state, which completes the process of the entire application from routing base to URL change monitoring to micro application loading .

icestark-application communication

Next, we briefly talk about the application communication program.

The @ice/stark-data npm package provides application communication capabilities. The core is actually a EventBus mechanism . The communication between the framework application and the micro application uses a global variable such as window as a bridge. In this way, the events or data added by the micro-application or the events or data added by the framework application can be accessed.

Between the framework application and the micro application, or between the micro application and the micro application, is it possible to do some communication or do some event monitoring? In fact, from the micro-front-end design principle, we do not want micro-applications to rely too much on the capabilities provided by framework applications or other micro-applications . There are some scenarios encountered before, and some developers hope to share some heavy logic, such as general utils logic, through communication between applications to realize function sharing between different applications. It is technically feasible, but such a design will have a great impact on the maintainability of the application.

As we mentioned before, every micro application hopes to be independently developed, deployed, and released independently. If the micro application strongly relies on some external capabilities, when you develop independently, you need to mock a development environment, so that the development experience and transformation costs will increase.

icestark provides an application communication mechanism. In the actual development process, it is recommended to use lighter weight. For example, this communication mechanism only keeps the multi-language settings of the framework application and the micro-application consistent. When the multi-language settings are switched, the micro-application can monitor this change. The other is event communication between applications. In most scenarios, the micro-application system notifies the framework application to actively obtain data. Based on this scenario, we can use the ability of application communication to complete some lightweight notifications.

Micro Front End-Business Value

Large system

The first is the large-scale monolithic application scenario . Its page level is very large, and its development efficiency is therefore affected, including its technology stack migration cost will also become higher. Combined with the micro front-end architecture, we can split it into independent applications according to the functional dimension. Both incremental business and technical architecture upgrades can be carried out in split applications at low cost.

Workbench scene

The second is the workbench scene , which is more to solve the problem of product experience and operational efficiency. The micro front-end architecture can bring the experience of independent SPA without disrupting its independent development and independent deployment research and development process. At the same time, different applications are connected to the framework application uniformly, which also enables a certain degree of control over the accessed applications, avoiding some duplication of construction and uncontrolled technology selection.

Based on the above two scenarios, the micro front-end architecture can give its answer.

⑤What other micro front-end wheels in the industry

• Ant: Qiankun
• Taobao: iceStark
• Alibaba Cloud: Alibaba Store Xiaomi
• Bytedance: Sandbox
• Song Xiaocai: Vegetable Basket Enters the Platform
• Fliggy: Fliggy's integrated operation workbench star
• Alibaba Cloud: Alibaba Cloud
• : 1608a2f4a303b6 Single store multi-store delivery system

04. Front-end stability/quality assurance system

Regarding front-end stability, it can be divided into four stages: under development, under self-test, under test, and after launch. Each stage can use different methods to ensure quality and stability.

Let's take a look at the processing after the first launch, which is the front-end monitoring.

①Front-end monitoring-after going online

What we should consider at the beginning of the design is what is the basic purpose of front-end monitoring?

The basic purpose of front-end monitoring

The basic purpose of front-end monitoring is as follows in our opinion:

• Whether the developed application is used by users, and how many users use it;
• What kind of problems did the user encounter during use;
• How to track and locate these problems as developers and operators and solve them in time;
• At the same time, learn from it to avoid repeating the crime.

From the user's access to the page to the end of making necessary decisions based on these data, the entire data stream is processed step by step, which can be divided into the core processes of collection, forwarding, decryption, persistence, and processing.

Front-end monitoring basic module

The entire monitoring and tracking, from collection to tracking, from the perspective of the product, can be split into the following functional modules.

If you decide to self-study, you should consider how to design the system:

• How to collect data, which end and which data should be collected;
• How should the data be stored, and what should be the structure of the data reported and saved;
• How to design the alarm system, how to detect errors, and how to notify the person in charge;
• How to classify the reported exceptions for management;
• How to show.

system structure

The terminal currently covers PC/H5, RN applications, and applets. Log processing goes through three layers:

• The first layer takes into account the large traffic volume and uses the cluster method to disperse the pressure, and at the same time, the data is processed for the first time;
• The second layer is mainly to use the Kafka cluster to buffer to reduce the pressure of ES writing logs. It also has the function of caching data to avoid data loss caused by ES downtime. Filebeat is to deal with Kafka problems. The original backup data is in Stored in Elasticsearch after processing;

• The buried point data on the third-level data processing end will be stored in the data warehouse after processing. This is the work of the back-end students. The error data collected from the front-end is processed in the background of the monitoring system. The data presentation layer It mainly includes two parts:

  • One is the display of buried point data, which is displayed by our front-end visual report system after processing by the back-end students;
  • The second is to monitor the display of error data and monitor the kanban.

Data flow between the modules of the system

At the implementation level, the technical architecture diagram of the entire monitoring and tracking is as follows:

Based on the existing monitoring capabilities, what other methods can be used to do more with front-end monitoring and solve business pain points?
What are the current pain points? What solutions does the industry have?

• How to convert the collected data into usable data indicators to solve business problems?
• How to quickly locate the problem and solve the problem from a large amount of front-end error information such as js collected?
• How to perform data cleaning for so many errors and abnormalities in the monitoring, and find out the data that is really problematic?

②Chaos engineering-testing

Chaos engineering can be understood as an active defense capability that can find unknown problems in advance and improve system resilience.

To summarize the chaos engineering is:

• A technological culture that embraces failure;
• A set of abstract and rigorous practical principles;
• A stable means of active defense;
• A rapidly developing technical field.

For personnel:

• For architects, you can verify the fault tolerance of the system architecture, such as verifying the failure-oriented design system that is now advocated;
• For development and operation and maintenance, it can improve the emergency response efficiency of faults, and realize the effectiveness and efficiency of fault warning, positioning and recovery;
• For testing, it can make up for the gaps left by traditional testing methods. The previous testing methods are basically done from the user's perspective, while chaos engineering is testing from the system perspective to reduce the failure recurrence rate;
• For products and designs, the performance of products can be viewed through chaotic events to improve customer experience. Therefore, Chaos Engineering is not only for development and testing. It is everyone's goal to have the best customer experience.

Therefore, the can detect problems in the production environment early, and can improve the efficiency of failure response and use experience, and gradually build a highly available resilience system .

Chaos Engineering can be understood as an active defense capability, which can find unknown problems in advance and improve system resilience . reactChaos is a product made by the front-end in the field of chaos engineering.

Front-end demo: React Chaos

③Unit testing-self-testing and code testing-under development

Regarding the quality assurance during development and self-test, you can choose the tool by looking at this summary diagram. In addition, two reference documents are provided: JavaScript test framework comparison (English) (JS), development-code detection tool .

05. Summary

Industry summary diagram of front-end infrastructure

The last picture summarizes the front-end traditional direction introduced above, that is, infrastructure.

Infrastructure : Cloud capabilities have become the basic capabilities of the major Internet. It is conceivable that the cloud will become more and more powerful in the future, which can provide more standardized capabilities, and the front-end can do more things independently.

service layer : BFF/SSR is the main function of the front-end service layer. From the technology stack, Node->GraphQL->Serverless will be a big trend, especially the emergence of Serverless allows everyone to see that the front-end is more independent and free. possibility.

application layer : on top of the three front-end frameworks React, Vue, and Angular, a series of application layer development frameworks with strong constraints, standardized architecture, and plug-in extensions have been formed. The emergence of such application frameworks has a major impact on the technology stack capabilities of large manufacturers Precipitation plays a very important role.

UI component library : The component library is no longer a simple package of UI components, but a complete design language. At the same time, with the enrichment of terminals, the component library has also moved from the PC terminal to the mobile terminal and small programs, and more abundant performances such as data visualization have also appeared in the form.

Mini Program : Mini Program is a special product in China. With the rise of WeChat and Alipay Mini Programs, major apps have begun to build containerization of Mini Programs, but it has become difficult to cope with the development of multiple Mini Program platforms. Unspeakable. As a result, frameworks such as mpvue and wepy, which are similar to React/Vue development methods, have emerged to facilitate the continuation of the original front-end development model, and then there are multi-end unified frameworks Taro, uni-app, etc., to solve the problem of multi-end unification.

Cross-platform dynamics : Cross-platform and dynamics is always a hot topic about how to balance R&D efficiency and user experience. Whether it is the enhancement of Hybrid web containers or the solutions of virtual operating environments such as RN and Flutter, there are differences. Application scenarios. In China, under the persistent pursuit of R&D efficiency and dynamic capabilities, and under the compromise of user experience, RN and Flutter technologies have been developed by leaps and bounds. RN has now entered a mature stage, and the infrastructure of major companies is relatively complete; Flutter is Danghong Fried Chicken is in a technological bubble, but its future prospects are likely to be better. Its cross-platform vision is even more ambitious and the future can be expected.

Engineering Intelligence : Large-scale front-end R&D has long entered a large-scale, multi-team collaborative work mode, so the engineering infrastructure plays a very important role in R&D efficiency, standard implementation, online abnormal performance monitoring, etc. . At present, Ali's cloud-based construction, such as Web IDE, cloud construction, etc., has further improved the front-end engineering capabilities. At the same time, the direction of front-end intelligence is also very popular. There are many breakthroughs in the three directions of Pro Code/Low Code/No Code. Front-end students have become more and more determined on the road of self-revolution.

Industry infrastructure

Front-end industry new information

① Front-end new direction-Gartner releases 2020 emerging technology trend chart

According to the latest research report "Hype Cycle for Emerging Technologies, 2020" by Gartner, the world's leading information technology research and consulting company, it introduces 30 technologies that need to be focused on. These technologies can realize the organization of enterprises and hope to regain the society's trust in technology. And change the state of the human brain.

In this picture, we can see many emerging technologies: such as 5G, AI, digital twins, knowledge graphs, data analysis, machine learning, etc.

Through this picture, we can see that each technology will go through several development stages: technology budding → expectation expansion → bubble burst → enlightenment period & steady climb & mature production .

And 5G, AI is in a period of enlightenment + steady climb .

②New wave triggered by the new front-end direction -5G

In the 60 years of Internet development, there will be a more representative technology every ten years. For example, in 60-70 years, our Internet has a basic technology that began to rise, and in 70-80 years we will find TCP/IP as a foundation. The agreement came out; when the 80-90 e-mail came out, 90-00 belonged to the web1.0 stage. We are familiar with some search portals and campus BBSs have come out; 00-10 this decade is essentially a web2.0 The high-speed development stage, the representative technology is the AJAX technology that appeared in 2005. It realized a communication between the server side and the web side. At this time, some large-scale websites like Taobao have emerged; after 10 years, you will find that this is the high-speed Internet In the ten years of development, he has actually included all of our food, clothing, housing and transportation.

So what can we see from this curve?

We will find that is actually one of our online society on the right side of the curve. Our online society is constantly expanding, and it is also squeezing our real society, because every technological development is for our real society. An in-depth description of , for example, in the web2.0 stage, you will find that the social needs in our traditional society will be replaced by QQ and Taobao, including the mobile Internet. We are the best somatosensory, and the problems in our real life have been can be solved in reality or on the Internet; 1608a2f4a30bb4 What will happen to us in 20 years?

will usher in the era of intelligent : This will further cha