- 前端开发周报：PWA将与安卓原生平起平坐、V8团队致力于提高ES2015特性性能 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践。

前端开发周报：PWA将与安卓原生平起平坐、V8团队致力于提高ES2015特性性能

新闻热点

前端领域最新动态

• 《PWA将与安卓原生平起平坐》：自从谷歌提出PWA概念之后，它就持续受到移动开发界的关注。由于其可靠、快速、融入的特性，大大提升了网页应用的用户友好性。近日官方博客更进一步宣布将使PWA应用获得和原生应用同等的待遇与权限。

• 《 React Studio Public Beta 2发布》: React Studio Public Beta 2发布啦，React Studio是能够基于类似于React JS这样的组件化库进行交互式UI设计的专业工具，能够同时满足设计师与开发者的需求。对于设计师而言，React Studio彻底遵循了响应式与移动优先的原则，设计师能够方便地将组件设计与应用流导出为ReactJS风格的HTML/JavaScript代码。对于开发者而言，React Studio是一个基于create-react-app模板创建的前端项目，它仅集成了必须的代码，并且遵循了现代的开发流程，能够辅助开发者快速构建SPA项目或者其他独立组件。

• 《 ECMAScript中可选链提案》：相信每个JavaScript开发者都不会陌生于 Uncaught TypeError: Cannot read property 'property' of null 这个错误，对于空指针的检测，特别是对象嵌套属性的空检测成为了不可或缺的部分，譬如：var street = user.address && user.address.street。

• 《V8团队致力于提高ES2015特性性能》：最近几个月以来V8团队一直致力于提升 ES2015新特性的性能表现。目前现代Web开发中通行的做法时候用 Babel 这样的编译器将那些引擎尚不支持的语法编译为传统的ES5语法，譬如经常使用的扩展操作符会被Babel编译为Object.assign形式的语法组成，这样不可避免的会带来性能损耗与包体体积增大。传统的Crankshaft编译器难以直接优化for...of这样的语法特性，而最新的TurboFan编译流则从设计上就能够支持控制流、异常处理以及解构赋值这些特性。包括之前Crankshaft虽然支持但是尚未优化的生成器等等特性也都得到了优化，最后的结果表明整体的语法性能提升了两倍多。

• 《 Twitter宣布移动Web技术栈迁移到Node.js，Express，React PWA》：近日，Twitter工程师Nicolas宣布Twitter几乎所有的移动流量迁移到了以Node.js为基础的服务中(Today we moved all of Twitter’s mobile web traffic (that’s like, a lot) to our new web stack – Node.js, Express, React PWA. )。在过去的两年中，Twitter移动Web技术栈主要是基于Scala，Google Closure Templates以及少量的JavaScript。后来CharlieCroom开始尝试将登出服务迁移到JavaScript技术栈中，并且进行了约9个月的线上测试，效果尚可，因此Twitter决定全部迁移到JavaScript技术栈中。同时，Twitter Web APP还支持所谓的PRPL范式：主动推送首屏关键资源、仅渲染初始路由、预存其他路由、按需懒加载与创建剩余路由。

开发教程

步步为营，掌握基础技能

• 《HTMLReference:在案例中学习HTML》：htmlreference.io 是免费的HTML学习指南，它以实例的方式讲述各种元素的属性与用法，适合于入门级开发人员学习HTML的基本语法。

• 《 2017前端开发手册》：Front-End Developer Handbook 2017 由 Cody Lindley 编写，面向每一个希望学习前端的开发者。该手册概括地讨论了前端工程化的相关实践：在2017年中我们应该使用哪些前端工具以及如何学习去使用这些数据。该手册的内容包含了Web技术的基础：HTML、CSS、DOM以及JavaScript，以及基于这些技术构建的优秀开源项目。

• 《基于Vue与DeepStream构建实时CRUD应用》: Vue是专注于JavaScript UI的渐进式库，它提供了开发现代Web应用的各种先进的特性。而随着移动互联网的发展，实时技术也愈发重要；各种各样的提供抽象接口的实时服务器扮演着越发重要的作用，其中DeepStream 就是开源的、免费的并且性能表现相当优秀的实时服务器。而本文就利用Vue与DeepStream这两个开源工具构建实时交互的应用。

