On Sunday, I attended TWeb Tencent Front-end Technology Conference. Here, according to my understanding, I summarized and reviewed some topics. Some topics are only briefly introduced in this paper.
Let’s look at the first topic ~
Tencent document rendering optimization road
Lecturer: Xiao Jun-Tencent front-end development engineer
Tencent documents currently have 160 million monthly active users, and the peak daily active users exceed 16 million. It needs to support thousands of people to edit at the same time. In extreme cases, it needs to support hundreds of thousands of lines of data rendering interaction without delay.
The lecturer described a folk epic written in a “life-saving document” during the torrential rain and flood in Henan province. Verifies the Tencent document’s high performance and importance.
Tencent document is how to optimize the performance step by step? The lecturer explained it in the following steps
- Dom:
- layout
- Try to avoid changing the geometry of elements (such as width, height, left or top position, etc.)
- Modify the “Paint only” property (e.g. background color, text color, etc.) -> repaint
- Paint optimization
- Use will-change or translateZ to raise the element level
- Use the transform and opacity properties
- Dom scrolling reuse, using virtual lists to reduce the number of DOM renderings
- layout
- Canvas:
- Cells are rendered using canvas
- Reduce GC triggering at render time
- Canvas toggle state machine optimization
- Iterate over what you want to draw
- Sort out the contents in the same state
- Classification of rendering
- Off-screen Canvas and reuse
In addition to the introduction of Tencent document optimization methods, the lecturer also introduced how to accurately and automatically count FPS, I will not expand here, the details can be viewed in PPT, we continue to the next topic ~
Development practice of Flutter audio and video
Lecturer: Niu Zan – Senior front-end engineer of Tencent
According to Statista and StackOverflow, This year Flutter has surpassed React Native in popularity.
The lecturer introduces the architecture of Flutter, the differences between Flutter and Web development. It also introduces the application of TRTC (Tencent Real-Time Communication) in interactive live broadcasting, meetings, online education and other scenarios. Especially during the epidemic, how to help offline business move online.
During the lecture, the lecturer explained in detail the architecture of TRTC and the role that Flutter plays in this architecture.
Finally, the lecturer introduces the SDK design of TRTC Flutter audio and video, which mainly focuses on the following challenges:
If readers are interested in these problems, they can obtain PPT for further understanding ~
Let’s move on to the next topic:
How to design a tens of thousands of people using DSL – Tencent questionnaire DSL practice
Lecturer: Li Zefan – Tencent front-end engineer
The developer of Tencent questionnaire will do some customized development of questionnaires. It may take 3 days to complete the development of each questionnaire through communication with the demander. This usually happens:
In this scenario, where communication costs are high, the demander clearly knows the logic but can’t write the code. This is a good situation to solve with DSL.
This section describes domain-specific languages (DSLS), which can be translated into Domain specific languages, such as SQL, JSON, and regular expressions. In contrast, GPL (General Purpose Language), translated into Chinese as a General programming Language, we are familiar with C, C++, JavaScript, Java languages, etc.
DSL has the following features:
- Is a programming language or specification language that is easy for people to understand and can be interpreted and executed by computers.
- Compared to a general-purpose programming language, it can express limited logic.
- Because of limited expression, it will only be widely used in some fields.
Let’s take a look at Tencent questionnaire to achieve DSL
Let’s take a quick look at how this works:
- The Tencent questionnaire uses PEG.js by using the parser generator to translate the DSL into executable statements
Take a look at an example of how to express two minutes ago via DSL:
Take a look at the PEg.js based implementation:
As you can see, with PEg.js, you can write a simple DSL language without having to understand compilation principles.
In addition to the introduction of DSL implementation methods, the instructor also introduced how to design easier to write, as well as the pros and cons of DSL. For details, please check PPT
How to improve the efficiency of development and test collaboration in telecommuting
Lecturers: Yang Chen (Tencent Front End Engineer) & Wu Wenbin (Senior Tencent front End Engineer (Whistle author))
The two lecturers mainly introduced TDE (Tencent Debugging Experience), an agent-free platform integrating multiple functions based on [Whistle]. For those of you who don’t know what a whistle is, click here to learn more about its functional features.
With TDE, instead of installing Whistle locally, we can use a system that injects an action panel into the interface under test to solve agent and packet capture problems. For example, to switch the environment, you only need to click on the panel of the interface under test. Another is to do cloud capture, such as development can catch test students package. TDE also solved the problem that our proxy configuration could not be shared:
In this sharing, the lecturer also introduced the implementation principle in detail, such as the architecture and implementation details of Whistle and NOhost, as well as the security mechanism.
This topic is still a lot of dry goods, we are interested in further view PPT ha ~
Convenient BFF development under Kubernetes microservice system
Lecturer: Zhenwei Wang, R&d Director of CODING
The Backend for Frontend (BFF) is used. Without the BFF layer, the Frontend requests data from the Backend, which causes an N + 1 problem. One interface requests N interfaces.
It doesn’t make sense to render a list of blogs, not only to query the list of blogs, but also to query the details of the blog, and to send separate requests to get comments and likes from the blog.
The essential problem here is that the front end is interface thinking, and the back end is data thinking. Such a direct request will lead to complex and out-of-control interface invocation, which is not conducive to later maintenance:
So we need the BFF layer:
In this way, the front-end no longer needs to request N interfaces, but this part of the work is handed over to the BFF layer, and the BFF layer requests N interfaces, there is no external network delay, authentication and other problems, the service is more controllable and efficient.
Under Kubernetes, BFF will face the following problems:
- Environment set up
- The number of micro services is large and the environment is complex
- The environment is fragile and vulnerable
- Local resources are insufficient
- Microservices occupy too many resources
- The code self-test loop takes too long, and some services cannot be debugged locally and need to be deployed to a development or test environment.
The lecturer introduced how to solve the above problems by creating an elastic environment system through K8s ecology. The elastic environment system can ensure that everyone has an independent development and test environment on the cloud. In addition, vscode plug-in can be directly connected to the development environment, so that the modified code can take effect in time.
All of these are encapsulated behind, for developers, just simple changes to the code, environment, resources do not need to consider.
As shown in the figure above, VSCode can develop code locally by installing nocalHost plug-in and clicking the small hammer icon button on the right side of the development environment. These codes, including the command line in VSCode, are all in a cloud. After changing the code, restart the service and you can see the effect immediately. Without waiting for a long CI CD process.
If you want to learn more about NocalHost, you can watch the following video, or check out the PPT:
Here can not put the video, you can click here to view ~
The last
TWeb also has many topics not introduced here, such as low code, visualization, cross-end, editor and efficiency of some topics, limited by space, here will not be a spread out, you can pay attention to the “front Q”, number reply TWeb to receive the conference PPT for learning oh ~