Summarize the big front-end technology trends in previous years and look forward to the technology trends in 2022

2021Big front-endThere are no revolutionary star projects in the field, but there has been a certain expansion and in-depth cultivation in various subdivided technical fields. There are many new technologies or new features that are expected to usher in 2022. Come break out.

In the current "cold winter" of the Internet, front-end technicians can only better meet the "east wind" of spring by cultivating their internal skills and constantly strengthening themselves. So which "muscle" should front-end technicians practice? Maybe we can find some answers in the "2021 JavaScript Star Project":

• zx toolkit only It only took 7 months to become the fastest-growing project in Star throughout the year, which shows the continued penetration and influence of front-end development in the whole stack.

• In terms of front-end frameworks, the leading React and Vue are still developing steadily and continuing to innovate. The dark horse Svelte has emerged this year, surpassing Angular to occupy the third place in one fell swoop, and is eyeing the top spot. So can

  Svelte break through?

• Among the Node.js frameworks, React’s “meta-framework” Next.js takes the lead. Rookie Remix has reached fourth place in just 2 months, which deserves attention.

• In terms of build tools,

  the acceptance of native ES modules continues, and vite is unstoppable. On the other hand,out of performance concerns Consider that more and more front-end tools are starting to be built in other languages ​​(Rust, Go).

• On the desktop, the popular Tauri broke the dominance of Electron. Based on Rust (replaceable), Tauri has a smaller package size and memory footprint than Electron, and can be used in the future. Expect.

Next, let’s take a look at the important things that happened in the front-end industry in 2021, and share what the Tencent IMWeb team has done in the past year.

Summary of 2021 annual trends

1. TypeScript’s steady growth

Language usage from Github According to the data (Top languages ​​over the years),

2021 TypeScript still ranks fourth.

Judging from the latest 2020 JS survey data, TypeScript usage still ranks first among similar tool competitions (State of JS survey).

Judging from the Stack Overflow Developer Survey 2021, TypeScript’s popularity is still increasing, and it is estimated that it will continue to grow in 2022.

Review

Looking back on 2021, the official Roadmap clarifies that TypeScript’s goal is to continue to improve its type system and implement powerful tools Increase productivity, improve user experience, increase community engagement, improve infrastructure and engineer systems. After putting forward the goal, the TypeScript team has been very effective in releasing 4 versions this year. The latest version is 4.5. Many of the new features are indeed more fun to use, such as:

• More Good tuple type support, allowing residual types anywhere as well as optional types.

• Better template string literal type support.

• More intelligent type inference for conditional branch fields.

• Index types support Symbol and template string modes.

• Awaited type and Promise type improvements.

• etc.

In addition to features, it also improves many usage experiences, such as:

• Performance optimizations such as faster type generation, incremental compilation and Sourcemap generation.

• Smarter IDE completion.

• Non-Javascript source file location.

• etc.

In addition, the new TypeScript official website was launched in August, and the new documents are more convenient to browse.

Currently TypeScript has become the standard for the IMWeb team. Whether it is

Web front-end, Node.js project or public module, the scaffolding template supports TypeScript by default. The public module system not only uses TypeScript to write code and type checking, but also uses ESLint to implement the TS language standard AST. Specific verification is used to implement public module specifications, and it is also combined with TypeDoc to generate usage documents and so on.

Outlook

TypeScript will provide more exciting features in the future, such as:

• Flat declaration files ( Flattening declarations), only outputs a total d.ts file, rather than a d.ts file for each module.

• Ambient decorators are used to declare some environmental information, such as whether the API is deprecated. Runtime code that does not affect output is only reflected in the d.ts declaration file.

• Conditional compilation (Conditional compilation) is somewhat similar to the #if macro definition in C. It can preprocess the code before compilation and retain the code branches that meet the conditions.

• Decorators for function expressions/arrow functions. Currently, decorators in TypeScript can only be used in classes. In the future, they may be supported outside classes. Function expressions and arrow functions use decorators.

• etc.

As its Roadmap says, TypeScript is moving in the right direction. There are many type features, performance optimization, experience optimization, and supporting tools that can be done to improve productivity. It is striving to become JS The language's standard type system. With the increasing development and improvement of TypeScript, will TypeScript be natively supported by browsers and Node.js in the future? Let's look forward to it together.

2. React leads the way and continues to innovate

React 18 completed the release of Alpha, Beta and Release Candidate versions in the second half of 2021. The official version will be released in early 2022.

When React 18 is released, it will include out-of-the-box improvements (such as Automatic batching), new APIs (such as startTransition), and a new SSR architecture with built-in support for React.lazy.

These features are possible thanks to the optional "concurrent rendering" mechanism newly added in React 18, which unlocks many new possibilities for React to help You improve the actual and perceived performance of your application.

