Author | Wolf uncle

This article, part of the “2021 Technology Roundup” series, looks at major advances in the big front end in 2021.

“2021 Year-end Technical Inventory” is a major project launched by Digger, covering Serverless, Service Mesh, big front end, database, artificial intelligence, low code, edge computing and many other technical fields. Looking to the past, to the future, review the development of IT technology in 2021, inventory the major events of IT technology, and forecast the future trend of IT technology. In the meantime, we’re kicking off our 15th tech-themed essay, with a look at what you see as the tech trends of 2022.

The introduction

Stay away from self-generated industrial garbage, exploration and deepening is still the general direction of the front end of the year, and the current front end has entered the deep water zone. To help you understand this view, let’s review what has happened to the front end in recent years.

  • From 2013 to 2017, it was the explosion stage of front-end development. New framework systems and ecosystems represented by React/Vue/Angular rapidly incubated, with new wheels appearing every month or even every week.
  • In 2018 to 2021, the overall front end will stabilize, with fewer frame features, fewer wheels, and very few surprises. At this stage, the front end begins to enter subdivision fields, such as engineering, data visualization, documents and other vertical fields that need to be deeply ploughed. At this time, the Roi of reengineering wheels is not high. After all, no matter how scaffolding is written, it will not be stronger than Umi, Cra and Next.
  • After 2021, the front-end starts to enter the initial stage of exploration from standardization to maturity. Various front-end operations have begun to be standardized, oriented to large-scale programming and standard formulation, which means that the maturity of the industry is gradually getting higher. ES specification, form building specification, B-side three major Schema, Web framework standardization and so on, from wheel building to standardization, the front end has taken a great step. Why is it in its infancy? The main reason is that there is still a lot of front-end experimentation going on at the moment, like midwya-hooks that combine front-end functions with Node.js and develop standard writing, like next.js that try to develop with Rust, like will WebAssembly replace docker…… These unknown explorations show that the front end is still in an era full of hope.

What are the front-end explorations for 2020 and 2021?

The exploration of the front end area focuses on fundamental direction, interdisciplinary convergence, business innovation and Prd2Code.

  • Fundamentals: ESM, HTTP import, Import Map, and more, led to new infrastructure like Snowpack, Vite, and Webpack5, as well as more food for Bundless. Of course, there are still many standards to be formulated, such as CDN service transformation between CommonJS and ESM;
  • Interdisciplinary integration: typical is front-end intelligence, combining AI and front-end technology to improve front-end efficiency. This direction is a good exploration of the front end, but it requires breakthroughs in the front end and AI’s own capabilities.
  • Business innovation: Intelligent UI is typical. Recommendation search on the server has reached a bottleneck, but UI and crowd segmentation on the server are not really well done. For example, for price-sensitive users, preferential price amplification on UI is not realized to promote conversion.
  • PRD2Code: Improvements have been done for many years in the field of front-end development only, but standing on the production link is a good direction to explore. Horizontal is not easy to do, do upstream and downstream, or there are opportunities.

On the infrastructure front, there are a lot of changes:

  • SSR benefits from Serverless’s rendering scheme, which in turn benefits from cloud native.
  • React-hooks, a fusion of The Node Web framework and React Hooks on isomorphism.
  • Rust is future front-end infrastructure, such as SWC introduced in Next 12.

On the basis of new infrastructure, the cost of developing a high availability system is getting lower and lower, but it needs to consider the front and back end cooperation mode and further split the division of labor.

There are many changes in the front end, and the only certain conclusion is that the front end enters the deep water zone, transitions from standardization to mature exploration, and deepens vertical and deep technological innovation.

Low code for developers continues to rise

Low code products for users, you’ve seen a lot of them. In certain scenarios, low code can solve the problem, but how much? So far, at least for professional developers, not much.

