Hello everyone, the year of 2021 has come to an end unconsciously. What have you achieved in 2021? What was lost? It’s time to start the year-end summary again. Today, I’m going to make a year-end summary for the front end. We are going to review with me what happened in the front end in this magical year. The original article is from the official wechat account code Secret Garden.

2021.1.6 Snowpack 3.0 released

Snowpack is a JavaScript build tool that takes advantage of the browser’s ESM support, allowing us to build individual files and send them to the browser. Every file that is built is cached, and every time we modify a file, only this one will be rebuilt by Snowpack.

Snowpack 3.0 was released on January 6, 2021, and is the largest version update to date, including a number of very important new features such as:

  • experiments.source: A new way to load NPM imports on demand, bypassing the front-end NPM install step entirely.
  • experiments.optimize: Built-in packaging, preloading, and asset minimization capabilities.
  • experiments.routes: Advanced configuration for HTML rollback and API proxy.
  • import 'snowpack': New JavaScript API for Snowpack integration.

2021.2.2 NPM 7.0 is officially available

NPM 7.0 was released in 2020 and was not tagged as latest until February 2021, which meant that it was available for use in the official environment and brought with it a number of changes

  • Performance optimization: NPM itself reduces the number of dependencies46%(NPM6 has 123 dependencies on NPM7 and only 67), improved17%Code coverage, with significant performance improvements in various benchmarks.
  • Automatic installationpeerDependencies: Before NPM7, developers had to manage and install it themselvespeerDependencies
  • yarn.lockSupport: NPM7 (package-lock v2) can be usedyarn.lockTo record the actual installation of each in the current statenpm packageDetails of the source and version number will be updated.
  • workspace: Supports the management of multiple subpackages from a single top-level package.

2021.2.17 Vite 2.0 released

Vite 1.0 made it to the RC stage, but before the release the Vite team decided to do a complete refactoring to address some design flaws, so Vite 2.0 is actually the first stable release of Vite, bringing a number of improvements:

  • Multi-framework support:ViteOfficial Vue, React, Preact, Lit Element project templates are available, and the Svelte community is also in developmentViteIntegrate solutions.
  • New plugin mechanism and API: based onRollupPlug-in API design can be in useRollupPlug-in hooks are used in addition to some additional onesViteSpecific apis to handle requirements that don’t exist in packaging.
  • Based on theesbuildDependency prepackaging: useesbuildTo reduce the number of modules/requests and support CommonJS dependencies.
  • Better CSS support: support CSS code segmentation, enhanced path resolution, automatic URL rewriting.
  • Others: server-side rendering support, older browser support…

Earlier this year, You predicted in an answer that there would be a lot of people switching from Webpack to Vite in 2021, and that prediction has come true:

Today, Vite has a very complete ecology:

2021.3.4 V8 announces accelerated release cycles

To provide users with new features and bug fixes more quickly, Chrome sped up its release cycle.

In keeping with Chrome’s new release rhythm, V8 will start marking a major release branch every four weeks (up from six).

2021.3.6 jQuery 3.6.0 Released

After the release of jQuery 3.5.1 in May 2020, jQuery 3.6.0 was released in March 2021 with no new features or security fixes, mainly to JSONP, Ajax and other apis.

One of the great things about jQuery is that the upgrade doesn’t cause any problems (because upgrades are mostly about fixing problems), and there are a lot of strong supporters in the comments section:

2021.3.9 ECMAScript 2021 version candidate is released

These include some new features that I’m interested in:

  • Numeric delimiter (_) : New for readabilityJavaScriptThe language enables underscores as separators in numeric literals, for example:1 _000_000_000_000.
  • Promise.any:Promise.anyMethods andPromise.raceSimilarly, as long as there is one in a given arraypromiseSuccess, take the first onepromiseValue as its return value, but withPromise.raceThe difference is that it will wait for allpromiseThe failed value is returned only after both fail.
