The introduction

In 2019, the big front-end technology ecosystem seems to have entered a relatively stable environment. It has been six years since React was released in 2013 and four years since Vue 1.0 was released in 2015.

The whole industry has found many breakthrough directions in the continuous iteration of front-end framework, such as RN, Flutter in cross-platform, server GraphQL, Serverless. The integration of front-end and client is getting closer and closer. With the support of Node and Electron, front-end has expanded its layout to server and desktop.

At the same time, as the front-end development becomes more and more complex, the whole front-end development has experienced the evolution of artificial -> tool -> engineering -> intelligence. At present, each large factory is constantly iterating in the engineering practice, and many front-end intelligent solutions such as Low/No Code have emerged. The engineering practice has also been deeply carried out in all links of r&d, and the standardization ability of front-end r&d has been continuously improved. Moreover, with the addition of machine learning and the emergence of various UI2Code solutions, front-end research and development has entered a completely different era.

With the increasing capabilities of endpoints, there are more and more things to do on endpoints now. First of all, the direction of data visualization, all kinds of charts, maps, 3D and other data visualization attempts are becoming more and more. Secondly, with the support of ARTIFICIAL intelligence, the application of artificial intelligence on the end has become popular, reducing the interaction of the server and improving the real-time response capability of the system. Finally, with the adoption of technologies such as Webassembly, it is possible to take the front-end capabilities up a notch and do more complex on-end computing.

In order to understand the development trend of the current front end, let’s start from the major domestic Internet companies to understand their latest trends and future planning. The front series has been introduced ali, Tencent, Baidu, Ctrip’s big front-end technology system.

This lecture introduces Meituan Dianping.

Business introduction

Meituan-dianping is a local lifestyle platform that connects consumers and merchants. In the C-side, IT covers food, housing, travel, travel, shopping, entertainment and other local lifestyle services. In the B-side, IT is also deepening, with marketing, distribution, IT, finance, supply chain and operation capabilities.

Meituan-dianping started from the local restaurant review and group purchase business, and continues to expand new businesses every year, enrich business categories to enhance user viscosity, and gradually grow into a super platform for local life services.

From the business aspect, it mainly includes the following parts:

  • Home business: food and beverage take-out, delivery
  • To – store business: to – store catering, hotel, tourism, to – store integrated business
  • New business: fresh supermarket, transportation ticketing (plane, train, car, ship, etc.), shared bikes, online car booking
  • Merchant business: marketing, timely delivery, cloud ERP system, converged payment receipt, supply chain, financial loans

Large front end technology panorama

Meituan-dianping has rich business scenarios in multi-business, multi-container and multi-terminal, so it has accumulated numerous solutions and frameworks in the big front-end field. The above is a technical panorama, based on publicly available data, that is generally reflected in the big front end accumulation, although this may only be the tip of the iceberg of the company’s existing capabilities.

Meituan Dianping also spares no effort in technical promotion and publicity. There are several good ways to learn about it:

  • Tech blog: tech.meituan.com/
  • Technical Sharon: tech.meituan.com/2019/01/03/…
  • Tech Year: tech.meituan.com/tags/ Tech Year. H…

I’ll expand on each section later, and there will be plenty of references at the end of the article.

engineering

MCI – Client continuous integration

MCI is the client continuous integration platform of Meituan-Dianping. With more and more powerful client functions, larger code base and more and more participating teams, it is inevitable that the client continuous integration will face several challenges:

  • Dependency module complexity
  • Cumbersome RESEARCH and development process
  • Slow build
  • App outgoing packet quality is poor

MCI architecture system includes mobile CI platform, process automation construction, static inspection system, log monitoring & analysis, information management configuration. In addition, MCI also adopts binary integration measures to improve the construction speed of MCI.

MCI realizes the platform unity of continuous client integration, which greatly improves r&d efficiency and ensures client quality. It also realizes the automation of R&D process, improves packaging speed and efficiency, and is equipped with capabilities such as package size and code quality detection.

See Resources [1] for details.

CAT – Full monitoring platform

