preface

2021GMTC is divided into 16 special speeches, covering almost all the current front-end fields. Thanks for the opportunity provided by the company and Autumn, I was honored to participate in the performance improvement of front-end engineering on July 4. This special speech is divided into the following four topics:

  • The practice of MBC business standardization container in Meituan
  • SmartFeed multi-end template rendering architecture
  • Exploration of the front-end system under the taihua construction of shell
  • Bytedance’s modern Web development practices

Each of these four sessions has its own focus and is full of good stuff. The following is the sharing and summary of this special session.

The practice of MBC business standardization container in Meituan

MBC: Meituan Business Container

This sharing is brought by Liao Ziyao of meituan’s big search team. It is mainly about the configuration of meituan’s home page and other first-level entrances. It can be carried out with two harvest goals:

  • How to start from the existing business, for modeling abstraction, to create a set of common business architecture to improve development efficiency
  • How to optimize the existing development mode to create a set of efficient production and research tools closed loop to improve the production and research efficiency

The pain point of the traditional model

Business pain points

As for the home page of Meituan, it has the characteristics of large user traffic and high requirements for experience, emphasizing display and light interaction, and mainly assumes the role of traffic distribution, so it can only use the solution of Native plus dynamic layout, because the pain point caused by the business characteristics is low online efficiency and high development cost (native solution needs to release version). Dynamic layout leads to small dynamic strength, can only achieve the development of module level template.

The process pain points

In the traditional mode development process, there are various roles, such as platform PM, UED, client RD, server RD and QA.

  • Process: more complicated, high communication cost, work serial dependence
  • Fuzzy responsibility boundary: buried point problem, front – end interface contradiction

The ideal process

The ideal process is to do their own job, with process parallel, responsibilities separation, can do professional people do professional things.

With an ideal process in place, you can work toward that goal and develop a solution.

  • Standardization: data standardization, burial site standardization, interaction standardization, and design language standardization
  • Dynamic: Incubating pages dynamically, client container dynamic, and server container dynamic
  • Configuration: page configuration, template configuration and buried point configuration
  • Intelligent: thousands of faces

These ideal standard processes are reflected in the design of MBC.

MBC business standardized container

First, let’s explain what the MBC standardized container is:

  • Based on standardized protocols
  • Data-driven as the core
  • Mobile station configuration as means
  • Production and research to develop a tool chain to improve efficiency

MBC protocol layer: provides a carrier for the interaction between the front and back ends and provides multiple internal annotation protocols to meet customization requirements.

Configuration platform: the core of the entire MBC, providing UI2Code capabilities, buried point configuration, template building and many other efficiency tools.

Server container: Dynamically loads and loads business modules. Its job is to convert non-standard apis on the server to standard apis on the client.

Client container: based on data driven, rendering components and buried points.

standardized

Business modeling

Business model standards, including page layout structure, module order (combination of layout structure), card styles, element fields, and color styles, discussed with PM and UIUE team.

The above is a relatively basic design. On the premise of determining the basic design, it can deal with more complex application scenarios by means of combination.

Data standardization

With these standardized specifications in place, it becomes easier to use the data to describe the current page.

Describe the page structure, describe the page interaction logic and internal core area display cards, etc.

According to the description of page structure, a variety of layout structures are abstracted, including grid layout, horizontal slide layout, flow layout, 1 drag N layout and so on.

Burial point standardization

  • Indicators: FPC, startup time, and lag rate
  • Buried point strategy: click strategy, expose strategy, stay strategy and repeat filtering
  • Buried point type: click buried point, exposure buried point, statistical buried point and performance buried point

Supports the report and delivery of buried points.

dynamic

BFF

BFF is used to solve the problem of front and rear end adaptation:

  • The back-end of the service front end
  • Solve the problem of multi-terminal service coupling
  • Services are self-consistent and developed by who uses them

At the same time, BFF also has some disadvantages, such as technology stack is not uniform, there is a certain cost of starting.

The container plan

In order to solve the disadvantages of BFF, MBC implements container processing for BFF, which I understand is to encapsulate some common services, and the client only needs to write a little business logic.

  • Service choreography + hot deployment reduces publishing costs and describes calls using a DSL
  • The container is responsible for operation and maintenance
  • The client takes care of the business logic
  • Modules are developed using JAVA at low cost and high performance

