前端周报:Vue的替代品?TS纪录片!Node吉祥物...(2023 年第 39 周)

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

前端头条

Vue/React 的替代品

Nue 是一个用于构建 UI 的 JS(JavaScript)迷你库,有且仅有 2.3 kb,可以作为 React 和 Vue 等框架的替代品,而且没有 hook 和 effect 等抽象概念。

Nue 同时支持服务端渲染和客户端渲染的响应式组件,创作灵感来源于 Vue 2.0 和 Riot.js,Nue 作者本人就是 Riot.js 的作者。


Node.js 吉祥物

Go 语言有地鼠神兽,PHP 有猛犸神兽,但可怜的 Node.js 尚未拥有专属吉祥物。

有意思的是,"Node.js 之父"生下二胎成为"Deno 之父"之后,Deno 却拥有秃头恐龙作为吉祥物。

GitHub 最近在热搜 Node.js 的吉祥物,毕竟亲爹都"弃养"了,给个吉祥物安慰奖,目前最火的是火箭龟 ------ 一只插上 V8 火箭的玄武神兽。

UP 主有一个大胆的想法,该吉祥物寓意大抵是 ------ 面试造火箭,工作摸乌龟(比摸鱼还龟)。


万物皆可 AI

Vercel 团队整了一个 AI 实验,可以言出法随自动生成组件。


TS 官方纪录片

TS(TypeScript)官方拍摄了最新的纪录片《TS 的诞生》,科普了 TS 作为微软的第一个开源项目,是如何横空出世到人气爆棚的前世今生。

当你拥有自己的纪录片,你就知道自己"码到功成"了。但 UP 猪根本不羡慕 TS,因为 UP 猪的目标根本不是纪录片,而是百大(指女粉过百)。

TS 之后,VSCode 等项目也拥抱开源,微软的开源之旅还在继续,甚至收购了 GitHub。

TS 团队预言 TS 终将消失,TS 已经开始拥抱 JS。

UP 主已搬运了该纪录片,前端爱好者请临幸 B 站《TS 的诞生》


JScript 27 岁生快!

JScript 和 JS 一样,都是 ES6(ECMAScript)的方言,微软为了避免和 Sun 的"命名冲突",于 1996 年 9 月在 IE3 中实现了"JS 1.0",并赐名为"JScript"。

"浏览器世界大战"余波未平,蓦然回首,JScript 已经高达 27 岁,但除了 UP 猪之外,根本没有人在乎......

ES6 今犹在,不见当年 JScript。


Electron 的替代品

Neutralinojs 是一个轻量级的可移植桌面 App 开发框架,是 Electron 的替代品。

Neutralinojs 可以构建跨平台 App,包括但不限于 Windows、macOS、Web 等平台,它没有捆绑 Chromium,而是使用操作系统中现有的 Web 浏览器库。

官方博客

Svelte 5 的新符文

Svelte 是一个新兴的 Web UI 框架,GitHub star 目前高达 73k,比 UP 猪的女粉还高出好几个数量级。

Svelte 团队官方科普了关于响应性的元认知,Svelte 3 成为响应式框架之后,如今 Svelte 5 将更进一步,诉诸符文(rune)解锁通用的细粒度响应性。


现代化 JS 的响应性模式

响应性是关于数据改变时系统如何反应的机制,是 Web 开发的核心。

前端大师官方科普了若干响应性模式,包括但不限于:

  • 发布订阅模式
  • 自定义事件
  • 观察者模式
  • 响应性代理
  • 更多细节请临幸官方博客

版本公告

Node.js@20.7

脚本支持传递多个 --env-file 参数,后面的配置文件可以覆盖前面的配置文件。


Safari@17 全新特性

Safari 发布 17.0 版本,新特性包括但不限于:

  • 成为首个支持 <search> 元素的浏览器
  • 支持 Storage API
  • 正则表达式支持 v flag 和重复命名分组捕获
  • Set 新增 7 种新的集合方法
  • 更多细节请临幸官方博客

高玩攻略

Vue App 干净的布局架构

布局是减少代码重复和创建可维护且具有专业外观 App 的基本模式。如果你使用的是 Nuxt,则可以提供开箱即用的最佳实践。