There are three main concerns of the front end: experience, quality, and efficiency. From an efficiency standpoint, this is the direct reason the front end likes to do low code. Wu Duoyi’s “Low Code from the Implementation Principle” explains Baidu’s exploration in the field of low code. They define low code as a kind of declarative programming, which is easy to use, supports visual editing, easy to optimize performance and easy to transplant.

For low code, “scaffolding” is a key word. The building platform developed by developers is an early production platform with low code. Think of the e-commerce boom, thousands of pages, only by limited front-end is unable to solve. So smart people began to abstract the page break up into modules, the module into a configurable, use a page module can reuse, module can joining together to generate a new page, for the most part this demand would be no need for the front-end development, also cut off of peak demand, for the front-end is authors efficiency. (For information on low code, you can read this link: github.com/taowen/awes…)

Setup in the business domain is complex, after all, setup is an important part of the recruitment and partnership. But technically, it’s not complicated. Drag and drop is limited to the module level, and there are three core difficulties:

  • 1) DND drag-and-drop module to build, such as Fabric, Ali open source Designable
  • 2) Operating configurable schema, Ali open source Formly and Form-render.
  • 3) Module loader and page rendering mechanism

At present, it is only the module production mode of front-end code. The next step is to visually generate modules and implement true low code generation modules. I am very optimistic about this direction, and have been doing the corresponding exploration, state visualization, logical visualization, multi-state view solutions, are low-code platforms for developers. As for low code as a productivity tool for developers, this one is by Bobby, and I agree with it, as if low code has been elevated to the level of a productivity tool.

Multistate view problem

If you want to solve the complex module visual generation, the first problem to be solved is multi-state view. In a complex module, state changes cause UI changes that can’t be expressed on a single canvas. So, what if we had a layer for each state, arranged a state map, and solved the UI generation problem on a single canvas?

For example, there are only Logined and UnLogin states. , click the button to switch the state, the code is as follows.

import React from 'react';

import { Stateview, Layer, setViewState } from 'stateview';

/**
 * 最简单的Demo：2个状态切换 
 */
export default () => {

  function unlogin() {
    setViewState('unlogin')
  }

  function logined() {
    setViewState('logined')
  }

  return (
    <Stateview default='unlogin'>
      <Layer state='logined'>
        <h1>Logined, <button onClick={unlogin}>go to UnLogin</button></h1>
      </Layer>
      <Layer state='unlogin'>
        <h1 >UnLogin, <button onClick={logined}>go to Logined</button></h1>
      </Layer>
    </Stateview>
  );
}
Copy the code

This is a good way to solve the problem of multi-state views. Of course, StateView is only a brief exploration in this area, and there will be more to come. When each state view can be described, it makes D2C or canvas construction extremely simple.

Logic reuse problem

F2C stands for Flow 2 Code, which is the generation of Code through visual choreography of the process. This is not a new concept, but it is certainly a classic case of cross-border integration. In the process of front-end intelligentization, we found that d2C, a design draft to code tool on the UI side, was enough to cope with UI style changes. But in the logic world, there are very few real solutions for developers, and iMove is one of the explorations in this direction.

IMove is a logic programming tool for front-end developers, the core of which is to solve the problem of complex logic reuse. IMove consists of two parts: canvas and iMove-SDK. Run the canvas by running an HTTP service locally, complete code writing and node choreography on the canvas, and finally export the process to DSL, put it into the project, and execute it through imove-SDK call.

The following figure shows the solution scenario.

The specific usage is as follows.

The main points above are explained below.

  • On the canvas, the DAG digraph is choreographed by dragging and dropping, and then double-node coding.
  • After writing, download the code locally and call it through imove-SDK.

IMove is extremely useful in most situations where capacity is fixed and assembly is uncertain, and it is a necessary part of low code.

The problem, of course, is that it just works, but it doesn’t work well. IMove itself is open source and available to all. We hope that everyone can use it with copyright and thanks, and of course, it is best to contribute.

The biggest problem with iMove is that it only solves the logical assembly problem and ultimately has to struggle with low code generation. Logical choreography is just one piece of low-code, and there is still a lot of room to explore how complex logic can be visually choreographed.