Through the above methods can achieve the purpose of reducing the development cost and quickly launching.

Practical use cases

To complete a DSL data source process:

  • Write a DSL, get the business data, and make dependency calls based on the Tasks field
  • Write business modules to transform business models into standardized protocol data

Convert the API of the underlying service into the data format required by the client by configuring the data source and the API required by the client online.

Client template container

Flexbox is used as the core to bind views and service data for dynamic configuration delivery

Configuration change

With the ability to standardize and dynamic, how to close the loop of the production and research process can be achieved through the following two aspects.

Template configuration

Advantages of configuration:

  • Reduce technical barriers, easy to use, PM for template selection, RD is responsible for the writing of business logic
  • Embedded in the development process, to create a closed-loop production and research
  • Templates are rich, and template combination is supported to meet multiple scenarios
  • Cloud real machine preview, what you see is what you get

Template configuration process

UI2Code

It is the daily work of front-end engineers to transfer design draft to code, with low overall complexity and high time proportion. Therefore, everyone is looking for an automated solution to UI2code. Now there are two common solutions in the industry:

  • The neural network is trained to generate code directly from images or sketches
  • Based on the Sketch source file, the layer information is parsed into DSL and generated code

Problems include low algorithm accuracy, poor code readability, and narrow coverage of the r&d process.

MBC solution

  • Component identification
  • Transverse and vertical cutting algorithm + model selection algorithm
  • Visual intervention
  • Belongs to inference + business information binding
  • Deeply integrated r&d process

Finally get a more optimized UI -> DSL -> Code -> business information binding development process.

Buried point configuration

A visual platform is provided to visually insert the burial point configuration according to the tree structure displayed by the client to facilitate the configuration of the data platform.

Program implementation

Problems solved by THE MBC solution:

  • The core business needs both high performance and flexibility
  • Low efficiency of research and development process

MBC scenarios:

  • The team has high requirements for page performance and stability, as well as the ability to be dynamic
  • The business is mainly display, such as the front page of column phenotype, commodity list page, etc
  • The server interface is stable, but the client display is variable
  • There are some problems in the efficiency of production and research cooperation

earnings

For teams that access MBC solutions, the labor cost is reduced by 50%, the production and research efficiency is increased by 60%, and the business covers 50% of meituan’s home page and first-level display page entrance.

conclusion

This field is mainly about the development efficiency improvement of Meituan’s home page on the native end. Firstly, the existing business pain points are analyzed, the ideal process is put forward, the goal is set, and the unified solution is finally formed. I understand that the most important thing is to solve the low efficiency of cooperation between production and research (the development process excluded the client developers). Through standardization, dynamic, configuration platform do one-stop release of the project, you can do this by clients on the basis of the first template is the cause of development, through the combination of the template with different arrangement, can form different pages, provides for PM choice ability, thus can be standardized through the container closed loop, do a template development, the ability to reuse for many times, It not only improves the communication efficiency of the production and research, but also reduces the repeated development of the client, and finally achieves the purpose of improving the efficiency of the project.

For our own project efficiency improvement, we are also cooperating with other teams in basic engineering to build the project efficiency improvement ability. We have summarized a variety of templates that can cover the CURD of the middle and background scenes, such as list page, edit page, detail page, etc., and supported the basic layout ability of the page, which can quickly generate the component code of the project. Due to different scenarios, c-end pages always focus on display and light on interaction. In B-end projects, interaction logic is relatively complex, so we adopt a solution to generate secondary development code rather than one-stop generation, and remove front-end developers from the project process.

Combined with this field sharing, there are still a lot of areas to explore to improve the efficiency, such as setting DSL standards, achieving UI2DSL through algorithm capabilities and plug-in capabilities, and releasing front-end developers’ writing time in repeated styles to a greater extent, focusing on dealing with interactive logic, called real JS engineers.

SmartFeed multi-end template rendering architecture

Lecturer introduction: Wang Yongqing, who joined Mobile Baidu in 2013, mainly focuses on front-end architecture optimization, engineering and NodeJS.

Requirements and Background

At the same time, native and H5 modes need to be supported. In the process of development, PM and UI always put forward some different ideas based on page style and layout, which leads to low efficiency in the cooperation between production and research.

The current development process

Ideal development process

Cross-end dynamic componentization solutions that can be brought online quickly without r&d intervention.

