前端周报:Angular 17王者归来!Signal对Hook降维打击~JS 狂欢日演讲(2023 年第 46 周)

大家好,这里是大家的林语冰,您现在收看的是 2023 年第 46 周前端生态的技术周报(视频解说请临幸 前端周报@bilibili)。

每周必看

Angular 17 王者归来

2010 年,始祖 AngularJS 破蛋,前卫的设计理念标志着前端现代化框架的开端。即使在后 ES6 时代如火如荼的前端框架"诸神之战"中,Angular 也不落下风。Angular 生态 13 年磨一剑,和始祖 AngularJS 早已胖若两人。

在 Angular 13 周年的诞辰,Angular 团队官宣 v17 正式发布,重大升级包括但不限于:

  • 延迟视图优化性能和 DX(开发体验)
  • 混合渲染构建优化 87%,客户端渲染优化 67%
  • 官网重做得面目全非,交互式学习诉诸 Web Container 赋能
  • 详情请临幸官网~

Signals 何以对 React Hooks 降维打击

本视频讲述了 Signals(信号)相较于 React Hooks 的优势,且受到了 Preact 核心团队成员 M.H. 的一键三连。

地球人都知道,Vue 和 React 都有涉及 Hook 的技术方案。但是大家可能不知道 Signals。Signals 是 Preact 和 Solid 推广的一种响应式方案,Angular 移植了 Signals。尤雨溪之前也发了朋友圈讲到,Signals 似乎指代绑定于 Signals 细粒度的视图更新,这也是 Vue 目前正在努力实现的方向。


JS 狂欢日八大演讲

JS 狂欢日是 JetBrains 2023 年度的一场虚拟活动,一口很长的一气举行了 8 场 JS 专题演讲,一天八次,直接给我看湿了。


纯 JS 拿捏 DOM 操作

地球人都知道,DOM 操作是前端爱好者必知必会的技能树,jQuery 转生成为 H5,而现在和我们梦幻联动的 JS 框架本质也是在底层封装了 DOM 操作,然后再按框架的 DSL 来曲线救国开发 Web。

这位大佬科普了一系列 DOM 操作的教程,帮助你循序渐进地刻意练习原生 API,没有依赖外部框架,但这些 API 恰恰是框架的底层逻辑。此系列类似于"你不需要 jQuery"系列教程。


组合 React UI 的无头组件模式

随着 React UI 控件越来越复杂,逻辑可能与视觉 UI 耦合,这使得组件的行为熵增,变得不可读、难以维护、难以扩展。无头组件模式就是来解耦逻辑与 UI 的技术方案,使开发者能够构建通用、可维护的可复用组件。

headless 是一个术语,但并不新鲜,如果您做过无头测试,应该能 get 到其含义。目前 React 生态已经有若干无头组件模式的产品,比如 React ARIA,这是 Adobe(即 PS 那个公司)的产品,还有我们之前周报提及的 Headless UI,此外还有 React Table 和 Downshift 等。


实现兼容所有框架的组件

地球人都知道,微前端允许大型企业在同一项目中同时使用 Vue 和 React 等不同框架,与此同时,很多人一直在寻求跨框架的状态管理方案或组件开发方案等,以此实现跨框架项目层级的大一统。跨框架的状态管理方案我们之前分享过 Redux 筑基的虚拟全局状态管理,今天分享的这篇博客是诉诸 Web Components 是实现兼容所有框架的组件,这或许是一种跨框架组件开发的技术方案。

版本官宣

Vuetify@3.4

Vuetify 是一个开源 UI 库,目前 GitHub star 比饿了么和阿里巴巴的 Vue UI 库还多,人气爆棚。

Vuetify 团队官宣 v3.4 正式发布。


Rollup@4.3

Rollup 是 JS 模块打包器,Vite 的生产环境打包构建就是由 Rollup 驱动。

Rollup 团队官宣 v4.3 正式发布。

前端工具人

按钮收藏

Button.cool 是一个专门收集按钮的网站,目前已经收集了 100+ 个花里胡哨的按钮,支持在线调试复制粘贴一键三连。免费,完全免费。

我个人挺喜欢这个按钮的,懂我意思吧。


tsx@4.0

tsx,顾名思义是"TS execute",并不是 React TS XML DSL,这是一个 npm 包执行工具。

新手使用 Node 有若干头大的问题,比如 ESM 和 CJS 的兼容性配置,比如无法执行 TS 等。tsx 可以解决这些问题。

我们知道,Vite 开发时巨快是因为集成了 esbuild,tsx 也是如此,它是一个 esbuild 增强型的 rollup。


网站截图

capture-website 是一个网站截图工具。


Moveable

Moveable 是一个用于元素拖动、调整大小、缩放等物理操作的库。


主线程调度

main-thread-scheduling 是一个主线程调度的异步编程库,它允许您在主线程上运行计算密集型任务,而您的 App 不会卡死,您的电脑散热扇不会"过劳死"。

JS 是一门混合范式语言,在面向对象编程、函数式编程等 99 种编程范式中,异步编程对于前端爱好者而言最为重要,因为它直观反应 JS 的执行机制。同时异步编程也最难理解,因为异步编程反人类。


代理状态

Valtio 是一个短小精悍的代理状态库。Valtio 的代理将您传递给它的对象转变为自我感知的代理,从而在进行状态更新时允许细粒度的订阅和反应性。在 React 中,Valtio 在渲染优化方面表现出色。

您现在收看的是前端周报系列,学废了的小伙伴可以订阅此专栏合集,我们礼拜天佛系拖更,欢迎关注前端开源技术。谢谢大家的点赞,掰掰~

相关推荐
^^为欢几何^^9 分钟前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang13 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘41 分钟前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
编程零零七4 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
北岛寒沫5 小时前
JavaScript(JS)学习笔记 1(简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组)
javascript·笔记·学习
everyStudy5 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
(⊙o⊙)~哦6 小时前
JavaScript substring() 方法
前端
无心使然云中漫步6 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者6 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_7 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js