前端每周清单：Next.js 2.0 发布，Vue.js 2.2 完整API 手册，Safari 10.1 新增系列重要特性

Posted 2021-04-30 前端之巅

作者 | 王下邀月熊

编辑 | 尾尾

由于微信不支持外链，故在相关内容后的提供了短链接，方便大家复制。查看本文带链接版请移步： 。

新闻热点

国内国外，前端最新动态  

• ：近日随着 ios 10.3 与 macOS Sierra 10.12.4 的版本发布，系统内置的Safari 10.1 增加了许多重要的 Web 特性支持与性能提升，包括 CSS Grid 布局、fetch、IndexDB 2.0、Custom Elements、Form Validation、Media Capture 等等。( )

• ：近日 Next 2.0 正式发布，它为我们提供了便捷的快速开发 React 服务端渲染的工具，使得开发者能够专注于业务开发。在 2.0 版本中它提供了自定义路由、自定义服务端渲染代码、组件内 CSS、Prefetching 等等多个新特性。（ ）

• ：在 ECharts 新发布的 3.5 版本中，新增了日历坐标系，增强了坐标轴指示器。同时，ECharts 统计扩展 1.0 版本发布了。日历坐标系用于在日历中绘制图表，坐标轴指示器方便用户观察数据内容，统计扩展是一个专门用来进行数据分析的工具。（ ）

• ：近日 Relay 1.0.0-alpha 发布，提供了许多新的特性。作为 Facebook 发布的全特性 GraphQL 客户端，其能够在低配的移动设备上构建高性能、复杂可扩展的应用。( )

开发教程

步步为营，掌握基础技能

• ：本文介绍了如何利用 Vue.js 与 Electron 来构建简单的桌面问卷应用，作者首先介绍了如何使用 vue-cli 创建简单的 Web 项目，然后讨论了如何将项目运行在 Electron 中，最后阐述了如何将应用整体打包发布。( )

• ：本文是对于 Progressive Web Apps 概念、设计理念与简单实践的介绍，作者介绍了 PWA 应用应该具备的基本特性、性能与体验上的要求以及如何将现有站点转化为 PWA 的简单实践。( )

• ：本文是针对那些熟悉 jQuery 与传统 javascript 开发的前端工程师准备的现代 React 开发入门指南，其包括了环境配置、create-react-app 使用、学习资料、应用编写与发布等等章节。( )

• ：不同的技术学习曲线可能相差甚远，而 CSS 的初学者则会觉得相当容易入手，但是深入之后可能发现连居中都不甚容易。本文作者是个深度 CSS 热爱者，他从自己多年的经验介绍了 CSS 中的垂直居中、100% 属性、float、z-index 等等多个细节知识点。（ ）

• ：一本关于 React 设计模式、技术与技巧的书，涵盖了常见的 React 应用开发中的设计模式、需要规避的反模式、处理 UX 变种、性能调试与样式处理等等。（ ）

• ：有经验的前端开发者都知道 html 中的布局就是盒套盒，而本文则是以某个街区的例子深入浅出地讲解 CSS 中的盒模型。（ ）

工程实践

立足实践，提示实际水平

• ：本文作者分享了十二个非常不错的 JavaScript代码片，这些代码片能够帮你优化现有代码，让代码更加地赏心悦目。（ ）

• ：本文介绍生产环境下 Node.js 应用监控实践指南，包括了监控的意义、监控的对象、目前开源的监控解决方案以及一些 SaaS 解决方案等。( )

• ：在应用开发中我们往往会头疼于如何构建大量的随机数据，特别是那些符合某些固定模式的数据，我们可能会要用这些数据仿制 RESTful 接口、进行单元测试等等。而 Faker.js 则为我们提供了这样的随机数据生成器。( )

• ：本文是 Vue.js 2.2 中完整的 API 介绍，可以作为手册随时查阅 。（ ）

• ：本系列文章介绍了如何在 JavaScript 中构建高性能的响应式引擎，对于有兴趣了解 MobX 底层原理的同学来说也是个不错的教程，目前包含了对于可观测对象的构造解释、属性推导与依赖追踪等内容（ ）

