Summary of the conference
On November 16, 2019, the first TWeb Conf Front-end Conference was successfully held in Sinovac International Convention Center, Shenzhen. Participants on siteNearly 500 people, online streaming of course enrollmentNearly 200 people. Through the public account, Zhihu, Nuggets, KM and other channels to promote, cumulative exposureNearly 10 w 。
TWeb Conf is a new “TWeb Tencent Front-end Technology Conference />” jointly launched by Tencent Web Front-end Technology Committee and Tencent Web front-end teams. It is hosted by Tencent and undertaken by IMWeb Team, Alloy Team and QQWeb. The conference organized various front-end teams in Tencent and invited well-known lecturers in the industry to share the most cutting-edge front-end technology, Web standards and excellent practical experience of leading Internet companies in Tencent and the industry, striving to bring attendees a high standard and high quality conference.
In this year’s conference, we invited 19 well-known front-end experts and front-line engineers from Tencent, Alibaba, W3C and so on to share, elaborately designed three sub-sessions and four theme directions: small program, engineering, Node and cross-end synthesis. The lecturers shared detailed and in-depth content, from problem solving of business scenarios to in-depth exploration of major open source frameworks, which triggered enthusiastic discussion among the audience.
Here, I would like to extend my special thanks to Tencent Open Source, the sponsor of this year’s TWeb Conference, and Tencent Classroom Next Academy for their support.
Thanks to the cooperative community Tencent Cloud + community, Tencent Cloud TVP plan, Tencent Documents, Nuggets, Turing community, SegmentFault, Coding, programming lion. Without further ado, let’s take a quick look back at the highlights from each convention.
The main venue
At the opening of the conference, Huang Junhong, general manager of Tencent social platform and chairman of QQ Technical Committee, made an opening speech: In recent years, the big front end field is booming. Applets, r & D tool chains, r & D performance, Node and Serverless, RN after the Flutter, the front-end function is also more and more important. With the change of Tencent’s technology research and development mode, from chimney wheel to open source collaborative and Taiwan-based technology system, Tencent pays more attention to embrace open source technology route. Therefore, we hope to share the excellent front-end practices within Tencent and even the industry with you through the front-end conference, and jointly promote the development of the industry.
At the same time, the conference also invited the company’s internal and external front-end field experts as guests to communicate with the conference.
The first session was “It’s time to learn about WebIDL”, brought by Wu Xiaoqian, general manager of W3C China. I shared WebIDL, a standardized, programming language-neutral browser interface description language. It introduces the origin of WebIDL, basic syntax, auxiliary tools, and the fusion of new technologies such as WASM, looks at the growth of the Web from another perspective, participates in the design of the Web, and finally encourages everyone to participate in the formulation of W3C standards.
The second session was “Headless CMS” shared by Zhang Yunlong, founder of Qiaozi Technology and former CTO of National Live Broadcast, which is a set of business solutions for small and micro projects. Through the use of open source project strapi. IO to quickly implement a new project online RESTFul API interface. Data structures, data relationship types, and API field types can be configured through visualization. Convenient and fast, it is really a big Gospel of small and medium-sized enterprise developers.
The third session shared the practice of Flutter on Tencent Penguin Tutoring by Tu Jinlin, who is responsible for Flutter technology of Tencent online education. Tencent online education team, as one of the practitioners of Flutter technology, A series of practical lessons on how to embed flutter in native apps on Android, iOS and Pad, how to mix and switch between native pages and flutter pages, get deep into the underlying flutter, memory first performance optimization, try Flutter For Web, and dynamic updates, all of which are dedicated to bringing the best experience to users.
In the last session of the morning, Guo Linshuo, senior front-end engineer of Tencent AlloyTeam, shared the Usability Improvement and Optimization Scheme of Large Web Projects. The sharing focuses on “script error monitoring, optimization and continuous follow-up”, “front-end log system construction, optimization and access”, and “Tencent document” white screen “monitoring system and optimization” to describe the practical ideas of usability improvement and optimization of large projects. The script error monitoring and Git submission record are used to automatically create work orders and distribute them to corresponding developers. Woker thread is used to report work orders so as not to block user interaction. It is a good practice to ensure the loading sequence of JS resources after loading failure through webpack-wait-external-webpack-plugin, and to prevent page content tamper hijacking by combining Subresource Integrity and CSP.
Small program & engineering conference
Small program development suddenly emerged, suddenly became one of the hottest front end direction, small program what unknown secret? What are the best practices? With the increasing complexity and diversity of Web business, engineering is an important magic weapon to improve the efficiency of coding, testing and maintenance, and how to improve performance and availability is also an eternal topic. This topic will invite small program internal front-line engineers and excellent practitioners in engineering, for everyone.
The first session shared “Kbone: A New Idea of Isomorphism Scheme of wechat small program” brought by June, a senior web front-end engineer of Tencent. Kbone is an official wechat framework based on vUE/React isometric small program, designed to allow developers to use the most familiar way to complete the development of a multi-terminal application, so that the code can be better reuse, subsequent maintenance is more convenient. June shared the background of the framework, its implementation, application scenarios, and practical optimization.
In the second session, Liao Zekai, senior engineer of wechat game and project leader of small game visualization tool, brought the topic of “Small game visualization tool Architecture Design”. We introduced a set of solutions for visualized configuration mini-games based on Scratch-locks and optimization practices for improving usability through PWA offline capabilities.
The third session shared “CLS-BASED B-end Efficiency Improvement Practice” brought by Peng Ziqiang, head of b-end front-end of wechat games. In the face of various operational needs, the wechat game team has made some explorations to realize the rapid establishment of the system based on unified component language specifications, accelerate the efficiency of multi-person collaboration by means of visual optimization process, and try to make the development easier.
The fourth session shared “From Jenkins to GitHub Actions — CI Modern History” brought by Tencent Web front-end senior engineer miao Zhaofeng. This paper introduces how CI industry rises and rises in the past 10 years, and how to make use of the power of cloud. The focus is on two different Jenkins and GitHub Actions solutions.
The last session shared by Tencent ISUX senior UI development engineer – Ting Chen “How to make machine read design”. This paper introduces a set of UI automation technology of Deep Blue R&D group of ISUX user experience Design Department. Understand the designer’s intention through computer technology, obtain the parameters in the design draft through OpenCV visual library and AI technology, and quickly achieve UI restoration.
Node & Architecture Conference
The era of big front-end has arrived, and Nodejs brings more possibilities to the front-end, SSR, performance and other related topics are also enduring, the recent direction of Serverless is also in full swing. This topic will focus on Nodejs traditional practices and more cutting-edge technology exploration, bringing best practices and more thinking to you.
The first session shared “Tencent OMI framework front-end ecological Empowerment and Innovation Practice” brought by Zhang Lei, senior engineer of Tencent Web front-end and author of OMI open source framework. OMI is a cross-frameworks Framework officially opened by Tencent in 2018. The author introduces OMI design ideas and OMI + Web Components, OMI + Preact, OMI + React, OMI + Vue, OMI + small program, OMI + Kbone and other related content.
In the second session, duan Longxian, author of Vue syntax compiler Aga, brought the topic “Extreme SSR: Efficient Construction of High-performance Web Isomorphic pages”. This share mainly introduces the optimization scheme of SSR compilation. The scheme deduces the dependence between different blocks and between blocks and data from AST through the context analysis of source code to realize automatic block transmission. At the template level, Vue syntax is compiled into string stitching, and the code compiled by AGA on the server side is 20+ times faster than Vue official VDOM, which improves the overall efficiency and performance of SSR development.
The third session shared Serverless SSR Practice brought by Alibaba front-end technology expert shui LAN. This paper introduces how to use Rax to develop SIMPLE and efficient SSR application and a whole set of SSR application development scheme. Through Rax CLI tools can quickly create, debug, build SSR applications, and can be published in the form of FaaS ali Cloud and other function hosting platform. Meanwhile, through continuous optimization of Rax kernel and framework, Rax’s rendering performance on the Server side is several times that of other mainstream frameworks in the industry. The leading adaptive transformations rendering mode maximizes the reuse of SSR content even when the two versions do not match.
The fourth session shared “Tencent Education Serverless Practice and Exploration” brought by Tencent IMWeb front-end engineer. This paper introduces the practice and exploration plan of Tencent online education Serverless, how to use Serverless to improve the efficiency of product iterative development, and the prospect of Serverless in the future
The last session shared by ali front-end technology experts -潕 amount of “Ali console system efficiency improvement road”. Starting from the problems encountered in Alibaba, the speech solved the demand for theme customization of BU in Alibaba through abstract component ability, solved the problem of front-end collaborative efficiency of design through workflow optimization, and solved the problem of development efficiency through business capacity precipitation
Cross-end & Comprehensive venue
Cross-terminal application is to increase code reuse, reduce the difference between multiple platforms, improve development efficiency, and bring better experience, performance, and more possibilities than Web. Back to the Web itself, what new technologies, new gameplay, will bring people what enlightenment? This topic provides references and help in other aspects such as R&D efficiency and performance optimization as well as Web innovation through sharing of front-end technology practices in the industry and Tencent.
First share “Building Flutter Applications with React” by Yuan Yan, head of Tao Wireless Architecture team. This paper introduces a scheme to develop Flutter application using React based on Kraken framework. Based on the high performance rendering of Flutter, it can be improved dynamically and development efficiency. How to use Kraken’s real machine Debugging method based on Chrome Debugging Protocol (support breakpoints, printing, exceptions, view object structure, stack, etc.) to enable developers to debug Flutter applications just like they debug the Web?
The second session shared by Tencent IVWEB PWA project leader – Wang Hanbing “best practices for enterprise projects based on PWA cache”. This paper introduces the optimization practice of NOW live broadcasting business in different business scenarios in the optimization process of PWA. It mainly introduces the performance optimization scheme for the first and second level pages, deals with the emergency situation of cache error, and finally precipitate a complete SET of PWA+ optimization scheme.
The third session shared “Mobile QQ Medal Wall Technology Insider — Mobile Terminal Smooth 3D Rendering Guide” by Qi Ji, the core developer of QQWeb team. This paper introduces four difficult problems in the business development of mobile QQ 3D medal wall: how to render 3D model with user nickname, how to achieve smooth interactive animation, how to break dimensional wall, how to render translucent transition animation. As well as the possible problems encountered in the implementation of mobile business using WebGL, the secret behind smooth interactive animation.
The fourth session shared “WASM-based file upload acceleration Practice” brought by Cheng Haibin, head of micro cloud front-end and member of AlloyTeam. Introduced tencent micro cloud, tencent document, tencent company business in the front end of the file upload solution, how to through the pass, multi-channel upload, breakpoint continuingly and WASM applications to implement the web upload speeds the perfection of ascension, bring better and more stable users upload experience, by combining calculation of application practice in this upload for everyone to explain WASM internal operation mechanism, Internal implementation of JS and WASM data transfer and how WASM improves performance.
The last session was “The Realization of Web Editor, from simple editing to professional typesetting”, brought by Zhang Xiang, the head of Tencent Word and the head of TIM Android. Describes how to implement a simple editor. And the selection of common editor frameworks, as well as sharing in depth the design, implementation, and use of precision typesetting editors.
Thank you
After a wonderful day of sharing, the lecturers, guests and staff had a group photo and dinner on the signature wall.
Thank you for the wonderful sharing of lecturers and the affirmation of participants. It is everyone who forged this technological feast in the front-end field together.
Thanks to all the TWeb Conf staff, everyone is dedicated, meticulous and conscientious for every preparation work of the conference.
Thanks to TWeb conference producers: Joltwang, Jetyu, Youkunhuang, Bleanycao, Svenzeng, Zishunchen, Vicyao, Superzheng, Herbertliu for their collection and selection of topics.
Thanks to the TWeb member team: IMWebTeam, AlloyTeam, QQWebTeam, clear platform Department (SuperTEAM), Tencent video, wechat small program, wechat small games, payment base platform and financial application line, Tencent IVWEB Team, Tencent news front end Team (TNFE), Tencent Watch WebTeam’s full support.
TWeb Conf 2019 is over!
TWeb online playback video course (purchase offline ticket email has been known to watch the link, online tickets can be directly watched) : ke.qq.com/course/pack…