9.1

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

作者:王下邀月熊 编辑:徐川

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

新闻热点

国内国外,前端最新动态

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

  • Firefox引入Headless模式:类似于ChromeHeadless模式,现在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.jsHTTP2服务端推送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 WorkerAngular应用添加离线运行特性。本文首先介绍了Service Worker的概念与原理,然后介绍了Google提供的工具集Workbox,以及如何使用Workbox创建简单的Service Worker,最后以简单的应用说明了如何创建自定义的Service Worker、选定缓存内容与缓存策略。更多Angular相关资料参考这里

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

工程实践

立足实践,提示实际水平

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

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

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

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

深度阅读

深度思考,升华开发智慧

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

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

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

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

开源项目

乐于分享,共推前端发展

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

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

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

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

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

巅峰人生

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

前端之巅

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

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

下一页