深度阅读

深度思考，升华开发智慧

• ：本文作者介绍了如何基于 JavaScript 构建一个国际象棋的 AI，虽然不属于前端开发范畴，不过还是蛮有意思的一篇文章。本文主要包括移动生成、棋盘可视化、位置评估、基于 Minimax 算法的搜索树、Alpha-beta 修剪等等。( )

• ：本文以菜单伸缩动画为例，介绍如何构建高性能扩展与折叠动画。较简单但是性能有缺陷的方式譬如修改元素宽高或者使用 clip 变换属性；而本文主要是由 CSS3 的 scale 变换来实现菜单的扩展与折叠，其为了保证菜单按钮的视觉效果与整体的平滑缩放还使用了所谓的对冲缩放技巧。( )

• ：本文是 UberEATS 的工程师团队介绍的他们基于 Uber 原工程架构与 ReactNative 实现应用的工程实践；包括了构建迁移路径、应用架构定义、自动更新、测试与静态类型检测等等。（ )

• ：本文是从浅显机器学习的角度来考虑如何优化网站性能，可能从专业服务端机器学习的角度来看并不复杂，但是从前端网站构建的角度来看也是蛮有意思的。本文包括了记录网站点击与提交信息、利用 AWS S3 进行模型训练、利用 UI 进行可视化展示等等。（ ）

• ：本文是 Google Chrome 团队的 Addy Osmani 对 Chrome 中的 Preload、Prefetch 以及抓取优先级的介绍，并且介绍了在网站性能优化中对于 Preload 与 Prefetch 的使用技巧和 HTTP/2 带来的服务端推送如何协同使用等内容。( )

开源项目

乐于分享，共推前端发展  

• ：jsinspect 提供了方便的命令行工具或者构建插件来检测代码库中的复制粘贴或者结构相似的代码片，以方便开发者在优化过程中完成代码的重构。( )

• ：Reactide 是首个面向 React Web 应用开发 IDE，其基于 Electron 提供了跨平台的特性。Reactide 允许我们像传统开发那样打开单个文件就可以完成预览，并且提供了便捷的组件导入、格式化等功能。该项目仍处于积极的开发中，可以拭目以待。 ( )

• ：marky 是基于 performance.mark/measure 封装的高性能 JavaScript 计时器，其相较于console.time()以及console.timeEnd()具有更好地性能表现，相较于简单的Date.now()具有更好地准确度。( )

• ：在 PWA 应用的开发中对于 Service Worker 的测试一直比较麻烦，每个文件都可能通过self.addEventListener产生副作用，并且 Service Worker 的运行环境也迥异于正常的 Web 或者 Node 环境。而本包则是通过注入伪造的 Service Worker 环境来方便测试。( )

• ：本仓库列举了许多 Web 开发中用到的公开的 JSON 接口，包括信息检索、机器学习、工具使用等等多个方面。( )

• ：Angular 4 商业级应用项目生成器，其包括了 angular-cli 提供的现代工具与工作流，以及来自于社区的最佳实践、可扩展的基础模板以及较好地学习曲线。（ ）

巅峰人生

• ：美国计算机学会（ACM）宣布将2016年的图灵奖授予万维网（WWW）的发明者Tim Berners-Lee。他将获得由Google赞助的一百万美元奖金。ACM提到他的获奖理由是，“inventing the World Wide Web, the first web browser, and the fundamental protocols and algorithms allowing the web to scale.” 。( )

前端之巅

今日荐文

IMVC（同构 MVC）的前端实践

---

视野拓展

InfoQ主办的移动和前端开发领域的精品大会【GMTC 2017】将于6月9～10日在北京举行，作为首届以“大前端”为主题的大会，GMTC涉及移动、前端、跨平台、AI应用等多个技术领域，帮助你方方面面提高技术水平。扫描下图二维码或戳阅读原文，前往官网了解详细信息！

前端之巅