React 18 adopts a gradual strategy. Since concurrency in React 18 is an optional feature, it will not immediately bring any obvious disruptive changes to component behavior. You can upgrade directly to React 18 with almost no changes to the code in your application, and you can try new features at your own pace and needs.

In general, React 18 brings updates in the following three aspects:

➢ Automatic batching

➢ SSR for Suspense

➢ New APIs for app and library developers

● Automatic batching

React 18 adds performance improvements out of the box by doing more batching by default, no need Manually batch updates in application or library code.

batching means that React can combine multiple setState events in the callback function into one rendering.

React 17 only batches in event callbacks, React 18 will do as much batching as possible for setState from any source. Even if setState is called multiple times in promise, timeout or event callback, it will be merged into one render.

Replace ReactDOM.render with the ReactDOM.createRoot calling method to enable these new features.

● SSR for Suspense

The full name is: Streaming SSR with selective hydration.

That is, like water flow, create a continuous rendering pipeline from the server to the client, instead of a one-time rendering mechanism like renderToString. Selective hydration means selective hydration. Hydration means that after the back-end content is hit to the front-end, JS needs to bind events to it in order to respond to user interaction or DOM update behavior. Before React 18, this operation must be holistic. , and the hydration process may be slow and cause global lag, so selective hydration can prioritize hydration as needed.

● New APIs for app and library developers

Concurrent APIs:

Concurrent Rendering related changes are for React 18 One of the major changes, in a nutshell, is the ability to keep React applications more responsive. This is a design architecture that can interrupt rendering. When to interrupt rendering? When a higher-priority rendering arrives, the current rendering is abandoned and the higher-priority rendering is executed immediately, in exchange for a faster visual response.

• useTransition: Allows components to wait for content to load before switching to the next interface, thus avoiding unnecessary loading states.

• startTransition: Rendering triggered by setState wrapped in the startTransition callback is marked as non-urgent rendering, and these renderings may be preempted by other urgent renderings.

• useDeferredValue: Returns a delayed response value, such as a scenario where a selection input box filters a list. We can use useDeferredValue to pass in the value corresponding to the selector for the list.

The new startTransition and useDeferredValue APIs essentially allow you to mark a part of the UI as having a lower update priority.

Other APIs:

• useSyncExternalStore: useSyncExternalStore will replace useMutableSource for subscribing to external sources to solve the problem of data inconsistency that may be caused by Concurrent Rendering. It may also be needed by library authors, but it is unlikely to be used by ordinary developers.

• useId: useId is used to generate a unique ID between the client and the server to avoid element mismatch during SSR hydrate.

• useInsertionEffect: used to insert global DOM nodes.

React 18 will be released next year with the new React Native architecture (available React 18 features).

3. Svelte is the dark horse in the front-end framework battle

The front-end field is surging, and frameworks are emerging one after another. The three major front-end carriages, React, Vue, and Angular, have always been Remaining among the top three. At the same time, we also noticed that among the many front-end frameworks, Svelte, developed by Rich Harris (author of Ractive, Rollup and Bubble), is expected to become a dark horse and stand out among the front-end frameworks.

In the latest survey prepared by Stack Overflow in 2021, 71.47% of respondents selected Svelte as the most popular framework, ahead of React.js at 69.28% and Vue at 64.41%. In the JS Status 2020 survey, Svelte achieved first place in user satisfaction with 89% and interest at 66%. Since its birth, Svelte has been used to benchmark frameworks such as React/Vue. We have also seen the debate about Svelte and React, and saw the "How to treat Svelte as a front-end framework" replied by Youda in 2019 and the vue-Svelte- The size-analysis evaluation shows the development trend of Svelte.

The dark horse in the front-end battle

Our survey found that developers love Svelte mainly because of the following points:

1. Higher development efficiency. Svelte has an extremely concise syntax, and interactive tutorials make it have a low learning curve and start-up cost. Those who are familiar with vue syntax can basically get started quickly.

2. Smaller size. The core idea of ​​Svelte is to reduce the amount of code at runtime of the framework through static compilation. This has obvious advantages in small applications. The compressed version of React is 42.2KB in size and the compressed version of Svelte is 1.6KB. However, in medium and large applications, this advantage will gradually be reduced and even become a disadvantage.

3. Higher performance. Svelte does not use the commonly used Virtual Dom. Instead, it uses Template syntax to allow the compiler to record which data needs to be updated during the compilation phase. This makes Svelte outperform not only React, but also Angular and Vue.

4. Better distribution of Web Components. Svelte is directly compiled into JS and generates Web Components that can be recognized by browsers. This allows components developed based on Svelte to be used in other frameworks, such as React/Vue/Angular, etc.

