辛宝Otto 的玄酒清谈

After some thought, I decided to write a collection.

Because I have been using Coding for a long time, Coding is free to use and its features are public. It is suitable for developing through the use of standards. The following speeches are all about their own experiences and do not provide SaaS services, so it is pointless to talk about them.

Byte Delivery Practice#

The level is not enough, can't see it.

Basic Information#

Original address:

• Info Address 2023-02-06 Frontend DevOps Practice

Qin Shuo, currently working at ByteDance as a frontend architect, mainly responsible for the company's DevOps construction and the implementation of frontend best practices; also has rich practical experience in frontend engineering, visualization, and performance optimization.

Speech: Continuous Delivery Practice at ByteDance
The upgrade of technology cannot be separated from the development of business. With the development of ByteDance's business, the efficiency products have also completed multiple rounds of iterations. The milestone-like development experienced from 2012 to the present can well illustrate this point. The keywords have changed from "spontaneous" to "lifecycle" today. However, the only constant is the expectation of improving development experience and efficiency. The problem of frontend efficiency has also gone through a process from point to surface. In this era that urgently needs to improve the linkage of various platforms and enrich vertical capacity building, one-stop service has emerged. This sharing will start from the overall to the details, from peeling the cocoon of the integrated platform to the best practices of multi-business cooperation, and finally discuss the core exploration points of automation and visualization, providing a comprehensive introduction to ByteDance's practice in the field of frontend continuous delivery.

Speech outline:

1. Background
   1. Efficiency problems encountered in development
   2. Solution path for efficiency problems
2. Architecture
   1. Overview of the integrated platform framework
   2. Frontend scene tools and platform capabilities
3. Full-process application of frontend development chain
   1. Differentiated solutions for frontend scenes (overview)
   2. How to improve efficiency in the development process (continuous integration)
      Exploration of automation (automation)
4. Summary & Planning
   1. Future trend judgment

You will gain:

• Understand the architectural design ideas of ByteDance in the direction of design and development integration
• Understand the practice of frontend scenes
• Understand how ByteDance's frontend automates and improves efficiency

The above content is from publicly available information on info.

Content Introduction#

Mainly focused on overall thinking, I will annotate the original content.

Looking at the outline, I estimate that it will start with the background, talk about architecture and layers, talk about implementation and metric differences, and talk about prospects.

Background#

Popularize the concept of development efficiency.

Specific tasks at work correspond to different positions from different perspectives.

• Business layer - Business owners
• Development and delivery layer - Technical leaders
• Technical implementation layer - Frontline developers

These three levels and positions have different understandings of what needs to be done:

• From the perspective of business owners. Starting from the business perspective, they hope to start from business planning, define business goals, validate value after delivery, and improve the business based on feedback from the business side. This forms a cycle of three nodes.
• From the perspective of technical leaders. They hope for continuous requirements, clear communication, and high-quality delivery, and they are responsible for the development part of the business owners. They define product design, on the one hand, release requirements, and on the other hand, system design, development testing, and system release.
• From the perspective of development. Starting from the perspective of the development process. Each development activity is efficient, common, and low-cost.

Hmm, the perspective is a bit high. The terminology is a bit high-level and difficult to read, let's continue.

• Efficiency platform. It can manage things related to delivery on this platform.
• Efficiency practice. Refine the devops process and summarize experience in practice.
• Efficiency measurement. Find and improve problems from data.

I can't understand the original text, so I'll try to make it more colloquial.

Architecture#

This platform is used to manage things related to delivery. The functions are divided into layers:

• Platform layer. Workbench, process control.
• Tool layer. Code-related services, pipelines, etc.
• Common service layer. Tenants, permissions, notifications, etc.

Here is a layered architecture diagram, I thought about it and decided to include it.

Overall, it refines some functions, which should not be surprising if you have experience using Coding. There are a few more diagrams later, but I feel they are not well-drawn, so I won't include them.

Frontend Perspective on the Lifecycle#

Requirements - Development - Testing - Integration - Acceptance - Gray Release - Deployment - Launch.

Skipping some content quickly, everyone likes good code, what is good code: It runs! It needs to be quantified.

• Reliability, bug rate per thousand lines of code for different code settings
• Maintainability, complexity, cognitive complexity, duplication rate

Behind quantification are some methods that I can't understand in high-level terms, but I'll still quote them, hoping not to use them

• AST parsing, Baker algorithm, matrix counting detection, Rabin-Karp string search

Quantification requires formulas, so some formulas are given, as well as some weights as guidance.

Well, forget it, I won't read it. I haven't done any work on quantifying development metrics, and the information absorbed from the ppt is limited, so I won't read it for now.

DingTalk Frontend CICD Practice#

Source: https://ppt.infoq.cn/list/108

CICD Practice in DingTalk Frontend
Meng Honglun (Yunji) / Alibaba Senior Frontend Technical Expert

• Agile development
• CICD and agile development
• DingTalk frontend practice
• Outlook

The preaching of agile development always makes people sleepy, and the agile coach I hired before was the same.

Ignored the vision and concept of agile development.

Briefly mentioned the concept of CICD.

Emphasized automated testing, unit testing, and integration testing.

• UI code tests whether controls and text are in the document
• Test document changes after interaction
• Do not test UI layout
• Use testing library
• Introduced code coverage
• Acceptance takes a long time, finding problems, hoping to reduce time

That's it, okay, next.

Meituan B-side#

Meituan Design-DevOps Practice in B-side Business
Gao Zhenze / Meituan Frontend Technical Expert

Encountered problems, frontend development resources bottleneck, gave some examples of problems. So they developed a DevOps platform.

Okay, another Coding implementation. Solved their own problems.

SOP Thinking to Improve DevOps Quality and Efficiency#

SOP Thinking to Improve DevOps Quality and Efficiency
Sun Dong / 58 Tongcheng SaaS Application Frontend Responsible Person

Okay, another Coding implementation. Solved their own problems.