Relationships between states and interactions

State machine visualization xState does a great job. Why do I know xstate, because the xstate author gave iMove a star

Look at the code, the rules

As demonstrated in the figure above, it can be expressed well in terms of state, behavior, and UI. So what are its ambitions? Single-state visualizations are not of great value, and combining state, UI, and behavior into low-code areas may be the way to go.

Both XState and iMove address only part of the problem. It’s normal to like each other.

future

From the above, I believe you have some understanding of the low code platform for developers. Canvas is open source in many ways, such as Fabric and Designable, logical choreography with iMove (mentioned above), and state visualization with XState (mentioned above). Today, there are almost all the components of a low-code platform for developers.

There is currently a lack of an integrated good low code practice. We believe there will be further development in 2022.

Node.js 2021 Developer Report interpretation

Many people think node.js is not as popular as in previous years, but in fact it is not. The healthy and steady development of Node.js community is mainly from good performance to good use, and there is a great improvement in ease of use and usability. From the content of Node.js source update, it is generally so. The Node.js Diagnostics Working Group has been the focus Group of the Node.js community for the past two years and has been responsible for most of the features introduced in Node.js since release 14. Back in 2015, there were two working groups, the Tracing WG and the Postmortem WG, which merged with the Diagnostics WG in 2017. The core outputs are async_hooks, profiling, tracing, dump debug, report, etc., all improving on ease of use and usability. Let every Node.js developer lower the threshold to improve the development experience of Node.js applications.

On the community side, there isn’t much room for frameworks, and there shouldn’t be many frameworks that are feature-driven. Frameworks such as Fastify, which modifies the Node.js mechanism and delves deeper into the performance realm, seem to be doing well so far. PNPM is innovative, but the code is a bit unreadable. I prefer RushStack’s improvements to Menorepo, but the large-scale programming paradigm needs to be explored. Aside from last year’s mention of midway hooks, Easy Monitor, it seems remix and Morden are new, but not out of the box. It’s a very crowded field, but MY favorite is Bundless.

Here’s a look at node.js 2021 in the context of the Node.js Developer 2021 Report. This interpretation is based on bingson & Uncle Wolf live content, the main points are as follows.

1) The development framework changes greatly, with fewer wheels, more TS and more enterprise-level frameworks

Last year express was very high, this year there are more enterprise frameworks, especially large and complete frameworks are more popular.

The popularity of TS is partly to do with Egg’s high domestic penetration, while Midway and Nest are growing faster.

2) The upgrade from Node 12 to Node 14 is quite aggressive

Last year, node.js was dominated by Node 12. In 2021, Node 14 will account for nearly half of the total number of updates, which is still relatively fast.

3) More jokes mean more people use them and become more mature

Bjarne Stroustrup, the father of C++, once said: “there are only two programming languages in the world, those that people curse and those that no one uses.

Node.js is used more in application scenarios, rather than being touted for certain features. Regression rationality, in real application scenarios, widely distributed, core around API and BFF layer, CLI& tools.

4) Out of the ring: the age distribution is larger than last year, and the types of work are more abundant.

In addition to the wide distribution of application scenarios, there is also a large proportion of improvement in non-front-end developer roles, such as architect, technical director, project manager, etc., all use Node.js to some extent. Node.js is moving out of the front end and serving a much larger audience. In addition, the age distribution of respondents also increased, which is directly related to the circle.

5) Usage confusion: performance optimizations, memory leaks, and NPM dependencies

In the past, node.js was most confused about asynchronous flow control. With the popularity of async/await, this problem has been gradually weakened. It’s understandable that as developers use Node.js more deeply, they are more concerned with performance optimizations and memory leaks.

6) Future: The more professional experience, the more attention will be paid to performance and Serverless

The focus on performance is easy to understand, but the main reason to focus on Serverless is that Serverless can achieve low or even zero o&M. As a necessary skill for Node.js developers, Serverless makes it easy for many non-professional Node.js to handle various server-side scenarios.

