前端周刊 | Mac端新版Chrome速度超Safari; React 18 RC 发布; Chrome 100 Beta 发布
新的一周,快来看看上周发生了哪些新鲜事吧!
科技趣闻
1. ECMAScript 新提案:类型作为注释
3月10日,TypeScript 在社交平台发文称,如果可以直接在 JavaScript 中支持类型,会怎么样?我们正在探索将可选类型语法引入 JavaScript 语言!
他们表示:“类型作为注释”提案意味着浏览器可以直接运行经过 TS 检查的代码(即使它们没有做任何类型检查)。这意味着更好的编辑体验和更快得迭代。希望这个提议可以让各种规模的 TypeScript 和 JavaScript 用户更容易编码。
这是一个新的 stage0 的语法提案,该提案暂时还未提交给 TC39。
提案地址:https://github.com/giltayar/proposal-types-as-comments
2. Mac端新版Chrome速度超Safari
3月8日消息,谷歌 Chrome 团队在 Chromium 博客上发文称,最新版本的Chrome M99 在苹果的 Speedometer 网络基准测试中创造了300分的最高纪录。
在 Mac 上比 Safari 浏览器速度还要快7%,自2020年底在基于M1的Mac上推出Chrome 以来, Chrome 比17个月前快了43%。 Speedometer是苹果WebKit团队开发的网页响应测试工具,模拟用户与网页之间的各种交互。由于是苹果WebKit出品的测试工具,很大程度上Safari的跑分肯定会领先,因此Chrome这次超越具有里程碑意义。
谷歌团队称, V8 Sparkplug 编译器和简短的内置调用是最近 Chrome 速度提升的两个主要原因。 Sparkplug可生成高效代码且编译开销低,V8 JavaScript引擎通过在调用函数时避免间接跳转来提高性能。
Chrome 99版将是最后一个两位数的版本,Chrome 100版在开发版通道已经推出,月底就要正式版了。
详情:https://blog.chromium.org/2022/03/a-new-speed-milestone-for-chrome.html
更新速递
1. React 18 RC 正式发布
3月8日,React 18 作为候选版本 (RC) 正式发布。React 18 的完整生产版本的发布似乎已经迫在眉睫。React官方发布博客,详细说明了如何升级到 React 18 候选版本。
详情:https://zh-hans.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
2. Node.js v17.7.0 正式发布
3月9日,Node.js v17.7.0 版本正式发布,主要更新如下:
添加 KeyObject.prototype.equals 方法; 添加新选项到net.Socket和 net.Server中; 添加 Bryan English; 允许在env中初始化Inspector; 将 npm 升级到 8.5.2; 将 nghttp2 更新到 1.47.0。
更新详情:https://nodejs.org/en/blog/release/v17.7.0/
3. Chrome 100 Beta 正式发布
3 月 6 日,谷歌浏览器和火狐浏览器都即将发布 100 版本,现在 Chrome 100 已经到达 Beta 通道。该版本附带两个新 API ,包括多屏幕窗口放置 API 和数字商品 API,还包含一些功能更新。Chrome 100 正式版预计在 3 月底正式发布。
除此之外,Chrome 100 还将拥有新的图标、移动版 Chrome 100 将取消节省流量的精简模式、安卓版 Chrome 100 引入了一次性关闭所有标签的可选确认对话框、在顶部任务栏提供下载信息图标等。
更新详情:https://developer.chrome.com/blog/new-in-devtools-100/
开源趋势
下面来看看本周GitHub上有哪些热门的前端项目吧。
1. type-challenges
type-challenges 是一个 TypeScript 类型体操姿势合集。本项目意在于让你更好地了解 TS 的类型系统,编写你自己的类型工具,或者只是单纯的享受挑战的乐趣!同时希望可以建立一个社区,在这里你可以提出你在实际环境中遇到的问题,或者帮助他人解答疑惑 - 这些问题也可能被选中成为题库的一部分!
Star⭐: 14.1 k
本周Star⭐️: 683
Github:https://github.com/type-challenges/type-challenges
2. discord.js
discord.js 是一个强大的Node.js模块,它允许您轻松地与 Discord API 进行交互。
discord.js 的特点如下:
面向对象; 可预测的抽象; 高性能; 100% 覆盖 Discord API。
Star⭐: 18.3 k
本周Star⭐️: 731
Github:https://github.com/discordjs/discord.js
3. react-query
react-query 是用于在 React 中获取、缓存和更新异步数据的Hook。
React Query 的特点:
从应用程序中删除许多复杂且被误解的代码,并用几行 React Query 逻辑替换; 使应用程序更易于维护,更容易构建新功能,而无需担心连接新的服务器状态数据源; 通过让应用程序感觉比以往更快、响应更快,对用户产生直接影响; 节省带宽并提高内存性能。
Star⭐: 26.1 k
本周Star⭐️: 358
Github:https://github.com/tannerlinsley/react-query
4. remotion
Remotion 是一套库,为使用 React 以编程方式创建视频奠定了基础。
为什么要在 React 中创建视频?
利用web技术:使用所有 CSS、Canvas、SVG、WebGL 等; 利用编程:使用变量、函数、API、数学和算法来创造新的效果; 利用 React:可重用组件、强大的组合、快速刷新、包生态系统。
Star⭐: 11.9 k
本周Star⭐️: 1110
Github:https://github.com/remotion-dev/remotion
5. MarkText
MarkText 是一个简单优雅的开源 Markdown 编辑器,专注于速度和可用性。
MarkText具有以下特性:
实时预览(所见即所得)和简洁明了的界面,使您获得无干扰的写作体验。 支持 CommonMark 规范和 GitHub Flavored Markdown 规范。 Markdown扩展,例如数学表达式(KaTeX)、front matter 和 emoji。 支持段落和内联样式快捷方式,以提高您的写作效率。 输出 HTML 和 PDF 文件。 各种主题:Cadmium Light、Material Dark 等等。 各种编辑模式:源代码模式、打字机模式、专注模式。 直接从剪贴板中粘贴图片。
Star⭐: 30.1 k
本周Star⭐️: 412
Github:https://github.com/marktext/marktext
工具推荐
下面来推荐六个用于 React 的数据可视化库。
1. Victory
Victory 是一个用于构建交互式数据可视化的可组合 React 组件的集合。这是在React应用程序中实现图形和图表的绝佳选择,它包含诸如画笔和缩放等很棒的功能。
GitHub:https://github.com/FormidableLabs/victory
2. kepler.gl
Kepler.gl 是一个与数据无关的高性能基于 Web 的应用程序,用于对大规模地理定位数据集进行可视化探索。它也是一个使用Redux管理其状态和数据流的 React 组件。它可以嵌入到其他 React-Redux 应用程序中并且是高度可定制的。
GitHub:https://github.com/keplergl/kepler.gl
3. fusioncharts
FusionCharts 是一个 JavaScript 图表库,为 Web 和移动应用程序提供 100 多个图表和 2,000 多个地图。所有的可视化都是交互式的和动画的,它们以 SVG 和 VML 呈现(对于 IE 6/7/8)。该软件包还包含 FusionTime(时间序列图表)、FusionWidgets(仪表、实时图表)、PowerCharts(统计和高级图表)和 FusionMaps(等值线地理地图)。
GitHub:https://github.com/fusioncharts
4. Reaviz
REAVIZ 是一个模块化图表组件库,它在本地利用 React 来渲染组件,同时在后台使用 D3js 进行计算。该库提供了一种在不牺牲自定义能力的情况下开始创建图表的简单方法。
GitHub:https://github.com/reaviz/reaviz
5. React Vis
React Vis 是一组用于呈现常见数据可视化图表的 React 组件,例如折线/面积/条形图、热图、散点图、等高线图、六边形热图、饼图和圆环图、旭日形图、雷达图、平行坐标和树形图。
GitHub:https://github.com/uber/react-vis
6. React Flow
React Flow 是一个用于构建基于节点的图的库。可以轻松实现自定义节点类型,它带有迷你地图和图形控件等组件。
GitHub:https://github.com/wbkd/react-flow
本期前端周刊到这里就结束了,如果觉得有用就点赞、转发、在看吧~
往期推荐
分享
收藏
点赞
在看