Focus on the large front-end field to help you accurately grasp the core development context!

This article focuses on the important progress and dynamics of the big front-end field in 2021. I hope it can help you accurately grasp the core development context of the big front-end field in 2021 and always maintain sufficient knowledge in the industry. Technical acumen.

At the beginning of this article, let us first have an overall understanding of the large front-end field. What stage is the big front-end currently at in its development?

1. Big front-end: tends to be stable, and the future can be expected

In summary, the current big front-end field itself is tending to a stable stage , the frame features become fewer, the various wheels become fewer, and there are few things that can make people’s eyes shine.

The current front-end stage belongs to the early stage of exploration from standardization to maturity

This stage is more about exploration towards refinement, focusing on discussing how to refine the previous things. , the effect is better, many technical directions have begun to be subdivided, such as visualization, engineering and other more vertical fields that are currently attracting much attention. During this process, further technological breakthroughs and improvements are still needed in all directions, and compared with the process from 0 to 1, the process from 1 to 100 is more difficult to overcome. Of course, from another perspective, the continuous refined exploration process has also brought more unknowns, so the front-end is still an exciting field in general.

Next, this article will unravel this year’s trends one by one focusing on several directions that currently receive relatively high attention in the large front-end field.

2. Key technical steering points

Cross-end technology: Flutter may become a mainstream solution

For cross-end technology, we need to talk about it in two parts. On the one hand, it is the "end", and on the other hand, it is the "technology".

First, in terms of "end", we need to perceive two changes this year:

• Hongmeng 2.0 was officially released in June this year, and the Taro cross-end framework has been The release of a new version supports the adaptation of Hongmeng system. In the future, Hongmeng adaptation needs to attract special attention; At the same time, it has once again promoted the construction of VR/AR and other supporting facilities. Therefore, for the large front-end field, the increasingly popular end-end technology of VR/AR equipment also needs to attract focus.

• Secondly, in terms of "technology", cross-terminal technologies are emerging in endlessly, but it is undeniable that when faced with complex business scenarios, cross-terminal frameworks still cannot achieve the performance and experience The same effect as Native. However, under the premise of reducing costs and increasing efficiency, cross-end technology is still one of the current key areas of focus.

This year, what needs to be focused on is:

Flutter 2.0 officially supports the web side. Flutter has attracted more and more attention in China in recent years, and many major manufacturers have related practices. Even this year, it seems that the momentum has caught up with React Native, and may become the mainstream solution for cross-end technology, so its related new features need to be focused on. ;

• This year, major manufacturers are accelerating the layout of mini programs, and mini programs may become the next market that manufacturers will chase each other. Because the current App traffic has basically peaked, it is no longer possible to develop a "national-level" App. Therefore, using App as an operating system and using small programs to drive users and form a closed user loop may become the next step for various companies. The key to seizing traffic. However, at present, small programs are not particularly mature, and the lack of a complete standard has become the biggest problem they face. Will this be solved in the upcoming 2022?

• Frameworks: Troika still dominates

For the eighth year in a row, JavaScript has become the most used language, 67.7% of the respondents chose it. It is no exaggeration to say that JavaScript still dominates web front-end. Against this backdrop, we’re used to seeing JavaScript frameworks like React, Angular, and Vue dominate. The new features or developments of the three major frameworks that need to be paid attention to this year are as follows:

React: The most discussed this year is React 18, which has entered the RC stage and is expected to release an official version in early 2022. . 18 brings some new features, such as: Suspense SSR is officially released to implement concurrency-based rendering. In addition, React released the react server component at the beginning of the year. It has not yet been widely used, and its value needs further verification.

• Vue: Vue released version 3.0 in September last year. At the beginning of development, You Yuxi originally planned to be compatible with IE11 after the initial stability. However, as the global usage of IE 11 gradually increased At the beginning of this year, You Yuxi announced that Vue 3 would no longer support IE11. From this, it is not difficult to infer that the IE browser may withdraw from the stage of history in 2022, and the front-end compatibility burden will be reduced in the future.

• Angular: Angular generally releases a major version every six months or so. The major versions released this year are Angular 12 and Angular 13. New features in Angular 12 include null value combinations and the deprecation of View Engine; new features in Angular 13 include full enablement of the new compilation and rendering engine Ivy and the announcement that IE11 will no longer be supported.

Of course, some potential frameworks are also worthy of attention. Here is an example: Svelte. The reason why I recommend it is because it ranks among the most upvoted answers. Many big names have had heated discussions on the practice of Svelte. It has attracted a lot of attention this year and is worth learning from.