CAT (Central Application Tracking) is an open source distributed real-time monitoring system developed by Meituan-Dianping based on Java. The Infrastructure Department of Meituan-Dianping hopes to provide industry-leading and unified solutions in basic storage, high-performance communication, large-scale online access, service governance, real-time monitoring, containerization and intelligent cluster scheduling. CAT is currently positioned as a unified monitoring component in the application layer. It is widely used in middleware (RPC, database, cache, MQ, etc.) framework to provide system performance indicators, health status, real-time alarm and other services for each service line.

CAT has been adhering to the principle that a simple architecture is the best architecture since its development. It is mainly divided into three modules: CAT-client, CAT-Consumer and cat-Home.

  • Cat-client provides the underlying SDK for business and mid-tier burial points.
  • Cat-consumer is used to analyze data provided from the client in real time.
  • Cat-home serves as the control end for users to display.

CAT project started from 2011, now about three thousand applications, the entire production environment monitoring server from zero to thousands, and then to today’s more than twenty thousand the size of the entire project from lasted more than five years seems to be a project, but even more than five years of such a project, at present there are many requirements that need to be developed.

For details, please refer to reference [2][3].

Logan – Mobile integrated log library

Logan is the basic mobile logging component of Meituan-Dianping Group. The name is a combination of Log and An, which stands for individual logging service. Logan is also known as “Uncle Wolverine,” and we want the product to be as sharp as That. Logan has been iterating steadily for over a year. At present, most apps on Meituan-Dianping have access to and use Logan to collect, upload and analyze logs.

At present, the storage SDK part is open source. The project address of GitHub is github.com/Meituan-Dia… .

In mobile apps, the most worrying scenario is that the user’s error scenario cannot be restored. The scattered logs cannot trace the user’s operation completely, leading to the failure to deal with online problems in a timely manner or even recurrence.

The Logan framework is a mobile base logging component that collects complete user logs automatically/manually and presents them in a friendly, aggregated front end system format to help developers quickly locate problems.

Logan’s core system consists of four modules:

  • Log input: code-level logs, network logs, user behavior logs, crash logs, and H5 logs.
  • Log storage: The logan-developed log protocol solves the problem of local aggregated log storage by adopting a “compress first, then encrypt” sequence and streaming encryption and compression to avoid CPU spikes and reduce CPU usage.
  • Back-end system: The back-end is the data center that receives and processes the data, which is Logan’s brain. It has four main functions: receiving logs, log analysis and archiving, log analysis and data platform.
  • Front-end system: R&d personnel search logs through the Logan front-end system and enter the log details page to view specific content, so as to locate and solve problems. With data visualization, screening, filtering, search, sharing and other functions.

See Resources for details [4]

ERA – Full stack front-end framework

Front-end development involves creating the project, type selection, the business logic of the framework and configuration rbis, collect log, build, test and application service, on-line inspection and a series of link, and there are a lot of technology selection in each link, so constantly develop students expenditure of energy, but also it is difficult to achieve the unity of the technology stack and standardization, and lack of technical precipitation, Every new project development needs to start from scratch.

ERA provides a full set of front-end engineering capabilities for appropriate convergence in the project development process, while providing sufficient customization capabilities through plug-ins.

  • Initializing projects: Standard project templates can be generated by plug-in integration with standard services based on the group base, and project templates based on different business scenarios can also be provided
  • Development and debugging: Plug-ins can quickly integrate various services, such as ABTest, Proxy, Mock, PWA, etc., which can help business development students to write business logic code quickly
  • Build configuration: Based on Webpack and with Babel/ESLint best practices built in
  • Deployment publishing: Node services and purely static front ends can be published

The code quality

ESLint

