Abstract: How to quickly and efficiently build front-end components and even pages is an important sign to liberate front-end productivity. Every front-end should know how to master abstract components and page models, understand front-end visual construction ideas, get rid of the inherent development mode, and improve front-end development efficiency.
This article is shared from huawei Cloud community “[Cloud Resident Co-create] How is the front-end visualization framework refined?” , written by Huawei Cloud EI expert Hu Qi.
With the rapid development of mobile Internet and the popularization of 5G technology, the demand for front-end pages has exploded, user interaction has become more and more complex, and the cost of developing pages from zero is also rising. How to quickly and efficiently build front-end components and even pages is an important sign of liberating front-end productivity. Every front-end should know how to master abstract components and page models, understand front-end visual construction ideas, get rid of the inherent development mode, and improve front-end development efficiency.
Start with a chestnut
In our front-end development process, we may often encounter scenarios like this:
(One day, the product manager came to the front end.) Product Manager: Simply create a welcome page and say "welcome to visit". (It's not that hard; the code is easy to write, so the front end shows it off without thinking.) <template> <div> Welcome to </div> </template>. Product Manager: That welcome was simply changed to "Welcome to our website". Front end: </div> </template> welcome to our website </div> </template> (through a series of processes such as code submission, code review, code merge, deployment to the test environment, test verification, gray release, product verification, release online, etc., the welcome message is finally updated... A day later, the product manager decided that the welcome didn't capture our strengths and added an adjective to describe the site.) Product Manager: That welcome message still won't work. Change it to "Welcome to our cool website." (The front end changed the code, despite the question marks, because the product manager had a 40-meter knife in his hand.) </div> </template> (another day later, the product manager came up with an adjective for "cool", so...) Product Manager: Change the welcome to "Welcome to our awesome website." (At this point, the front end can not sit, thought of letting the product manager maintain the JSON file, get the TITLE field in the JSON page for rendering display) front-end: ``` <template> <div> {{title}} </div> </template> <script> import axios from "axios"; export default { data() { return { title: '' } }, created() { this.queryTitle() }, methods: {queryTitle() {axios.get('JSON file path '). Then (res=>{if(res && res.status === 200) {this.title = res.data.title}})} (Another day later, the product manager had another idea, this time not to change the welcome message.) Product Manager: I'd like to add another selection box to collect user information. (At this time, a gust of wind blowing, the front end in the wind messy......)Copy the codeOf course, since we can think of configuring through JSON, it means that the entire component and page can be configured. We only need to give the product manager a visual interface to configure, and then the page he or she wants can be generated, which greatly saves the communication cost and improves the development efficiency. This is where the visual framework comes in.
Visual framework composition and division of labor
What is the visual framework? First let’s take a look at the composition and division of labor of the visualization framework. As the maintainer of visual framework, development can provide a visual configuration platform; The target audience, the users of the visualization platform, such as the product manager in the example above; Users configure the page through the visual configuration platform, and the platform will produce a configuration file to describe the page and upload it to the storage space. The configuration file is parsed by the rendering engine to generate the final page. In this composition, as defenders of the framework, we only need to pay attention to visual configuration platform and rendering engine, of course, the visual configuration platform is only to the user’s input into rendering engine to parse the configuration file and upload, is one of the icing on the cake, if you want to apply in more complex scenarios, you can also add permissions management, For example, A can only edit the pages that A is responsible for, and B can only edit the pages copied by B. It can also realize the process orchestration of A workflow, such as auditing…
The core of the visualization framework is the rendering engine, and how we arrive at that rendering engine and how it works and renders the final page is what we care about. How to figure out the rendering engine has to start with the page generalization model.
Page generalization model
Why is there a page generalization model? Because our different pages are actually rendered by the rendering engine parsing different configuration files, the rendering engine needs the ability to generalize. For example, if page A is A form fill, the rendering engine is required to parse the configuration file of the form. For example, if page B contains a list of cards, the rendering engine is required to parse the configuration file of the list. The establishment of page generalization model is mainly based on the developer’s own experience and methods to establish a model to meet their own business needs. As in the case above, if the product manager keeps asking for changes to the welcome message, the rendering engine for the title section in the case will suffice. Next, take huawei cloud official website as an example to talk about how to establish the page generalization model.
From the above screenshot, we can see that this is actually a top-down structure, which can be understood as a page composed of floors, which can be understood as a DIV block under the body, or a function block. For example, from top to bottom, there are headers, banners, jump floors, recommended articles, and technical domain floors. Of course, we often encounter pages that are not all up and down, but also left and right.
In fact, with pages like this left and right structure, you can understand that there is also a larger container component wrapped around the outer layer, forming a whole floor. Container components are only responsible for style. For example, the container components are responsible for left and right layout. If you have no idea about layout, you can press THE F12 key to see the layout code in the image above. The two modules on the right are wrapped in div with classname edu-index-version-right, and they are still the floor from top to bottom. Therefore, pages = floors + container components.
Deconstruction, take a look at the floor above the graph example, main part is a TAB in figure functional components, by viewing the page source code, we found that the two red box circle of text and no design in TAB functional components, but become the text control alone, this is because this part is belong to the customized function, is not each TAB functional components, I’m pulling it out and following the single responsibility principle, the blue box is a container component. Take a look at the cards in the TAB function component. The cards are also composed of controls one by one. Therefore, floor = container component + control.
Controls in visual framework and common UI framework components, have perfect and single responsibilities, such as table components, no matter how to add functions are in the table, the table inside the function is unable to split out. But visualization framework of controls and components or is there a difference in the UI framework, the main difference is that control is needed to be edited, so it has a unified props, all controls should follow the same props, such as view configuration and data sources, in the visual we don’t know which kind of components are used page, therefore need a unified to do render loop, The specific properties of the control are not aware.
The container components in the visual framework are components in essence, which are mainly responsible for layout. They are divided into basic container components and functional container components. The left and right layouts in basic container components are typically implemented through grids or Flex, and the up and down layouts are implemented through normal text flow or positioning and spacing of controls themselves. Function container components such as TAB containers, multicast components, etc.
When considering user interactions, events have to be considered in a visual model. Events in the visual model need to focus on the initiator of interaction, the actor of interaction and the way of interaction influence, rather than the type of interaction and the specific content of interaction. For example, when a button is clicked, the maximum and minimum values of the stepper change from 1 or 2 to 3 or 4, which actually changes the min and Max properties of the input control. For example, when certain conditions are added to table filtering, less data is displayed because data events are triggered to affect the data source of the table. Like a switch component that can be clicked to show and hide the controls…
Finally, the visual model we have identified is the point summarized in the figure above. The visual page is composed of control + container component + event. The control has the smallest granularity and is the smallest unit of function. Container components are responsible for layout and are collections of styles; Event response user interactions transfer dependencies between controls. How do controls, container components, and events come together? We have to talk about rendering engines.
Rendering engine
The rendering engine is also a component in essence. Its main function is to render the component of the current layer, deal with the interaction of the component of the current layer, and manage the state of the component of the current layer. It does not care about sublayer components, which are rendered by the rendering engine of the sublayer container, because each component has a different configuration and data source, and therefore a different rendering result. The sample code for the view section (based on vue.js) is as follows:
The outermost layer is wrapped by div, which defines the rendering engine in the way of custom dynamic component. The underlined attribute means that it is the built-in attribute of the custom component. Is determines the type of component rendering, such as button, so that the specific content of the layer component can be rendered as the layer component. V-for loop properties of the current component; V-show Controls whether components are displayed. The showState command is used to manage the status. Ref creates an index, which can be used for some advanced functions, such as the parent container calling the methods of the child container. ViewConfig and dataSource are required for the controls mentioned above; ValueChange is a unified event submitted by the component.
Both parent and child containers are essentially rendering engines, just in different styles. For example, a container component with a left and right layout is equivalent to binding a class in the v-for loop of the view like a grid layout or flex layout. For a grid layout, the user would define type as a grid component and then configure the Grid property in viewConfig. For a Flex layout, The type defined is the Flex component, and the alignment is specified as space-between or something like that. The example code above is a normal top-down layout.
First, the outer layer passes two key parameters –viewConfig and dataSource. Then the layer container parses the configuration and distributes the configuration. Configuration parsing mainly includes property mapping and generating events. Property mapping, such as the control itself needs the title property, and the configuration file may be called the Label property. At this time, we need to convert the label to the title, but the conversion logic is not included in the rendering engine, just call external encapsulated methods; Generated events are generated and mounted according to the configuration. Before distributing the configuration, the parent layer state of the parsed configuration is initialized and stored in the parent layer, mainly considering that viewConfig and dataSource are not assigned synchronously and need to wait for the distribution to be ready.
In the introduction to controls, it is mentioned that each control should be submitted, because each control cannot be an origin of other controls. For example, the Tip component, although it may not interact itself, may become a dependency of other controls. The child may need to fetch content, and the references of the child container are collected in valueWatch of the parent container. After the child container is submitted, if the state changes, The parent container will loop events based on functionList; If it is a showState event, the parent layer’s showState control is updated. If it is a data event, the viewConfig and dataSource are changed and a reassignment is made to the target. In summary, the rendering engine process consists of four steps: configuration resolution, configuration distribution, collection commit, and event initiation.
conclusion
In order to reduce the amount of page development code and improve the reuse of code, we expect the page can be visual editing; In order to get a visual framework, we analyze the visual modeling of pages, and conclude that almost all pages can be composed of controls and container components, and handle the user interaction and the cascade relationship between components through generalized events. According to the modeling results, a rendering engine is established to support the whole process and finally realize the visualization.
This article is collated from the [online live broadcast] 2.0 times of huawei Cloud community Content co-creation activity phase ii. Finish the front page efficiently.
Click to follow, the first time to learn about Huawei cloud fresh technology ~