前端周报: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 在渲染优化方面表现出色。

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

相关推荐
懒大王爱吃狼1 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询