Skip to main content

2023/09/17

"重要的不在于你的努力程度,而在于仔细选择工作、人员和项目。"

"真正有效的工作方式,不是铁人三项或马拉松,比拼谁坚持的时间长,而是短跑,当机会来临的时候冲刺,平时注意健康和休息。"

-- 纳瓦尔

Bun 1.0 上线

太卷了...参考 如何看待新的 JavaScript 运行时 Bun?。总结有几点优势

  • 轻量。Bun 声称已做到 js 工具链一体化(Bun is an all-in-one toolkit),内置 TranspilersBundlerPackage managersTesting librariesdotenv等等(类似 Deno)。Node.js 项目还是要经常引入一堆三方库来综合实现上述功能
  • 底层实现用 Zig。Zig 的特性使开发人员能够编写对内存管理和执行进行细粒度控制的代码,从而提高运行时的效率。参考 如何评价 The Zig Programming Language?
  • js 运行时性能更优。Bun 没有依赖 V8 引擎,而是使用了 WebKit 的 JavaScriptCore

关于三个 js 运行时的对比可以参考 华山论剑:Node.js、Deno 与将要发布 1.0 的 Bun

G6 5.0 beta 版本上线

一开始以为这个 G6 是类似 echarts 的图表库,细看才发现是图可视化的库,是不同的领域。图可视化是信息可视化中的一个重要领域,通过展示元素之间的关系,帮助用户观察和分析数据,比如常见的思维导图、时序图、决策树、聚类图等,用户更多是数据分析从业者或某些专业领域的研究人员等

G6 5.0 Beta 采用高性能 Canvas 和 WebGL 渲染,加上 WASM 和 GPU 布局的酷炫加持

看了下,webGL 都有用在 2d/3d 上,加速绘制,但是这个 wasm 和 gpu 布局,这个就不太理解做了啥,得闲再学习下 ~

另外看了下 antv 旗下的其他库,发现 antv 真是前端可视化领域的瑰宝,比如有:

  • G2/G2Plot 类似 echarts 的图表库
  • S2 可视化分析表格
  • X6 偏向于图编辑的库,比如思维导图、流程图等等,如果想造一个类似于 draw.io 的库,可以考虑用这个

针对上述库还有额外推出一些面向移动端的版本

Turbo 8 弃用 TypeScript

原文

之前 svelte 也说要抛弃 ts,deno 在部分模块弃用 ts

总之还是各执己见吧,毕竟 typescript 也意识到自己没法完全替代 js,只能努力实现两者的兼容

更多讨论可以参考 https://juejin.cn/post/7218117377052377143

mobx-state-tree

项目里重度使用 mobx,其中也有遇到一些问题,比较大的问题有两点

  • 数据流较乱,跟 react 的单向数据流的理念有些冲突
  • 不适用于实时场景的大数据更新,因为会频繁生成 proxy,会有额外的性能损耗。我在项目中遇到这种问题,用事件订阅发布的方式触发 state 的更新替换 mobx 响应式更新的方式

解决第一点就得限制数据流,可以换 redux 或者 mobx-state-tree。后者是刚发现的库,要结合mobx-react使用。后面计划在实际项目中应用

Object.keys 和 ts

原文。在编写 ts 代码时,经常会遇到 Object.keys 的报错如下:

interface Options {
hostName: string;
port: number;
}
function validateOptions(options: Options) {
Object.keys(options).forEach((key) => {
if (options[key] == null) {
// Expression of type 'string' can't be used to index type 'Options'.
throw new Error(`Missing option ${key}`);
}
});
}

解决方法如下:

const keys = Object.keys(options) as (keyof typeof options)[];
keys.forEach((key) => {
if (options[key] == null) {
throw new Error(`Missing option ${key}`);
}
});

Bundler 的取舍

原文

来自字节 web-infra 大佬的讨论,内容是 Why We Build Rspack,最终走的路线是 Rust + Webpack