On May 13, 2017, Xu Xincheng delivered a speech titled “Front-end Development Configuration Scheme” at “H5 Dream Works”. IT big said as the exclusive video partner, by the organizers and speakers review authorized release.
Read the words: 2017 | 9 minutes to read
The main function of front-end development is to better present the interface of the website to users, it covers a very wide range of knowledge, both concrete technology, and abstract ideas. Xu Xincheng, senior front-end engineer of Baidu Takeaway, shared with us the configuration scheme of Baidu Takeaway front-end development.
t.cn/RolWhbl
Pain points in internal platform development
All lines of business are done by a large internal platform, and finally centralized into the APP. The downside of this system is a lot of repetitive work.
Taking the banner configuration as an example, we found that the page function has high similarity and a lot of repetitive work. In our previous development model, we built the base page by copying code from another similar project and making changes to it. At the same time, because a code may be developed by many people, it is difficult to unify the code style.
Inspired by Baidu H5, we finally came up with a platform to solve these problems. Baidu H5 is a platform to generate H5 active pages by means of drag and drop, and its components are very rich. Its entire page is designed in a similar way to some of today’s componentized frameworks. It separates the elements of the page into the smallest unit of components, which constitute a page.
But it doesn’t really fit our business scenario. Because in such a platform, our internal platform interaction is not supported and components are not scalable.
What we wanted was a simple platform that all characters could use, with a drag and drop interface that people would like to embrace.
We want any page to be done visually. We will provide a rich component library, interactive configuration methods, as well as custom extension scripts, through the configuration of the way to generate pages.
Since it was our own team that developed the project, we wanted it to be very maintainable. We will use familiar technology stack development, with a strong extensible way to explore the bottom of the technology stack content, modules will be broken down in great detail.
Ultimately, we developed the Blocks platform based on these ideas.
Page to configure platform Blocks
Blocks is a drag-and-drop + configuration generated system. Components are the smallest unit in a page. Blocks has a drag-and-drop page canvas that allows you to add and expand components, and supports custom scripting. Blocks is based on VUe2.0.
Page configuration module is mainly divided into building list, page canvas and setting component properties. Its output is config.js and it reserves event hooks in mapconfig.js.
Since visualization is not yet fully implemented, we develop extension scripts in JSON files that generate event hooks to develop code faster.
The page rendering engine is the core part. Generate the page from the JSON configuration file, parse the configuration and hierarchy of the components, parse the custom extension script in the configuration file, and render the page.
Platform Core Design
Our original idea was that the input would be JSON and the output would be Web Page. After some reflection, I found it difficult to implement input in a JSON, so I split JSON into config.js and mapconfig.js.
Because the Virtual Dom Tree structure is object, the amount of code is significantly reduced. Based on the realization of Virtual Dom, its extensibility is very strong.
For each node of the Virtual Dom, there are three main attributes.
The first is the Tag, which is the name of the node, or the component that the node uses.
The second is Data, the node property.
Children are all the nodes that this node contains.
In the past, the framework used was MVC. There was no framework for Model and View, and the interaction between them was solved by Controller.
This imperative development mode will lead to the low efficiency of Controller development, which is easy to become bloated and difficult to maintain.
In state it is a data source that drives the application. The View maps state to the View declaratively. Actions are responses to changes in state caused by user input on the view.
But there is no way to form a configuration file if you write events loosely in your code. So we used Vuex.
Vuex is a state management mode developed for vue.js applications and a tool for managing state centrally, with rules to ensure that state changes in a predictable way.
Vuex.store is part of mapconfig. js, which includes State, Getters, Mutations, and Actions. Component properties are in State, components embedded hooks are in Mutations and Actions, and Getters are used when needed.
Vuex provides auxiliary functions mapState, mapGetters, mapMutations, and mapActions for implementation in the platform.
The page configuration module and script configuration module are newly added.
There is an encapsulation of the common component library and business components. Take the input component as an example. When writing the input component template, you need to write some corresponding properties. The component configuration module extracts these properties and fills in the form in a visual mode.
Each component is mainly divided into index.vue and setting.js. Vue is a template file rendered on the canvas and page, setting.js is a component Settings form.
The script configuration module mainly provides vuex.store development and build internal event extensions, and will add visual configuration of regular events in the future. When the number of RD interfaces in a company increases, it will be difficult to implement interface specifications. If a platform can implement front-end interaction and interaction specifications, the RD interface specifications can be reversed and development efficiency can be improved.
Platform status and planning
Before this platform, there wasn’t a lot of specification on interfaces. Through this platform, RD interfaces can be constrained for specification. Having a specification can greatly improve work efficiency.
Before, each of us had a different code style, and the code quality was low and difficult to maintain. By dragging and dropping it, the quality will be very high.
In the past, almost all the work was done by r&d, but now part of the work can be outsourced, even when the page is simple or the platform is extreme, and zero cost development can be achieved.
Features: Make the component library richer and support as many components as possible; Provides a composite function and visual interaction configuration.
Ease of use: add UI design and optimize system interaction.
Landing: Refactoring old code, using this platform for new project development.
This is the end of my sharing, thank you!
Original address: t.cn/RolTlsM