After two years of development, the front end team, as an important support for various businesses in the automotive aftermarket, has developed from scratch to perfection with the continuous development of the business, which precipitated the front end technology system supporting the business.
background
For the construction of technical system, we want to form a systematic solution through some methodology and infrastructure, so as to better meet the scene requirements of our business, front-end team and cooperation team.
The principle of
Based on the background of the above business, front-end team and cooperation team, the principle of our technical system construction is to form a front-end closed loop. Externally, interface – based, unidirectional dependence on the team. Internally, we can control the details of each cycle of project from development to final launch and maintenance. We focus on standardization of system construction, developer experience, and phased and incremental enhancement of the construction process. Ultimately we want our system to be efficient and high quality to support our business.
A panoramic view
Finally, our technical system, vertical direction, application focus, code, engineering, horizontal direction, divides the technical system into three stages.
The first phase focuses on business support. Application, pay attention to the front-end and client, server side separation. In terms of code, the idea of data-driven and componentized programming is introduced to create the basic library, component library, service-oriented SDK and other infrastructure. In engineering, I paid attention to the construction of specifications, tools and systems for each cycle from project creation to online maintenance.
The second phase focuses on business optimization capabilities. In terms of application, ReactNative was introduced to improve rendering performance in the scenario with low equipment configuration, and the offline cache support of containers was increased. For scenes with emphasis on display and light interaction, we started to do server-side rendering. In terms of code, we used JSX to do page templates, abandoned PUGJS, and based on the unified JSX, began to provide compilation pre-rendering, server-side pre-rendering and other technologies. In engineering, ReactNative and SSR project templates were added, and Apollo was introduced to control the disaster recovery bottom switch.
The third phase focuses on business driving capability. In application, independent application containers should be created in the post-market to uniformly converge risks, improve the consistent user experience under various channels, and promote public services under the pan-front-end scenarios. In engineering, we built the system based on the component library, improved the efficiency of operation support, created test and mock platforms, and improved the efficiency and quality of the whole RESEARCH and development system.
application
Focus on front-end and client, server separation, client-side container optimization, page performance optimization, pan-front-end service sinking.
code
Client code
In the client side, the use of data-driven, component-based programming ideas, based on the basic library, component library, write component logic, business logic, the use of routing page management.
Server code
On the server side, SSR functions are mainly provided. On the whole, based on koA2, React and other basic libraries, middleware such as general rendering and automatic routing are written. Data prepull is done in the control layer, and request distribution is done in the routing layer.
engineering
In engineering, provide scenario-specific project templates during project creation. During the development and debugging phase, we provide support for code debugging, interface debugging, code quality assurance, automatic optimization, pre-rendering, etc. In the joint adjustment and test stage, front-end environment Docker, packaging tools, proxy tools are provided. In the on-line stage, the front-end service of page & service is on-line, and the CDN of static resources is on-line. During the maintenance phase, online health monitoring and disaster recovery bottom switch are provided.
Component library
For component library construction, our goal is cross-business, cross-end use, first promote products perpendicular to their respective businesses, design together to produce cross-screen, cross-business design standards. Based on design standards, the front end focuses on the behavior of components, layout, skin constants and variables, and the design of the underlying abstract components. Take toast, loading, popover, dialog, for example. In terms of behavior, their constants are showing a floating layer on top of the document flow. Their variables are whether they lock up blank space, whether they close automatically, etc., so we abstract the underlying overlay component.
To cross the toast, for example, in their behavior, the skin is consistent, in the layout, they are constants, displays a floating layer, containing a paragraph of text, their variable is, floating layer size, position is different, so we can abstract the underlying toast components, to based on the basic component for the achievement of the end of it, based on the basic components, We then do business components, and eventually form a cross-end, cross-business component architecture.
ReactNative access
We encapsulated the Web-like container based on ReactNative under the existing technology system, and the interaction mode of the container was completely consistent with webView. Then, we reused the existing base library, component library and development mode in the system. Finally, we reused the engineering system and extended some processes. We will unpack the packages produced by ReactNative and generate a resource index file similar to HTML by static resource external link. In the maintenance stage, we will reuse the existing Dr Monitoring system and use the old version of WebView for disaster recovery.
Stability construction
For stability construction, we start from four perspectives: interaction, application, code and engineering. In terms of interaction, we pushed for stateful operations, retried errors, and minimal main process interaction links. In application, we do resource disaster recovery, container disaster recovery, online monitoring, and one-click degradation. In terms of code, we implemented external dependency module encapsulation, external data verification, 100% test coverage of core code, standardized module reuse, and subsequent introduction of more robust languages. In engineering, we automate detection and optimization, reuse modules and tools that have been tested in practice, and develop systems and standards for troubleshooting.
The above is a brief introduction to the construction of didi’s front-end technology system in the post-market. At present, the overall system construction is at the end of stage 2. If you want to join us, you can send email to [email protected] for cooperation.