前端开发周报：PWA 将与安卓原平生起平坐

前端开发周报：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 陈宇森分享了如何在工做与家庭之间寻找一个平衡点、如何高效工做地同时运营本身的感情。