Time flies, and Svelte’s development speed may exceed our imagination. Svelte, which has been criticized as having no future as a front-end framework that does not support TypeScript, also supports TypeScript in 2021. The UI library Svelte Material UI is also gradually iterating, and the developer community has also joined more and more small partners, enriching Svelte’s unit Practice in testing, Web Components, SSR, etc.

Looking back on 2021, the most important things about Svelte are the following two things:

1. The Autumn Summit was held on November 20, 2021. At the summit, Rich Harris told us about the history of Svelte and announced that he would join Vercel and then maintain Svelte full-time. Many developers from the community were also invited to the summit to share some of Svelte’s practices, allowing us to see more possibilities of Svelte.

2. SvelteKit officially releases beta version. SvelteKit is a web application framework developed based on Svelte, similar to the Nuxt.js framework developed based on Vue.js. It inherits server-side rendering SSR, routing, supports TypeScript, supports less/sass, supports Vite packaging and other features. It can be developed efficiently and has high performance. Although there are still some bugs in SvelteKit that still need to be solved, and some missing functions need to be improved urgently. But it still does not prevent projects from daring to use it in production environments.

Waiting for the flowers to bloom

Although we see that Svelte is very popular among developers, so far, it is still difficult to see large-scale applications. Using Svelte, its performance advantages, volume advantages, etc. have not been verified in large-scale applications. Since React/Vue/Angular are the first to dominate, especially in large companies, there are already very complete system supporting solutions. Mature systems are basically difficult to change, and it is difficult for rising stars to have active communities like React and other frameworks. Svelte has to go The road is still long. However, we have observed that large companies including Alibaba, Byte, and Tencent are also trying to use Svelte development in new businesses. It does have its advantages in small and medium-sized applications, h5 applications, Web Components, etc., and it is worth trying. Although Svelte has many advantages, if you want to challenge the status of React/Vue/Angular on your own, you still need to wait for benchmark large-scale applications and wait for major companies to launch UI libraries based on Svelte. Maybe Svelte will take off. The time for greatness will come.

4. Desktop - the next battlefield for front-end development

Continue to expand the influence of desktop applications

Since Github launched the Electron open source framework in 2014, the front-end has jumped out of the limitations of the Web client and has the ability to develop desktop applications. In recent years, relying on application frameworks such as Electron, React Native, and Flutter, front-end cross-end development of desktop applications has become possible. The concept continues to heat up. Although these solutions may not necessarily have the best performance compared with traditional technology stacks such as QT and Xaramrin, it means that some highly cost-effective options have emerged, which greatly lowers the threshold for developing desktop applications.

In 2021, the updated iterations of application frameworks such as front-end Electron and React Native Desktop have tended to be stable. Although some breakthrough highlight functions have not appeared, each framework has focused on pain points such as performance and application scenarios. In-depth optimization continues, and Flutter, which has become a popular concept in recent years, has also included its desktop version in the Beta stage in 2021. The sudden rise of Tauri has attracted attention for its excellent performance and package size, and its potential cannot be underestimated. Overall, in the field of desktop application development, the influence of front-end technology is increasing day by day, and the proportion of content that the front-end can participate in is also increasing.

Electron

Electron is an open source framework developed by GitHub. It accomplishes the development of cross-platform desktop GUI applications using Node.js (as backend) and Chromium's rendering engine (as frontend). A large number of well-known desktop applications have been developed using Electron, such as slack, VSCode, etc. The required development capabilities of Electron have a large overlap with the front-end development capability technology stack. Therefore, for front-end development students, the threshold for using Electron for desktop development is relatively low. At the same time, as a project that has been deeply cultivated and iterated for 8 years, Electron has an application ecosystem. Rich chains further reduce the cost of getting started.

Using Electron for desktop application development also empowers the front-end to improve its own capabilities. On the one hand, it expands the breadth of technology and can extend the scope of front-end business capabilities from a single Web page to PC application development. Some currently For capabilities that are not currently supported by Electron, you can also write Node components in C to expand support; on the other hand, many front-end side restrictions have been broken, such as some traditional Web security restrictions and the invocation of the system's underlying interfaces, which can empower development capabilities. .

Of course, Electron is not without flaws. Some of the shortcomings that are often criticized include:

• The package size is too large, due to the large number of dependencies bundled with the Chromium kernel. , resulting in the packaging volume of Electron generally being 100M. We can use asar compression, dynamic link library and other methods to optimize this.

• The memory usage is high. Similarly, because it is bundled with the Chromium kernel, the memory usage of Electron is also generally high.

• The visual rendering efficiency of the UI layer is low. This can also be optimized through optimization methods, such as multi-process processing tasks, or even the use of visual artifacts to improve user experience.

