“What will be hot and what to learn in 2022? This article is participating in the” Talk about 2022 Technology Trends “essay campaign.

The front end framework debate

Let’s take a look at some of the pandemic frameworks of the past yearNPM download trends

  • React is statistically far ahead, and Vue is close to Angular
  • This is an international performance, and IT is believed that React and Vue are equal in domestic market. It can be seen from the number of Stars on Github that Vue surpassed React in 2018

  • React is developed and maintained by Facebook, but updates are fairly fast, with an update to 17.0 in 2021. It’s already been announced that a version of 18.0 is in the works, and that you can use React 18 directly without rewriting the code, and can experiment with new features at your own pace and needs.

  • Vue also officially released version 3.0 in 2021. At present, Vue3 has become the default version. If you are still using Vue2 and old projects are not recommended to upgrade directly, new projects can consider Vue3. The open source community is relatively active and various supporting ecosystems are relatively complete, all of them have basically upgraded to the corresponding version. The component library recommends varlet, which was named by Yuxi before, developed and maintained by Chinese, and supports domestic production.

TypeScript delicious

TypeScript 4.6 Beta release: Enhanced recursive type checking, control-flow analysis support for parameters, and type derivation for index access

JavaScript is a weakly typed language that generates a lot of errors at runtime. TypeScript provides a set of static checking mechanisms that allow JavaScript to find and correct errors during development, just as some static languages do, but which means more code to write during development

  • For example, a function in TS needs to define types for its arguments and return values
// js
let fn = (a, b) = > {
    return a + b
}
// ts
let fn = (a: number, b: number): number= > {
    return a + b
}
Copy the code
  • It was always painful at the beginning. At the beginning, I always felt that I spent more time doing something unnecessary. However, as the project gradually expanded, the advantages of TS would gradually be reflected. For example, when calling a function, the type check provided by TS will automatically prompt the parameters that need to be passed in. If not passed, missed or type error will be reported, which is very convenient and can improve the efficiency of development, especially in team collaboration

Package and Build

Webpack

Webpack website

At present, Webpack is a dominant company, occupying a large market share. With the arrival of Webpack5, it is necessary to learn it well.

Vite

Vite Chinese website

Vite is a new front-end building tool developed by the author of Vue. It belongs to ESM hybrid compilation and uses the design based on Rollup plug-in API. Vite 2.0 will be released in 2021, and the experience will be “fast”, because Vite uses the browser’s native ES module support and compiler to native language development tools to provide a fast and modern development experience.

ESBuild

Esbuild document

ESbuild is a WebPack-like build tool. It builds dozens of times faster than WebPack. You can use esbuild-Loader in Webpack instead of Babel-Laoder to improve compilation efficiency

tool

pnpm

pnpm

PNPM is an enhanced version of NPM and YARN. Vue3 and other related projects have also migrated repositories to PNPM. It is an “Internet star” package management tool, and downloads have exploded in 2021

Develop learning

Rust

Rust Chinese official website Why use Rust?

Rust is a compiled language, like C, that does direct operations on hardware, so it can be very resource-efficient and fast to execute. Many of the tools in the front-end ecosystem have been rewritten with Rust for optimization purposes, and have indeed received significant performance improvements, such as the new generation of compiler SWC that can be benchmarked against Babel

Write in the last

In general, there is no end to learning technology, and new technologies are born every day. This article just lists some of the skills I think I need to master in front of 2022. Thank you for watching and hope to share with you.