1 the introduction

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. This is the fourth chapter of dachang’s front-end technology system. The first three chapters have described the technological development of Alibaba, Tencent and Baidu in the front-end technology in recent years.

This one starts from Ctrip.

Ctrip technology panorama

Mobile technology products

Mobile technology products are divided into four modules:

  • Technology platforms: MCD (Continuous delivery platform), APM (Performance Monitoring platform), MTS (Log Removal platform) and MTP (wireless technology platform)
  • Communication layer: communication tools, message push platform, server push
  • Framework layer: covers common capabilities in App, such as device information, location information, hot update, network communication, configuration, user behavior buried point, etc
  • Business layer: Common business components, such as sharing capabilities, multimedia, calendars, maps, and so on

Big front-end technology framework

At the level of big front-end technology framework, Ctrip has deposited three technical frameworks for different application scenarios:

  • CRN framework: Ctrip React Native, a framework customized based on RN, improves the surrounding packaging, deployment, monitoring and other capabilities
  • Node platform: The framework of Node service, covering the whole process from coding, compiling, publishing and monitoring
  • Hybrid platform: Used for Hybrid WebView framework in App

New technology exploration

  • New technology: HTTP/2, VOIP
  • New products: small program, fast application, VR/AR

MCD – Continuous Delivery platform

MCD has undergone several large iterations and gradually become ctrip’s internal continuous delivery platform, covering the whole process of R&D in the integration stage, test stage, release stage and operation stage.

MCD 1.0

MCD1.0 solved the problem of online packaging of the system, and realized the ability of timing packaging, code static scan, automatic test package – white screen monitoring through CI/CD.

In the continuous integration phase, code scanning and smoke testing functions are connected, code static inspection is carried out through Infer and Sonar, and unit testing capabilities are integrated to provide single test results and coverage.

Smoke tests can detect white screens and perform multi-machine compatibility tests to detect problems ahead of time by comparing content and images.

Through integrated compilation, the duration of App compilation is continuously reduced and the efficiency of R&D and testing is improved.

MCD 2.0

MCD 2.0 redefines MCD to encompass a broader range of aspects, including integration, testing, release, and operations. In addition, each module is packaged to generate bundles, and then the Bundle integration can achieve the capability of fast package delivery in 2-3 minutes.

MCD also adds a number of capabilities:

  • Release and upgrade: Dynamic delivery of Hotfix, Bundle, Hybrid/RN and other contents, whitelist and grayscale publishing capabilities, improved download efficiency through differential mode, and real-time delivery of the market can be viewed.
  • Configuration center: Supports the delivery of configuration information by platform, version, channel, ABTest and other dimensions to achieve App configuration information management capability.
  • Crash collection: App Crash/JS Error collection, and support real-time alarm, multi-dimensional search, code reverse lookup and other capabilities.
  • App Size management: Manages App package Size based on service modules

APM – Performance monitoring platform

APM performance monitoring platform mainly focuses on performance, crash, anomaly and other data monitoring, Ctrip has also done a lot of work on performance and anomaly monitoring:

  • Network performance: The network communication SDK converges, and the underlying network communication capabilities of the three terminals are unified. The network SDK can manage the IP address pool, link pool, and request pool in a unified manner to optimize the performance. In addition, it can monitor the error situation in the whole link of network request, and achieve 99% success rate of business scenario connection.

  • Page performance: TTI is used in page performance statistics, and changes in page text are detected through traversal to determine whether TTI is reached. According to different page forms, different performance indicators are formulated.

  • Exception handling: Collect abnormal delays and automatically assign them to different business teams. The crash information can be collected to consolidate the operation path and related information of users.

MTS – Log removal platform

Collect all relevant data in the App, such as network request, page jump, image request, buried point of user behavior, Cat log and Web service log, and connect all data in series through the timeline, which can help the r&d students quickly restore the on-site troubleshooting problems.

In the log display, a user session is taken as the collection, and different page information is displayed according to the timeline. Meanwhile, the detailed information of each page provides all network requests, buried points of user behaviors, and buried points of independent r&d on the current page.

