Alibaba – Big Nail – front end team – candle elephant original article to share this article, I hope to be helpful to the students on the road, but also welcome any time private letter, big Nail team needs to dare to dare to do you, many positions continue to recruit, in order not to affect the reading knowledge, detailed recruitment information see the end of the article.

Whether it is small program or H5, the change of the display form of front-end (GUI programming) has always been the biggest obstacle in the reform of front-end development efficiency. In this paper, a new concept “front-end domain model” is abstrused to rethink the research and development mode, in order to discuss how to reduce the front-end research and development manpower and improve the development experience.

Part I discussion of norms/rules

“No standard can not be fangyuan”, the consistent compliance with the standard can convergence noise, to achieve consistency. In the field of software engineering, when specifications evolve into rules, the continuous delivery of software development will be kept perpendicular and orthogonal due to the compliance of rules, and the change of entropy can also have visible convergence.

In the process of front-end development, I abstract the development process into the following formula:

1. Front-end project = PageCompose 2. 3. PageCompose ≈ Router(route) Or Navigation(Navigation) 4. ComponentCompose ≈ Layout

At present, most of the solutions on the market are focused on one of the dimensions, which can be roughly divided into the following categories:

UI solution:

  • Ant-design: React front-end Design language, the integration of UI specifications, users all over the world, Github nearly 60K star.
  • IView: Front-end UI library for Vue, Github Star nearly 24K

Data Solution

  • Lodash: the old JS tool library, users around the world, Github nearly 45K star.
  • Rxjs: Asynchronous Streaming Solution, Github Nearly 22K STAR
  • Immer: Immutable data processing scheme, Github near 17K STAR

PageCompose solution

  • React-router: Routing scheme for React, Github near 41K star

Overall solution:

  • Umi: Provides the React application solution based on plug-ins.
  • Angular: A comprehensive H5 application solution.

The well-known frameworks or libraries listed above are a vote of the minds of developers around the world and are worth studying and learning from.

As a heavy user of the above solutions, I am strongly aware of the great guiding role of norms and rules in the software development process. These norms and rules are mainly reflected in the following points:

  1. Experience great API design: explicit IO(input and return).
  2. A clear objective: To be highly disciplined in developing a solution area.
  3. Single use and design specification: a single strong specification allows users to “learn at one place and use everywhere”, which is a very important point for the spread of a technical product.

Part II Research and development mode of front-end field

As the saying goes, “to do a good job, you must first improve your tools.” A good r & D model is an important guarantee for continuous delivery of software. Front-end is the scene with the highest delivery density in software development, and the stability of front-end is seriously threatened by frequent changes and releases. Therefore, “excellent” R&D mode is extremely important for front-end development. In John Ousterhout’s book “A Philosophy of Software Design”, he mentioned that the core of Software Design is to reduce complexity. The “excellence” I want to say here will also focus more on reducing front-end complexity.

Most front-end development processes have a similar hierarchical structure:

Modern front-end Development has a very mature Data Driven Development framework React/Vue, UI component library, function library, network library, asynchronous processing, Data processing and other fields also have a lot of excellent precipitation. However, in today’s flourishing ecology, front-end development is still the biggest human bottleneck in many businesses and companies, and the improvement of front-end human efficiency has always been a head-turning proposition.

The author believes that there are several urgent problems to be solved as follows:

  1. Poor reusability of UI layer (front-end interface) : a large number of front-end UI codes adopt VM(View + Model) schemes and are developed for diversified design drafts, so the code differentiation cannot converge.
  2. Poor reusability of Data layer (Data processing) : although the Data communicated by the server to the front end is already a View object, it still has distinct Domain attributes. The difference of Data structure directly leads to the convergence of reusability of Data processing logic.

Let me give you an example. The figure above is a very classic product presentation page. However, these two pages belong to different product lines. The physical isolation of developers and slight differences in UI directly lead to 0% of the front-end code reusable from each other, requiring two front-end personnel to complete the requirements.

Dig a little deeper. Can we blame product, design, operation and other students for the poor reuse of the above front-end code? In other words, students of product, design and operation, don’t they have similar problems? The efficiency problem brought by repeated work is always an unavoidable problem.

For front-end development, I would like to propose a new concept in the r&d process: front-end domain model to solve the above problems.

Part III Front-end domain model discussion

FrontEnd Domain Model: A UI Model for business Domain abstraction.

After the front-end domain model is abstracted, the whole R&D process will be reconstructed. The following blue areas will be added to the process nodes.

As shown in the figure above, after the reconstruction of the R&D process, the “business UI” in the front-end development is programmed for “FDO”, transferring the personalization of business to Adapter, so as to achieve the purpose of “business UI” reuse (Low Code).

In the actual development, the front-end students need to do is to “select the appropriate business UI template” -> “Implement corresponding FDO” to quickly launch a business module.

The biggest problem solved by this development model is the continuous delivery of software development. ** The complexity generated by each requirement iteration is changed from exponential to linear by the granularity of the front-end complexity.

Before: Business iteration complexity ≈ ViewModel complexity = View complexity * Model complexity

After: Complexity of business iteration ≈ complexity of Model + complexity of View

The benefits of reduced complexity are not only improvements in front-end efficiency, but also improvements in front-end stability.

Part IV further opening up, or even commercialization?

For big companies such as Tencent, Alibaba and Byte, open platform has a very high strategic significance in the whole business system. A large number of ecological ISVs, how to develop applications that meet the requirements, the most direct embodiment is the consistency of the front-end UI.

With the aforementioned r&d process innovation and the development of high-quality front-end domain model (FDO) specifications, ecological ISVs can be easily reused and comply with the corresponding UI development specifications. With appropriate modifications, they can quickly develop applications that meet the requirements, not only reducing costs, but also improving efficiency.

The space in here, as you can imagine, is of great significance to the liberation of human costs.

Part V conclusion

This paper is my thinking in the actual front-end RESEARCH and development process, combined with the practice of the team, which can be regarded as a primer.

There has been a lot of discussion and practice in the industry about materials in R&D efficiency (Low Code). I try to look at tuning and standardizing the R&D process from another perspective, the “front end domain model.” High quality continuous delivery has been achieved by unpacking complexity through standardized research and development layering.

We have had some practice with the introduction of this new concept FDO and how it is implemented in the team, which has proved to be a good improvement in r&d efficiency. Of course, I think there’s a very clear way to do it better.

This article is more partial some concept discussion, did not talk about the concrete implementation, welcome to discuss.

General principles and methods for reducing software complexity