Front – end technology selection and thinking behind reading

Read “Meituan-Dianping Financial Platform Web Front-end Technology System”

Reference article:

  • Eleven recommendations for efficient collaborative development at the front and back ends

Building a technical system reads basic principles

1. Business departure

  • The selection should be based on the characteristics of business forms and pay attention to the matching degree of business scenes
  • Have certain read business prospective

2. Group departure

  • Consider team size, technical characteristics and preferences
  • Consider existing project and technology migration costs

3. The Jungle Book

Advocate the use of simple reading techniques to solve complex reading problems

Standardization of 4.

As far as possible, make upstream and downstream links to form standards, and build quality and efficiency tools under the standards.

For example, in the development of the component library Vix, we have formed a consistent and strongly synchronous standard with UED, thus greatly reducing the time consumption of interface construction.

Automation of 5.

Connect technology with technology, simplify steps with technology, and solve the problem of reading the last “mile” from tool to user. Eg: Automated process testing, automated inheritance, automated interface testing

6. Existing reuse

Try to use the company’s existing systems and tools for selection, so as to better integrate with business and team.

Web front-end technology system of Meituan-Dianping financial platform:

Front-end technology selection involves technical units:

1. View & Component Libraries

Meituan-dianping financial platform uses Vue ecology on the mobile terminal and Vue ecology or React Ecology on the desktop.

Considerations for choosing Vue:

  • Small size, low complexity
    • Mobile terminal projects account for more than 70% of services. Vue is smaller in size and more suitable for mobile terminals than React in terms of network performance
    • In terms of code structure, Vue is more suitable for the complexity of our scene, while React is more suitable for large and relatively complex SPA
  • Low start-up and migration costs
    • The cost of learning and getting started with Vue is relatively low, and team members have high recognition and enthusiasm for Vue
  • Bidirectional binding within components, data dependency collection
    • Two-way binding is supported within the component to facilitate data response and interaction within the component
    • The unique data dependency collection mode makes the default data response and rendering efficiency higher than React

React is used for several reasons:

  • Some of the existing background projects adopt React technology stack, with less iteration and maintenance. If the old projects do not have enough migration value, they will not invest additional resources
  • Keeping a small part of the React technology ecosystem also allows for some technical diversity

2. The component library

Component library selection is an important part of front-end technology stack selection, which directly affects r&d efficiency, software quality, and interactive experience.

Component libraries can be divided into basic components, complex components, and business components.

4 characteristics of PC internal system development:

  • No products, high requirements: almost no product managers follow up, mainly to fulfill functional requirements, but the functional process must be perfect, it is better to support the use of mobile phones
  • No design: almost no design follow-up, facing internal users design income is not high
  • No tests: almost no follow-up tests, low returns, functional verification can be passed
  • To be fast: most of it is to cooperate with the client product management system iteration, may also be the construction of a new system, the speed of research and development have requirements, often this aspect of the estimate time is shorter

Therefore, there are four requirements in the research and development of internal system:

  • Component design is reasonable, the number of components is large and complete, it is better to support the use of mobile terminal
  • Component library itself should have a good design, although the number of users is small, but high activity, interface experience needs to guarantee
  • The quality of the component library itself should be high, and the quality should be ensured from the tool level to reduce errors
  • Component libraries should be able to assemble functionality quickly

3. The language

What strongly typed languages do:

  • Do strong type checking during development or compilation
  • Using a type system makes code more controllable, extensible, and collaborative
  • Avoid the null pointer problem of something is undefined

Language choice:

  1. Typescript, Microsoft
  2. Flow, by Facebook

TypeScript was chosen for several reasons:

  • RoadMap is clear, the direction is to build a type system on top of ECMAScript core, and ES8 is rumored to be adding type systems as well
  • TypeScript is a superset of JavaScript that functions only during development, generating code that does not contain any type of code but is guaranteed by the type system
  • IDE support is excellent. In addition to its own highly integrated VSCode and rapid user growth, TypeScript supports almost every major IDE on the market
  • The community is huge and the tools around it are plentiful
  • There were already several large open source projects in use, such as Angular and Express
  • R&d teams are dynamic and motivated, and many open source ecosystems are rapidly integrating

TypeScript includes type guardons, associative types, type derivation, strict non-null checking, and more.

Use the Lint tool to ensure code style and quality.

4. Collaborative decoupling

Collaborative decoupling optimizes r&d efficiency by making front-end and back-end development efforts independent of each other.

Recommended tools:

  • RAP is a visual interface management tool by analyzing the interface structure, dynamically generating simulation data, verifying the correctness of the real interface, around the interface definition, through a series of automation tools to improve our collaboration efficiency.

One of the most important ways to improve development efficiency through front-end/back-end collaboration is to reduce communication: don’t communicate verbally when you can make a paper document, and don’t communicate verbally when you can write interfaces clearly (parameters, data structures, field meanings, etc.).

5. Automate testing

6. User experience

7. Offline technology

  • Application Cache: The implementation varies from platform to platform and browser to browser. Even if the “cannot update pit” is crossed, there will still be many “cannot offline” pit, PASS

  • Service Workers: Service Workers is the technology that the team has been following up. At present, the test is close to the official release, but it cannot be widely used on iOS. It is promising in the long run and will PASS temporarily

Offline loading technology should consider the following issues:

  • Is the first load problem resolved?
  • The problem of first loading of offline solutions is a difficult technical area. I think the core problem is when to load, and will early loading result in wasted traffic when users will not use it for a long time?
  • Will too many projects using offline techniques that include first-load optimization cause load congestion?
  • Is it necessary to analyze user behavior data to more accurately pre-load offline packages?

8. Incremental update scheme

9. Monitor the log system

Exception monitoring, performance monitoring, and network monitoring

10. Security

For security in the front end we use:

  • HSTS: Standard solution for protecting against SSLStrip attacks
  • CSP: Standard solution against cross-site scripting attacks also uses a web request signature scheme on the core interface, to some extent ensuring that requests are normally sent from our clients.