• 《现代JavaScript概念纵览》：现代JavaScript开发在过去几年中经历了迅猛的变迁，并且这种变化的势头毫无停滞的预兆。对于很多前端开发者而言可能还不是很熟悉那些JS博客或者文档中提及的时兴的概念。此文讨论了很多起到媒介作用以及高级的概念，和这些概念是如何被适用于现代JavaScript开发中的。本文我们会讨论Statefulness与Statelessness、Immutability与Mutability、Imperative与Declarative Programming、Higher-order Functions、Observables、以及FP、RP、FPR编程范式。

• 《一系列优秀的Angular 2组件集锦》：Angular 2 是非常不错的前端开发框架，而本仓库则是一系列开源的Angular 2组件的集锦。这些组件包括浮层、通知、气泡、菜单、加载指示、表格、树、时间、图表、地图、无限滚动、音视频、SVG、PDF以及各种各样会在表单中用到的组件。

工程实践

立足实践，提示实际水平

• 《来自MuseFinder的React组件编写实践》：该指南来源于MuseFind在多年的产品开发中总结而来的React实践经验，其包含了对于组件声明方式、样式类的使用、初始状态声明、Props声明、方法声明、Props结构、装饰器的使用、函数式组件的声明等等多个方面。

• 《 Vue.js组件样式指南》：该样式指南提供了一种统一架构Vue.js代码的建议，其目标是达成易于开发者与团队成员理解以及寻找东西、易于IDE来审查代码并且提供帮助、易于重用开发构建工具、易于独立地缓存与使用代码块。该指南借鉴了 RiotJS样式指南，主要还包含了以下几个部分：基于模块开发、Vue组件命名，等等。

• 《关于Node.js存在反序列化远程代码执行漏洞的安全公告》：近日，国家信息安全漏洞共享平台(CNVD )收录了Node.js反序列化远程代码执行漏洞(CNVD-2017-01206，对应CVE-2017-594)。攻利用漏洞执行远程执行操作系统指令，获得服务器权限。由于目前验证代码已经公开，极有可能诱发大规模网站攻击。Node.js反序列化模块node-serialize库中的unserialize()函数未做安全处理，该漏洞通过传递调用JavaScript IIFE函数表达式的方式实现远程任意代码执行的效果。攻击者可通过远程攻击获得当前服务器运行环境权限，由于实际部署中node.js运行环境较多为操作系统root权限，因此可完全控制服务器主机。CNVD对该漏洞的综合评级为 “ 高危 ”。目前，相关利用方式已经在互联网上公开，近期出现攻击尝试爆发的可能。不过根据原作者表述，实际上这个库在GitHub上一共只有20个star，还有几个是漏洞文章发布后引来的，而且下载量也是非常少。如果想要避免此类安全问题，需要解决的就是确保用户输入的安全。方法比如通过安全传输方式(内网&加密)传输序列化字符串、使用如RSA等签名算法对字符串进行完整化校验。

• 《一次一个微优化，改进Node.js应用的吞吐量》：本文是多个提高Node.js应用吞吐量的小优化技巧介绍，包括尽可能地使用聚合IO操作，以批量写的方式来最小化系统调用的次数、需要将发布的开销考虑进内，清除应用中不同的定时器、CPU分析器能够给你提高一些有用信息，但是并不能完整地反馈整个流程、谨慎使用ECMAScript高级语法，特别是你还未使用最新的JavaScript引擎或者类似于Babel这样的转换器的时候、要洞察你的依赖树的组成并且对你使用的依赖进行适当的性能评测。当我们希望去优化某个包含了IO功能的应用性能时，我们需要对于应用耗费的CPU周期以及那些妨碍到应用并行化执行的因素了如指掌。本文则是分享作者在提升Apache Cassandra项目中的DataStax Node.js驱动时的一些思考与总结出的导致应用吞吐量降级的关键因素。

• 《 Web APP实现水平滑页翻页交互效果的要点解析》：本文是张鑫旭老师分享的起点中文网支持水平滑页阅读效果的实践，其核心是利用CSS3 column分栏布局。CSS3 column多栏布局是支持比较早的CSS3布局方式，目前IE10+以及其他所有现代浏览器都支持，IE浏览器不需要私有前缀，FireFox和Chrome虽然现在也不需要，但是，考虑到移动端以及可能一些用户浏览器升级不及时的现状，因此，-webkit-以及-moz-前缀目前还不能省略。

深度阅读

深度思考，升华开发智慧