Although Electron has some known problems, its complete ecological chain and high overlap with front-end technology are still the recommended solution for rapid development of desktop applications. We also have concerns about performance issues. It is easier to solve it through some common optimization methods, reaching a score of 80. In 2021, Electron still maintains a stable update frequency of one major version every eight weeks, and has launched multiple major versions from V12 to V15. The updated content mainly focuses on the deletion and modification of APIs, the adaptation of system features, and dependent versions such as the Chromium kernel. Updates and other details.

React Native Desktop

React Native is a mobile cross-platform development framework open sourced by the Facebook technical team in April 2015 based on the earlier React front-end framework. Regarding the construction of desktop applications, the RN team has not yet launched an official desktop version, and mainly relies on community projects to build capacity for sustainable development. Among them, the React Native For Windows macOS technical solution developed by Microsoft is the solution with the most accumulated experience and the most stable development iteration. Since the project was released at the end of 2015, it has gone through 6 years of stable iteration. In 2021, the RN team launched three important versions 0.64-0.66, and Microsoft always ensures updates to the main version of RN in the iteration of React Native For Windows, and also supports a large number of Windows-related features. If you are building a desktop application whose main target users are on the Windows platform, then using React Native For Windows is a good choice.

It is worth mentioning that in 2021, in addition to providing support for the new Android 12 and iOS 15 systems in the important versions launched, the RN technical team also highlighted the desktop application construction technology with the Microsoft team. The RN team stated that it will provide some "unique" technical capabilities for desktop applications through the introduction of Facebook's Messenger team to improve the user experience of the React Native desktop version. In this regard, we will also Let’s wait and see.

Flutter Desktop

Flutter is a mobile UI hybrid development framework launched by Google. It implements a complete set of bottom-up basic libraries that users can use on iOS and Android builds high-quality native user interfaces.

Currently, in order to support development capabilities on the desktop side, Flutter adopts a cross-end rendering solution that converts code into Web. However, there is still a lot of room for improvement in the performance of Flutter to Web. Although there are many optimization plans in the industry this year, if you want to significantly improve the performance, it will more or less be achieved by magically modifying the Flutter source code. These optimization methods will not be effective in the long term. During the Flutter version iteration process, there will be a large optimization cost. Even so, the optimized Flutter to Web performance is slightly insufficient compared with traditional Web projects. Therefore, without considering compatibility, developers using the to Web solution should try to use the Canvaskit Render mode. This mode is based on Skia's WebAssembly solution and will have better rendering performance, but the loading performance needs to be continuously optimized.

Perhaps in order to completely solve the performance problem on the desktop side, Flutter Desktop launched the Windows Native solution in mid-2021, but it currently only supports 64-bit systems, which makes it unable to support lower 32-bit systems such as Win7 The Windows version will greatly increase the compatibility costs for developers. However, in February 2022, Flutter Desktop officially launched a stable version, adapting many common plug-ins to include support for Windows, including camera, file_picker and shared_preferences. What's more, the community has added support for Windows with a variety of other packages, covering everything from Windows taskbar integration to serial port access. At the same time, many Microsoft teams also actively cooperated and made great contributions to the release of the official version. In 2022, Flutter Desktop is worth trying.

Tauri

Tauri, which has recently taken advantage of Rust, has received a lot of attention. Compared with Electron, it mainly has the following four advantages:

• Smaller package size

• Smaller runtime memory usage

• Safety comes first

• True open source

But thinking rationally, for front-end development, there are three fatal shortcomings:

• Tauri uses system webview, there will be compatibility issues, which is also the key problem Electron solves

• Abandoned nodejs, the ecosystem is still difficult at present Comparable to Electron's

• The underlying development requires Rust, and there is a certain cost to get started

Of course Tauri is not very mature yet, but it will As Rust's ecosystem develops and browser compatibility gradually decreases, the outcome is still unclear.

5. Rust - It’s time to master a new language

Rust is the future of JS infrastructure

With the gradual improvement of front-end ecological tools, in addition to exploring new areas of the front-end, everyone is also thinking about how to improve the performance of the tools. As we all know, the performance of JavaScript has always been criticized by everyone, but the front-end However, the infrastructure is very demanding on performance, such as construction, etc., so everyone began to consider whether front-end tools can be written in other languages, so Rust attracted everyone's attention. Since the birth of the Rust language, it has been known for its security, Performance and modern syntax have attracted a large number of developers, and have continuously ranked first among stackoverflow's most popular programming and languages ​​in the past six years. Rust rewriting projects have appeared in many fields, and the Linux project also stated that Some functions are being rewritten in Rust. It can be said that it is an inevitable trend for Rust to enter the front-end field. An article "Rust Is The Future of JavaScript Infrastucture" written by Lee Robinson in 2021 listed many front-end tool projects written in Rust and said that Rust will continue to increase its impact on Javascript Ecosystem, this article has been retweeted by many public accounts, triggering heated discussions among everyone.

Rust tools are integrated into the front-end ecosystem

