“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

preface

Again at the end of the front end of the course, review the whole 2021 overall front-end trend to a relatively stable stage of development, although there are still many of libraries and the wheel, but on the whole the year’s most prominent front end development actually can be summarized as the following key words, i.e., the engineering construction, low code, multilingual, cloud + + side. From the perspective of different big factories’ division of the whole front end, the whole can be divided into two categories. One is focusing, such as distinguishing each direction and achieving the best in each direction. The other is the integration, the whole upstream and downstream links through, expand the front-end boundary. From macro to micro, and then from micro to macro, I just have different ways of thinking. Here, I will talk about the overall development trend of this year and some possible trends and opportunities in 2022 from vertical and horizontal perspectives. In order to provide you with some different observation and thinking Angle.

The longitudinal

If the current front-end is divided into vertical layers, it can be roughly divided into three layers: “base layer, platform layer and business layer”. The following will be some thinking and exploration from different dimensions of these three layers

Base layer

There is no doubt that the biggest highlight of this year is the wide penetration of multiple languages into the front-end vision. Here are my personal views and opinions:

Node.js

  1. Node.js is applied in the edge side fields such as Internet of vehicles. As the most familiar language in the front end, node.js is more convenient to be implemented on the upper layer of C++ library based on existing traditional hardware manufacturers in IoT fields such as Internet of vehicles.
  2. Node.js is closer to the front end and not treated as BFF alone, while FFB transformation is more in line with the initial role of Node.js. When used as a pure backend, it is difficult to compete with traditional backend languages either due to the limitations of the language itself or the runtime performance of Node.js. Node.js is a better fit as a base layer on the front end.

Rust

  1. The core competitiveness of Rust lies in memory security. I think it has a large market in the edge with WASM. I think it is difficult to reflect its core value when building infrastructure in the front end, while in the edge with WASM, it may shake the position of Docker.
  2. Rust as a front-end infrastructure may have a certain market, but it is not enough to be the actual stock of its core competition. It is not clear whether rust is better than GO as a front-end infrastructure tool. However, IN the edge, I think its market is huge and it can be used as a field of in-depth research for students who are interested in developing in the edge.

Deno

  1. With cloud, there may be a breakthrough point. Its network module design is relatively excellent, which may rob part of Node.js space.
  2. Not optimistic about the overall development, private think there is no reason or impulse for a core to replace Node.js, but it is still an excellent scheme, has a certain reference significance for the processing of network modules.

Wasm

  1. The core lies in the cooperation with Rust to build infrastructure on the edge and open the market on the edge for long-term prosperity.
  2. As a “glue” of various other languages, it can be used with JS in browsers and other runtimes, such as Node.js, etc. (PS: we still need to consider the feeling of Deno). It also has a certain space for development imagination, but I am more optimistic about its development in the edge.

Go

  1. The core is Goroutine. In my opinion, as a front-end infrastructure side, it is difficult to compete with Rust, but GO is relatively easier to learn.
  2. Cloud side go as the second choice, must be GO, its ecology is perfect, students who want to dig deep in the cloud field must learn go.

C++

  1. As an old friend of the front-end, CPP, as the original development language of V8 and Chromium, has always been the foundation of the big brother of the major high-level languages, with stable development. I think rust is hard to shake its position, but the coexistence of the two is not impossible.
  2. Traditional hardware manufacturers expose CPP to the front end, such as V8 or other engines, which can greatly expand the development market. After all, JS is easier than CPP.

To sum up, the conclusion is as follows: At the end, Nodejs should be the main factor, Deno should be considered properly, and CPP should be combined with optimization; On the edge, Rust + WASM has a promising future. On the cloud side, go is the best choice. As the extension of front-end development, multilingual development should indeed be the keynote of future development, especially in the field of engineering, its market still has a very broad prospect.

The platform layer

At the platform layer, depending on some basic load of the base layer, the front-end generally presents the following platformization perspectives, namely, Serverless, construction, scene and framework. I will respectively elaborate some personal understandings below:

Serverless

  1. At present, there is no clear definition of Serverless, but in practical cases, the whole can be defined as “Baas + Faas”. In the Baas layer, computing and storage are separated, and in the Faas layer, “cloud + end” Web Function is provided.
  2. Sandbox lightweight VM based on Rust+Wasm, microVM is applied to sandbox isolation of Serverless;
  3. Multi-modal coordination, service-based orchestration rather than resource-based extensions, whole-stack observation, service-governable, and traffic-manageable.

build

  1. Webpack is still the mainstream of application packaging, rollup is mostly used for libraries, and gulp is more suitable for Node side construction.
  2. Multiple languages invade the front-end building space, such as ESbuild, Vite, SWC, etc. In constructing a side, the language level of RCC irreversible, and will become the mainstream of the platform layer construction scheme, packaging tools, after all, not every business development needs can range from zero handwriting, and a high-performance packaging solutions will have huge front development market, the rest is the language talent and authors collaborate to create infinite possibility.

