Writing in the front

I have learned that GMTC 2019 will be held in Beijing and it is also the front end of EE collaboration document in March this year. I recommend our team to share with GMTC, so I also organize team members to learn from industry leaders. Our team was also lucky to share the “Practice of Cross-platform Desktop Client Development Based on Electron” in the cross-platform special session of GMTC. Those who are interested in it can follow us and share relevant information in the later stage.

Share the theme

Due to the limited space, we selected some popular topics to introduce the content of the speech and the impressions of the participants. The WebAssembly section is written in English by an American brother of our team, so we will not translate it, please forgive me, haha.

Exploration of extreme front-end performance optimization(sarahchen)

1. Four stages of optimization

2. Plan

  • Status: Assess whether or not you need to optimize the data and why
  • Objective: Mainly the data ideal state of performance optimization, and the main factors of optimization plan formulation
  • Results: Most of the results achieved after optimization are not as good as the target

3. Difficulties

  • Hard power: technical knowledge, coding ability to achieve required functionality
  • Soft power: demand combing && promotion && data support (platform) to realize the value of optimization

4. Practical cases

  • Text Compression (principles of GZIP)
  • Image compression (visual deception, color sensitivity to the human eye)
  • Baidu Brazil official website

The author think

The scope of optimization is not limited to technology, but can be extended to products and even the means of operation, without boundaries.

  1. In the field of the front, we are faced with the end user or a screen in front of the person, so can the human ability within the scope of search optimization space, such as image compression scheme for the human eye vision deception, computer will faithfully rendered all pixels, don’t have the ability to recognize, but human eyes in a certain degree of image quality loss will not be found, It also achieves the purpose of reducing the volume
  2. Case study on Baidu Brazil website: The feature of baidu Brazil’s official website is to open a local introduction page, which contains a great man picture of about 126K and does not allow compression. The results of several optimization schemes made by their team in terms of technology are not up to expectations. In addition to the basic lossless compression of a small amount of revenue, The final solution was to flood local ads with the image and have local operators and as many devices as possible cache the images to achieve the effect of seconds off, a solution that required a state machine to push

For optimization work, data support is very important, it is possible to strive for more resources, no data to create data, results are meaningful. I also made the data monitoring platform mentioned in the speech in my last company. On the one hand, I lack the promotion ability, and on the other hand, MY own investment may not be enough, so I stopped at the initial stage.

Debug’s time machine capability provides full interactive replay capability (exceeding expectations for request and response interception).

  1. Replay of all actions and payloads
  2. Replay of network request reqeUST and response

Working for 10 years, I explore on the road of front-end professional growth(Zhang Xinxu)

The author many times encountered CSS problems, always can find satisfactory answers in Zhang Xinxu’s blog, in this first to thank Xin Xu greatly selfless sharing. Zhang Xinxu’s special show has a lot of students to participate, the students should feel the scene, the door is crowded with people (forgot to take photos, fled). Like his blog style, his live sharing atmosphere is so funny that it makes the audience suspect they may have entered the crosstalk specials.

Zhang Xinxu shared the comparison between her life in the past and the present. Compared with the past, her material life has been greatly improved, but what is more, she is satisfied in the spiritual level. She is engaged in the work she likes, and can work freely in technology. And because of their share, to the industry classmates to create value, can be thanked by everyone, is respected by everyone. Then he shared the path of his inevitable success. He and Ruan yifeng are the same kind of people, who have kept on doing and sharing for more than 10 years. As he said, in retrospect, focusing on professional technology has become a shortcut to catch up with others.

Then I shared my own learning methods, namely learning, practice, induction and summary (sharing), but few students persisted in doing it. What he encourages everyone to do is to insist. Some students feel guilty because they enjoy playing (fishing for three days and basking in the net for two days). He says enjoy playing and study without feeling guilty. Even if you play for three days and only study for half an hour, if you keep at it, you will surpass many other people.

Finally, he shares his own view of wealth acquisition, which is positively related to the value you create. First, you need to create value (divided into industry value and enterprise value), and second, you need to show that you create value. Xin Xu shared her own example: Through her persistent blog sharing, she not only created industry value (helped others grow, helped the industry grow), but also improved her own technical level, and brought wealth to herself. Internally, the company solved the problem of a novel writer not being able to produce a beautiful novel cover with its own technology, bringing great value to both the company and the author of the novel.

Although the whole sharing was full of chicken soup, WHAT I saw was how an ordinary person achieved success through his own efforts and perseverance. There was no magic tricks, only persistent investment.

Construction of a dynamic platform based on the cross-platform framework Flutter