In the field of front-end construction, a very prominent project emerged in 2021-swc, which is a construction tool written by Rust. It can be used to compile, compress, and package. It has been used by some well-known projects, such as Next.js, Parcel, Deno, etc. Next.js 12 directly uses swc instead of babel, and stated on their official website blog that swc is used. After that, the hot update speed increased to three times, and the build speed increased to 5 times. This shows how powerful Rust's performance is.

In addition to construction, Rust is also used in other front-end areas. For example, Deno's runtime engine is also a V8 engine written in Rust; the next generation of front-end tools Family Bucket Rome announced that it will be rewritten using Rust; Node.js can call Rust modules through napi-rs to achieve high-performance expansion; the dprint specification coder written in Rust is 30 times faster than Prettier; Rust can also be compiled into WASM, And WASM front-end frameworks like yew and percy have appeared.

It is foreseeable that Rust tools will be more deeply integrated into the front-end ecosystem, which may trigger another update of the front-end ecosystem.

It’s time for front-end people to learn a new language

I believe many people have seen such a Twitter screenshot. Redux author Dan Abramov asked a question "In the next three years "What is the most worth learning language?" I answered "Rust". This may be an inspiration to front-end personnel. It's time for us to learn a new language to rejuvenate the front-end ecosystem, but many people will be confused by Rust. I am discouraged from the steep learning path, but in fact Rust is similar to front-end development in many places, and it is not that steep to get started.

For example, in the tool chain, Rust's rustup is equivalent to nvm. You can switch the version of the running tool cargo (Rust version of npm), but it is also more powerful than nvm. , when installing rustup, clippy (Rust version of eslint) and rustfmt (Rust version of prettier) will also be installed. Projects newly created using Rust supporting tools already have supporting tools for code formatting and analysis.

Let’s take a look at the similarities between cargo and npm. The two tools are similar in many commands, and some commands in npm that need to be configured in the project do not need to be configured in cargo. Even Cargo comes with monorepo management and can directly configure multi-package projects. Rather than saying that cargo corresponds to npm, cargo is more like a combination of npm and yarn. This is also the result of the Rust team's reference to the modern language tool chain.

In terms of syntax, Rust also has the characteristics of a modern language. It draws on the characteristics of functional programming and structured languages, and also creates many more new ones based on them. for advanced syntax. In functional programming, there is also a lot of JavaScript. For example, the arrow function of JS corresponds to the closed function of Rust; the array of Rust also has map, reduce, filter and other methods; the function of Rust can also be assigned to a variable .

If the second language that the front-end could learn was C in the past, then maybe it is Rust now. It has more modern dependency management, syntax, and tool chain than C, so that you will not be confused at the beginning. Even if you are persuaded to quit, it can also make you more competitive in the front-end field.

6. Low code will continue to become a hot topic

It has been a year since we talked about "low code" in the 2020 technology trends. In 2020, the market size ranged from 1.9 billion in 2020 to 2.85 billion in 2021, which undoubtedly shows that the field is still hot and developing rapidly. If 2020 gave us expectations for the continued heating up of the low-code field, then 2021 will allow us to see more trends about the future development of the low-code field.

On the one hand, we have seen that enterprise-level low-code platforms such as Tencent WeChat and Alibaba YiDa have begun to exert force in the industry. There are also platforms within the company that focus on building management desks such as Wuji and are gradually maturing. A large number of platform-based products are still developing at a differentiated and rapid pace, and are still the mainstream development ideas. Within the IMWeb team, from operating the low-code platform Vision in 2019 to the low-code management platform Hulk in 20 years, we have been accelerating business research and development through vertical low-code platforms. In 2021, we further tried in the server-side scenario and polished the HulkData platform focusing on interface construction.

HulkData builds a pipeline through web visual components, and generates a new API interface based on the database or existing API with a small amount of code. HulkData draws on the BPMN 2.0 protocol to use graphics to express business processes, supporting multiple businesses, multiple data resources, low code, plug-in mechanism, process orchestration, and request and response parameter modification. Serverless is becoming increasingly mature, and the operation-free feature of Serverless is a very good opportunity for HulkData. The interfaces created on HulkData will be deployed to Tencent Cloud in the form of SCF, and there is no need to pay attention to server operation and maintenance. Using HulkData server-side interface orchestration can quickly implement business logic and agilely receive and deliver business applications. The delivery speed is 80% faster than the traditional development model. Currently, a total of 400 interfaces are used for access to the three major internal services and are running normally.

On the other hand, it is worth thinking about whether there are some commonalities among the rapidly developing differentiated and scenario-based platform products? After all, no matter what scenario it is targeted at, the cost of building a low-code platform from scratch is by no means low, and this type of waste of resources is particularly prominent in large factories.

