In order to reduce the contradiction between the product and front-end developers, and continuously reduce cost and improve efficiency, Meituan Medical Technology Department built a cross-end integrated rich text management platform Page- Page. This paper systematically introduces the positioning, design ideas, implementation principles and achievements of the platform. Hope these actual combat experience and summary, can give you some inspiration or help.

One, the introduction

In the Internet community, we’ve all heard of the love affair between development and product managers. In the final analysis, it often starts with a simple demand change, and then you fight and bicker with each other. Finally, conflicts escalate and even bring serious consequences.

In this context, if some pages with relatively simple functions and frequent demand changes are directly handed over to the product or the operation itself through the platform, can the contradiction between the product and the developer be reduced to a certain extent?

Second, the background

Of course, the above situation, Meituan is no exception. In recent years, each business of Meituan Home business group (including Meituan takeout, Meituan delivery, flash purchase, medicine, group good goods, etc.) has been developing steadily. There are nearly dozens of operation teams in front of the business, and each operation team has different operation rules, and there are some subtle differences in these rules. At the same time, the content of the rules will change and update according to the operation season, festival, geographical location, etc. Specifically, these requirements have the following characteristics:

  1. Large demand: The business develops steadily, and the business needs continue to pile up, even some services grow exponentially, and the business direction involves some requirements such as service rules, message notification, protocol documents, and rule introduction.
  2. Frequent changes: In the face of the requirements of market supervision and legal affairs, as well as the impact of new business adjustment and other factors, it will involve frequent changes in requirements, such as some business FAQ, product introduction, protocol documents, business rules, system update logs and other pages, requiring quick response and timely launch.
  3. Low complexity: These pages don’t have complex interaction logic, and developers can spend more time developing complex features if these simple pages can be handed over to operations/products.
  4. High timeliness: there are many temporary business needs, and the life cycle is short, with the characteristics of regular offline and periodical online.

Based on the above characteristics, in order to improve the efficiency of research and development, Meituan Medical Technology Department started to build a cross-end integrated rich text management platform, hoping to provide production and research solutions to solve this kind of problems. Department, however, the initial goal is to develop a set of effective tools, solve a lot of such as help page document, agreement, alerts, rules, such as static page production and release of problems, make products and operating students can independently complete the static in the form of wysiwyg page production and release, thus shortening the communication cost and r&d cost.

However, as more and more business units started consulting and using the platform, we continued to refine and expand many features. After several versions of design and iterative development, the platform was named Page-Page and registered as a public service within Meituan, which began to provide better use experience for more students within Meituan.

This paper will systematically introduce the Page- Page platform positioning, design ideas, implementation principles and achievements. We also hope that these practical experience and summary can bring some inspiration and thinking to more students.

Three, cross-end integration rich text management solution

3.1 Platform Positioning

We want Page- Page to be a quick, one-stop web publishing platform for product, operations, development and other users.

  • For product operation, they will be able to visually to create or modify some instructions, agreements, news articles, no development scheduling, save to the development of the secondary messages such as cumbersome process, also need not wait for a long time, so as to achieve flexible fast visualization release and management of the page.
  • For developers, they can write code online, and achieve second release online, and support ES 6, JavaScript, Less, CSS syntax, we also provide basic tools, chart library, can generate rich and diverse pages. Help the developer quickly realize the data chart display, design specific styles, complete a variety of interactive logic and other requirements.
  • For project managers, they can clearly see the overall requirements flow status and development log information, providing a powerful “grip” on operations management.

Generally speaking, the traditional development process is like this: first product requirements, then convene R & D review, finally r & D students develop and deploy online; When the demand goes online, if there is any problem that needs feedback, the product will be communicated with and repaired by the r&d students. This development process is also a common development process in Internet companies at present.

Meituan Page- Page platform development process is: first product students put forward requirements, and then their own Page platform for editing and publishing online, when the demand online after the problem needs feedback, directly can reach the product students, they can usually repair their own. If the requirements need to be customized, or need to do some complex logic processing, then let the research and development staff cooperate with the platform for development and release online.

To put it simply, for pages with relatively simple functions and frequent changes in requirements, the traditional development process will increase the cost of production-research communication and R&D scheduling, so the traditional scheme is mainly applicable to complex functional requirements. The Page Page platform development process is not suitable for complex functional requirements, especially for simple functions and frequent demand changes of Page requirements.