Here we also quote the answers from You Yuxi and other big guys to give you a summary. Svelte is a component framework. The core idea is to "reduce the amount of code during the framework's runtime through static compilation." Compared with React and Vue, its biggest difference is that during compilation and runtime, components will be converted into high-efficiency components during construction. The executed command code makes updating the Dom more efficient and provides a better user experience. Svelte can be used alone or in combination with other frameworks to build web applications.

Of course, it seems that Svelte also has potential problems at present:

• Although the amount of code in the simple DEMO is indeed very small, the same component template, the code generated by the operation The amount will be larger than the VDOM rendering function, and there will be a lot of repeated code in multiple components.

• It remains to be seen how well Svelte will perform in larger applications, especially with lots of dynamic content and nested components.

• Svelte’s compilation strategy determines that it is insulated from VDOM.

Micro front-end: gradually popularized

The so-called micro front-end concept is actually similar to the micro-services to the back-end. The front-end business is developing to After reaching a certain scale, an architectural model is also needed to decompose complexity, so the application of microservice ideas in the front-end field emerged, that is, micro-frontend. It splits the front-end application into smaller and simpler pieces that can be independently developed, tested, and deployed, and clarifies the dependencies between them.

If you look at the micro front-end as a whole this year, it can be considered popular. In addition to the old micro-front-end solutions such as single-spa and qiankun, there are many new micro-front-end solutions in China that are open sourced.

This is mainly due to Webpack 5's support for the Module Federation feature, which allows JavaScript applications to dynamically import code from another application at runtime. This feature gives the micro-front-end architecture great potential. There are also services based on ESM and WebComponent that start from the Web standard level and provide developers with the ability to implement micro front-end architecture.

Precisely because there are many solutions for implementing micro-front-end, major manufacturers have launched their own micro-front-end solutions, such as JD.com’s MicroApp, ByteDance’s Garfish, and EMP2.0 from Huanju Times, etc.

Serverless: Building infrastructure is the key

Serverless, the full name is Serverless Computing (serverless computing), also known as FaaS (Function-as-a-Service, function as a service), is a model of cloud computing. Under the serverless concept, computing resources appear in the form of services rather than servers. For developers, serverless-based application deployment can be implemented at the service level without having to worry too much about server issues, which also increases the efficiency of software development and software iteration.

Serverless is not a new concept that has only started to emerge in recent years. In 2006, Zimki created the first platform to provide server-side JavaScript applications "pay according to actual calls". Up to now, Serverless is still advancing steadily. This year's focus is on building infrastructure, front-end and back-end integration based on Serverless It will be the general trend.

Here we focus on an open source framework called Midway Serverless. The open source framework Midway Serverless is a set of development solutions for Serverless cloud platforms produced by Midway. The second major version 2.0 was released in March this year.

In the 2.0 version, its new features are the integration of application functions, front-end and back-end, which makes development more efficient. It is foreseeable that in the future, as Midway Serverless better adapts to various cloud vendors, it will be leader in this field.

Node.js: Steady development, check for deficiencies and make up for them

Node.js was developed by the great god Ryan Dahl in 2009. Its birth brought great changes to the front-end. A big surprise, after all, it directly allows JavaScript to "take it all forward". So today Node.js has also become an essential infrastructure for Web front-end development.

Looking at the content of Node.js source code updates this year, it is generally in the stage of stable development and checking for deficiencies. There are no major changes, but the ease of use and ease of use have been greatly improved.

There hasn’t been much movement in its community this year. Here we briefly review two major events worthy of attention in the past two years:

The merger of the Node.js Foundation and the JS Foundation For the OpenJS Foundation

In March 2019, the Node Foundation announced on Medium that the Node.js Foundation and the JS Foundation merged to form the OpenJS Foundation. The OpenJS Foundation aims to promote the health of the JavaScript and web ecosystems by providing a neutral organization to host projects and help fund activities that benefit the entire ecosystem.

Officially stated that, on the one hand, by increasing collaboration between the JavaScript ecosystem and affiliated standards organizations, the OpenJS Foundation can more effectively create a more dynamic home for any project in the JavaScript ecosystem to meet their needs. Infrastructure, technology and marketing needs.

On the other hand, the merger of the two organizations will help streamline the foundation’s day-to-day operations, minimizing redundancies while working toward complementary goals. This will also provide an opportunity to improve member engagement and avoid confusion and confusion among potential members when making choices.

At its inception, the OpenJS Foundation included 29 open source JavaScript projects, including jQuery, Node.js, Appium, Dojo, and Webpack. In 2020, Electron announced that it would officially become an Impact project of the OpenJS Foundation.

The community has multiple active working groups

The working group was created by the Technical Steering Committee (TSC), and there are currently 10 working groups in total.

Of course, when it comes to Node.js, we have to mention Deno, which claims to replace it.

