侧边栏壁纸
博主头像
道一博主等级

云在青天水在瓶!

  • 累计撰写 15 篇文章
  • 累计创建 14 个标签
  • 累计收到 0 条评论

icejs 2.0 发布、Kraken 0.9.0 发布 | 淘系前端架构周刊 211108 期

道一
2021-11-09 / 0 评论 / 10 点赞 / 286 阅读 / 2,347 字
温馨提示:
本文最后更新于 2021-11-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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 灰盒测试(介于白盒测试和黑盒测试之间,既关注内部逻辑实现,也关注软件最终效果,但关注度不及两者,通常在集成测试阶段进行)的自动化测试框架。

支持使用 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 = 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


<button onClick={() => setCartPrice((v) => v + 1)}>
Increment price:


</>
);
}
复制代码
GitHub Repo:teafuljs/teaful: Tiny, easy and powerful React state management (github.com)
MJML
一个用于构建响应式邮件的框架,语法类似 HTML,经过转换后生成响应式的 HTML 代码以实现响应式邮件。

Home Page:MJML - The Responsive Email Framework
Online Editor:Email Editor (mjml.io)
GitHub Repo:mjmlio/mjml: MJML: the only framework that makes responsive-email easy (github.com)

0

评论区