The rapid development of front-end development brings new keywords to developers every year. As 2019 comes to an end, what will be the key words of front-end development in 2020? What is the direction of development? Referring to the development of the big front end in 2019, it is no surprise that the front end will still be developed around small programs, super apps, cross-end development, front-end engineering and the application of new technologies (please refer to the in-depth interpretation of the trend of big front end technology in 2019).

Small program

In terms of small programs, this year is still a year of rapid progress in small programs, major mainstream apps are online small program ability support, each front-end team also have a special small program development team, in order to adapt to faster small program development needs. At the same time, many key functions in THE App have been replaced by small programs, and some apps have even become Native small program shells, and the upper application implementation is all small programs.

Before the micro program appeared, everyone was talking about Hybird and ReactNative, but it was just a carnival at the technical level, without the injection of business attributes. The emergence of small programs, on the one hand, tells the industry that Webview is not bad on the current device, and on the other hand, tells the industry how to let the competent business on the super APP private domain operation.

On the other hand, from the technical point of view, under the strict restrictions of the upper DSL, super APP can define Web standards that meet its own demands, make up for the deficiencies of the current Web standards, and finally cooperate with the client to produce a variety of cool technical models similar to NSR by combining offline, preloading and customized Webview. Let the Web in the end to achieve a low cost Native version of the experience, the end of the Weex is not a little awkward.

However, due to the need to rely on super APP (wechat, Alipay, Baidu, Meituan, Toutiao, etc.), due to the differences in specific programs adopted by different platforms, the implementation of small programs is different, and sometimes it is necessary to develop multiple sets of codes.

Across the development

In terms of cross-end development, the RN ecosystem is very mature, or doesn’t see much of a future, as it’s stuck at version 0.61 and 1.0 still seems a long way off. As a result, this year many teams turned to Flutter for Google Ecology, especially the first Release of Flutter for Web, to rekindle hope and excitement on the Web front.

At the same time, Apple has announced a new UI system called SwiftUI, and the open source community has already launched SwiftUI for Web. Is SwiftUI for Android far behind?

Flutter on JS, SwiftUIfor Web&Android will be something to look forward to in the open source ecosystem as there is still no perfect solution for Flutter.

Front-end engineering

When it comes to front-end engineering, the most important basic literacy for developers is to use tools to improve efficiency, and front-end developers are constantly iterating and optimizing in this area.

We used to talk about Yoman and CLI and other build tools, but as the team got bigger, we felt like we couldn’t do anything. Java students, on the other hand, have never heard of Spring Boot configuration engineers. This year, many teams are building a complete set of front-end DevOps process tools, and some teams have also started to collaborate. Whether it is Web or small program projects, there are perfect tools to ensure and improve the performance of new projects, development, tiAO, deployment, testing, release, operation and maintenance, and monitoring statistics. In the future, front-end engineering will become more standardized.

Looking forward to the development of the front-end in 2020, the front-end engineering system will definitely become more closed-loop. It is no longer a simple scaffold, but will combine IDE to get through business attributes, forming a complete closed-loop from project initialization, to code writing, to CI, to gray scale and to release.

Serverless

Serverless’s popularity can almost be attributed to the front end. Because Serverless supports Node.js perfectly, using Serverless helps front-end developers solve many problems in the process of using Node.js.

Most of the current front-end engineers are trained and can write a lot of server-side business logic, although they are not as good as the real server-side developers. At present, many companies are doing BFF layer to meet this part of demand, but they still cannot get rid of the obstacles of operation and maintenance and machine distribution. With the gradual implementation of Serverless, the code of BFF layer will get rid of complex problems such as operation and maintenance and machine allocation. At the same time, the front-end students will write this part of the code most likely, and the server students will focus on the realization of the mid-stage system. From a business perspective, the trial and error cost of the business will be significantly reduced.

With Node.js becoming a must-have skill for front-end developers, the increasing popularity of cloud computing will put Serverless within reach. As more and more developers taste the benefits of efficient r&d, Serverless will revolutionize the front-end development model.

Also, students who use Serverless will definitely use TS. This also means that if you don’t write TS in 2020, you might really be Out.

WebAssembly

WebAssembly is a new bytecode format that is now supported by all major browsers. Unlike JS interpretation execution, WebAssembly bytecode is similar to the underlying machine code and can be loaded and run quickly, resulting in a significant performance improvement over JS interpretation execution. In other words, WebAssembly is not a programming language, but a bytecode standard. It needs to be compiled in a high-level programming language and put into a WebAssembly VIRTUAL machine to run. Browser manufacturers need to implement the virtual machine according to the WebAssembly specification.

With WebAssembly, you can run any language on a browser. From Coffee to TypeScript to Babel, all of these things need to be translated into JS to be executed, whereas WebAssembly embeds the VM in the browser and executes directly without translation, which is much more efficient.

For example, AutoCAD is an automatic computer aided design software produced by Autodesk, which can be used to draw two-dimensional drawings and basic three-dimensional designs. When using it, without knowing programming, it can automatically draw, so it is widely used in the world in civil architecture, decoration, industrial drawing, engineering drawing, electronic industry, clothing processing and many other fields.

AutoCAD is written by a large amount of C++ code, which has undergone many technological changes, from desktop to mobile and then to the web. Earlier, there was a talk on InfoQ entitled AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web is an efficient way to make old C++ Code run on the Web via WebAssembly.

Liftoff, the new WebAssembly Baseline compiler, is currently included in HRome’s core JavaScript engine V8. Liftoff’s quick and simple code generator greatly improves the startup speed of WebAssembly applications. In 2019, many companies began to invest in the learning and transformation of WebAssembly, and it is believed that WebAssembly will experience an explosive period in 2020.

5G

One of the hottest topics in 2019 is 5G. First of all, the substantial improvement of 5G bandwidth has further enhanced the complexity of traditional Web pages, just as pages have changed from the text-only hyperlink era of WAP to the full-image video era of 4G in the transformation process from 2G to 4G. 5G’s transformation of the page will be huge, but it will certainly not happen overnight. Because the corresponding supporting facilities also need to be gradually improved, such as hardware performance and browser processing speed. And the server rendering (SSR) is certainly one of the shortcut, light front end heavy background, 5G is a bridge, put the rendering in the background, unlike isomorphism so simple, need to pay attention to and optimize the rendering performance. WebAssembly may see rapid growth in this opportunity, as it can seamlessly integrate multiple backend languages, and the optimization of backend rendering will lead to changes in front-end page development models and technical architectures.

Secondly, the Internet of everything brought by 5G will bring a variety of application scenarios different from smart phones and ordinary PCS. VR, wearable devices, vehicle systems, intelligent projection and intelligent interaction will bring Web into a variety of vertical fields, which also means that the front-end will have more broad space. It is believed that with the large-scale commercial operation of 5G, a group of new Internet giants will be born.