Deno has well overcome the main shortcomings of Node.js, such as security vulnerabilities and package management issues. It also integrates many tools to facilitate developers to test and debug, so Deno's prospects are still quite good. , but currently there is no hope that it will replace Node.js in three to five years. The reason is that on the one hand, Node.js’ share is too high and its ecology is complete enough. Basically, any function you want can be found in the community.

On the other hand, although Deno pretends to solve the problem of removing the node_module module, it feels that it has used too much force. This incompatible approach directly abandons the rich ecosystem of Node.js, making Deno almost useless in the short term. Possible replacement for Node.js.

Front-end engineering: cost reduction and efficiency improvement are the general direction

Front-end engineering is the use of software engineering techniques and methods to carry out front-end development processes, technologies and tools , experience and other standardization and standardization, its main purpose is to improve efficiency and reduce costs, that is, to improve development efficiency in the development process and reduce unnecessary duplication of work time. In essence, front-end engineering is a type of software engineering.

Front-end engineering is a big concept. This article only details the compilation and construction link. There are two points that need to be focused on this year:

The first is Vite. Vite is a front-end construction tool based on native ES-Module developed by You Yuxi, the author of Vue, when he was developing Vue3.0. In his later promotion of Vue3, he was full of praise for his new work Vite, and said that he would "never go back to Webpack again." At present, Vite is indeed expected to become the best and fastest front-end development and build tool.

Vite 2.0 was released in February this year, bringing a lot of improvements:

• Multiple framework support

• New plug-in mechanism and API

• Dependency pre-packaging based on esbuild

• Better CSS support

• Server Rendering (SSR) support

• Old browser support

Second, Rust has an increasing influence on the front-end tool chain. It can currently be seen that Next.js has a "heavy position" in Rust, including the recruitment of a large number of talents, including SWC authors, Rollup authors, etc.

In October this year, the Next.js team officially announced the release of version 12. Its new features are as follows:

• Using Rust compiler: refresh speed increased by 3 times, build speed increased by about 5 times

• Middleware (beta) : Complete flexibility in Next.js through configuration code

• React 18 support: Support for new features such as Suspense, React Server Components

• AVIF Support: Select 20% smaller images

• Bot-aware ISR Fallback: Optimize SEO for web crawlers

• Native ES module support: consistent with the standardized module system

• URL Imports (alpha): supports importing packages from any URL (such as CDN) without installing through npm

Next.js 12 began to fully use SWC and Rust to replace Babel, which improved the refresh speed by about 3 times and the build speed by 5 times. It is foreseeable that more and more tools will be rewritten based on Rust in the future to obtain faster build and packaging speeds.

Low code: value has been recognized

Low code is also a very hot concept in the past two years. This year, we can see that all domestic cloud vendors are making efforts Low-code, such as Yidai, AppCube low-code platform, Weida, etc.

Take Yidai as an example, it can solve problems in specific scenarios. It is said that a certain PD uses Yidai to complete all product functions. This shows that the value of low code itself is still recognized by everyone and can be truly used. But how useful is low code? At least for now, it seems that the results are not great for professional developers.

For low-code, it is complicated to build it in the business domain. But technically speaking, it is not complicated. Drag and drop is limited to the module level. There are three core difficulties:

• Any DnD drag and drop module can handle it, such as Fabric;

• How to configure the configurable Schema for operation, which includes open source Formly and Form-Render;

• Module loader and page rendering mechanism , if it is just a single technology stack, this point is actually very easy to solve.

So it seems that the cost of construction is very low at present, and it is just a module production method of writing code on the front end. Next, we can visually generate modules to solve logic visualization (imove) and status visualization (xstate). And the problem of multi-state view (stateview), achieving true low-code generation module is the next trend.

Real-time audio and video: The 5G era has broad prospects

Real-time audio and video is a relatively vertical direction. The reason why I share it with you is because of its wide application in 5G Since then, audio and video technology has developed rapidly, and real-time audio and video interaction has been widely used in many fields, such as online meetings, online education, etc.

So this year, what developments in real-time audio and video are worth paying attention to? Here are two points to share with you:

First, as early as last year, SoundNet noticed that the industry represented by Apple had already begun to lay out the infrastructure construction of spatial audio. From the dual-channel acquisition capability on the acquisition side, to the multi-channel playback capability on the playback side, to the world-locked capability combined with the AirPods Pro series, it seems that the stage for spatial audio has been set in Apple’s ecosystem. This year, Apple has further opened up related spatial audio interfaces to developers, and some manufacturers have also successively developed spatial audio capabilities to provide a stronger sense of immersion.

Second, the voice AI codec lyra, which was first launched in the industry at the beginning of this year, has brought a new trend to the long-dormant codec circle. Subsequently, each company successively released voice AI coedc, which also verified the feasibility of using computing power in exchange for code rate from different underlying technical perspectives.