In order to achieve the unity of JavaScript code specifications within the team, we designed a complete set of technical solutions after analyzing and thinking about the problems existing in the large-scale application of the team. The solution includes four modules, including unified ESLint rule configuration for multiple scenarios, code integration delivery check, automatic access tools, and execution status monitoring analysis. Through coordination and cooperation of each module, the problems mentioned above are solved together, which not only reduces maintenance cost and improves execution efficiency, but also ensures the unification of code specifications.

  • Unified JavaScript specification for multiple scenarios: This module is the core of the whole solution. With the help of ESLint’s features and hierarchical classification structure design, it ensures the consistency of basic rules and supports the selection of different scenarios and technologies.

  • Code Integration Delivery Check: This module is the guarantee for solution implementation, integrating code static check into continuous delivery workflow. In terms of specific design and implementation, the developer’s application execution cost is reduced through customized integration inspection tools while ensuring the delivery quality.

  • Automated access and upgrade solutions: Provide “one-click” access/upgrade capabilities through command line tools while being integrated into team scaffolding, significantly reducing project access and maintenance costs.

  • Performance monitoring and analysis: To understand the application status and effect of the solution by burying the tool operation and code integration delivery inspection process, collecting and analyzing the inspection results.

See Resources for details [5]

Hades – Mobile static analysis

After selecting the basic scheme according to the architectural objectives of Hades, we take a look at the overall technical framework of Hades, which can be represented by the four-tier architecture as shown below:

Here is a brief description of the different responsibilities of these layers.

  • Compiler architecture layer. Many of Clang’s advantages have already been mentioned, and this is the foundation of Hades.

  • Hades core layer. At the compiler architecture level, we use Clang to get an abstract syntactic structure of the code to represent the AST. The Hades core layer’s responsibility is to parse the AST into a higher-level semantic model that people can easily understand.

  • Hades interface encapsulation layer. The abstracted model provides developers with rich model access interfaces in the same way that Clang provides rich AST access interfaces.

  • Static analysis applications. With the Hades interface encapsulation, we don’t need to know how the underlying model is generated, and we can make Lint or other monitoring and analysis tools at this layer.

Unlike traditional Clang APIS or OCLint, HadesModel is a higher level semantic expression based on THE AST. It can be serialized to JSON format and describes the complete compilation unit. This structured information makes static analysis much closer to the mindset of developers reading and understanding the source code.

As one of the infrastructure of Dianping’s mobile research and development, Hades has been widely used in practice, providing support for daily maintenance and code analysis of large App projects. Static analysis based on HadesModel has many advantages, such as easy to use, low cost of development and access, ability to understand code semantics, and global analysis ability.

See Resources for details [6]

The resources

[1] How does McI-dianping Thousand Mobile R&D team do continuous integration? : mp.weixin.qq.com/s/XY3u-bMgs…

Open source real-time monitoring system of CAT [2] 3.0 release: mp.weixin.qq.com/s/9uePYJpVE…

[3] depth profiling of the open source distributed monitoring CAT:tech.meituan.com/2018/11/01/…

[4] Logan – Meituan comments on open source mobile terminal based logging library: mp.weixin.qq.com/s/XM4bhncHz…

[5] ESLint in a large team of application practice: mp.weixin.qq.com/s/jb8yozm-p…

[6] Hades – mobile terminal static analysis framework: mp.weixin.qq.com/s/CwKtLnxMW…

Write in the last

This is the first part of the decryption of meituan Dianping’s big front-end technology system, mainly introduces the precipitation related to engineering and code quality, of course, these are only based on public data collation, just the tip of the iceberg of the whole technical system.

Finally, Meituan Dianping is recruiting a large number of front-end senior/expert engineers in Shanghai and Beijing. If you are interested in close contact with meituan Dianping’s big front-end technical framework, please send me a private message for internal promotion.

Recommended reading

Declassify the front-end technology System of BAT and other large domestic factories

Deciphering the front-end technology system of BAT and other large domestic factories

Decryption of domestic BAT and other large factory front-end technology system – Tencent

Deciphering the front-end technology system of BAT and other major domestic manufacturers

“Dad” has been engaged in Internet research and development for more than 10 years, and has worked in IBM, SAP, Lufax, Ctrip and other domestic and foreign IT companies. Currently, he is in charge of the big front-end technology team related to catering in Meituan, and regularly shares his thoughts and summaries on big front-end technology, investment and financial management, and personal growth.