前端技术双周刊 2023-05-07：Qwik 1.0 正式发布

[olivewind]

项目地址：olivewind/weekly

微信公众号：依赖注入

发布时间：2023.05.07

本周内容：资讯x4、开源x5、文章x2

---

行业资讯

Qwik 1.0 正式发布

Qwik 是一个有里程碑意义的前端框架，无论应用程序有多大，Qwik 都能够快速地构建，在多数情况下，Qwik 会先下载 1KB 的 JavaScript，在需要的时候才会懒加载或预处理程序和应用程序代码。

虽然才发布 1.0 版本，但该项目在 Github 上已经有超过 16k star，提出的 Resumable 对传统前端框架有根本上的颠覆，非常值得 Web 开发者关注。值得一提的是该框架作者 Misko Hevery 也是 Angular&Angular.js 的作者。

import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
 
export const useDadJoke = routeLoader$(async () => {
  const response = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  return (await response.json()) as {
    id: string;
    status: number;
    joke: string;
  };
});
 
export default component$(() => {
  // Calling our `useDadJoke` hook, will return a reactive signal to the loaded data.
  const dadJokeSignal = useDadJoke();
  return (
    <section class="section bright">
      <p>{dadJokeSignal.value.joke}</p>
    </section>
  );
});

如果你对相关理念还不太熟悉，我推荐你阅读 Qwik-前端性能的终极方案？。

Angular 12 正式发布

这是 Angular 自发布以来最大的一次变更，其首次引入 Signals 试图带来全新但更简单的心智模型，同时这也意味着基于 Zone.js 的响应式将成为历史。同时该版本也允许启用 Vite 和 esbuild，可以将构建速度提升 72%。

可以明显感受到 Angular 团队正在积极整合主流工具和范式，非常期待 Angular 可以早日重回巅峰。

@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    {{ fullName() }} <button (click)="setName('John')">Click</button>
  `,
})
export class App {
  firstName = signal('Jane');
  lastName = signal('Doe');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    effect(() => console.log('Name changed:', this.fullName()));
  }

  setName(newName: string) {
    this.firstName.set(newName);
  }
}

Signals 也可以和 RxJS 搭配使用

import { toObservable, signal } from '@angular/core/rxjs-interop';

@Component({...})
export class App {
  // signals -> observable
  count = signal(0);
  count$ = toObservable(this.count);
  
  // observable -> signals
  dataService = inject(DataService);
  data = toSignal(this.dataService.data$, []);

  ngOnInit() {
    this.count$.subscribe(() => ...);
  }
}

Node.js 20 正式发布

该版本最重要的更新是增加了权限控制，这是一个非常关键的特性，有助于解决此前被人诟病的安全性问题，不过该特性目前还处于试验性阶段，需要使用 --experimental-permission 显式开启。

node --experimental-permission --allow-fs-read=* --allow-fs-write=* index.js

node --experimental-permission --allow-fs-write=/tmp/ --allow-fs-read=/home/index.js index.js

node --experimental-permission --allow-fs-read=/home/test* index.js

启用权限控制后，process 上的 permission 对象可用于检查运行时权限。

process.permission.has('fs.write'); // true
process.permission.has('fs.write', '/home/nodejs/protected-folder'); // true

Vite 4.3 正式发布

该版本带来了全面的性能提升，没啥好说的，就是更快 ⚡️。

开源项目

catdad/canvas-confetti(5.2k star)

一个五彩纸屑枪工具库，可以给你的网站增加一点活力。

chakra-ui/ark（940 star）

一个刚开源不久的 Headless UI 组件库，其最大优势是组件丰富且同时支持 Vue、React、Solid 三大框架。

uNmAnNeR/imaskjs（4.3k star）

一个框架无关的 input 输入代理工具，基于此可以轻松一个 input 变体组件，类似常见的 InputNumber。

const numberMask = IMask(document.getElementById('number-mask'),
  {
    mask: Number,
    min: -10000,
    max: 10000,
    thousandsSeparator: ' '
  });

sindresorhus/file-type（3.1k star）

一个可以基于 Buffer、Uint8Array、ArrayBuffer 来检测文件类型的 Node.js 工具库。

import fs from 'node:fs';
import { fileTypeFromFile, fileTypeFromStream } from 'file-type';

console.log(await fileTypeFromFile('Unicorn.png'));
//=> {ext: 'png', mime: 'image/png'}

console.log(await fileTypeFromStream(fs.createReadStream('Unicorn.mp4')));
//=> {ext: 'mp4', mime: 'video/mp4'}

pinojs/pino（11.4k star）

一个开销非常低的 Node.js 日志工具，用法也非常简单。

const logger = require('pino')()

logger.info('hello world')

const child = logger.child({ a: 'property' })
child.info('hello child!')

输出

{"level":30,"time":1531171074631,"msg":"hello world","pid":657,"hostname":"Davids-MBP-3.fritz.box"}
{"level":30,"time":1531171082399,"msg":"hello child!","pid":657,"hostname":"Davids-MBP-3.fritz.box","a":"property"}

优质文章

ECMAScript 2023 有哪些新东西？（英文）

该文章列举了已经进入 Stage4 并有望包含在即将发布的 ECMAScript 版本中的新功能，主要包括：

1. 增加 findLast 和 findLastIndex 支持从后查找数组的

  const isEven = (number) => number % 2 === 0;
  const numbers = [1, 2, 3, 4];

  // from first to the last lookup
  console.log(numbers.find(isEven));
  // 2
  console.log(numbers.findIndex(isEven));
  // 1

  // from last to the first lookup
  console.log(numbers.findLast(isEven));
  // 4
  console.log(numbers.findLastIndex(isEven));
  // 3

2. 增加 Hashbang 语法，支持在可执行脚本开头定义解释器

#!/usr/bin/env node
console.log('hi 👋');

3. 支持使用 Symbol 作为 WeakMap 的 key

 const weak = new WeakMap();
 const key = Symbol("ref");
 weak.set(key, "ECMAScript 2023");

 console.log(weak.get(key));

4. 增加 toReversed、toSorted、toSpliced，区别是不会修改原数组

 const original = [1, 2, 3, 4];
 const reversed = original.toReversed();

 console.log(original);
 // [ 1, 2, 3, 4 ]

 console.log(reversed);
 // [ 4, 3, 2, 1 ]

Tech Lead 之路

这是一本旨在帮助程序员成为优秀的 Tech Lead 的电子书，由 Thoughtworks 编写，通俗易懂，干货满满，值得阅读。