不幸的是,Vue 官方没有优雅的备胎。这位大佬科普了一个运行良好且可扩展又不会让人头大的架构。


现代化 CSS Reset

CSS 开发的第一步通常是重置全局 CSS,比如使用一致的盒子模型等。

这位大佬科普了若干现代化 CSS 重置的规则,以往我们可以诉诸现存的 CSS 样式重置第三方库,现在你又多了一个自己封装的技术方案。


玩弄网络优先级

浏览器一般会智能决定网络资源的优先级,但这不一定是最佳选择。

这位大佬科普了若干自定义资源优先级的方案,包括但不限于 fetch() API 的优先级提示等。


CSS 蒙版动画

这位大佬科普了如何使用 CSS 蒙版动画来显示图像,你需要的有且就有一个 <img> 标签和纯粹的 CSS 蒙版。

赞助商广告位(谢谢老板)

基于时间旅行的调试

如果你用过 Vue Devtools(Vue 开发者工具),那你对基于时间旅行的调试应该不陌生。

Wallaby.js 就是一款和框架无关的调试工具,支持单元测试的时间旅行调试,周边生态也有支持 JS 业务代码的调试,使用方式包括但不限于 VSCode 扩展等。

就开发调试的时髦程度而言,console.log 是过去式,Debug 是现在进行时,时间旅行是未来进行时。

前端百宝袋

React 组件库

Mantine 是一个全能的 React 组件库,支持 100+ 个组件和 50 个 hooks。


数据可视化

Plotteus 是一个赋能数据可视化的开源 JS 库,旨在帮助你透过数据更立体地讲故事。


Chrome 插件生成器

Create Chrome Extension 是一个开箱即用的 Chrome 插件生成器,支持包括但不限于 Vue 和 React 等多种框架的预设模板。


React 虚拟列表

React Virtuoso 是一个强大 React 虚拟列表组件,支持开箱即用的可变尺寸列表项,无需手动测量或硬编码。


JS 压缩工具跑分

前端生态孵化了一大坨代码压缩的工具人,包括但不限于:

  • babel-minify
  • esbuild
  • swc
  • terser

JS minification benchmarks 是一套用于比较 JS 代码压缩器的基准测试,可以对不同代码压缩器测评和跑分,促进社区和平内卷。


Theatre.js

Theatre.js 是一个具有专业动作设计工具集的 JS 动画库。它可以帮助你创建任何动画,包括从 THREE.js 中的电影场景到令人愉悦的 UI 交互。


React 极简日历

React Lite Month Picker 是一个 React 筑基的极简日历组件。


Faker 假数据

Faker 可以生成大量虚实相生的数据。即使后端没有返回真实数据,你也可以自己 DIY 日期、财务等假数据,用于测试和开发,实现"接口自由"。


BBC 音频 UI 组件

Peaks.js 使用 HTML canvas 元素以不同的缩放级别显示波形,允许用户与波形视图进行交互。

挨踢圣经

"最棒的程序往往是程序员不务正业时编写的。"

"The best programs are the ones written when the programmer is supposed to be working on something else."

------ Melinda Varian

UP 主想起了若干栗子:

  • 尤大在谷歌创意实验室切换赛道孵化了 Vue.js
  • TS 联合创始人在 DIY VSCode 原型时曲线救国孵化了 TS

以上就是 2023 年第 39 周的前端周报,学废了的小伙伴可以点赞给语冰打 call,我们礼拜天佛系拖更,欢迎关注最新动态和订阅前沿资讯。谢谢大家的彼芯,掰掰~

相关推荐
她似晚风般温柔7892 小时前
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能(最新附源码保姆级)
开发语言·javascript·uni-app
Jiaberrr3 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy3 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白3 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、3 小时前
Web Worker 简单使用
前端
web_learning_3213 小时前
信息收集常用指令
前端·搜索引擎
Ylucius3 小时前
动态语言? 静态语言? ------区别何在?java,js,c,c++,python分给是静态or动态语言?
java·c语言·javascript·c++·python·学习
tabzzz3 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
200不是二百4 小时前
Vuex详解
前端·javascript·vue.js
滔滔不绝tao4 小时前
自动化测试常用函数
前端·css·html5