前端每周清单第 29 期:Web 现状分析与优化策略、Vue 单元测试、Headless Chrome 爬虫

1,666 阅读9分钟

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。

新闻热点

国内国外,前端最新动态

  • Prettier 1.6.0 发布:本周发布的 Prettier 1.6.0 版本引入了数个期待已久的特性,包括 .prettierrc,.prettierignore 项目配置文件、JSX 显示格式优化、允许 JSON 文件添加自定义注释等;除此之外,该版本还进一步优化了对于 JavaScript、TypeScript、CSS、GraphQL 等格式文件的支持,还提供了更多的命令行特性。

  • Firefox 引入 Headless 模式:类似于 Chrome 的 Headless 模式,现在 Firefox 也引入了 Headless 模式,其允许开发者利用 Firefox 进行更加方便地自动化测试、动态网页抓取等操作;本文也介绍了如何利用 Selenium 控制 Firefox 进行自动化浏览器操作等内容。

  • Webpack 4 开发计划:本文讨论了 Webpack 4 相关的规划与目标,在先前发布的 Webpack 3 版本中并未引入什么断层变化,但是 Webpack 4 中会引入些重大的变革。Webpack 4 的主要目标包括 WASM 支持、新的 CSS 工作流、支持 async script 标签、性能提升、继续优化 ESM、更加完善地支持类型系统等。

  • TypeScript 2.5 版本发布:近日发布的 TypeScript 2.5 版本中引入了许多新的特性,并且能够更好地与 VSCode 协同开发。该版本中提供了函数与方法抽取重构、快速类型修复、JavaScript 文件中的 JSDoc 类型断言支持、可选的 catch 语句等特性,同时还进一步优化了性能与使用体验。

开发教程

步步为营,掌握基础技能

  • 基于 Node.js 的 HTTP2 服务端推送:Node.js 8.4.0 版本中引入了实验性的 HTTP/2 支持,开发者可以通过 --expose-http2 标识位启用 HTTP/2 支持。本文首先介绍了 HTTP/2 服务端推送中重要的知识点,然后从零开始创建简单的 Node.js 应用,来形象阐述如何使用 HTTP/2 以及其特性;更多 HTTP/2 相关资料参考这里

  • 使用官方 Vue.js 测试工具与 Jest 编写组件的单元测试:Vue.js 以其灵活、高性能、易上手的特性正逐步被应用到更多的 Web 项目中,本系列文章则着眼于介绍 Vue.js 应用开发中的单元测试相关内容。本系列文章依次介绍了编写首个简单的组件单元测试用例、测试递归渲染的 Vue.js 组件、测试组件的样式与结构、测试组件的状态,计算属性与方法、测试属性与自定义事件、测试生命周期回调、测试 Vue.js Slots、利用模块别名配置 Jest 等内容;更多 Vue.js 相关资料参考这里

  • 利用 Service Worker 离线运行 Angular 应用:本文主要讨论如何通过 Service Worker 为 Angular 应用添加离线运行特性。本文首先介绍了 Service Worker 的概念与原理,然后介绍了 Google 提供的工具集 Workbox,以及如何使用 Workbox 创建简单的 Service Worker,最后以简单的应用说明了如何创建自定义的 Service Worker、选定缓存内容与缓存策略。更多 Angular 相关资料参考这里

  • 60 分钟内构建 Github 搜索栏:本文是来自 Appbase.io 的工程师分享的,如何快速构建漂亮大方的 Github 应用搜索界面。本文中使用 React 开发前端界面,依次阐述了如何按照组件来切割界面、如何从底向上依次构建各级所需要的组件、如何添加组件事件响应、如何通过 Github API 获取数据并且渲染到界面上等内容;更多 React 相关资料参考这里

工程实践

立足实践,提示实际水平

  • 基于 Puppeteer 与 Chrome Headless 的网页抓取:Puppeteer 是 Google Chrome 团队发布的 Chrome Headless 官方工具。而随着 Chrome Headless 的发布,包括 PhantomJS、Selenium Firefox 等在内很多的项目都宣布停止开发;Chrome Headless 正逐步成为 Web 应用自动化测试的行业领袖。而本文则是一步一步地介绍了如何利用 Chrome Headless、Puppeteer、Node 以及 Mongodb 来抓取 Github 上的相关内容;更多 Chrome Headless 相关资料参考这里

  • V8 中对象属性的快速访问:本文将会介绍 V8 引擎是如何处理 JavaScript 对象中属性的机制;虽然在使用层面上字符型键与数值型键并无差异,但是 V8 处于性能与内存的考虑会使用不同的方式来处理这两种属性。本文则会介绍 V8 提供的快速属性访问机制与动态属性的处理,理解 inline caches 的运行机制等内容;更多 V8 相关资料参考这里

  • 基于 Webpack 的 Vue.js 应用代码分割:早期利用 Webpack 打包前端应用的一大缺陷在于其会产生较大的包体,而后来引入的代码分割特性则能有效地提升首屏加载速度。本文介绍了 Vue.js 应用开发中,如何利用 Webpack 与 Async components 来进行代码的动态加载;更多 Vue.js 相关资料参考这里

  • SparkUI:FreeWheel 的 React 开发实践:SparkUI 是由 FreeWheel 根据自身业务特点开发的一套完整且灵活的前端开发解决方案。该方案基于 React,由 Modula 应用状态管理框架、一系列可重用的前端组件、以及构建 SPA 所需的各类支持库组成。 该方案重视可重用性、灵活性、可测试性以及开发效率,解决了前端社区常见的一些针对商业前端应用开发的痛点,如复杂状态、Side Effect,组件拆分等,更在工程实践、文档化、本身代码质量等方面达到较高标准,为前后端分离架构下的商业前端应用开发提供了坚实的基础。目前 SparkUI 已成功应用在 FreeWheel 的前端项目中。