To sum up, it can be seen that the two development processes actually play a complementary role, if used together, can not only reduce workload, but also achieve the purpose of cost reduction and efficiency improvement.

3.2 Design Roadmap

We originally designed the Page-Page platform with the simple intention of providing products and operations with a tool to quickly create and publish web pages using rich text editors. However, in the process of use, many defects also slowly began to be exposed, roughly the following problems:

  1. What if a simple rich text editor doesn’t give you the page you want?
  2. Would it be friendlier if you could import the desired template?
  3. How do I view the access data for this page? How can I monitor this page for performance issues?
  4. Are there security risks to the published pages?

Therefore, we have carried out some thinking and research on these issues:

  • When the rich text editor can not meet the desired effect, we can introduce the WebIDE editor, which can be realized by second editing.
  • If a system wants to make users use it efficiently and conveniently, it must improve its surrounding ecology. Need to be equipped with perfect template materials and materials for users to choose flexibly.
  • If the user wants to understand the operation of the page, then the performance data of the page running, the data of the access is also essential.
  • If there is improper speech in the published content, it will cause uncontrollable legal risk, so the content risk review is also essential.

It is easy to implement a feature, but if you want to achieve a relatively perfect feature, you must work hard, think more and research more. Therefore, we continue to explore and extend a series of functions around these problems:

  1. Rich text editing: a powerful and simple visual editor that makes everything simple and intuitive. Product students can create and edit web pages independently through the editor. Even if they have no program development experience, they can also operate freely through the rich text editor to achieve the effect they want. Finally, they can achieve one-click rapid release and online.
  2. WebIDE: Customization requirements, such as some communication and request requirements with clients and back ends, as well as the need for secondary processing of product-created HTML, can be implemented with JavaScript code based on WebIDE. Students with professional development experience can also choose to use front-end framework jQuery, Vue, Echarts or tool libraries Lodash, Axios to achieve online editing code.
  3. Page management: flexible and convenient page management. You can view, edit, authorize, log out, compare versions, log out, and roll back documents that you have permission to use. You can also search documents conveniently.
  4. Template market: rich and varied web templates, simple and personalized. Template market provides a wealth of page templates, you can choose to use their own templates to quickly create web pages, and published each page can be used as their own template, and then based on this template, you can add personalized operations at any time.
  5. Material platform: provide basic Utils, Echart, Vue, jQuery and other materials to facilitate the development of product-based pages for code secondary development.
  6. Multi-platform cross-terminal access: Access service systems efficiently and quickly. Through the communication SDK, other systems can quickly access the Page-Page platform. At the same time, it supports HTTP and Thrift open apis for people to choose from, and supports client and back-end call open apis.
  7. Content risk audit: rigorous and efficient audit mechanism. Access to the internal risk audit public service of Meituan, the published risk content will be quickly reviewed to prevent uncontrolled legal risks caused by misoperation.
  8. Data market: to provide page data monitoring, to help you always master the flow trend. Access to meituan’s internal one-stop data analysis platform to help you safely, quickly and efficiently master all kinds of monitoring data on the page.
  9. Permission management: Each page created has a relatively independent permission. Only authorized personnel can view and operate the page.
  10. Service monitoring: Provides data such as page-level JavaScript errors and resource loading success rate to facilitate development, troubleshooting and solving online problems.

The function flow chart is as follows:

3.3 Implementation Principles

3.3.1 Basic Services

The basic services of the Page- Page platform are divided into four parts, including material services, compilation services, product enablement services, and extension services.

3.3.2 Core Architecture

The core architecture of Page- Page platform mainly includes Page basic configuration layer, Page assembly layer and Page generation layer. We maintain the data through Vuex global state.

  • The page basic configuration layer mainly provides various capabilities to generate pages, including various operations of rich text, the ability to edit source code (HTML, CSS, JavaScript), custom domain name configuration, adaptive container (PC/H5), release environment, etc.
  • The page assembly layer is based on the ability provided by the basic configuration layer to realize the free editing of the page, bearing a large amount of interactive logic, and all user operations are carried out in this layer.
    • Service PV and UV buried points, error statistics, access success rate report.
    • Automatically ADAPTS PC and mobile style.
    • The Internet inaccessible label is displayed on the Intranet page.
  • Page generation layer needs to parse, preprocess, compile and other operations according to the configuration after assembly, and finally generate HTML, CSS, JavaScript rendering to the web page.