The Gems low-code engine project launched within the IMWeb team at the end of 2020 is actually an exploration of this problem. The core goal of the low-code engine is to provide a set of basic standards and facilities to help the upper-level platform be built more effectively. The key to its thinking lies in the completeness of the engine model and capabilities, as well as its scalability in different scenarios. As a low-code engine, Gems has continuously improved its basic capabilities and design over the past 21 years, providing full-board plug-in, core editing object API and other capabilities. In addition to stably supporting the low-code platform for operations and management within the team, it has also gradually expanded beyond the team to help multiple teams within the company efficiently build low-code platforms for their own business scenarios.

At the same time, we also saw that at the GMTC conference at the end of this year, Alibaba has promoted the group's low-code engine to the outside world. Judging from the shared content, it has supported more than 60 low-code platforms. The construction of Tencent's internal low-code Oteam also began to be organized in 2021, and its main goal is also the co-construction of the underlying core. Looking at the entire industry, low-code engines have begun to emerge, and it is foreseeable that the trend will continue to rise. It’s just that this segmented track may only involve major manufacturers, because it requires a large number of scene support verifications, which small manufacturers or independent developers do not have.

Overall, differentiated platform products will still be our main way to access the low-code field; and the emergence of low-code engines will bring more possibilities to the entire industry.

7. D2C front-end intelligence can be expected in the future

"Front-end intelligence" is a new trend in the industry in the direction of front-end AI in recent years. exploration. What is intelligence? It means combining intelligent algorithms with front-end engineering practices and allowing machines to assist in development.

D2C: History and Current Situation

Up to now, the largest product form in the field of front-end intelligence is various Design to Code (hereinafter referred to as D2C) tools: input The UI design draft outputs usable code through a series of algorithms.

A 2017 paper, pix2Code, proposed the idea of ​​image generation code.

In 2018, Microsoft open sourced the Sketch2Code project, further verifying the feasibility of this direction.

In 2019, Alibaba Taobao launched imgcook, and in the following years it supported a large number of businesses such as Double Eleven and 618. This marks the gradual maturity of D2C technology and the necessity of large-scale business implementation.

As the time comes to 2021, major domestic and foreign companies have launched corresponding exploration and practice in this field:

Tencent IMWeb team has launched Project Auton, which has been tested internally. It is expected that Services will be provided to the outside world in June this year; Alibaba’s imgcook continues to iterate rapidly; Byte has hatched the “ALYX” project based on the low-code platform and has also implemented it internally; the 58 team has open sourced Picasso; Zhuanzhuan is online "Magic Pen Ma Liang" platform...

In addition, a number of start-up companies have emerged in the D2C field. Such as domestic CodeFun, Blue Lake, foreign Framer, Anima, etc.

It is worth mentioning that CodeFun has relatively good performance in terms of ease of use and restoration, and has gained a good reputation after being launched online.

But in the entire front-end open source community, there is currently not a sufficiently influential open source project in the D2C field. Therefore, each company is basically in a state of "working behind closed doors."

Two sides of the coin: defects, scenarios and opportunities

Compared with early solutions based on purely visual algorithms, the current large-scale D2C products are basically based on design drafts Source files (Sketch, Figma, XD, etc.) as raw input.

Since it is difficult for purely visual algorithms to extract information such as UI levels from two-dimensional images, the design draft file can obtain a more detailed structured UI description by parsing the internal DSL, which is more convenient for subsequent processing and Code generation.

In the traditional pro-code development model, "PRD design draft" is usually used as input to produce business code. However, the D2C system uses the design draft as the only input, and the design draft is just a simple UI description, resulting in a lot of information that cannot be inferred from the design. For example, animation, interaction, logic and even responsiveness cannot be achieved by relying on D2C alone.

Due to these shortcomings, most D2C scenarios are only used as auxiliary tools for development. It is still too early to be truly fully intelligent (which can produce code with complete logic and usable in the production environment without human intervention).

Despite the many shortcomings mentioned above, D2C has great potential in the field of UI development.

D2C products (component/page code or DSL describing UI) usually have the following consumption paths:

• The output code, as the basic UI component, is composed of Developers conduct secondary development.

• The output code is supplied as basic material and combined with the low-code/no-code platform for secondary editing and arrangement.

• Output DSL, combined with customized render for direct rendering.

Especially the second consumption path, with the help of the low-code platform that has become popular in recent years, data binding, logical arrangement, style editing, and UI materials produced by D2C are carried out. Manual intervention and secondary editing such as interactive orchestration can complement D2C's shortcomings in capabilities and establish a set of fast, efficient, depositable, and reusable code production SOPs.

In addition, D2C, with its high supply efficiency, can break through the low-code/no-code material production bottleneck, adding a boost to the transformation of the front-end R&D paradigm from pro-code to low-code. agent.