Architecture and Implementation

Design free build component system

Introduce an atomic design scheme that contains five layers of structure from atom -> molecule -> organization -> Template -> page.

Atomic library

@Baidu/Wuji-UIKit, provides nine categories, 36 mixins, from a variety of dimensions, such as color, font, spacing and lines, standardized description, through the UNIFIED coding from UI design draft to R&D side, design draft annotation is the style class used in development.

Advantages:

  • The UI uses a standard design pattern to ensure that the design style and page specification
  • Form a closed loop from design to code, unified coding to maintain consistency

Examples of atomic libraries

Supports day, night and Dark modes

Generate the configured style code from CAM_X001.

component

The components are not described as much because they are more widely known, and the encapsulated business components vary greatly depending on the business scenario.

Block/card

The components constitute the block/card, specify the block and the card specification, and the card area is divided into four areas, the header area, the body area, the auxiliary area and the extension pendant area.

The advantage of specifying the card assembly specification and partitioning the cards is that the style of the cards is consistent, and it limits the play of the product and UI staff and improves development efficiency.

Describe the cross-end template

The previous section covered the atomization project creation process. This section focuses on how to describe the generated cards and how the generated cards fit across the end.

DSL

Introduction of DSL, standardized interface description language, structured data description:

  • Children: Structural relationships
  • Props: props

Take the UI diagram and abstract it into a tree of components described in a DSL

Generate a DSL

The TEMPLATE configuration platform or sketch file is parsed to generate DSL description file.

Application of DSL

The DSL generates h5 and native templates and describes only the process of generating H5.

DSL2san generation process

The entire flow of UI2code can be interpreted as UI = F(DSL).

The specification DSL is generated by template configuration platform and Sketch analysis, and then multi-end adaptive templates are generated from THE DSL.

Data mapping

There is a certain mapping relationship between UI Schema and Data Schema. After processing by the preprocessor, UI props are finally generated

interactions

  • Convergence can interact
  • Built-in components
  • Event agent + xpath

panorama

It mainly involves the management of components and blocks, data management, style adaptation and parsing, etc. Each block of the whole platform is decoupled and is an independent whole, which makes it convenient for other teams to borrow the capabilities of each block.

Landing and Prospect

The access of the whole Hand100 and the front end of the Big search department produced epidemic cards, college entrance examination cards, special H5 pages, etc.

The future direction

The hope is to form a unified set of large front-end design specifications, with no very low-level atomic structure, SAN as the underlying architecture, to generate a unified DSL description specification, corresponding to the ability of multiterminal code.

conclusion

Baidu’s technical solution and Meituan have similar ideas, both by listing the existing project development process and comparing the ideal development, to find the pain points of engineering improvement, but SmartFeed wants to split the front-end details into smaller efforts, so there are more ways of combination. At the same time, they also have some normative requirements for the structure of the page, which limits the play of the product and UI.

The description and delivery of templates are implemented by custom DSL standards. Different parsers are realized by UI2DSL and DSL2Code, and the project is quickly built through server delivery.

Exploration of the front-end system under the taihua construction of shell

Lecturer introduction: Dong Yajie, working for 11 years, technical director of shell, responsible for b-end and front-end TC of second-hand house.

background

Shell business has changed from a single business to an intermediary, covering multiple directions of real estate (second-hand house, leasing, new house and commercial real estate, etc.) and multiple links in directions (house, guest, signing, finance, transaction and storefront, etc.). In order to deal with so many directions and corresponding environment, Derived configuration background, event center, authority center and personnel background and other projects.

Challenges to the front end

Multiple background, scene consistency led to repeated development work, as well as the same process, but the implementation of different, non-standard waste of human efficiency.

Technical stack differences, team collaboration problems and poor information communication lead to repeated development, difficulty in settling and low efficiency. This is not only a problem of shells, but also a common problem in large front-end teams.

Evolution of China

Building a single component library

Landing problems:

  • The technology stack is not uniform, the framework is mixed
  • Business component libraries are private and cannot be shared
  • Willingness to contribute, difficult to maintain

Capability closed loop

  • Capabilities: Component capabilities are online and can be stack independent
  • Standards: To precipitate and standardize business scenarios, such as the fixed list interaction style
  • Data: Collect component usage data, evaluation, and regression
  • Open: flexible access, smooth development, testing and online

