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

Opinions differ on what the front end should learn in 2022.

But I always believe, data, never lie!

Let’s take a look at some of the “dark horses” and “overlords” worth learning from in 2021’s star explosion library.

A, 👑ZX:Use JS to write more convenient shell scripts

Zx.js 2021 Star increment +24.3K

Nowadays, front-end engineering has become more and more popular, and the engineering problems that front-end personnel need to face have become more and more complex, often requiring front-end research and development to write shell scripts. But because of the technology stack, script quality and development efficiency are very urgent. The appearance of ZX. js is to solve this embarrassing dilemma!

Is it notshellWell, I usejsCan write!

#!/usr/bin/env zx

await $`cat package.json | grep name`

let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,]),Copy the code

Zx.js proves once again that “if a library can be implemented with JS, someone will implement it with JS.”

If you often need to write scripts, you should not miss this zX!

Second, the 👑Vite:Next generation front-end tools

Vite 2021 STAR increment +21.4K

Vite(pronounced like weɪt, fast) is a Web development build tool powered by the native ES Module. Developed based on browser native ES Imports in development environment and packaged based on Rollup in production environment.

While WebPack remains the undisputed king of builds in 2021, the active front-end community has finally emerged with a viable challenger.

Vite goes straight to the heart of WebPack’s most notorious weakness: “Build too slowly during development.”

Vite takes a different approach. During dev, modules are loaded in ESM format through ESbuild, almost realizing the effect of “open in seconds”. Let developers who suffer from webPack’s snail-like build speed scream “cow beep”.

When it comes to production builds, Vite provides a modest encapsulation of the older build tool Rollup to make it easier for the average developer to get involved.

Whether you’re a React developer or a Vue developer, Vite is a tool worth checking out.

Trust me, you’re gonna love it.

Third, 👑The React & Next. Js:A good gay friend who accomplishes each other

React 2021 STAR increment +18.5K

Next. Js 2021 Star increment +19.7K

React is going to increase dramatically in 2022.

Next. Js is an application framework based on React. You can easily develop React applications with Next.

Build scripts, packaging commands, development tools, routing, state management, network requests, SASS/LESS, server-side rendering.

You don’t have to “choose” in the community anymore, and you can start developing features quickly.

Sooooo Coooooool!

Even though next.js is based on React, how does next.js build React?

Four, 👑Tauri:Build smaller, faster cross-platform desktop applications

Tauri 2021 Star increment +18.0K

Tauri is a framework for building small, fast binaries for all major desktop platforms. Developers can integrate any front-end framework compiled into HTML, JS, and CSS to build their user interfaces. The back end of the application is a Rust binary with an API with which the front end can interact.

Reading the above paragraph, many people must think of another library: electron.js.

Same HTML/JS/CSS, same cross-platform, same desktop application.

So what makes Tauri such a breakout star in 2022?

With two kills:

  1. Smaller! Its construction ratioElectronThe building is smaller because it gives up the massiveChromium 和 nodejsAnd the front end uses the operating systemwebviewBack end integrationRust.
  2. More little! It has a lower memory overhead.

Fifth, 👑Tailwind CSS:The new generation of “atomic class” CSS utility framework

Tailwind CSS 2021 Star increment +18.0K

This is a utility-first CSS framework that is used in a similar way to the “atomic classes” used 10 years ago:

You can generate CSS code with names like Flex, PT-4, and text-center.

Some say this is turning back the clock on history.

But times have changed, my Lord.

IN the current era of highly componentized CSS IN JS, with the help of Tailwind CSS, atomized CSS shows its advantages of convenience, high semantic and high constraint.

“Old trees grow new branches” may not be appropriate, but we can only sincerely sigh that “atomic CSS” has come to its time.

Six, 👑Slidev:Presentation slides based on Markdown

Slidev 2021 Star increment +16.9K

Are you still struggling with Powerpoint because your presentations always look low? Have you ever wished you could control your demo as much as your own code?

Come on! It’s all in Slidev!

Good news for markdown deep enthusiasts! Slideshow open source library for developers. With Slidev, Markdown allows you to quickly create slides that are more flexible, expressive, and engaging.

Seven, 👑Esbuild:The thief quicklyJavascriptPackaging machine

Esbuild 2021 Star increment +12.9K

According to Esbuild, “All the other packaging tools currently available are 10-100 times slower than they should be.”

“I’m not taking it personally. I’m doing webpack/rollup stuff that’s not very good.”

Why is that?

  • It is based ongolang, is better thannode.jsFast.
  • Highly parallel processing algorithm.
  • Abstinence in functional design.
  • Rewrite the core toolchain.

In 2021, Esbuild made a big splash on the front end, and Vite, the year’s biggest surprise, didn’t hesitate to choose Esbuild as one of its build tools.

It can be said that in this era of seeking efficiency, Esbuild must have a broader space.

The end of the

I’m Spring brother. I love vue.js, ElementUI, and Element Plus. My goal is to share the most practical and useful knowledge points with you. I hope you can leave work early, finish your work quickly, and feel calm 🐟.

You can follow me on the Nuggets, and you can also find me on the public account: Touch the fish in front. I hope you will be stronger in 2022.