9.1

前端每周清单第29 期:Web 现状分析与优化策略、Vue 单元测试、Headless Chrome 爬虫
作者:王下邀月熊
编辑:徐川
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号
新闻热点
国内国外,前端最新动态
-
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 的考量等内容。
前端之巅
前端之巅是