SoundStream, released in the middle of this year, also proved at the Demo level that the path to ultra-low bitrate audio coding and decoding seems to be feasible. After all, at the beginning of this year, the vast majority of audio practitioners could not believe that 3kbps could encode a "listenable" music signal.

3. Lower your head to pull the car and look up at the road

Looking back at this year, several major events that happened in the technology circle also had a great impact on the world. The front-end field has more or less impact.

First, antitrust. As mentioned earlier, the impact of antitrust: First, for small programs, it will prompt major manufacturers to further accelerate the layout of small programs, and at the same time promote the formulation of relevant standards for small programs; secondly, the API of devices may have many changes in the future. Strong control strategy. In fact, many companies are currently doing this, that is, sorting out APIs and managing permissions. Will this prompt the development of relevant standards in this direction in the future? Not impossible. Finally, domestic Internet traffic has peaked, and globalization of layout has become inevitable. For example, in countries such as India, there is still a certain gap in terms of infrastructure compared to ours. Therefore, going abroad to make money may become a major trend in the future.

Second, internationalization. The impact of internationalization is simple. Whether it is a company, large or small, at the beginning of determining the technology stack, it needs to consider language issues, compliance issues, and different market releases, etc., to prepare for future entry into the international market.

Third, the metaverse. Although it seems to be very virtual at present, it has once again promoted the development of VR/AR related supporting facilities. Will VR/AR become popular and mature this time? This cannot be inferred to say that it will not happen. Instead, we need to consider that adapting to various emerging devices such as VR/AR may be the next new breakthrough in high-end technology.

4. Written at the end

#When it comes to the big front-end, I often see many technical people complaining that it is too "volume". The reason is, It is nothing more than that the front-end entry barrier is low, the frequency of technology updates is fast, and the entry of junior front-end engineers on the market is coming in waves, which inevitably leads to many technical people feeling that they can’t learn.

In response to this confusion that everyone usually has, InfoQ also interviewed several big guys for their opinions in this inventory. However, the heroes all saw the same thing, and the answers given by the big guys were surprisingly consistent. : The front end is indeed very "volume", but "volume" is not necessarily a bad thing.

To be more specific, the "volume" in the front-end field comes from the above clichéd aspects. This is indeed true, but the most fearful thing about everything is to look at it from another angle. You can try to think about whether you don't need to learn if you don't do front-end. Yet? The answer must be no, so for every job or profession, learning should become a normal state, especially in the technical field. Once you join in, you must use a continuous spirit to build technical barriers for yourself. To put it bluntly, it is "Juan" that allows everyone to get rid of the position of "page boy" with low income and low ceiling. It is also "Juan" that has made today's impressive "big front-end".

So for front-end technicians, correcting their mentality is a major prerequisite. We must truly understand that the more the front-end changes, the more challenging and interesting it is. Complaining will not help solve problems. Only by participating more can you reflect yourself. value.

Returning to the theme of this article, this article shows you the relevant trends through several parts that have attracted relatively high attention in the "big front-end" field. Of course, the technology in the big front-end field is far more than this, and you need to learn and There is still a lot to know, but the original intention of this article is not to inspire everyone's "roll" mentality. After all, it does not mean that every engineer must master and apply all technologies to be successful, but if you want to be successful in the large front-end field Continuous in-depth study and understanding of the latest technological trends are essential for everyone's career development.

Finally, I hope this article can be an inspiration to all the front-end people who are scouring the sand, and I would like to express my gratitude again to all the teachers.

Interviewer:

• Hua Yuguo: Director of Huawei Cloud Front-End Technical Committee, Huawei Cloud Web Capability Central team leader. Responsible for building Huawei Cloud's Web infrastructure capabilities, including UI component libraries, R&D efficiency tools, DevOps processes and platforms, experience access control, low-code systems, console frameworks, etc. Previously, he worked for Alibaba, JD.com, and Tencent, and has rich practical experience in front-end architecture, front-end engineering, Node.js full stack, and mobile H5.

• Uncle Wolf: Network name i5ting, Alibaba front-end technology expert, Taobao Technology Department-front-end group, Node.js technology evangelist, Node full-stack public The account operator has worked for Qunar, Sina, and NQ, and has done front-end, back-end, and data analysis. He is a practitioner of full-stack technology. "Wolf Book (Volume 1): More Amazing Node.js" and "Wolf Book (Volume 2): Node.js Web Application Development" have been published, and "Wolf Book (Volume 3) Node.js Advanced Technology" will be published soon.

• Zhao Xiaohan: Audio algorithm engineer at SoundNet, WFH supporter.