As a cross-platform solution, The Flutter, launched in 2018, is an excellent cross-platform solution. With Release 1.0, Meituan actively followed up with the Flutter technology. The biggest shortcoming of Flutter in its excellent cross-platform scheme is its lack of certain dynamics. So the Meituan Technical team developed the ability to be dynamic based on the Flutter to form a dynamic Flutter development platform.

  • Logical layer dynamic: Add the ability to run JS with JSCore by modifying Flutter Engine
  • Render layer dynamic: Add XML + CSS to the Flutter Framework layer to parse XML + CSS into the Widget tree, using the Rendering engine of Flutter.

Perhaps due to secrecy, the details are limited, but the overall architecture and solutions are outlined, such as how the dynamic UI layer can invoke the Flutter interface or JS interface capabilities. From the perspective of technical solution, compared with the jsonSchema chosen by xianyu team before, it chose a more complex and technologically difficult solution, which may be due to the need of platform construction to provide richer dynamic capability.

Application of TypeScript UI framework based on the Flutter engine to raspberry PI

In view of the problems faced by embedded device UI development in the IOT era, such as fragmentation of devices, lack of dynamics, and low development efficiency, taobao rendering technology team built a TypeScript based on the Native engine of Flutter. Programmable custom UI rendering pipeline with 2D/WebGL/WebGPU capabilities.

  1. Technical features: Flutter engine + TypeScript + GCanvas
  2. The overall rendering is divided into two parts: the TypeScript part is the custom rendering pipeline, and the rest is the engine

Tree construction: Widget Tree -> Element Tree -> Element Tree -> Render Object Tree Composition: The Offesetlayer or PictureLayer engine part uses rasterized caching. The upper layer can specify whether the component is complex, whether it will change in the future, etc.

Dart/dart -> flutter is not necessary. The team built a UI framework around the platform itself, using only the Flutter engine, disusing Dart, and using TypeScript. With the trend of technologies like the Flutter, individual developers can build a better development approach based on the characteristics of the current business and development platform.

A DOM-based architectural pattern for a collaborative slide editor

Technical selection of slide editor

Graphic technology selection
  • SVG: The advantages of supporting Event Handler, mobile terminal normal display, simple implementation; The downside is that there are performance issues
  • Canvas: Good performance, high rendering efficiency; The disadvantage is that the implementation is complicated and needs to be adapted to mobile terminals
Text technology selection
  • SVG/Canvas: The implementation is complex and currently only used by a few vendors
  • HTML DOM contenteditable: It is simple to implement and can make the most of the browser features, but execCommand is not perfect and the GENERATED HTML structure is not controllable, so it depends entirely on the browser implementation
  • Various third-party editors: Based on Contenteditable, data and UI are separated, data and DOM are consistent, and customization is extensible

Algorithmic implementation of collaborative slides

Collaborative slide algorithm is divided into two parts, one part is real-time collaboration OT algorithm, the other part is the slide graph transformation calculation.

OT algorithm: Insert, remove, and retain are used to represent document contents and their modifications

The basic concept of OT algorithm is to transform the following operation according to the previous operation, in order to ensure the consistency of the final calculation results.

For example, we have a string ABC, and two users are editing the string in real time. Xiao Ming inserts x before a. The operation can be described as O1 = Insert[0, ‘x’]. O2 = Delete[2, ‘c’]

In order to reflect the effect of real-time collaboration, on Xiaoming’s page, we first perform O1 operation on his string, and then apply Xiaohong’s O2 operation to the page. At this time, we need to transform O2 operation to O2′ = Delete[3, ‘c’], and then calculate. O1′ = Insert[0, ‘x’]; O1′ = Insert[0, ‘x’]

Graph transformation: matrix operations

It is a bit complicated to calculate the final position of a graph after a series of operations such as translation, rotation and scaling. Fortunately, there are mature algorithms for these basic graph transformations in graphics. For example, scaling can be represented by the following matrix:

It is worth mentioning that transform properties such as CSS are also implemented through matrix operations in essence. CSS provides matrix method for complex graphics transformation operations.

The author felt

  • Technology selection needs to consider stability, compatibility, scalability, implementation cost and other aspects
  • The current implementation of the editor relies on third-party libraries, and eventually it is expected to be implemented by the browser at the standard level

Front road thinking

Zheng Yefei, senior director of Alibaba, shared four technical directions of ali Economy Front Committee:

  • Building services: framework standardization, module standardization and service standardization (from my personal understanding, it means to unify the development process, reduce different products and technologies brought by technology selection, and better maintain the code)
  • Serverless: Cloud + end, giving the front end the opportunity to sink
  • Intelligent: AI * front-end, greatly accelerate the Front End to complete static page development speed, effectively release manpower
  • IDE: link source development + visual research and development +FaaS development + small program decoration, get through the development of ecology