const promises = [ fetch('/endpoint-a').then(() => 'a'), fetch('/endpoint-b').then(() => 'b'), fetch('/endpoint-c').then(() => 'c'), ]; try { const first = await Promise.any(promises); // This is a big Promise. Console. log(first); // → 'b'} catch (error) {// All Promise rejected console.assert(error instanceof AggregateError); // reject Console. log(error. Errors); }Copy the code
  • Weak references: In the past,WeakMap 和 WeakSetIs the only way to create weak reference objects in JS,WeakRefIs a more advanced API that can be used to specify that the target object does not leave the garbage collection to preserve its objects. If the target object is not collected through garbage collectionWeakRefsYou can dereference to allow access to the target object. It’s also been addedFinalizationRegistryObject that can request a callback when an object is garbage collected.
const ref = new WeakRef(targetObject)
const obj = ref.deref()

const registry = new FinalizationRegistry([callback])
registry.register(target, heldValue, [unregisterToken])
Copy the code
  • String.prototype.replaceAll: provides an easy way to replace all matches of substrings without the need to create globalsRegExp 。

If you want to replace all + in queryString, you need to create a global re:

const queryString = 'q=query+string+parameters';
queryString.replace(/+/g, ' ');
Copy the code

Now you just need to use the replaceAll method:

queryString.replaceAll('+', ' ');
Copy the code
  • Logical assignment operator (, &&, | | =?????? =) : is a new compound assignment operator that can combine logical operations, &&, | |or??Combined with the assignment operation to form a command.
x &&= y; / / is equivalent to x && (x = y) x | | = y; / / is equivalent to x | | x (x = y)?? = y; // Same as x?? (x = y)Copy the code

2021.3.17 The next 10 years of Node.js

Node.js was very successful in its first 10 years, and the project is working hard to make the Next 10 years even better. The official release of Node.js vision for the Next 10 years and the launch of Next-10 work:

2021.3.17 V8 9.0 released

V8 9.0 is a major release of V8 that comes with the Chrome 90 Stable and includes the following key highlights:

  • Regular match index: fromv9.0To start, the developer can get an array of the start and end positions of the capture groups matched in the regular expression match. When the regular expression has/dFlag when this array can be matched by objects on the.indicesProperty acquisition.
  • Faster super property access: by usingV8The inline cache system andTurboFanOptimized code generation, yessuperProperties (for examplesuper.x) has been optimized.

  • fasterJS-to-WasmThe call.
  • disablefor ( async ofWriting.

See article: What’s new in V8 9.0?

March 29, 2021.Deno Company is established

Ryan Dahl, author of Node.js, blogosphere about his vision for the future of Deno and what it means for Web development. They believe that JavaScript will live on the Internet for a long time to come, and will be the fastest, most popular, and only language with industry-standardized processes.

He also points to the Node.js project he created and says that while it has had some success, server-side JavaScript has been so fragmented and poorly built that it hasn’t even kept up with the browser platform.

To actively pursue these ideas, Ryan Dahl and Bert Belder founded the company Deno and raised $4.9 million in seed funding. They will initially use the investment to build a dedicated team of engineers to improve Deno.

April 13, 2021.China’s first JavaScript language proposal enters Stage 3 at ECMA

This proposal is the “Error Cause” put forward by Alibaba front-end standardization group and Tao System technology department in TC39 Technical Committee recently. It will start to be implemented in JavaScript engine, and experimental implementation in browser and Node.js.

async function doJob() { const rawResource = await fetch('//domain/resource-a') .catch(err => { // How to wrap the error  properly? // 1. throw new Error('Download raw resource failed: ' + err.message); // 2. const wrapErr = new Error('Download raw resource failed'); // wrapErr.cause = err; // throw wrapErr; // 3. class CustomError extends Error { // constructor(msg, cause) { // super(msg); // this.cause = cause; // } // } // throw new CustomError('Download raw resource failed', err); }) const jobResult = doComputationalHeavyJob(rawResource); await fetch('//domain/upload', { method: 'POST', body: jobResult }); } await doJob(); // => TypeError: Failed to fetchCopy the code

Error Cause 2021.4.13 entered Stage 3, which is also the first JavaScript language proposal entered Stage 3 in ECMA in China.

2021.10.26 The proposal has gone to Stage 4

2021.4.21 Node. Js16 release

Node.js 16 replaces Node.js 15 as the current major release, while Node.js 10 is in maintenance at the end of this month.

Brings the following major updates:

  • Timers Promises API: provides another set of returnsPromiseObject timer function, no longer neededutil.promisify().
  • AbortControllerBased on:AbortController Web APIStable realization of
  • standardWeb Crypto APIExperimental implementation
  • Stable Source Maps v3
  • Node.js v16In thenpmVersion tov7.10.0
  • V8Update toV8 9.0

2021.5.28 React 18 Alpha release

The React team announced plans for the React 18 release in May and released an alpha version of React 18 (which went into beta in November, but won’t be written about later). This release mainly enhances the concurrent rendering capabilities of the React application.

Here are some new features you can try out with React 18:

  • The newReactDOM.createRoot() API(replacementReactDOM.render())
  • The newstartTransition API(Mainly used for non-emergency updates)
  • Automatic batching optimization for rendering (mainly for asynchronous callbacks that cannot be batched)
  • supportReact.lazyThe newSSRArchitecture (support<Suspense>Components)
  • React 18
  • And I wrote an article about itReactKey work contents of the main stages:Evolution of the React framework runtime optimization

2021.6.17 Undici4 release

Previously, Request was the primary option for sending an HTTP request in Node.js, but this package was deprecated on February 11, 2020.

Now, Node.js officially recommends Undici4 as the recommended choice for sending HTTP requests in Node.js. It’s faster, more reliable, and compliant with the specification. Here’s a small Demo:

import { request } from 'undici' const { statusCode, headers, trailers, Body} = await the request (' http://localhost:3000/code secret garden) console. The log (' response received ', statusCode) console.log('headers', headers) for await (const data of body) { console.log('data', data) } console.log('trailers', trailers)Copy the code

Undici4 uses WASM to build LLHTTP, and performance improves dramatically.

2021.7.20 Node-Red 2.0 released

Node-red is a low-code programming tool based on Node.js that connects hardware devices, apis, and online services in new and interesting ways.

It provides a browser-based editor that makes it easy to wire streams together using various nodes in the edit panel and deploy them to their runtime with a single click.

Now, Node-Red has released version 2.0, which requires Node.js 12.17.x or later, and brings a lot of new features.

2021.8.3 vue.js was chosen as the front-end framework for Wikipedia

The Wikimedia Foundation has announced the adoption of vue.js as the future JavaScript framework for MediaWiki, wikipedia’s underlying engine.

2021.8.5 Vue 3.2 released

On August 5, vue.js author Yu Yuxi announced the official release of vue.js version 3.2 on his blog.

The following are the main contents of the update:

  • New SFC functions
    • <script setup>Is a compile-time syntax candy that can greatly improve onSFCThe use ofComposition APIDeveloper experience.
    • <style> v-bindFor use inSFC <style>TAB to enable component state-driven dynamic CSS values.
<script setup>
import { ref } from 'vue'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>
Copy the code
  • Web components:Vue 3.2Introduced a newdefineCustomElementMethod can be usedVuecomponentAPIEasy to create native custom elements:
import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
 
})

customElements.define('my-vue-element', MyVueElement)
Copy the code
  • Runtime performance improvements:
    • More efficientrefImplementation (read speed increases by about260%, the write speed is improved by about50%)
    • Dependency tracking speed increases by approximately40%
    • Memory usage is reduced by about17%
  • Compile-time performance improvements
    • Creating a normal elementVNodeThe speed increases about200%
    • More radical continuationhoisting

New TypeScript website launches

Back in August 2020, the TypeScript team redesigned the entire existing TypeScript Web architecture. The goal is to document how TypeScript provides a new foundation, reorganizing its information architecture, packaging it together in a cohesive design, and launching a new website over the course of a year.

2021.9.20 Node.js publishes Corepack

Corepack is an experimental tool to help you manage versions of your native Package Manager. It is used to manage the Package management tools (NPM, YARN, PNPM, and CNPM), that is, the package manager manager.

It exposes the binary proxy for each package management tool, and when Corepack is called, it reads the package management tool configured for the current project, requiring no manual installation by the user, and no additional user action when it is finally run.

2021.10.5 React New document is released

React has been teased in the past that the official documentation is not newbie friendly, and the older documentation is mostly based on class Components.

The update of the React official document took a year. The site was updated in October, and some documents were initially online.

The contents of the new document should change:

  • All examples will be usedHookscomplete
  • Add lots of interactive examples and diagrams
  • Provide problem sets to test learning outcomes

The document station is technically done as follows:

  • Frame fromGatsbyReplace toNext.js
  • The introduction of thetailwind
  • Get rid ofFlow, a comprehensiveTypeScript 化
  • New interaction design
  • Support for Night mode

2021.10.7 jQuery Mobile Deprecated

JQuery Mobile was conceived and released in 2010, three years after jQuery was launched. When jQuery Mobile announced compatibility across multiple platforms, browsers, and versions, it was a cross-generational framework.

On October 7th, the jQuery team announced the complete abandonment of jQuery Mobile:

JQuery Mobile deprecated:

  • It can still be downloaded and used
  • Mobile 1.4With the newjQuery CoreAre not compatible
  • Github IssuesWill be closed, can only pass[email protected]Report a serious security problem

After abandoning jQuery Mobile, the jQuery website recommends that you migrate to jQuery UI, which will continue to provide Mobile support.

Learn more: jQuery Mobile Is dead!

2021.10.13 Parcel V2 is released

Parcel is a new Type of Web application bundler that is different from what developers have used in the past. It provides extremely fast performance with multi-core processing, and you don’t need to do any configuration.

On October 13, Parcel Team released Parcel V2, which continues Parcel 1’s zero-configuration packaging experience and gives it great scalability to accommodate projects of any size and complexity.

  • New plug-in system: forParcelProvides a complete extension capability that allowsParcelScale from small-scale projects to applications in mass production environments with complex build requirements
  • The default openTree Shaking: includes ES modules, CommonJS, Dynamic Import, and CSS modules support
  • Huge performance improvement: including useRustWrite the newJavaScriptCompiler and new multitasking parallel architecture, able to take advantage of allCPUKernel parallel execution

2021.10.19 Node.js 17 released

Six months after the release of Node.js16, Node.js V17.0.0 was released.

Here are the highlights of the update:

  • readline Promise APIYou can now call it as followsreadline:
import * as readline from 'node:readline/promises';
import { stdin as input, stdout as output } from 'process';

const rl = readline.createInterface({ input, output });

const answer = await rl.question('What do you think of Node.js? ');

console.log(`Thank you for your valuable feedback: ${answer}`);

rl.close();
Copy the code
  • Error stack tail increasedNode.jsVersion information, more convenient debugging problems:
file:///home/ConardLi/dev/demo/main.mjs:1 throw new Error (Error... "" ); ^ Error: Uncaught exception at file:///home/ConardLi/dev/demo/main.mjs:1:7 at ModuleJob.run (node:internal/modules/esm/module_job:185:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:281:24) at async loadESM (node:internal/process/esm_loader:88:5) at async HandleMainPromise (node: internal/modules/run_main: 65:12) node. Js v17.0.0Copy the code
  • supportOpenSSL 3.0: Especially to provideQUICTo support thequictls/openssl
  • JavaScript V8Upgrade to thev9.5

2021.11.27 Next. Js 12 released

The Next. Js team officially announced the release of version 12 on October 27.

As announced in the next.js Conf, next.js 12 is the largest release of next.js ever, with an overview of the updates:

  • usingRustCompiler: refresh 3 times faster, build about 5 times faster
  • Middleware (beta): through the configuration code inNext.jsAchieve complete flexibility in
  • React 18Support: supportSuspense and React Server ComponentsNew features such as
  • <Image />AVIFSupport: Choose to reduce the image by 20%
  • Bot-aware ISR Fallback: Optimize SEO for web crawlers
  • Native ES module support: consistent with standardized module systems
  • URL Imports (alpha): Supports importing packages (such as CDN) from any URL without NPM installation

Learn more: Next. Js 12 released! Biggest update yet!

2021.11.4 Angular V13 released

On November 4th, the Angular team announced the release of Angular 13.

The core updates include no support for the old build and render Engine View Engine, full support for the new build and render Engine LVY, and no support for IE11, as well as updates and changes to APF and the Angular CLI.

2021.11.17 TypeScript 4.5 Publishing TypeScript 4.5 publishing TypeScript

TypeScript 4.5 was released in 11.17, Support for ECMAScript modules, lib loading from node_modules, new built-in tool types, faster loading via Node’s RealPathsync.native, and more.

2021.11.24 Remix is open source

Remix is a full-stack framework based on React, TypeScript, and Node developed by the React Router development team to address some of the most difficult issues developers face when developing with React.

Remix announced the closure of the paid subscription model, officially open source, is definitely a strong competitor to Next.

Last October, we launched Supporter Preview and were thrilled with the support we received. While we were able to get a normal developer salary from a paid subscription to Remix, we wanted to go one step further. We want to make Remix available to everyone. We believe that releasing Remix as open source will drive innovation in the project and enable other frameworks to benefit from the progress we have made. We are eager to learn from and give back to others. — Remix co-founders Michael Jackson and Ryan Florence

Pinia has officially become a member of vuejs

Pinia is a lightweight state management library for vue.js that has recently become popular. Its success can be attributed to its unique ability to manage stored data (extensibility, storage module organization, grouping of state changes, multiple storage creation, etc.).

On November 24, Yuxi announced on Twitter that Pinia is now vuejs’ official status library, meaning Pinia is Vuex 5.

JavaScript is 26

December 4th marks the 26th anniversary of the debut of the programming language JavaScript.

On the 26th day, Node.js officially posted: “Happy 26th Birthday, JavaScript”.

2021.12.13 Deno joins TC39

Deno will work with other ECMA members and the wider JS community in the TC39 Working Group to discuss the next iteration of JavaScript, driving the language’s capabilities and improvements to benefit all, especially server-side JavaScript developer users.

2021.12.14 Create React App 5.0 is released

Create React App 5.0.0 is available, which is a major release.

Includes the following support:

  • webpack 5
  • Jest 27
  • ESLint 8
  • PostCSS 8
  • Fast RefreshTo improve andbugrepair
  • supportTailwind CSS
  • Improved package manager detection
  • All dependencies are removed for better compatibility with other tools
  • No longer supportedNode 10 和 12