Front-end Canteen Technology Weekly Issue 52: Babel 7.19.0, Fresh 1.1, React Native 0.70

Delicious value: 🌟🌟🌟🌟🌟

Flavor: watermelon scoop ice

• Canteen Technology Weekly Warehouse Address: https://github.com/Geekhyt/weekly

Summary of this issue

• Babel 7.19.0
• Fresh 1.1
• React Native 0.70
• Node.js working principle analysis
• JSON Crack
• New Web Performance Indicator INP
• Why does React re-render
• Timeline of JavaScript History

Hello everyone, my name is Tong Oppa. Welcome to this issue of Front-end Canteen Technology Weekly, let's take a look at last week's technical information.

Technical Information

1. Babel 7.19.0

This release includes implementations for the following:

• It's been 5 years since the decorators proposal was finalized, but the functions have been cut a lot;
• Duplicate named capturing groups regex supports duplicate named capturing.

2. Fresh 1.1

Fresh 1.1 was recently released, with many new features:

• JSX is supported by default;
• Support plug-ins, provide official twind plug-ins;
• Support Preact Signals ;
• Support Preact DevTools;
• ctx.renderNotFound() renders 404 pages;
• Support multiple middleware;
• Experimental support for Deno.serve;
• Showcase display area and Made with Fresh badge.

3. React Native 0.70

The main updates in React Native 0.70 are as follows:

• Documentation update "New Architecture" section;
• Use Hermes as the default engine;
• Unified configuration of Codegen Config for iOS and Android;
• Auto-linking of Android Support Library under the new architecture;
• Android build supports CMake;
• and many more.

Now let's look at the technical data.

Technical Information

1. Analysis of the working principle of Node.js

This blog post by Dr. Axel Rauschmayer provides an overview of how Node.js works, covering the following aspects:

• architecture;
• API;
• Highlights of global variables and built-in modules;
• event loop;
• Concurrency scheme.

Before the end of the year, he will publish a new book "Shell scripting with Node.js" .

2. JSON Crack

JSON visualizer.

3. New Web Performance Indicator INP

INP derives experimental metrics that represent the overall responsiveness of a page by measuring the latency of all user interaction events with the page. The scope of the INP measurement includes mouse/touch screen click events, keyboard events, and excludes hover and scroll events. Calculated when the user leaves the page, the result is a single value, the lower the better.

Difference from FID: INP takes all interactions on the page into account to get a more comprehensive indicator, while FID is only the first time.

4. Why does React re-render

How many reasons do you think React components are being updated?

Is it because its props have changed? Or is the value of Context.Provider updated? Does the whole React tree update when one state changes?

If you can't guarantee that you can answer the above questions correctly, then go to this blog post to find out~

5. Timeline of JavaScript History

This site organizes key event nodes in JavaScript history.

• 1994-1998: Netscape era;
• 1999-2007: IE vs Firefox;
• 2008-2012: The end of Netscape, the birth of Chrome;
• 2013-2014: From ASM.js to WebAssembly;
• 2015-2020: The rise of Node.js;
• 2020-2022: Deno is born, IE is retired.

other information

• Nuxt Icon
• Next.js 12.3
• TypeScript 4.9 Iteration Plan

Good article recommended

Let's take a look at the good articles recommended. The good articles recommended this week are:

1. Creative CSS Layout and Flexible Web

2. React Error Boundary Guide

Well, the above is this issue of Canteen Weekly. If the audience members think it's not bad, one-click three-link is the biggest support for canteen bosses.

Your front-end canteen, eat every meal, see you next time.