Personally, I think the most important direction is Serverless, which gives the front end more ability to contact business. Although the birth of Node gives the front end a chance to contact the back end, on the whole, due to the lack of monitoring, SQL understanding, operation and maintenance ability and other related technologies, most of the front end cannot become a qualified back-end development. But Serverless naturally isolates all of this, so that the front end only needs to care about the business logic when writing the back-end code, and can customize the interface itself, doing the dirty work that the back end didn’t want to do. In this way, with Serverless, the front-end can have its own ability to complete the entire technology development, and further strengthen its own thinking on business logic, so as to better control the business.

Upgrade of Taobao front-end R&D mode based on Serverless

Serverless = FaaS + BaaS

As one of the most popular concepts in the front-end space these days, Serverless architecture enables lightweight business server development, enabling business development to focus more on business implementation, without having to consider resource utilization, operation and maintenance costs, and other things (which of course depend on a powerful platform). This architecture not only improves the efficiency of business development, but also brings more opportunities to the front end. The front end can be more involved in the delivery of business, not only limited to the browser

Using webpack to make Apps fast at Microsoft

As the Web grows, mobile accounts for an increasing share. Currently, the average interactive time for mobile web pages is 14s, with Javascript and CSS being the most expensive resources to load. Less code means shorter load times and faster interaction times.

Using a specific example of Microsoft’s internal website optimization, analyze page load times, locate performance issues, and then use WebPack’s Code Split feature to load code on demand and improve the first screen load time. We can even further enhance the function of Code Split through service worker and other technologies to improve user experience.

Page load performance is not only a technical issue, but more importantly, it increases retention and even payment rates for our users and is worth focusing on and continuing to optimize.

Conclusion: Through an example of Microsoft’s own website optimization, it not only shows us how to use WebPack code Split to improve the loading performance of our website, but more importantly, it shows us how to optimize the whole process at one time. Identify the problem -> Identify key indicators (data) -> analyze the problem -> locate the problem -> summarize the problem (underlying cause) -> fix the problem -> verify the effect (data improvement).

WebAssembly – Technological change, the future is here

The WebAssembly talk did a great job of summarizing the history and motivation of WebAssembly, the progress made so far, and what lies ahead for WebAssembly project. The conclusion seems that WASM is ready for production, but that doesn’t mean everything should be rewritten to WASM immediately. Rather, focus on performances bottlenecks and maintain code usability.

The beginning of the talk covered where the bottlenecks in JS come from, not just parsing and optimizing JS code, but also the JS language specification itself. This slide captures all the work involved adding two numbers in JS.

All four major browsers have already shipped support for the MVP of WebAsm. In the PPT, you can see a basic example of how to get WebAssembly code running in your browser. The slides give you a brief overview of the binary WASM format, and a quick example of how to compile C++ code to WebAssembly. With the first MVP of WebAssembly, people have already created photo editing libraries, porting C libraries like MozJPEG (C++) and webp (C) to WebAsm. Ebay has shipped a mobile barcode scanner to the browser using WebAsm. The two focuses of the WASM MVP were to enable high-performance compute, and to allow for code reusability.

As for WASM goals post-MVP, significant progress is already being made in threading, SIMD vector instructions, and system call integrations. Chrome 74 was shipped WASM threads providing atomic load instructions, mutex locks, and shared memory via SharedArrayBuffer. 128-bit SIMD instructions are planned for the next version of WASM along with many more optimizations.

Another big development in WASM came with the system interface for Wasm. WASI provides a secure and low-overhead sandbox for invoking system calls directly to the OS. Fastly CDN has already developed a runtime written in Rust to run Wasm on your system outside of a web browser called Lucet.

Overall, the talk was a great overview of the current progress of WebAssembly. The speaker made a compelling case for the benefits of WASM. The PPT includes plenty of instructive code samples for how to get started with WASM by yourself. The conclusion seems that WASM is ready for production, but that doesn’t mean everything should be rewritten to Wasm immediately. Rather, focus on performances bottlenecks and maintain code usability.

Wasm concludes with advice: Find performance bottlenecks and use them selectively. Do a degradation plan to ensure availability.

Write in the back

This conference brought a lot of harvest to the team of students, but also expanded everyone’s vision. Also saw some mixed zhihu and other community leaders (Winter, Hax, Wolf uncle, Zhang Xinxu, etc.), not ashamed to take a picture, slip slip.

Article author: Flying book team.

Invite great people to do challenging things together! Bytedance Efficiency Engineering team R & D job openings, want to become a technology expert partner come and see! Job description