In my last article, I pointed out some problems and solutions in our current front-end team in the practice of “front and back end separation” at the Big BU level, and wrote out the implementation ideas and benefits of unified view service in detail. This article is mainly about front-end iteration and how we solve the efficiency of upstream and downstream collaboration.
background
Our goal is to improve the efficiency of front-end iteration and upstream and downstream collaboration. We start with four starting points:
How to improve the reuse rate of resources, components and codes, and improve the overall research and development efficiency; To improve the upstream and downstream cooperation efficiency of the project, which involves the whole process from UE to UI to FE and QA, requires strong driving force and sufficient persuasion. Improve the human efficiency ratio, one person against three, improve the human efficiency ratio of the front-end developers in the project, so that the front-end can do faster, more and better; Finally, the overall method is sorted out, and this part of the ability to improve the efficiency is applied in Web, WAP, small programs to implement the universality.
solution
First, the construction of front-end material system, redefine and unify the front-end development standards, the construction of front-end material resource system, including design and unit testing resources; Second, implement instrumental management, improve the engineering system, unify the front-end development process and technology stack, ensure the resource reuse rate; Last and most important is progressive development, as it determines whether the optimal reuse rate can be achieved after the material is finished.
The overall architecture
Q: What are materials? A: Any resource that can be standardized to specifications and reused across projects, teams, and members. We refer to these resources collectively as materials.
There are four objects involved in the production and consumption of material resources: developers, users, designers, and products/operations. To this end, the materials market provides standardized materials resources, including project infrastructure, component libraries, blocks, and templates. The basic framework is the model framework of the project, also known as Boilerplate. The component library is the front-end component library developed based on the Union Design Design specifications proposed by the Design students in the department, which supports both Web and small program host environments. Blocks can be simply understood as assemblies of components, which provide a higher level of business encapsulation capability than component libraries, but also make them less pure than component libraries. A template is a style template for various sites that combines the aforementioned infrastructure, component libraries, and blocks. Allows developers to minimize their workload.
The middle part of the figure shows the supported host environments, including Web, mobile, and applets. The Web terminal supports TypeScript+Vue/React framework mode for development, while the mobile terminal supports VW/REM layout and Hybrid mode for development. For details, please refer to the detailed design of dynamic terminal scheme. In addition, due to business reasons, small programs currently support wechat small programs and intelligent small programs.
At the bottom is the engineering system provided by the Materials market, which provides CLI tools and GUI tools. CLI tool used in front-end project development, so that FE can easily generate and consume materials; In addition, the material market also provides GUI tools, so that material consumers can quickly prototype the project and template design by dragging controls. Please wait for the subsequent updates of the specific details.
Together with our Design students, we launched materials related Design resources, including the Union Design specification. In order to reduce the resistance of materials landing in the project, the material market also provides perfect learning resources, including documents and tutorials, and organizes regular training and sharing.
Finally, the function of material market is realized as a whole.
Component library design
We mainly consider two aspects in component library design:
-
Component classification
- Basic UI components
- Composite components
- The business component
-
Component boundaries
- Cross-border operation
- Side effects
- invasive
- Circular dependencies
Components are first classified into three levels according to their intrusion and purity (reuse degree) to the business, as shown in the figure below:
The key to component library design is the boundary of components, each component is a very independent and non-detachable smallest unit. The first is to forbid the component to operate beyond the boundary, let it only deal with the internal affairs, do not interfere with the external affairs. The second is side effects, which are forbidden (as few as possible). If you know functional programming, you know the pros and cons of side effects. The third is invasiveness. It prohibits the invasiveness of pure puppet components (every component in the component library is a pure puppet component) to the business, because the higher the invasiveness, the lower the repetition rate, the harder the component library will be for others to use. Finally, disable circular dependencies within components.
Finally realize
In the final implementation, the whole is divided into four layers, the bottom is the technical implementation, the upper is the design resources, and the upper is the five basic components provided by the component library, including basic operations, forms, views, navigation and data processing. The uppermost layer is the access business side. The component library scheme of the whole front-end business direction is completed from bottom to top.
Upstream and downstream collaboration
The core of the optimization process of upstream and downstream collaboration efficiency is efficiency improvement and material reuse.
-
efficiency
- Interaction design
- Unit testing
- Return to the cost
-
Material reuse
- The material sharing
- Generation and consumption
- Business migration
- Incremental development
The overall process is shown as follows:
Material management
The material used
The function of material management is for the use of material developers, responsible for the support of different platforms for materials, creation, generation and list management, you can upload materials in the management list for consumption.
For material consumption, provide material preview, download, use, and source code view functions. The CLI command is automatically generated when the material is used. You can run the command on the terminal to use the material in the project.
In addition, some functions in the project can also be removed as materials for use in other projects. This enables sustainable iterative and incremental development. In this way, material resources can be shared and reused among different teams, projects and members to improve the overall collaboration efficiency of the front end.
Overall revenue
6 projects for internal access; Open source two component libraries in the company’s internal NPM; Four products have been launched in BU, namely, Union Design specification, @Baidu/Union-Design, @Baidu/Union-design-wechat and Marble-CLI /GUI tools.
In terms of code reuse rate, the project basic framework is 46.1%, and the business logic is 21.87%; The iteration cycle of a newly developed project is shortened by 23.8%, and the iteration project is shortened by 21.4%;
The last
Please contact the author if you have any questions
