On Saturday, I went to TWeb Tencent front-end technology conference to summarize. In order to explain some of the technical points more clearly, I will add my own understanding to introduce the key content of the conference and related technology implementation achievements or progress.
Sharing topic: It’s time to learn about Web IDL
Lecturer: Xiaoqian Wu – GENERAL Manager of W3C China
What is Web IDL
The key to Web IDL is that it defines how the DOM and associated Web apis are mapped to languages, especially ECMAScript. Previous standards used OMG IDL and did not formally define these mappings, leaving implementors to guess between the lines. — Maciej Stachowiak (Webkit), 2009-9-28
On 4 August 2015, the W3C’s Web Applications Working Group released a standard Working draft for the Web Interface Definition Language (Web IDL Level 1). This document defines the Interface Definition Language, or Web IDL, which can be used to describe the interface to be implemented in a Web browser. Web IDL is a variant of IDL with a number of features that make it easier to specify and specify the behavior of common script objects in the Web platform.
In addition to describing ECMAScript interfaces, Web IDL can be translated into browser code and Web API test cases. If you find that the browser has problems with the standard implementation, you can try bugging against Web IDL.
If you want to understand DOM and Web API definitions, better write your proposals for the Web, and better understand browsers and the Web, you need to understand Web IDL.
As for the syntax and tools related to Web IDL, you can see the lecturer’s PPT for a long introduction
Reference:
The W3C has published a standard working draft for the Web Interface Definition Language (Web IDL Level 1)
Topic: Headless CMS — Business Solutions for Small and micro projects
Lecturer: Zhang Yunlong, founder of Qiaozi Technology
What the lecturer is doing at the moment
All the processes described in the figure below are encapsulated to make a system
Strapi is an open source Node.js Headless CMS framework. The framework through a few simple lines of NPM command, can generate a CMS system, the system through the interface operation, can generate database table, node to add, delete, change and check the code and related routes. Nuggets here do not know how to play the video, you can go to strAPI official website to learn, or contact me, I will send you the video ~
Topic to share: Flutter’s practice on Tencent Penguin Tutoring
Lecturer: Tu Jinlin – Director of Tencent Education Flutter
The lecturer first introduced Flutter and then explained the practices on Tencent Penguin tutorial, including how native apps on Android, iOS and Pad embed Flutter and how to mix and switch native pages with flutter pages. In addition, the performance optimization of FLUTTER and the practice of FLUTTER for Web in production environment are discussed. The technical details here are limited by space and will not be expanded. If you are interested, you can see the lecturer’s PPT for understanding
To better understand how Flutter landed in Tencent, you can watch this video
Sharing topic: Usability optimization solutions for Large Web Projects
Lecturer: Guo Linshuo – Senior front-end Engineer of Tencent AlloyTeam
The project the lecturer is working on is Tencent Document, which is a large team, and a page is developed by many people. When there is a problem, it is necessary to designate someone to troubleshoot the problem, and then hand it over to the corresponding person to solve it, which is relatively inefficient. This sharing explains how to solve the problem, mainly divided into the following three aspects
Script error monitoring, optimization and follow-up
The lecturer’s team locates the specific location of the error file through the script error monitoring and the code automatic sourceMap, finds the historical submitter of the current error line through the automatic script and git blame command, and automatically submits the bug order to the historical submitter through the internal work order system. Because the work order has an internal process to ensure that it will be processed.
During the development phase, if there is a script error, the window will automatically pop up, blocking the development.
The error magnitude is monitored, and an alarm will be generated if there is a sudden increase.
After the above measures, the number of errors reported online is becoming less and less.
Build, optimize and open the front-end log system
Through the above error monitoring, optimization and continuous follow-up, the problem of script error has been solved, but if there are some logic problems, it is also difficult to locate in large projects. This is where the log comes in.
Because it is a large project, many logs will be generated in the front end, so reporting through the front end is unreliable and easy to be lost during uploading. Let’s take a look at what Tencent docs has done to solve the logging problem
- Using the client (wechat, QQ) interface, through the client reported to the internal log system
- In order not to block user interaction, worker thread is used for reporting.
- All asynchronous requests are intercepted and monitored, which is equivalent to a remote packet capture at the front end, which can be found by an ID
- It is easy to receive feedback from real users
- Address any problems encountered as test cases to prevent future recurrence
Tencent document “white screen” monitoring system and optimization
- Increase loading to reduce user anxiety
- Load retry static files that fail to load, and combine the wait-external-webpack-plugin to ensure that the code remains in the correct order of dependencies after retry
- If the load fails, the system displays a message indicating that there may be a network problem and asks the user to refresh or provide feedback
- In order to check that the loaded resource is consistent with the published resource, the integrity genus of the script tag adds the SHA1 value of the JS file for consistency checking
- In order to prevent carrier hijacking, a content security policy (CSP) is adopted
Topic: Tencent OMI + – OMI framework front-end ecological empowerment and innovation practice
Lecturer: Lei Zhang – well-known OMI author of open source framework
There are more than 80 pages of PPT to share, and the live sharing is even over time. Here I will make a long story short and talk about some core content
Cross-Frameworks Framework
OMI is a cross-frame framework, that is, OMI can be combined with react, Vue, Web Component, Kbone, Preact, three.js and other frameworks. Components written in OMI can also be used directly by frameworks such as React, Vue, preact, etc. Conversely, components written in OMI can be used by frameworks such as React, Vue, Preact etc.
OMI-THREE
Another interesting thing is Omi-Three. If we write a game or 3D scene purely based on three.js, we need to create many instances, such as new scene, new cube, put a light effect here, add a rotation here, All this requires us to write some imperative code to handle. However, omi-three allows us to complete the above content in declarative form. Let’s look at a demo:
The code to do this is declarative and clear:
There are other contents about OMI, such as OMI + React, OMI + Vue, OMI + Kbone, OMIX, OMIM and OMI design philosophy. If you are interested, you can refer to the lecturer’s PPT for more information
Topic: The Ultimate SSR: Building High-performance Web Isomorphic Pages for High Efficiency
Lecturer: Duan Longxian – author of Vue syntax compiler engine AGA
Why do WE need SSR
- Better SEO: Search Engine Optimization
- Faster First Meaningful Paint (FMP: First Meaningful Paint)
The present situation of the SSR
- General SSR, the first screen (FMP) depends on all the interfaces of the page, the first screen is not necessarily fast, at the same time, block transmission has extra workload
- Low development efficiency: Traditional SSR, DOM operation, low development efficiency, difficult to maintain, homogeneous page response time (TTI) is long
- SSR page switching cannot be progressively loaded, and transition animation cannot be defined during page switching
What is chunking transfer
Instead of waiting for all of the page’s interfaces to return, the page header interface responds to the page. FP(First Render First Paint) and FCP(First Contentful Paint) are faster
For example, a request of V.qq.com can be returned to the first screen by using block transmission, and the following content can be returned after the data is pulled. Note that this is a request
Lecturer team practice
When Vue is compiled, the Vue syntax is compiled into string concatenation, and isomorphic development is achieved through automated block transfer.
Block transmission automation
- The program analyzes the asynchronous data of the template and automatically splits the template
- Data dependencies are automatically collected based on dependencies across templates
- Automatically associate local templates with data
Sharing topic: Serverless SSR practices
Lecturer: Shui LAN – Alibaba front-end technology expert
It is not easy to do SSR. First of all, we need to ensure the stability of Node service, during which we may encounter the following problems:
- Excessive Disk usage
- The memory load becomes high
- Out of memory
- The Node service has an error. Procedure
- The Node is down
- Expanding and shrinking capacity, machine cutting
Also consider how to share a set of code:
- Differences in rendering mechanics
- Limitations of the on-end environment
- How are data requests handled
- How can state contamination be avoided
- Open the development and debugging environment
In the first part, the lecturer’s practice is to deploy node services to serverless, which has the following benefits
- Functions as a service (Faas) allow developers to focus more on the business logic itself
- Natural isolation, dynamic repair, function independence
- No operation and maintenance, full hosting service, on-demand execution, elastic expansion
In the second part, the instructor uses Ali’s open source Rax to solve a problem shared by both ends of a code
Rax is a cross-end solution that follows the React standard and can be deployed to Ali’s FC or foreign Now Serverless providers by executing a command through the scaffolding of Rax
What is noteworthy here is that in Rax, the mapping of request initiation and route can be isomorphic to the front and back ends. Limited by space, interested students can check PPT or Google: Rax
Sharing topic: Tencent Education Serverless practice and exploration
Lecturer: Jiang Linyuan – Tencent IMWeb front-end engineer
Serverless logical architecture
Serverless = Faas + Baas
A preliminary serverless
As shown in the figure above, users upload the code of cloud functions (or write directly with the online editor) on serverless platform of Tencent Cloud.
Once we save, we can set the trigger,
The Event Source above can be an API gateway trigger, which is triggered by a request. Other triggers include: timing trigger, COS trigger (COS is triggered when an upload is received, for example, an image is uploaded, which triggers a cloud function for compression), message queue trigger, etc.
BaaS, which provides support later, provides many back-end services, such as AI, which allows us to call the recognition interface of voice and image, and cloud DB, which does not require manual maintenance, as well as object storage, such as uploading pictures and videos, returning source to CDN, etc. It’s so convenient.
Cold start
At present, I have experienced that Tencent cloud does a good job in cold startup. As long as there is access within a certain time threshold, there is no problem of slow cold startup. However, if the cloud function is not accessed for a long time, the first access will be slower later. It’s acceptable.
Tencent education related business landing
The lecturer mentioned two businesses that completely use Tencent Cloud Serverless, as follows
Penguin memorizing words
Tencent Classroom – exclusive gift package for newcomers
Tencent Cloud Serverless devOps
In the internal practice of Tencent Education, devOps is also very perfect. The whole process is as follows:
After the push code is developed into Git, the code construction (YARN && YARN Build, etc.) is automatically triggered, and the test environment deployment of cloud functions is automatically triggered. In addition, the pre-release and release environment can also be smoothly deployed through the internal delivery system
Sharing topic: The way to improve efficiency of Ali Console system
Lecturer: 潕 volume – Ali front-end technology experts
This is the console system
To sum up the sharing in one sentence: Through the internal material system (which can be understood as the accumulation of NPM’s public UI component library), Ali developed a Fusion system, which is convenient for designers to configure the design draft. The configuration granularity of the system almost meets all the needs of designers, and every parameter configured will be recorded. When designers submit the design draft, According to the configuration content, an NPM package will be generated. The front-end development and update of the NPM package can obtain the designer’s results, which are based on the material system, that is, after the code is generated, it can be read based on React (Ali uses React uniformly). Then front-end logic can be added on this basis. The problem of communication with the designer has been solved completely.
workflow
Here is an example of the theme configuration (the other examples are missing from the PPT):
All PPT of the conference can be obtained
- Welcome to “front-end Q”, just reply to tWeb or ebook
The last
- Welcome to add my wechat (Winty230), pull you into the technology group, long-term exchange learning…
- Welcome to pay attention to “front-end Q”, seriously learn front-end, do a professional technical people…