See the year-end inventory Serverless: industrial, academic, community, domestic manufacturers hustle “quickly mp.weixin.qq.com/s/6Bl08eG8a…

other

Antipatterns, front end 3.0 and FFB

The big factory front end began to rethink. Make front-end and back-end responsibilities clearer.

  • Ali’s front end 3.0: it is hoped that the front end and the back end can be unified into application engineers, that is, the front end can solve the problems of infrastructure operation and maintenance through Serverless, so that the front-end developers can further understand the business and write the business structure, rather than simple API proxy or SSR in BFF.
  • Ants are trying to turn BFF into FFB, frontend for backend, which is also an interesting idea to make the frontend more pure.

The above two points are all attempts at intelligentization. In addition, on the front and back end boundaries, we can also reflect that the front end was originally a rendering template and field binding, but now it is getting more and more complex, mixed with more and more glue logic. To restore the essence of things,

AI is pessimistic in the short term and optimistic in the long term

Determining inputs and outputs, and automating the process in between, is what AI does best. Input and output are strictly deterministic, not something free people like to do. That’s the contradiction. Generalization has been the core research direction. However, the front-end paradigm is uncertain, AI short-term production and research links, there will be no big breakthrough. So my conclusion is that AI is pessimistic in the short term and optimistic in the long term.

D2C, it does work, but you have to draw the boundaries. CodeFun, for example, has a 25% increase in efficiency and does a lot of UI work, but for now it is limited to converting design scripts to code, and the generated code is only UI binding. Current D2C best practices are good and have a lot of room to grow.

By far the best looping, list class is probably CodeFun. Fishing artifact. Of course CodeFun has a lot of room to grow, but there are still a few best practices available to make d2C work.

Overall, my view is as follows:

  1. At present, there are many application scenarios of end intelligence;
  1. D2C ceiling obviously, the current solution is only within the template UI style generation problem;
  1. Smart UI is not about intelligence, it’s about business innovation from God’s perspective;
  1. Standing on the production-research link to make innovation, first of all, we need to solve the problem of front-end paradigm structure, and the future is still far away.

According to an algorithm student, AI has something disruptive coming out every seven years or so, so explore patterns and wait for changes.

Web 3 is an unclear future direction

To be honest, I am paying attention to and learning related content. I am not familiar with it yet. I do not express my views and continue to pay attention to it. My feeling is that the next round of technological change is here. What is the specific, still not clear, don’t shut off, development mentality to contact more.

conclusion

In the overall healthy development of the big front end, although the growth rate is slowing down, the multi-disciplinary integration, upstream and downstream efficiency improvement, as well as the deep water area, low code and other fields are still fast and worthy of expectation.

  • The front end itself transitions from standardization to mature exploration, deepening vertical and deep technical innovation, and the current front end has entered the deep water zone.
  • Low code for developers continues to rise, with multi-state views, logical choreography, and state visualization all areas of concern.
  • The Healthy and steady development of node.js community will shift from good performance to good use, with great improvement in ease of use and usability.

On top of the new infrastructure, the cost of developing a high availability system is getting lower and lower, so we need to think about the front and back end cooperation model and further divide the division of labor. Some say it’s frontend for Backbene. Some say it’s FFB.

About the author:

Wolf Uncle: net name i5ting, Alibaba front-end technology expert, Node.js technology advocate, Node full stack public account operator, used to work in Qunar, Sina, Wangqin, front-end, back-end, data analysis, is a full stack technology practitioner. He has published The Wolf Book (Volume 1) : The Greater Node.js, the Wolf Book (Volume 2) : Node.js Web Application Development, and is about to publish the Wolf Book (Volume 3) Advanced Technology of Node.js.

Related reading:

Serverless: industry, academic, community blossomed everywhere, domestic manufacturers quickly stuck

Kubernetes Ecology: large version “inside volume”, safety is worth paying attention to