深度阅读

深度思考,升华开发智慧

  • 为什么我们从 Angular 2 迁移到了 Vue.js(以及为什么不用 React):本文是来自 Rever 的工程师分享的他们在构建新版本 Web 应用时技术选型的考量。作者主要从易用性、代码运行速度、文档、社区活跃度、移动端的支持、开源协议等多个角度对比分析了 Angular.js、Vue.js 与 React 这三个主流框架。其中 Angular.js 的缺陷在于版本更迭过快、代码执行速度略慢、响应式不足等方面;React 的代码运行速度一般,其最近的证书风波也是令人迟疑,而 Vue.js 目前的主要缺陷在于其社区还不如 React 与 Angular 庞大。更多 Vue.js 相关资料参考这里

  • Web 的现状:网页性能提升指南:随着因特网的快速发展,至今已有约 46% 的人们可以通过设备接入到网络中;而其中的大多数又是通过移动设备来浏览网页或其他操作。本文即是对目前 Web 发展现状进行概要性描述,并且讨论了当前状态下网页应该关注的性能提升点。本文依次分析了如何优化 JavaScript、CSS 等资源文件、选择合适的图片、优化网页字体、优化 JavaScript 执行、如何正确地追踪性能指标等内容;更多 Web 性能优化相关资料参考这里

  • Webkit 中 JavaScript 并发编程提案:随着 SharedArrayBuffer 被引入,JavaScript 也正逐步转向提供并发支持;本文即是 Webkit 开发团队分享的它们对于并发 JavaScript 编程的考虑与设计。本文依次讨论了 Thread 相关的 API、JavaScript 内存模型、如何与 DOM 进行交互、如何进行并发控制以及 WebKit 的实现方案等内容;

  • 澄清对 AMP 的十个误解:AMP 是由 Google 出品的,采用了白名单强约定策略的开源 Web 组件格式和类库;因为 AMP 本身处于性能的考虑限制了网页本身的开发自由,也导致了开发者对 AMP 颇有微词。本文则是对于 AMP 的常见误解进行阐述,包括 AMP 的定位与运行环境、AMP 的适用目标、AMP 与现有网站的集成方式、AMP 与 PWA 之间的关系等内容。

开源项目

乐于分享,共推前端发展

  • asm-dom: asm-dom 是轻量级的基于 WebAssembly 的 Virtual DOM 框架,其允许开发者使用 C++ 来构建 Web 单页应用。开发者可以仅使用 C++ 来编写 Web 应用,然后通过 Emscripten 来将其转化为 WebAssembly;其能允许开发者直接使用现有的 C++ 标准库代码,从而保证代码复用与性能提升。

  • Vivify:Vivify 是轻量级的 CSS 动画库,提供了数十种常见的 CSS 动画实现,包括 ball、blink、driveInBottom、fadeIn、flip、popIn 等;开发者只需要将样式文件引入页面中即可使用。

  • React Map GL:React Map GL 是 Uber 出品的基于 React 与 Mapbox GL 的地图库,其提供了 Browserify、Webpack 2、create-react-app 多种集成尝方式;官方也给出了与 Redux 的便捷集成方式。

  • Push: Push 是 BrowserStack 出品的,快速实现基于 JavaScript 的桌面消息推送工具;Push 能够自动利用 Chrome、Safari、Firefox、IE9+ 这些现代浏览器提供的底层接口,为开发者提供跨平台的统一调用方式。

  • r2:r2 是 request 的作者基于多年的现代开发实践总结出的轻量级、高可用 HTTP 客户端;r2 基于浏览器端的 fetch 实现,使用了 node-fetch 提供了 Node.js 环境下的支持。

巅峰人生

  • 与 Node.js 创立者 Ryan Dahl 的对话:Ryan Dahl 是 Google Brain 团队的软件工程师,也是 Node.js 项目的创立者;而他目前则就职于深度学习项目,着手图片转化等相关的方向。本文则是与 Ryan Dahl 的一次访谈记录,谈论了 Ryan Dahl 的技术生涯发展、工作选择、创立 Node.js 的考量等内容。

前端之巅

「前端之巅」是InfoQ旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到editors@cn.infoq.com,注明“前端之巅投稿”。

前端之巅微信底图-5.jpg
前端之巅微信底图-5.jpg