IT资讯淘系前端架构周刊：icejs 2.0 发布、Kraken 0.9.0 发布

alger · 2021-11-08 20:00:07 · 热度: 22

???? News

icejs 2.0 发布——可能是最完善的 React + Vite 解决方案

前端社区逐渐发展，如今产生了两个非常重要的新趋势：

基于 ES modules 的 Bundleless 模式：随着浏览器对于 ES modules 的原生支持，社区也出现配套的构建工具 Snowpack 以及后续的 Vite，Bundleless 模式正在撼动着以 Webpack 为主流的 Bundle everything 模式
基于 Rust/Go 重写前端工具链：替代 babel 的 swc，替代 webpack 的 esbuild，Rome 用 rust 重写，Next.js 引入 Rust 后构建速度提升 5x

基于此趋势，icejs 2.0 围绕「开发者体验」这一指标，经过 3 个月的研发周期，共 100+ PR，在 9 月 28 日正式发布。今天正式向社区介绍 icejs 2.0 的一些重要特性：

Vite 模式：在原先 Webpack 基础上，同步支持了 Vite 模式，同时在工程配置和框架能力上尽量保持一致性
Webpack 5：将 Webpack 从 V4 版本升级到 V5 版本，引入新版本的 Module Federation、Cache 等相关能力
swc & esbuild：试验性的在 Webpack 模式下引入 swc 替换 babel，尝试提升 Webpack 模式下最耗时的代码编译阶段，同时压缩链路也支持使用 esbuild 替代 terser
更加完善的业务解决方案：提供状态管理、请求库、环境配置、微前端、SSR、SSG（新增）、PWA（新增）、keep-alive（新增）等完备的解决方案
全新的文档：通过 Docusaurus 构建全新的文档站点，得益于 Docusaurus 丰富的能力，文档在 SEO、加载体验、Dark Mode、搜索、手机端体验等能力上有了大幅度的提升

详细内容与性能对比：可能是最完善的 React+Vite 解决方案，阿里飞冰团队发布 icejs 2.0 版本 - 掘金 (juejin.cn)

GitHub Repo：alibaba/ice: ???? The Progressive Framework Based On React（基于 React 的渐进式研发框架） (github.com)

Kraken 0.9.0 发布——支持 QuickJS 首屏性能再提升 20%

重要特性：

支持 QuickJS 作为 JavaScript Engine 以提供更好更快更轻量的语言支持
支持 HTML 解析和渲染
支持 HTTP 的缓存特性
支持 Vue/React 官方工具链
支持模块热更新（Hot Module Replacement）
支持 querySelector/querySelectorAll 通过部分选择器选中元素

English Release Message：Release 0.9.0 · openkraken/kraken (github.com)

中文 Release 信息：北海 (Kraken) v0.9 — 支持 QuickJS 首屏性能再提升 20% - 知乎 (zhihu.com)

???? Open Source

Detox

一个用于移动端 APP 灰盒测试（介于白盒测试和黑盒测试之间，既关注内部逻辑实现，也关注软件最终效果，但关注度不及两者，通常在集成测试阶段进行）的自动化测试框架。

淘系前端架构周刊：icejs 2.0 发布、Kraken 0.9.0 发布

支持使用 JavaScript 对 React Native 或 Native 应用进行端到端测试。

GitHub Repo：wix/Detox: Gray box end-to-end testing and automation framework for mobile apps (github.com)

Teaful

一个强大易用且非常轻量的 React 状态管理工具。

包括以下特点：

轻量：在 React 和 Preact 中实现状态管理只需要不到 1kb 的包体积
易用：不需要 actions、reducers、selectors、connect、providers 等概念，一切都可以用简单且舒适的方式来实现
强大：当 store 中的属性更新时，只有消费了这一属性的组件会重新渲染，消费了 store 中其他属性的组件不会重新渲染

使用方式也非常有意思：

import createStore from "teaful";

const { useStore } = createStore({
  username: "Aral",
  count: 0,
  age: 31,
  cart: {
    price: 0,
    items: [],
  },
});

function Example() {
  const [username, setUsername] = useStore.username();
  const [cartPrice, setCartPrice] = useStore.cart.price();

  return (
    <>
      <button onClick={() => setUsername("AnotherUserName")}>
        Update {username}
      </button>
      <button onClick={() => setCartPrice((v) => v + 1)}>
        Increment price: {cartPrice}€
      </button>
    </>
  );
}