3.3.3 Key processes

As shown in Figure 7, the core process of the platform includes page preview after page creation, compiling services, and generating pages.

  • Page preview: After creating and editing the page, the page will be reorganized according to the content. After precompiling the style and JavaScript, the text +JavaScript+CSS will be assembled to generate HTML code blocks, which will be converted into Blob urls, and finally preview the page as iframe.
  • Compile service: file tree structure and code to send requests to the back-end interface, compile Less to CSS based on Webpack, compile ES 6 syntax to ES 5. General materials are introduced using CDN without secondary compilation.
  • Page generation: When the created and edited page is published, the server will conduct code quality inspection, content security review, code quality inspection, unit test, upload object storage platform, synchronize CDN detection, and finally generate page links for access.

3.3.4 Multi-platform Access

The Page-Page platform can also be used as a full-fledged rich text editor for business systems, with support for embedding in other systems. As a message release function bearer, reduce repeated development work, and we are equipped with a complete SDK for everyone to choose to use. Page-SDK can directly trigger Page platform publishing, management and other operations, as shown in the following figure:

3.3.5 OPEN API

When using the Page-Page platform, some internal business parties of Meituan want to publish the Page through the Page-Page platform, and want to get the published content to do some custom processing. Therefore, we provide the Open API Open capability to support both HTTP and Thrift calls. The Thrift API is implemented in the following way. First, let’s look at the overall process of Thrift:

The main uses of Thrift are as follows:

  1. The server prewrites an Interface Definition Language (IDL) file to define interfaces.
  2. The compiler provided by Thrift is used to compile the interface file corresponding to the service language based on IDL.
  3. The invoked service registers the service, and the invoking service discovers the service.
  4. Unified transport protocol is used for service invocation and data transmission.

So let’s talk about how the Node language is implemented with other service languages to implement calls. Since our service uses the Node language, our Node service acts as the server, while other language (Java, etc.) calls act as the client.

  • Generated file: the server defines the IDL interface description file, and then converts it into the code file of the corresponding language based on the IDL file. Since we use Node language, we convert it into JavaScript file.
  • The server starts the service: imports the generated JavaScript file, parses the interface, processes the interface, starts and listens for the service.
  • Service registration: Through the service governance proxy built into the server, the service is registered with the service registration routing center (also known as the naming service) inside Meituan, so that the service can be discovered by callers.
  • Data transfer: When called, data transfer with other services according to the service Governance service protocol serialization and deserialization.

At present, There is a relatively mature NPM package service in Meituan, which has helped us realize the process of service registration, data transmission, service discovery and acquisition. If the client wants to invoke the Open API capability provided by us, it first applies for AppKey, and then chooses to use Thrift or HTTP to make request calls according to the required parameters.

3.4 Scheme Practice

3.4.1 track of H5 agreement

Ability: rich text editing. Description: Provides rich text visual editing, products and operations can publish and re-edit pages without a front end. Scenario: Text protocol, message notification, product FAQ.

Specific cases:

3.4.2 Customized Service Rendering

Capability: Open API (Thirft + HTTP). Description: Provides an open API to support business customization and style rendering to business systems, while solving iframe experience issues. Scenario: students of client, back end and small program can render copy according to API to achieve dynamic management of rich text information.

Specific cases:

Applets use components, and Vue uses V-HTML instructions to dynamically render product selection instructions.

{" code ": 0," data ": {" tag" : "apple, standard", "title" : "how to pick the apple", "HTML" : "< h1 > how to pick the apple < / h1 > > < p > the following criteria can be used for reference in the consumer < / p > < ul > < li > sweet and sour < / li > < li > hardness < / li > < / ul >", "CSS" : ""," js ":" ", "file" : {}}, "MSG" : "success" }Copy the code

3.4.3 Placing requirements

Ability: WebIDE code editing. Description: Develop code development work based on WebIDE, modify download link based on channel and environment, able to do minute support. Scenario: Create static pages based on the product for logic and style development.