With the help of D2C low-code/no-code, combined with the popular technology product forms such as SaaS, FaaS, and BaaS in recent years, it is foreseeable that in the near future, zero code can really be achieved without the need for engineers. Quickly launch a product with complete data, interaction, and logic. This has greatly reduced the initial costs of many innovative businesses and may even boost the next wave of Internet entrepreneurship. Let’s wait and see.

However, so far, there is no platform that can perfectly integrate the above product forms (D2C low-code/no-code SaaS/FaaS/BaaS) to form a closed loop while maintaining excellent users. experience. In the next few years, this field may give birth to some star startups.

Looking to the future: Deep cultivation, integration, R&D paradigm change

Looking forward to 2022, it can be foreseen that the intelligence and D2C of the front-end industry will continue to develop. The overall situation is as follows Two major trends:

• Vertical: Continue to deepen our efforts, optimize processes, algorithms and experiences, and make "intelligent" truly more and more "intelligent".

• Horizontally: Establish standards and processes, integrate upstream and downstream capabilities, and connect low-code, no-code, FaaS, BaaS, SaaS, design system, algorithm system, R&D system, Data system, etc... truly form an industrialized rapid generation system to liberate productivity.

In the long run, once the above system is established, it will surely drive the industry to start the next transformation of the R&D model. From the current pro-code-based R&D model, it will be transformed into a model in which pro-code, low-code, and no-code complement each other, supply and empower each other. At the same time, due to the establishment of a standardized system, materials and products can be more easily generalized and reused. The implications for R&D efficiency are undoubtedly huge!

These are all full of imagination. Even though the journey to intelligence is full of doubts and obstacles, the future is worth looking forward to. We will continue to cultivate and develop in the new year, and the future can be expected in 2022...

8. DevOps, R&D efficiency is still the focus

R&D efficiency is currently an area of ​​great concern for both Internet companies and traditional software companies. Internet majors hope to achieve continuous improvement in R&D capabilities to cope with increasingly complex product development through "R&D efficiency"; lower-end manufacturers hope to achieve breakthroughs through "R&D efficiency" Overtaking on the road, giving full play to the advantage of latecomers; more small and medium-sized enterprises have seen that domestic Internet companies have unanimously invested heavily in this field, and they are also gearing up to make efforts in the field of performance.

Similar to the concept of agile, it is difficult to precisely define what R&D effectiveness is. In fact, many complex concepts are not defined, but gradually evolved. They first appear as phenomena and then find appropriate expressions. In fact, efficiency and effectiveness have never been exclusive terms for software engineering. Throughout the history of human development, productivity and production efficiency have been continuously improved. In the digital era, the importance of software R&D efficiency has been highlighted. If we were to sum up R&D effectiveness in one sentence, we would use "More efficient, higher quality, more reliable and sustainable delivery of better business value".

What we can do is not to improve the absolute value of R&D efficiency, but to slow down the deterioration of R&D efficiency as much as possible so that it does not decline too fast and strive to maintain the status quo. Just success.

The IMWeb team has made great progress in DevOps in 2021. On the one hand, we have co-constructed with Tencent Cloud Coding in various fields such as development, testing, deployment, operation and maintenance. The team's self-developed performance platform Thanos and the Coding team have in-depth created application workflow solutions, and the agency joint debugging platform TDE and Coding The team opened up the Nohost gateway for the test environment, and the interface joint debugging contract platform Tolstoy and Coding jointly built API hosting, mocking and testing capabilities. In the context of research efficiency, we have achieved unified performance platforms through Tencent Cloud Coding, and the overall research and development efficiency has increased by more than 30%.

9. Micro-front-end, a link that cannot be underestimated

In 2016, ThoughtWorks proposed the idea of ​​micro-front-end: split a huge project into Various small and flexible projects do not interfere with each other and can be developed, run and deployed independently, thus opening the curtain of micro front-end. After Alibaba developed the qiankun micro front-end framework based on single-spa in 2019, the popularity of micro front-ends has been increasing. In the development process of micro front-ends, developers have also slowly figured out the current application scenarios of micro front-ends:

In 2021, the framework of micro front-ends has become very popular. There are many, among which the well-known ones include the old single-spa, the micro front-end framework qiankun with the highest number of Github stars, and the emerging micro front-end framework JD.com’s MicroApp.

single-spa Since v5.0 was released in 2020, the main work in the first half of last year was around fixing some bugs in v5.0, and v6 was released in July in the second half of the year. 0 beta version. Although v6.0 also has some Breaking Changes, most users do not need to update their code for these Changes. The more important thing is that in terms of browsers, v6.0 will be the last version to support IE11, and the future version v7.0 will no longer support IE11. The single-spa team will focus more on browser compatibility. Turn to maintaining the entire single-spa ecosystem. v6.0 also adds two new features:

• supports asynchronous cancellation of page navigation.