scenario

  1. Different rendering schemes are selected for different business scenarios, such as SSG, ISR, CSR, SSR, ESR, SPR, etc.
  2. The nature of the choice of all scenes is the choice of render emphasis, there is no silver bullet in software engineering, choose the rendering scheme suitable for the business scene is the best policy.

The framework

  1. Meta Framework, Framework of frameworks, different end has different Framework, front-end has front-end Framework, server has server Framework;
  2. Framework evolution: pure front-end + pure back-end, i.e. Vue, React, Angular, etc., on the front-end side, Express, Koa, etc., on the back-end side; Business front end + business back end, namely, business front end Umi, Ice, etc., business back end Midway, Egg, Nest, etc. The back-end of the front-end or the front-end of the back-end, such as Next, Nuxt, and Remix.

To sum up, the summary is as follows: Serverless releases large front-end capabilities, multi-language build, multi-scenario selection, frame-based framework. From this point of view, it’s basically a shift from service oriented development to capability oriented development, from end engineer to application engineer.

The business layer

At the business level, last year, I roughly elaborated the basic direction of deepening front-end technology, and this year, I will focus on some highlights and feelings of the intersection of several directions:

Visualization + engineering

Position 1 as shown above

  1. Low code, especially logical orchestration. In LCDP, visual presentation of data logical orchestration or decision orchestration;
  2. State visualization, logical visualization, etc., visualization presentation in all engineering fields, from all links biased to machine to human can be visualized.

Visualization + intelligence

Position 2 as shown above

  1. Mass data layout display, combined with AI reasoning to build viewable;
  2. Link diagnostic path and graph pattern matching;
  3. D2C domain deepening, model optimization based on developers’ habits of thinking.

Engineering + middle background

Position 3 as shown above

  1. Engineering link closed loop, development => test => construction => deployment => monitoring;
  2. Each stage to focus, output engineering quantifiable products, provide background engineering template scheme, such as: development stage includes: scaffolding, public library, package manager, editor, construction tools, debugging kit, etc.; The testing stage includes: unit testing framework, static scanning tools, automated testing tools, performance testing tools, etc. The construction phase includes: package scripts, build services, etc. The deployment stage includes: release platform, iteration management platform, etc. Monitoring stage includes: buried platform, monitoring platform and so on.

Middle background + cross-end

Position 4 as shown above

  1. Multi-terminal frame presentation, mostly in the form of a Flutter structure, including a unified low-level engine of small programs, etc.
  2. The application of multiple operating systems, such as hongmeng operating system adaptation.

To sum up, the summary is as follows: engineering leads mainly, visualization provides humanized display, intelligence provides modeling ability, middle background + cross-end provides development programs for different users. Each subdivision of the field from their own depth, but also intertwined with each other, spurting out a variety of possible development, long separated, will be separated.

The transverse

From a horizontal perspective, I would like to talk about the development of some business or product forms that front-end engineers may involve in from the perspective of technology from the two dimensions of user-oriented and development-oriented. The more they tend to UX side, the more they tend to user side and the more they tend to business side. The more you lean on the DX side, the more you lean on the development side, the more you lean on the technology side.

Next, I will take the previous end technology as the anchor point to expand to the product side, and talk about my views and thoughts on some fields:

Product

Upper left corner of matrix

The document

  1. Co-editing, either on the B-side or just document editing;
  2. Massive data processing, such as financial table calculation, etc.

Design tools

  1. Design drawing to code;
  2. Design tool plug-ins, such as Sketch, Photoshop, etc.
  3. Coordinate to modify, cut diagrams, etc.

Component library

  1. Generic component library, themes, Design Tokens, etc.
  2. Business component library, business domain boundary determination;
  3. Design language + interactive language, material market.

Star

Upper right corner of matrix

Low code

  1. General capability engine: UI visual development, logical visual development, code language, production operation, quality assurance;
  2. Oriented to the audience, biased towards development, biased towards users;

Tech

Lower right corner of matrix

IDE

  1. Cloud integrated construction, cloud IDE and end IDE;
  2. Release, build function establishment, IDE peripheral and system construction.

devops

  1. Ci link, including requirements association, trigger mechanism, notification, script, storyboard, etc.
  2. CD link, including scheduling, monitoring, product library, publishing mechanism, etc.

Tool chain

  1. When the framework is running, write the framework plug-in, etc.
  2. Scaffolding construction, including construction tool selection, etc.
  3. Compiling and debugging tools, including custom debugging kits, etc.

Material

Lower left corner of matrix

Monitoring system

  1. Log monitoring, including log analysis and filtering.
  2. Link tracking, including link analysis, etc.
  3. Measurement monitoring, including quality analysis, health status, etc.

conclusion

Don’t stop at browsers, don’t stop at JS, where there is A Web Runtime is the front-end domain

Looking back at 2021 and looking ahead to 2022, the summary is as follows:

The three ages have not arrived, the meta-universe still needs to see;

Cloud edge end has come in the future, end engineering applications will become;

Large front-end expansion, running everywhere;

Browsers can not bundle about, multilingual trend and line.

Well, the year 2022 is here. I wish you all the best in this cold winter.” Line and continue, the future is promising “, mutual encouragement!