MTP – Wireless technology platform

Build a wireless technology platform, deposit the general capabilities in the App, and reuse them into multiple apps to avoid repeated wheel manufacturing and improve the standardization and efficiency of research and development. At the same time, platform governance provides functions such as service registration, troubleshooting, service fusing, view and call, which facilitates the operation of platform technology.

CRN – Ctrip React Native

CRN is a mobile terminal cross-platform/dynamic framework deeply customized by Ctrip based on React Native. Currently, it has been applied in a large scale in actual business projects, with more than 100 pages, and the NUMBER of PV pages is more than two times that of traditional Hybrid H5 pages.

Based on the optimization of React Native framework, CRN, a cross-platform development framework suitable for Ctrip business, provides life-cycle support from development, release, operation and maintenance.

  • A development framework that provides support during the development phase. Includes tools & documentation, components and solutions, cross-platform connectivity, and code hosting. Tools mainly include CLI and Packer, documents include API documents and design documents, cross-platform is mainly to erase the API between different components of the platform, code hosting is for the convenience of the business team, especially the new team to join the CRN development, can reference the existing business code to get started quickly.

  • Performance optimization is mainly to solve the performance problems of the first screen rendering and the stability of RN framework. In order to solve the first screen rendering performance problem, we developed framework splitting and preloading, business loading on demand, business preloading, and progressive rendering solutions, which will be described in more detail later.

  • Release operation and maintenance mainly provides release system and performance and error monitoring platform, so that business development colleagues can have a complete system to find and solve online problems.

Can look at the details: dry | nearly word long dwelt on the engineering practice of ctrip large-scale application of RN

The Node platform

Ctrip officially launched Node.js in September 2017, and the number of applications has grown eightfold in two years, covering 33 business departments of the company.

The engineering construction of Node.js covers all aspects of development, construction, testing, release, operation and maintenance:

  • Development: Provide different scaffolding projects (SSR, DA Service, Desktop Application) according to business scenarios, provide core middleware, data Mock platform, and docker-based development environment.
  • Build: install dependency packages, check dependency package versions, build object files, and provide static and secure code scanning capabilities.
  • Testing: provides automated testing, integration testing, gray testing and stress testing
  • Release: provide portable cloud and public cloud release ability, grayscale release and rollback ability, realize the internal NPM package development and release process and Git highly integrated
  • O&m: Log monitoring and troubleshooting capabilities

Can look at the details: dry | discuss Node. Js in the application of ctrip

GraphQL-BFF

The core idea of GraphQL-BFF is to integrate multiple services into a centralized data graph.

The data structure contract for each service is put into a large and complete GraphQL Schema. Without any modularization and decoupling, the development experience would be terrible. Every team member, to modify the same Schema file.

This is clearly unreasonable. The graphQL-BFF development pattern should have a one-to-one correspondence with the service domain model. Then, in some form, the services are naturally integrated together.

In terms of technology selection, TypeScript is used as the development language, running on Node.js V10.x, Koa v2.x as the server framework, and Apollo-server-KOa module is used to run GraphQL service.

Apollo-graphql is one of the most well-known and mature GraphQL frameworks in the Node.js community. A lot of details were done, and there were some relatively cutting-edge explorations, such as Apollo Federation architecture.

Can look at the details: dry | word long comprehensive analytic GraphQL, ctrip micro service under the background of back-end data before and after the interaction

Write in the last

In terms of organizational structure, Ctrip has a basic RESEARCH and development team to ensure that it can converge and settle numerous basic platform services and technical frameworks in the big front-end field, forming a relatively complete and unified basic framework capability, which well supports the rapid development of multiple apps and businesses.

This article tries to summarize ctrip’s current technical system from all aspects of the big front end, but there will be many omissions. Meanwhile, open information is limited after all, so I hope relevant students can communicate with each other more.

This is the fourth chapter of dachang front-end technology system decryption series. There will be other dachang content in the future. The wonderful content will continue.

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

“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.