辛宝Otto

辛宝Otto 的玄酒清谈

北漂前端程序员儿 / 探索新事物 / Web Worker 主播之一/内向话痨
xiaoyuzhou
email

SpeedPass - About Frontend DevOps Practice - GMTC2023

image.png

After thinking about it, I decided to write a collection.

Because I have been using Coding for a long time, Coding is free to use and all its features are public. It is suitable for development using specifications. The following speeches are all about personal experiences and do not provide SaaS services. It's pointless to talk about them.

Byte Delivery Practice#

The level is not enough, can't watch.

Basic Information#

Original address:

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 iterative upgrades. The milestone-like development from 2012 to the present can well illustrate this point. The keywords have changed from "spontaneous" to "lifecycle" today, but the only constant is the expectation of improving R&D experience and efficiency. The problem of frontend efficiency has also gone through a process from point to surface. In this era where it is urgent 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 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 scenario tool system and platform capabilities
  3. Full-process application of frontend development chain
    1. Differentiated solutions for frontend scenarios (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 practices of frontend scenarios
  • 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 mark the original text.

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

Background#

Popularize the concept of R&D efficiency.

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

  • Business layer - Business owner
  • R&D delivery layer - Technical leader
  • 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, specify business goals, verify 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 R&D part of the business owner. 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 developers. 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-end and hard to read. Let's continue.

  • Efficiency platform. It can manage things related to delivery on this platform.
  • Efficiency practice. Extract DevOps processes 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.

There is a layered architecture diagram here, I think I'll just show it.

image.png

Overall, it refines some functions. If you have experience using Coding, it should not be surprising. There are a few more pictures later, but I don't think they are 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, when is the code good: As long as 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, there are some methods that I can't understand when they are high-end, 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 indicators, 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) / Senior Frontend Technical Expert at Alibaba

  • 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
  • Introduce code coverage
  • Acceptance takes a long time, find problems, hope to reduce time spent

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, it's another Coding. Solved their own problems.

SOP Thinking to Improve DevOps Quality and Efficiency#

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

Okay, it's another Coding. Solved their own problems.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.