Amoy front-end Architecture – Weekly Issue – 210802

🗞 News

Yarn release 3.0

Product Change:

0. Node 10 is no longer supported
1. By the PnP hook.pnp.jsChange to.pnp.cjs
2. Virtual folders are created by$$virtualChange to__virtual__
3. The editor SDK was moved to@yarnpkg/sdks 下
4. And so on…

Feature:

0. supportexportsfield
1. Performance optimization (even faster than PNPM in some scenarios)
2. Adopt a newnode_modulesThe linker
3. Improved Shell (replace the Shell of the system with the Shell interpreter provided by Yarn)
4. Support ESBuild
5. Introduce a new plug-in API
6. And so on…

Full Changelog: Changelog.md

Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches,…

Visual Studio Code supports viewing information such as Element/Network

To debug Web pages in Visual Studio Code, you need to use either Chrome Debugger or Microsoft Edge Debugger Extension, which is console only.

The updated Visual Studio Code builds in debugging capabilities and extends them to support almost all of the debugging capabilities supported by Chrome DevTools.

Easier Browser Debugging with Developer Tools integration in Visual Studio Code

📦 Open Source

Windows 11 in React

Use React to restore Windows 11.

Preview: Windows 11 in React

Making Repo: blueedgetechno/windows11

Clipanion

A type-safe CLI library with no runtime dependencies that takes an object-oriented approach to developing the Command Line Interface (CLI).

The Demo:

// src/app.ts import {Cli} from 'clipanion'; import {HelloCommand} from './HelloCommand'; const [node, app, ...args] = process.argv; const cli = new Cli({ binaryLabel: `Command Line Interface`, binaryName: `${node} ${app}`, binaryVersion: '1.0.0', enableColors: true,}) cli.register(HelloCommand); cli.runExit(args, Cli.defaultContext);Copy the code

// src/HelloCommand.ts
import {Command, Option} from 'clipanion';
​
export class HelloCommand extends Command {
 name = Option.String({required: true});
​
 async execute() {
   this.context.stdout.write(`Hello, ${this.name}!\n`);
}
}
​
Copy the code

When we run app.ts with ts-Node or compile it into JavaScript and run it with Node, we can see the output on the console:

$ ts-node src/app TaobaoFED
Hello, TaobaoFED!
Copy the code

Making Repo: arcanis/clipanion

Node.js CLI Apps Best Practices

Best practices for building a well-experienced Node.js Command Line Interface (CLI) with Node.js

Making Repo: lirantal/nodejs cli – apps – best – practices

Sandpack

CodeSandbox is an open source browser side packaging solution.

Making Repo: codesandbox/sandpack

Infima

The style framework from Docusaurus 2 provides a modern style solution for content-driven web pages.

Official Website: Infima

Making Repo: facebookincubator/infima

Benny

A very simple Benchmark framework.

The Demo:

// benchmark.js const b = require('benny') b.suite( 'Example', b.add('Reduce two elements', () => { ; [1, 2].reduce((a, b) => a + b) }), b.add('Reduce five elements', () => { ; [1, 2, 3, 4, 5].reduce((a, b) => a + b) }), b.cycle(), b.complete(), b.save({ file: 'reduce', version: '1.0.0'}), b.s ave ({file: 'reduce', the format: 'chart. HTML}),)Copy the code

$ node benchmark.js Running "Example" suite... Progress: 100% Reduce two elements: 153 067 277 ops/s, plus or minus 0.11% | fastest Reduce five elements: 119 100 958 ops/s, plus or minus 1.86% | slowest, 22.19% slower Finished 2 cases! Fastest: Reduce two elements Slowest: Reduce five elements Saved to: benchmark/results/reduce.json Saved to: benchmark/results/reduce.chart.htmlCopy the code

Making Repo: caderek/benny

📑 Article

How does Next-js do pre-render

This article introduces the pre-rendering scheme provided by Next. Js in detail, analyzes the advantages and disadvantages of various pre-rendering schemes in a simple way, and puts forward some suggestions on the scheme selection for different types of scenes, which is worth learning!

How does Next. Js do pre-rendering

View the principle of micro-front-end route hijacking from Prompt

This paper explains the hijacking principle of micro – front-end routing from the feedback of business side.

See the principle of micro-front-end route hijacking from Prompt

React Native is getting a major architecture upgrade that will significantly improve performance

This article briefly introduces the major architecture upgrades of React Native and discusses the details of this architecture upgrade through in-depth interviews.

React Native is getting a major architecture upgrade that will boost performance significantly