Hello, everyone, I am the front-end evening class. It is January 2022 and the Chinese New Year is coming. I wish you all a happy New Year in advance. Has been eliminated, updated “situation, but it, technology still have to learn, work still have to do, do not give their pressure, efforts without regret.

The 2021 summary of the CSS field was released a while ago, but Javascript is late, but being late doesn’t mean it won’t come. Today we take a break from Javascript learning fatigue and take a look at Javascript Rising Stars version 6. The JavaScript world’s 2021 annual review.

The chart below compares the number of ⭐ additions to popular projects on GitHub over the past 12 months. We analyzed projects from Best of JS to compile this selected list of the Best Web platform-related projects (all showing the top ten).

The most popular program overall

The most popular project this year is ZX, a new Google command-line tool that allows you to write simple command-line scripts in JavaScript or TypeScript.

Basically, it allows you to embed any bash expression in your code (ls, cat, git… Anything!) And await the JavaScript template text as a result.

It includes several utilities provided by popular packages:

  • node-fetchMake HTTP requests using the same API as in the FETCH browser
  • fs-extraProcess file system operations
  • globbyMatches the filename of the given user friendly mode

Script. MJS file

#! /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`, ]) let name = 'foo bar' await $`mkdir /tmp/${name}`Copy the code

run

zx ./script.mjs
Copy the code

Wow, the command line tool ranked number one, but such a command line tool is really impressive, I went to press star.

Vite ranked second, I think it is deserved, used people, I think the first experience is fast, and user experience, user manual is a continuation of Vue documents consistent style.

Next. Js provides you with all the features you need in a production environment and the best development experience: Features such as static and server-side fusion rendering, TypeScript support, smart packaging, and route prefetch require no configuration and are said to be faster with SWC than Babel.

Tauri is a solution for building desktop applications using Web technologies.

In contrast to Electron, it is written in Rust and does not ship the Node.js runtime with every application. Version 1.0 was released in beta in May.

Vue is no. 10, but Angular isn’t there anymore.

I’m more interested in Tailwind CSS and Astro.

Tailwind CSS is a new style of CSS that utilizes a new style of CSS, which contains a lot of data, data, etc. Tailwind CSS is a new style of CSS that utilizes a new style of CSS, a new style of CSS, a new style of CSS, a new style of CSS, a new style of CSS, a new style of CSS, a new style of CSS, a new style of CSS, a new style of CSS I’m curious about its future development, but this is number six, which means the heat is pretty good.

Astro does not appear in the chart above, but it is one of the year’s most eye-catching projects. Astro is a tool for building websites that load faster because they publish less JavaScript.

This concept is close to static site generation (SSG), but the main difference is that Astro supports the use of dynamic interactive content in pages.

Different strategies can be applied to render dynamic components on the client side:

  • Page load time
  • If the page is a low-priority component, then when the page is idle (consider tracing.)
  • When the component is visible using the browser Intersection Observer API
  • One of the best parts is that Astro pages can be built using a combination of HTML and components written using any framework: React, vue.js, or Svelte…

Other notable projects missing from the top 10 include SWC, Deno, Remix, EsBuild, Svelte…

The front frame

Svelte and Solid may be unfamiliar here,

Svelte is a tool for building Web applications, similar to JavaScript frameworks like React and Vue, with one key difference: Svelte transforms your application into a desired JavaScript application at build/compile time, rather than interpreting the application code at run time. The biggest change here is the rise of Svelte, which ranks third ahead of Angular.

In fifth place is Solid, one of the React alternatives. Its components are written in JSX, but unlike React, Solid does not rely on the virtual DOM.

Node. Js framework

The major UI frameworks have their own “meta-frameworks” to build modern and extensible applications, providing routing, server-side rendering, pre-generated static pages, optimized builds for production, and more……

  • React owns next.js, the winner of the category, and can be considered a pioneer in the field
  • Vue.js has Nuxt and is now available in vue.js V2 and V3 versions
  • Svelte have SvelteKit

Remix, which I only learned about at the end of 2021, is a full-stack Web framework that allows you to focus on the user interface and deliver a fast, smooth, and resilient user experience through Web basics.

In addition to these meta-frameworks, Nest is a leader in more traditional server-side Node.js frameworks that don’t rely on any UI libraries.

Finally, Strapi is a leader in headless CMS.

Build tools

More and more people are adopting native ES modules. The widespread adoption of Vite (which grew faster than Snowpack) has led to the creation of a new tool ecosystem (such as Vitest, the modern ES-based testing framework). The ES module has also started to be adopted in the Node.js ecosystem, but it is more difficult. TypeScript even delays support for ES modules in Node.js.

For performance reasons, more and more front-end tools are developed in other languages.

Lee Robinson believes that Rust is the future of JavaScript infrastructure (a previous post on Rust also published a simple practice article on Rust, WebAssembly+Rust for the React component). Rust has good performance and interoperability with JavaScript. API-RS lets JavaScript and Rust interact.

Next. Js is bullish on SWC as an extensible Rust compiler that ports the Babel plug-in to Rust.

Rust is the most popular non-JS language, but it is not the only one. Bun uses Zig, while Turborepo and EsBuild both use Go.

Lerna is still widely used in MonorePO (monolithic warehouse design), which was introduced earlier (” Implementing MonorePO Project Management Based on Lerna “).

Vue ecosystem

One year after Vue 3’s official launch, we see the ecosystem growing rapidly with many great innovations.

New syntax in the Vue 3 core like < Script Setup > takes the component authoring experience to a new level. The new VS Code extension Volar brings first-class TypeScript support to Vue; A new state manager, Pinia, built on the new Composition API, is the successor to Vuex.

With Vite as the new default tool for Vue, meta-frameworks such as Nuxt 3, Quasar, and VitePress now use Vite as their default engine. Provides huge improvements to the developer experience and opens many new doors for innovation.

The community also put a lot of effort into making Vue 2’s DX consistent with Vue 3’s and making the migration process smoother. It was a great year for Vue developers, with huge improvements in the performance of both their DX and their applications. Good to see what 2022 has in store!

React ecosystem

React 18 should be released soon, but it already works with the RC version and benefits from some out-of-the-box improvements, such as automatic batching to reduce rendering or SSR support for Suspense.

React 18 adds long-awaited concurrent renderers and updates to Suspense without any major major changes. Some concurrent features such as startTransition will be available in the initial version of 18.0, but we’ll have to wait a bit more to get the nova of the previous version of JavaScript mentioned in the server component.

React continues to evolve on both the browser and server side, and with React Native’s multi-platform vision, it’s becoming increasingly ubiquitous.

Previously, I also read the Book “React Technical Secrets”, and expressed the React source code in the way of flow chart. This way also gave me a deeper understanding of the React source code. Draw flow chart learning React17 source code

CSS in Javascript

test

The mobile terminal

A desktop application

Static site

State management

GraphQL

remarks

Hope 2022 will be better for us, don’t come up with some new framework for us to learn, we can’t learn anymore, haha!

The resources

2021 JavaScript Rising Stars