• Expose patchHistoryApi, developers can use single-spa encapsulated pushState/replaceState/popstate/hashchange.

Not only are the old frameworks working hard, but qiankun, which claims to be “probably the most complete micro front-end solution you’ve ever seen,” is also constantly being updated. qiankun mainly solves some problems in different application scenarios, and fixes some JavaScript compatibility issues in the sandbox, such as defineProperty issues in the sandbox, and sandbox performance issues. Although qiankun didn't seem to have many updates last year, it also released the exciting V3.0 RoadMap, which mentioned a lot of updates. The main updates include: independent application loading module and independent sandbox module.

However, qiankun still has not solved the problem of strong intrusion and cannot be easily embedded into pages like iframes.

One good news in the second half of the year is that JD.com also launched its own micro front-end solution MicroApp. It does not adopt the componentization ideas of single-spa and qiankun, but draws on the idea of ​​​​WebComponent. It uses CustomElement combined with the customized ShadowDom to encapsulate the micro front end into a class WebComponent component, thereby realizing component rendering of the micro front end. It has the following characteristics:

• Class WebComponent HTML Entry

• Life cycle

• Resource address supplement Full

• JS sandbox, style isolation, element isolation

• Data communication

• Preloading

• Plug-in system

MicroApp is perfect in terms of usability and intrusiveness. The development and future of this framework are very worth looking forward to. .

In general, the basis of micro front-end comes from "all large systems cannot escape the law of entropy increase". The problems it can solve are also the deconstruction of some monolith applications, so micro front-end is more often "pessimism" Engineer” compromise in engineering. As for whether to use micro-frontends, you can read the analysis by qiankun author kuitos in this article "You May Not Need Micro-frontends".

The IMWeb team has also conducted in-depth research on micro-frontends in the past year, and completed a very successful micro-frontend practice of qiankun x incremental reconstruction based on qiankun, turning the old Vue monolith into The project is organically integrated with the new React project to achieve parallel development and seamless reconstruction, greatly improving front-end productivity. For specific practical details, please pay attention to subsequent articles on the IMWeb team’s public account.

Looking forward to 2022 technology trends

Business may encounter bottlenecks, but the development of technology will never stop. Only "thick accumulation" can make "thin success". Front-end people must always temper themselves and break through their own boundaries in order to go further in this era of standardization, industrialization, intelligence, and great unification!

In terms of segmented fields, we can make some prospects for 2022:

• React and Vue are still continuing to develop according to their own characteristics, the focus is still It revolves around user experience and developer experience. Whether the dark horse Svelte can break through and the impact and influence of Svelte's new trend of thought are worth looking forward to.

• With the in-depth development of the full stack, each major UI framework has its own "meta-framework" to build full-stack applications. Together with the traditional big brother Nest and the rising star Remix, it can be said that A hundred schools of thought contend.

  But the deep sea of ​​backend development cannot be filled by a certain framework. What is more needed is the awareness and experience accumulation of front-end developers. I believe that in the next year, the front-end will penetrate deeper and more comprehensively.

• TypeScript is already the standard for front-end projects.

  It can be expected that there will be more powerful supporting tools in the future to improve productivity and user experience.

• All major cross-end frameworks are targeting the desktop. In addition, with the popularity of "cloud games", "cloud applications" also have great potential. Of course, front-end development cannot be discarded. In this position,

  Electron’s community and Tauri’s performance are worth looking forward to.

• If you want to go further, it’s time to learn a new language, the future of JS infrastructure - Rust, full stack - Go, AI - — Python, Flutter — Dart, when will front-end people break their own boundaries? WASM will definitely be a big hit in the future, and you won’t know it without the front end!

• ToB's transformation trend is obvious, low-code has great potential, what is gratifying is that more big manufacturers tend to unify low-code, open source engines, and end low-code The chaos of platforms running everywhere is also the only way for the Internet industry to move toward industrialization and intelligence.

• D2C is the beginning of front-end intelligence, and the road is still very long.

  I am looking forward to the launch of more front-end intelligent products!

• The research and effectiveness platform is also in the stage of unification, and it should continue to be carried out in the next year. Although there will be pain, for the sake of future research and development Industrialization and intelligence are worth the effort!

With the popularization of 5G networks and the continuous improvement of mobile phone hardware, traditional graphics and text media can no longer satisfy the appetite of the majority of netizens.
• I believe that there will be a very big future in the audio and video field. Before the era of virtualization and metaverse came, the audio and video field was still the core of this era.
  With the development of business, the continuous growth of management systems and the trend of great unification,
Jushi applications are inevitable and will be more and more
• , if you get this disease , Micro front-end can be regarded as a good medicine. The ecology and construction of micro front-end, as well as the idea of ​​MicroApp borrowing from WebComponent are very worth looking forward to!