Specific cases:

    var ua = window.navigator.userAgent
    var URL_MAP = {
        ios: 'https://apps.apple.com/cn/app/xxx',
        android: 'xxx.apk',
        ios_dpmerchant: 'itms-apps://itunes.apple.com/cn/app/xxx'
    }
    
    if (ua.match(/android/i)) location.href = URL_MAP.android
    if (ua.match(/(ipad|iphone|ipod).*os\s([\d_]+)/i)) {
        if (/xx\/com\.xxx\.xx\.mobile/.test(ua)) {
            location.href = URL_MAP.ios_dpmerchant
        } else {
            location.href = URL_MAP.ios
        }
    }
Copy the code

3.4.4 Client Communication Middle page

Ability: WebIDE code editing + material platform. Description: Through the material platform, the company’s client bridge SDK can be introduced to quickly complete the client communication requirements. Convenient front-end debugging client bridge function. Scenario: The client jumps to the middle page of communication.

Specific cases:

Ready (() => {xxx.sendMessage ({sign: true, params: {id: Window. The URL}}, () = > {console. Error (' communication success ')}, () = > {the console. The error (' communication failure)})})Copy the code

3.4.5 The service system has embedded pages

Capability: Provides glue layer page-SDK to connect business system to Page. Description: The business system can communicate with page-Page platform, the business system can call Page publishing, preview, edit and other functions, Page can return the business system Page links, content, permissions and other information. Reduce repetitive front-end work and improve r&d efficiency. Scene: front-end rich text information rendering, back-end rich text information management background.

Specific cases:

3.5 Business Achievements

Up to now, Page Page platform has generated more than 5000 pages, edited pages for more than 16,000 times, and the cumulative Page visited PV has exceeded 82.6 million. Now, Meituan has more than 10 departments and more than 30 lines of business access and use Page Page platform.

Iv. Summary and outlook

Rich text editors and Webides are not only complex systems, but also popular research areas. Especially when combined with meituan’s infrastructure, it can solve many efficiency and quality problems within the team. This system also provides syntax intelligent hints, Diff comparison, pre-detection, command line debugging and other functions, not only to pay attention to the stability and quality of the business published pages, but also to have a series of built-in plug-ins for research and development, actively help research and development to improve the quality of code, reduce unnecessary errors.

After a long period of technical and business evolution, the Page-Page platform has been able To help developers greatly improve their development efficiency, with primary Design To Code capabilities, but there are still many business scenarios worth exploring. We also look forward to your participation in the building together.

  • WebIDE integration: improve infrastructure construction and functional requirements, better support Vue, React, ES 6, TS, Less syntax, preview mode using browser compilation, can effectively improve the speed of preview, release mode using back-end compilation.
  • Development process link: Effective evaluation of code, including ESlint, code duplication rate, and whether smart hints can be replaced by a tripartite library. Issue quality report on development code quality and business on-line.
  • Integrated R&D platform: it reduces the time cost for team members to understand the overall infrastructure, and has built-in functions such as monitoring, performance and task management to improve the efficiency of business development. Build automatic daily and weekly report systems to reduce the proportion of non-development workload.
  • Material opening capacity: access to common component platform, precipitate more materials, quickly meet the needs of more diversified products.

5. Introduction to the author

Gao Zhan, Yu Li, Xiao Ying, Hao Chang, from Meituan medical terminal team. Wang Yong, Chen Wen, from meituan flash purchase terminal team.

Recruitment information

Meituan pharmaceutical is looking for Android, iOS and FE front-end engineers in Beijing and Chengdu. Interested students can send their resume to: [email protected] (please mark the subject of the email: Meituan Medical Terminal).

Read more technical articles from meituan’s technical team

Front end | | algorithm back-end | | | data security operations | iOS | Android | test

| in the public bar menu dialog reply goodies for [2020], [2019] special purchases, goodies for [2018], [2017] special purchases such as keywords, to view Meituan technology team calendar year essay collection.

| this paper Meituan produced by the technical team, the copyright ownership Meituan. You are welcome to reprint or use the content of this article for non-commercial purposes such as sharing and communication. Please mark “Content reprinted from Meituan Technical team”. This article shall not be reproduced or used commercially without permission. For any commercial activity, please send an email to [email protected] for authorization.