Data flow model

  • Client: Unified specification and release
  • Server: storage, analysis, and consumption interfaces
  • Front desk: use documents, display usage data and operational capabilities

How to use

There is still no escape from JSON description, front-end component capabilities can be service-oriented, through the form of copy and paste, NPM or JSON, at present, only the choice of JSON can cross language, out of the constraints of the environment.

Therefore, shell is also based on its own business scenario. It describes components and page structure through JSON description file, obtains component code through interface, and delivers components from the server.

Server-side implementation

The data collection

Components are delivered through the server interface. In addition, the interface can carry parameter information, such as domain names, used components, and requested components. Therefore, you can set a scheduled task to collect logs from the interface and analyze and evaluate components when collecting data.

Application website

The official website mainly has four blocks, component documents, discussion community, standard scenarios and data list, the role of these blocks is to let the component standards can be precipitation, data list can start the role of r&d.

Technology operations

Technical projects from a product perspective

The lecturer mentioned two formulas

  • Customer delivered value = customer purchased value – customer purchased cost
  • User value = User access value – User access cost

At the same time, use the atmosphere to create technical influence, gain recognition from other roles, such as the product and UI, and get support from other aspects. On the other hand, through individual and team competitions to create a sense of personal and collective honor, gain the motivation to develop components.

The ground effect

  • Project coverage: project coverage of 60%, team coverage of 80%
  • Improved efficiency: 40% increase in development efficiency and 50% increase in standard scenario coverage
  • Technical atmosphere: win-win cooperation, participation of the whole industry and research institutes

The future planning

Continue to improve the central Taiwan from the following three points:

  • Scene restriction
  • Server performance and stability
  • Ecological stability

conclusion

This share shells lecturer not sharing too much technical details, but one thing left a deep impression on me, is beyond the technical implementation, also need to have the technology capacity, to engage more is the premise of give enough reward, participate to form a building in the process of the incentive to plan to make more contribution to the whole.

Bytedance’s modern Web development practices

The original byte sharing is the first, I take out the final summary, because from the concept, and the other three sharing is very different, the summary of front-end engineering efficiency is also more advanced.

Below please byte modern Web development practice spokesperson, Yang Yang teacher appeared, because everyone is very familiar with, here will not introduce more.

Before the introduction, first put a picture of the scene of the day, only teacher Yang Yang’s special session was full, sit on the ground to listen to the whole share.

MWA: Modern Web applications, which translate modern Web development into a concrete technology stack and r&d tool system, are widely played and benefited from within bytes.

“App factory” front-end development issues

Byte is called APP factory, and most apps, the front end page is a large part of it, so the problems of front-end technology and engineering system are more prominent and typical in byte.

Traditional R & D architecture

The following is through the analysis of the traditional R & D system one by one, to illustrate the shortcomings of the traditional R & D system, and limit the development of the front end.

The scaffold

Scaffolding, no matter what kind, is essentially a copy and paste of sample code to make up a project. However, compared with the scaffolding in the building, the project generated by the code scaffolding will be changed many times before the final project can be generated. In the long-term iteration, the differences of the same scaffolding generated project will gradually increase, which will make it difficult to make uniform changes to some basic libraries. The scaffolding itself is iteratively improving, and the projects that have been created will not be affected by the iterations of the scaffolding.

The scaffold template is also a problem.

The diversity of the templates, and the maintenance of the multiple templates, each combination in the figure above generates a scaffold template. As you can see, with each additional maintenance, the magnitude of the template becomes more difficult to maintain, resulting in a lower ROI.

The packing of the Webpack

Scaffolding contains a basic encapsulation of WebPack, but there are a number of issues based on encapsulation.

  • The level of abstraction is limited, and the configuration Api design is varied, reflecting the personal preferences or business experience of different builders, but in a real business project, a large number of configurations can still be included

  • Evolution of compilation tools. In the new cycle iteration, there are already many excellent compilation tools that have the potential to replace Webpack, such as Vite, which uses non-JS system programming languages to improve performance and greatly improve build speed.
  • The dev and build capabilities provided by WebPack do not cover all scenarios of existing front-end development.

Front-end engineering problems

Front-end engineering can only implement code initialization and code level infrastructure. What web development needs now is more comprehensive capabilities.

