写点什么

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

  • 2017-09-05
  • 本文字数:3722 字

    阅读完需:约 12 分钟

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(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,注明“前端之巅投稿”。


感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

2017-09-05 19:002416
用户头像

发布了 60 篇内容, 共 16.0 次阅读, 收获喜欢 9 次。

关注

评论

发布
暂无评论
发现更多内容

字节、美团等客户与华为联合创新DCI智能控制器,共筑互联网基础设施新生态

☕【JVM 技术之旅】深入JVM原理分析synchronized

洛神灬殇

synchronized 重量级锁 5月日更 同步锁 ObjectMontior

屏幕共享的实现与应用

anyRTC开发者

音视频 WebRTC RTC sdk

iOS 面试策略之经验之谈-架构的选择

iOSer

ios 架构

记一次与写作朋友的线下沙龙

架构精进之路

技术交流 杂记 5月日更

小傅哥,一个有“副业”的码农!

小傅哥

Java 小傅哥 技术成长 码农副业

CG行业云渲染服务的演进之路

华为云开发者联盟

公有云 CG 渲染 云渲染 影视动画

助力秋招第二弹:Java并发编程知识梳理

北游学Java

Java 面试 秋招

iOS 面试策略之经验之谈- App的测试和上架

iOSer

ios 面试 app上架 app测试

redis在微服务领域的贡献

捉虫大师

redis dubbo RPC 协议 注册中心

☕【JVM 技术之旅】攻克技术盲点之“JVM常量池们“

洛神灬殇

JVM 5月日更 字符串常量池 静态常量池 运行时常量池

强化基于位置的4种营销策略

郑州埃文科技

IP 营销 ISP

详解RS232、RS485、RS422、串口和握手

不脱发的程序猿

串口 通信总线 RS232、RS485、RS422 握手通信

“零信任产业标准工作组”再度升级,持续促进国内零信任产业的协同发展

iOS 面试策略之经验之谈-面向协议的编程

iOSer

ios swift 面试 面向协议protocol编程 面向协议编程

5G掀起工业互联网浪潮,水泥厂智能管理模式收效颇丰

一只数据鲸鱼

数据可视化 工业互联网 智慧工厂 水泥厂 智能工厂

详解 WebRTC 高音质低延时的背后 — AGC(自动增益控制)

阿里云视频云

阿里云 WebRTC 3A算法 音频技术 视频云

iOS面试大全从面试的准备和流程到算法和数据结构以及计算机基础知识

iOSer

ios 面试 面向协议protocol编程 iOS 知识体系

全新F1洞察精彩亮相,帮你理解赛道上的瞬间决定!

亚马逊云科技 (Amazon Web Services)

驾云驭能,云科技点燃制造创新之旅!

亚马逊云科技 (Amazon Web Services)

Django 之路由篇

若尘

django Python编程 路由 5月日更

农产品区块链溯源平台建设解决方案,健全食品安全体系

源中瑞-龙先生

区块链 溯源 食品安全

Cilium 1.10 重磅发布!】支持 Wireguard, BGP, Egress IP 网关, XDP 负载均衡, 阿里云集成

公众号:云原生Serverless

云原生 cilium cni

GitHub开源的10个超棒后台管理面板

不脱发的程序猿

GitHub 开源 后台管理面板

提高建模效率:自动化机器学习之贝叶斯优化综述

索信达控股

机器学习 自动化 金融科技 贝叶斯公式 产品建模

阿里P9架构师力荐:Java面试必刷的17套一线大厂真题(含答案)

Java架构追梦

Java 阿里巴巴 架构 腾讯 面试

手把手带你体验 Amazon Graviton2 的高性价比!文末有惊喜

亚马逊云科技 (Amazon Web Services)

NUCLEO-L432KC实现ADC配置(STM32L432KC)

不脱发的程序猿

嵌入式 单片机 NUCLEO-L432KC STM32L432KC 光敏电阻传感器

Nginx调试必备的几种技能

运维研习社

nginx 运维 实用技巧 5月日更

再不解决延迟不当,小心你的内存被打爆

华为云开发者联盟

线程 延迟 内存 并发 Sleep

探索专有领域的端到端ASR解决之道

华为云开发者联盟

端到端 ASR 自动语音识别 语境偏移 专有领域

  • 扫码添加小助手
    领取最新资料包
前端每周清单第 29 期:Web 现状分析与优化策略、Vue 单元测试、Headless Chrome 爬虫_语言 & 开发_王下邀月熊_InfoQ精选文章