• 《Google是如何构建Web框架的？》：众所周知Google使用单一仓库来存放与共享代码，其中存放了超过20亿行的代码，并且其使用了基于Trunk的开发范式。对于很多其他公司的开发者而言，这一点可能非常不可思议，而本文即是以构建著名的AngularDart项目为例，介绍Google是如何构建大型开源的Web框架的。

• 《并发与并行：理解Node.js中IO底层机制》：本系列希望能帮助开发者深入了解开发并发应用的相关知识，而本文则是着眼于相对基础的操作系统级别的调度、应用的IO这些知识。

• 《 JavaScript启动性能瓶颈分析与解决方案》：随着现代Web技术的发展与用户交互复杂度的增加，我们的网站变得日益臃肿，也要求着我们不断地优化网站性能以保证友好的用户体验。本文作者则着眼于JavaScript启动阶段优化，首先以大量的数据分析阐述了语法分析、编译等步骤耗时占比过多是很多网站的性能瓶颈之一。然后作者提供了一系列用于在现代浏览器中进行性能评测的工具，还分别从开发者工程实践与JavaScript引擎内部实现的角度阐述了应当如何提高解析与编译速度。

• 《验证码工作原理》：相信每一个Web开发者都对于验证码(CAPTCHA )的概念不陌生，它是卡内基梅隆大学提出的全自动公开的区分人类和计算机的图灵测试技术，全称为Completely Automated Public Turing Test to Tell Computers and Humans Apart。而本文则是先介绍了验证码存在的价值与实际案例，继而介绍了近年来常见的验证码的形式，从原始的数字、文字到最新的交互式验证码等等。同时也介绍了Google最新的自动行为检测机制，有助于更加智能地进行人机区分检测。

开源项目

乐于分享，共推前端发展

• 《svgo:基于NodeJS的SVG向量图优化工具》: SVG Optimizer是基于NodeJS的SVG文件优化工具，其允许用户选择需要的插件来进行相关的文件优化操作。SVG文件，特别是那些经过协同编辑的文件，往往会包含大量冗余的无用信息，譬如编辑器元数据、注释、隐藏元素、默认值等等；这些冗余信息会占用额外的空间，而SVGO就是将这些冗余信息移除。

• 《 FuseBox:下一代模块打包工具》: FuseBox是一个集成了Webpack、JSPM与SystemJS优势的新一代打包工具。它的最大优势在于其速度非常快，基本上只要50~100毫秒进行重打包，从而对于开发者非常友好。并且对于babel-core这样常用的工具FuseBox都集成在内，对于开发者而言直接零配置就可以使用了。FuseBox并且内置支持TypeScript而不需要任何的其他配置，它能够在数秒内就将你的代码编译打包完毕，并且提供了丰富的Loader API支持。

• 《 Jasonette:基于JSON标记快速构建跨平台移动应用》: Jasonette是一个新型的构建原生iOS与Android应用的方式，它允许使用简单的JSON标记来声明完整的原生应用。我们可以通过远程修改JSON的方式来动态地实时修改应用，而整个应用的逻辑并不需要再硬编码写入到设备中。任何时刻你在服务端更新完JSON之后再次打开应用的时候，整个应用就会和服务端的声明保持同步。

• 《 GraphicsJS:轻量级绘图库》：目前Web开发中最常用的创建交互式图片的技术选型当属SVG与Canvas，传统的Flash与Silverlight已经慢慢淡出历史的舞台。而对于 SVG与Canvas 的对比也显示，如果是想创建与操作简单的交互性图片，那么SVG当属首选。SVG本身是基于XML的向量图，任何通过svg标签载入的图片都会成为SVG DOM中可操作的对象。而GraphicsJS正是基于SVG的简单易用的JavaScript绘图库。

• 《 redux-query:React/Redux中查询与管理网络状态的库》：对于很多开发者而言，同步本地状态与网络状态会是一件很麻烦的事情。其中需要太多的妥协与考量，甚至于面对不同的问题需要使用不同的技术栈。而redux-query即是AmplitudeEng的工程师在实践中的总结与应用，它可以被当做基于React/Redux以及RESTful API的应用的很好的辅助工具。它允许将网络状态链入到当前的Redux Store中，并且提供了删除、乐观更新、响应缓存、删除重复等等优秀的功能。

巅峰人生

一览众山，聆听巅峰故事

• 《25岁的科技公司CEO：程序员如何高效工作并兼顾家庭？》：长亭科技CEO陈宇森分享了如何在工作与家庭之间寻找一个平衡点、如何高效工作地同时运营自己的感情。