“Modern Web Engineering”/” Front-end Engineering “=” code level “of engineering +” platform level “of engineering

Create “Now Web Project”/” Front-end Project “= Code initialization + platform initialization

The front frame

The overall technology stack of bytes is biased toward React, so why React, the reasons are as follows

  • React is chosen from four aspects: community ecology, application scale, design evolution and technology trend
  • Use of React is also growing faster than other framework languages

React is a view-based framework, not an application framework

Node. Js framework

For example, Next. Js provides application architecture capabilities out of the box, but the Node framework is a server application architecture centered, not a client application architecture.

There are still problems that have not been solved, but have been added to.

Iaas and “Back-end PaaS”

Existing Service Architecture

Front-end projects deployed in PaaS are complex and inefficient for front-end developers, and many front-end projects are not well supported under this architecture, such as route distribution, BFF distribution, simplified deployment, micro-front-end context injection and micro-front-end distribution.

A “paradigm shift” in Web Development

The shift from traditional Web development paradigm to modern Web development paradigm

Traditional Web development paradigm

  • Ruby on Rails: An MVC framework centered on server-side development
  • 12-factor App: Server engineering standard, such as Codebase, dependencies, etc
  • MEAN/MERN: MongoDb, Express, Angular/React, node.js

The modern Web development paradigm

  • JAMstack:

    • JS: CSR
    • APIs: BFF, Content Mesh
    • Markup: SSR/SSG, serverless

  • SHAMstack:

    • Static Hosting: Serverless
    • APIs + JS: BFF, Content Mesh, CSR
    • Markup: SSR/SSG

  • STAR App:

    • Design System: View layer mode
    • TypeScript: Type-safe, intelligent programming
    • Apollo: Model layer pattern
    • React: THE FP paradigm

  • Meta-framework: JAMstack + STAR App

inductive

Summarize what aspects are involved in the paradigm shift from traditional Web development to modern Web development, and what are the details of the aspects.

Teacher Yang Yang summarized from five aspects: framework UI, architecture, abstraction, deployment and platform.

Bytedance Web Development’s “Engine Upgrade”

  • In the byte research and development system, the engineering is materialized, and in the research and development platform, every project contains every link and integrated workflow
  • Projects can be created by engineering solutions, instead of traditional scaffolding
  • By converging many template projects to default MWA engineering solutions and engineering types, MWA makes engineering simpler through abstraction

The entrance

MWA supports seamless switching from single-entry projects to multi-entry projects, from SPA to MPA, automatic server routing and multiple HTML, and automatic client routing through file path paths.

The deployment of

The MWA comes with a production-level Web Server that runs on its own, including routing distribution, automatic PolyFill, and SSR automatic pocket filling.

When a BFF is added, the Serverless platform also optimizes the BFF Server.

Compile the rendering

MWA supports an integrated approach to developing all three phases of code, allowing code to run as early as possible, preferably at compile time -> SSR run -> client run.

MWA

Experienced half a year of internal test, the existing results

conclusion

This byte share share one of the biggest differences and a few other fields, is to solve the problem is not the same, in addition to this share, they are found the problem and solve the problem, although the final solutions are very good to solve the problem, improve the development efficiency, but also is only limited to fixed application scenarios, such as Meituan homepage, baidu’s card and shells of modular design, There are limitations. This sharing has really changed the development mode of the front end, and I can only have a rough understanding of the overall details of MWA through this sharing. Fortunately, we are all beneficiaries of MWA. As the internal system architecture of the company, we can have more opportunities to try and learn.

❤️ Thanks for your support

That’s all for this share. Hope it helps you

If you like it, don’t forget to share, like and collect it.

Welcome to pay attention to the public number ELab team receiving good articles ~

We are from Bytedance, and we are the front end department of education under bytedance. We are responsible for the front end development of bytedance education products.

We focus on product quality improvement, development efficiency, creativity and cutting-edge technology and other directions to precipitation and dissemination of professional knowledge and cases, to contribute experience value to the industry. Including but not limited to performance monitoring, component library, multi-terminal technology, Serverless, visual construction, audio and video, artificial intelligence, product design and marketing, etc.

Interested students are welcome to click in the comments section or use the push-code to push to the author’s department 🤪

Bytes to beat school/club recruit delivery link: job.toutiao.com/s/ewdMxeu