<p><a href="/misc/goto?guid=4959738157379665199" rel="nofollow,noindex">前端开发周报：PWA 将与安卓原生平起平坐、V8 团队致力于提高 ES2015 特性性能</a> 为InfoQ中文站特供稿件，首发地址为 <a href="https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247485000&idx=1&sn=da1a4e7320f33de4990cc0396e97a95e" rel="nofollow,noindex">这里</a> ；如需转载，请与InfoQ中文站联系。从属于笔者的 <a href="/misc/goto?guid=4959732850200495319" rel="nofollow,noindex">Web 前端入门与工程实践</a> 。</p>    <h2>新闻热点</h2>    <p>前端领域最新动态</p>    <ul>     <li> <p><a href="/misc/goto?guid=4959738157589477466" rel="nofollow,noindex">《PWA 将与安卓原生平起平坐》</a> ：自从谷歌提出PWA概念之后，它就持续受到移动开发界的关注。由于其可靠、快速、融入的特性，大大提升了网页应用的用户友好性。近日官方博客更进一步宣布将使PWA应用获得和原生应用同等的待遇与权限。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738157674708043" rel="nofollow,noindex">《React Studio Public Beta 2 发布》</a> ：React Studio Public Beta 2 发布啦，React Studio 是能够基于类似于 React JS 这样的组件化库进行交互式 UI 设计的专业工具，能够同时满足设计师与开发者的需求。对于设计师而言，React Studio 彻底遵循了响应式与移动优先的原则，设计师能够方便地将组件设计与应用流导出为 ReactJS 风格的 HTML/JavaScript 代码。对于开发者而言，React Studio 是一个基于 create-react-app 模板创建的前端项目，它仅集成了必须的代码，并且遵循了现代的开发流程，能够辅助开发者快速构建 SPA 项目或者其他独立组件。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738157762722042" rel="nofollow,noindex">《ECMAScript 中可选链提案》</a> ：相信每个 JavaScript 开发者都不会陌生于 Uncaught TypeError: Cannot read property 'property' of null 这个错误，对于空指针的检测，特别是对象嵌套属性的空检测成为了不可或缺的部分，譬如： var street = user.address && user.address.street 。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738157844307483" rel="nofollow,noindex">《V8 团队致力于提高 ES2015 特性性能》</a> ：最近几个月以来 V8 团队一直致力于提升 <a href="/misc/goto?guid=4959738157923915657" rel="nofollow,noindex">ES2015 新特性的性能表现</a> 。目前现代 Web 开发中通行的做法时候用 <a href="/misc/goto?guid=4958871204393151840" rel="nofollow,noindex">Babel</a> 这样的编译器将那些引擎尚不支持的语法编译为传统的 ES5 语法，譬如经常使用的扩展操作符会被 Babel 编译为 Object.assign 形式的语法组成，这样不可避免的会带来性能损耗与包体体积增大。传统的 Crankshaft 编译器难以直接优化 for...of 这样的语法特性，而最新的 TurboFan 编译流则从设计上就能够支持控制流、异常处理以及解构赋值这些特性。包括之前 Crankshaft 虽然支持但是尚未优化的生成器等等特性也都得到了优化，最后的结果表明整体的语法性能提升了两倍多。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738158040052885" rel="nofollow,noindex">《推ter 宣布移动 Web 技术栈迁移到 Node.js，Express，React PWA》</a> ：近日，推ter 工程师 Nicolas 宣布 推ter 几乎所有的移动流量迁移到了以 Node.js 为基础的服务中（Today we moved all of 推ter's mobile web traffic (that's like, a lot) to our new web stack – Node.js, Express, React PWA.）。在过去的两年中，推ter 移动 Web 技术栈主要是基于 Scala，Google Closure Templates 以及少量的 JavaScript。后来 CharlieCroom 开始尝试将登出服务迁移到 JavaScript 技术栈中，并且进行了约 9 个月的线上测试，效果尚可，因此 推ter 决定全部迁移到 JavaScript 技术栈中。同时，推ter Web APP 还支持所谓的 PRPL 范式：主动推送首屏关键资源、仅渲染初始路由、预存其他路由、按需懒加载与创建剩余路由。</p> </li>    </ul>    <h2>开发教程</h2>    <p>步步为营，掌握基础技能</p>    <ul>     <li> <p><a href="/misc/goto?guid=4959738158125051161" rel="nofollow,noindex">《HTMLReference:在案例中学习 HTML》</a> ： <a href="/misc/goto?guid=4959738158125051161" rel="nofollow,noindex">htmlreference.io</a> 是免费的 HTML 学习指南，它以实例的方式讲述各种元素的属性与用法，适合于入门级开发人员学习 HTML 的基本语法。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738158225384403" rel="nofollow,noindex">《2017 前端开发手册》</a> ： <a href="/misc/goto?guid=4959738158225384403" rel="nofollow,noindex">Front-End Developer Handbook 2017</a> 由 <a href="/misc/goto?guid=4958535186199518158" rel="nofollow,noindex">Cody Lindley</a> 编写，面向每一个希望学习前端的开发者。该手册概括地讨论了前端工程化的相关实践：在 2017 年中我们应该使用哪些前端工具以及如何学习去使用这些数据。该手册的内容包含了 Web 技术的基础：HTML、CSS、DOM 以及 JavaScript，以及基于这些技术构建的优秀开源项目。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738158335756031" rel="nofollow,noindex">《基于 Vue 与 DeepStream 构建实时 CRUD 应用》</a> ：Vue 是专注于 JavaScript UI 的渐进式库，它提供了开发现代 Web 应用的各种先进的特性。而随着移动互联网的发展，实时技术也愈发重要；各种各样的提供抽象接口的实时服务器扮演着越发重要的作用，其中 <a href="/misc/goto?guid=4959738158420237738" rel="nofollow,noindex">DeepStream</a> 就是开源的、免费的并且性能表现相当优秀的实时服务器。而本文就利用 Vue 与 DeepStream 这两个开源工具构建实时交互的应用。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738158529196833" rel="nofollow,noindex">《现代 JavaScript 概念纵览》</a> ：现代 JavaScript 开发在过去几年中经历了迅猛的变迁，并且这种变化的势头毫无停滞的预兆。对于很多前端开发者而言可能还不是很熟悉那些 JS 博客或者文档中提及的时兴的概念。此文讨论了很多起到媒介作用以及高级的概念，和这些概念是如何被适用于现代 JavaScript 开发中的。本文我们会讨论 Statefulness 与 Statelessness、Immutability 与 Mutability、Imperative 与 Declarative Programming、Higher-order Functions、Observables、以及 FP、RP、FPR 编程范式。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738158614650576" rel="nofollow,noindex">《一系列优秀的 Angular 2 组件集锦》</a> ： <a href="/misc/goto?guid=4958866372165218034" rel="nofollow,noindex">Angular 2</a> 是非常不错的前端开发框架，而本仓库则是一系列开源的 Angular 2 组件的集锦。这些组件包括浮层、通知、气泡、菜单、加载指示、表格、树、时间、图表、地图、无限滚动、音视频、SVG、PDF 以及各种各样会在表单中用到的组件。</p> </li>    </ul>    <h2>工程实践</h2>    <p>立足实践，提示实际水平</p>    <ul>     <li> <p><a href="/misc/goto?guid=4959738158728302929" rel="nofollow,noindex">《来自 MuseFinder 的 React 组件编写实践》</a> ：该指南来源于 MuseFind 在多年的产品开发中总结而来的 React 实践经验，其包含了对于组件声明方式、样式类的使用、初始状态声明、Props 声明、方法声明、Props 结构、装饰器的使用、函数式组件的声明等等多个方面。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738158811180044" rel="nofollow,noindex">《Vue.js 组件样式指南》</a> ：该样式指南提供了一种统一架构 Vue.js 代码的建议，其目标是达成易于开发者与团队成员理解以及寻找东西、易于 IDE 来审查代码并且提供帮助、易于重用开发构建工具、易于独立地缓存与使用代码块。该指南借鉴了 <a href="/misc/goto?guid=4959738158896554952" rel="nofollow,noindex">RiotJS</a> 样式指南，主要还包含了以下几个部分： <a href="/misc/goto?guid=4959738158973863324" rel="nofollow,noindex">基于模块开发</a> 、 <a href="/misc/goto?guid=4959738159062067452" rel="nofollow,noindex">Vue 组件命名</a> ，等等。</p> </li>     <li> <p><a href="http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484996&idx=1&sn=a1b037ececa56de2d878f4d6c91540f1" rel="nofollow,noindex">《关于Node.js存在反序列化远程代码执行漏洞的安全公告》</a> ：近日，国家信息安全漏洞共享平台（CNVD）收录了Node.js反序列化远程代码执行漏洞（CNVD-2017-01206，对应 CVE-2017-594）。攻利用漏洞执行远程执行操作系统指令，获得服务器权限。由于目前验证代码已经公开，极有可能诱发大规模网站攻击。Node.js反序列化模块node-serialize库中的unserialize()函数未做安全处理，该漏洞通过传递调用JavaScript IIFE函数表达式的方式实现远程任意代码执行的效果。攻击者可通过远程攻击获得当前服务器运行环境权限，由于实际部署中node.js运行环境较多为操作系统root权限，因此可完全控制服务器主机。CNVD对该漏洞的综合评级为“高危”。目前，相关利用方式已经在互联网上公开，近期出现攻击尝试爆发的可能。不过根据 <a href="/misc/goto?guid=4959738159229006443" rel="nofollow,noindex">原作者表述</a> ，实际上这个库在 GitHub 上一共只有 20 个 star，还有几个是漏洞文章发布后引来的，而且下载量也是非常少。如果想要避免此类安全问题，需要解决的就是确保用户输入的安全。方法比如通过安全传输方式（内网 & 加密）传输序列化字符串、使用如 RSA 等签名算法对字符串进行完整化校验。</p> </li>     <li> <p><a href="http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484989&idx=1&sn=b1b4d9686a42498001687b156f2db928" rel="nofollow,noindex">《一次一个微优化，改进Node.js应用的吞吐量》</a> ：本文是多个提高 Node.js 应用吞吐量的小优化技巧介绍，包括尽可能地使用聚合 IO 操作，以批量写的方式来最小化系统调用的次数、需要将发布的开销考虑进内，清除应用中不同的定时器、CPU 分析器能够给你提高一些有用信息，但是并不能完整地反馈整个流程、谨慎使用 ECMAScript 高级语法，特别是你还未使用最新的 JavaScript 引擎或者类似于 Babel 这样的转换器的时候、要洞察你的依赖树的组成并且对你使用的依赖进行适当的性能评测。当我们希望去优化某个包含了 IO 功能的应用性能时，我们需要对于应用耗费的 CPU 周期以及那些妨碍到应用并行化执行的因素了如指掌。本文则是分享作者在提升 Apache Cassandra 项目中的 DataStax Node.js 驱动时的一些思考与总结出的导致应用吞吐量降级的关键因素。</p> </li>     <li> <p><a href="http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484994&idx=1&sn=879c49723b9cf48972d35618229bbf3a" rel="nofollow,noindex">《Web APP 实现水平滑页翻页交互效果的要点解析》</a> ：本文是张鑫旭老师分享的起点中文网支持水平滑页阅读效果的实践，其核心是利用 CSS3 column 分栏布局。CSS3 column多栏布局是支持比较早的CSS3布局方式，目前IE10+以及其他所有现代浏览器都支持，IE浏览器不需要私有前缀，FireFox和Chrome虽然现在也不需要，但是，考虑到移动端以及可能一些用户浏览器升级不及时的现状，因此，-webkit-以及-moz-前缀目前还不能省略。</p> </li>    </ul>    <h2>深度阅读</h2>    <p>深度思考，升华开发智慧</p>    <ul>     <li> <p><a href="/misc/goto?guid=4959738159481829727" rel="nofollow,noindex">《Google 是如何构建 Web 框架的？》</a> ：众所周知 Google 使用单一仓库来存放与共享代码，其中存放了超过 20 亿行的代码，并且其使用了基于 Trunk 的开发范式。对于很多其他公司的开发者而言，这一点可能非常不可思议，而本文即是以构建著名的 AngularDart 项目为例，介绍 Google 是如何构建大型开源的 Web 框架的。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738159566538055" rel="nofollow,noindex">《并发与并行：理解 Node.js 中 IO 底层机制》</a> ：本系列希望能帮助开发者深入了解开发并发应用的相关知识，而本文则是着眼于相对基础的操作系统级别的调度、应用的 IO 这些知识。</p> </li>     <li> <p><a href="http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484987&idx=1&sn=7f20da20bc6baed62ca8ff115209942b" rel="nofollow,noindex">《JavaScript 启动性能瓶颈分析与解决方案》</a> ：随着现代 Web 技术的发展与用户交互复杂度的增加，我们的网站变得日益臃肿，也要求着我们不断地优化网站性能以保证友好的用户体验。本文作者则着眼于 JavaScript 启动阶段优化，首先以大量的数据分析阐述了语法分析、编译等步骤耗时占比过多是很多网站的性能瓶颈之一。然后作者提供了一系列用于在现代浏览器中进行性能评测的工具，还分别从开发者工程实践与 JavaScript 引擎内部实现的角度阐述了应当如何提高解析与编译速度。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738159730286828" rel="nofollow,noindex">《验证码工作原理》</a> ：相信每一个 Web 开发者都对于验证码（CAPTCHA）的概念不陌生，它是卡内基梅隆大学提出的全自动公开的区分人类和计算机的图灵测试技术，全称为 Completely Automated Public Turing Test to Tell Computers and Humans Apart。而本文则是先介绍了验证码存在的价值与实际案例，继而介绍了近年来常见的验证码的形式，从原始的数字、文字到最新的交互式验证码等等。同时也介绍了 Google 最新的自动行为检测机制，有助于更加智能地进行人机区分检测。</p> </li>    </ul>    <h2>开源项目</h2>    <p>乐于分享，共推前端发展</p>    <ul>     <li> <p><a href="/misc/goto?guid=4958962522712183782" rel="nofollow,noindex">《svgo:基于 NodeJS 的 SVG 向量图优化工具》</a> ：SVG Optimizer 是基于 NodeJS 的 SVG 文件优化工具，其允许用户选择需要的插件来进行相关的文件优化操作。SVG 文件，特别是那些经过协同编辑的文件，往往会包含大量冗余的无用信息，譬如编辑器元数据、注释、隐藏元素、默认值等等；这些冗余信息会占用额外的空间，而 SVGO 就是将这些冗余信息移除。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738159837152976" rel="nofollow,noindex">《FuseBox:下一代模块打包工具》</a> ：FuseBox 是一个集成了 Webpack、JSPM 与 SystemJS 优势的新一代打包工具。它的最大优势在于其速度非常快，基本上只要 50~100 毫秒进行重打包，从而对于开发者非常友好。并且对于 babel-core 这样常用的工具 FuseBox 都集成在内，对于开发者而言直接零配置就可以使用了。FuseBox 并且内置支持 TypeScript 而不需要任何的其他配置，它能够在数秒内就将你的代码编译打包完毕，并且提供了丰富的 Loader API 支持。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738159922825294" rel="nofollow,noindex">《Jasonette:基于 JSON 标记快速构建跨平台移动应用》</a> ：Jasonette 是一个新型的构建原生 iOS 与 Android 应用的方式，它允许使用简单的 JSON 标记来声明完整的原生应用。我们可以通过远程修改 JSON 的方式来动态地实时修改应用，而整个应用的逻辑并不需要再硬编码写入到设备中。任何时刻你在服务端更新完 JSON 之后再次打开应用的时候，整个应用就会和服务端的声明保持同步。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738160004937427" rel="nofollow,noindex">《GraphicsJS:轻量级绘图库》</a> ：目前 Web 开发中最常用的创建交互式图片的技术选型当属 SVG 与 Canvas，传统的 Flash 与 Silverlight 已经慢慢淡出历史的舞台。而对于 <a href="/misc/goto?guid=4959738160091723074" rel="nofollow,noindex">SVG 与 Canvas</a> 的对比也显示，如果是想创建与操作简单的交互性图片，那么 SVG 当属首选。SVG 本身是基于 XML 的向量图，任何通过 svg 标签载入的图片都会成为 SVG DOM 中可操作的对象。而 GraphicsJS 正是基于 SVG 的简单易用的 JavaScript 绘图库。</p> </li>     <li> <p><a href="/misc/goto?guid=4959738160178956534" rel="nofollow,noindex">《redux-query:React/Redux 中查询与管理网络状态的库》</a> ：对于很多开发者而言，同步本地状态与网络状态会是一件很麻烦的事情。其中需要太多的妥协与考量，甚至于面对不同的问题需要使用不同的技术栈。而 redux-query 即是 AmplitudeEng 的工程师在实践中的总结与应用，它可以被当做基于 React/Redux 以及 RESTful API 的应用的很好的辅助工具。它允许将网络状态链入到当前的 Redux Store 中，并且提供了删除、乐观更新、响应缓存、删除重复等等优秀的功能。</p> </li>    </ul>    <h2>巅峰人生</h2>    <p>一览众山，聆听巅峰故事</p>    <ul>     <li> <p><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995455&idx=1&sn=955d3c98e0a92c43b5e017e44c48568e&chksm=bdbf02ac8ac88bbaddcec50490eb5d2ed597026c646d396d1c410885e63b1a7504f41f525c9c&mpshare=1&scene=1&srcid=02191maJWTASyMJU7d3bSMB7#rd" rel="nofollow,noindex">《25岁的科技公司CEO：程序员如何高效工作并兼顾家庭？》</a> ：长亭科技CEO 陈宇森分享了如何在工作与家庭之间寻找一个平衡点、如何高效工作地同时运营自己的感情。</p> </li>    </ul>    <p> </p>    <p> </p>    <p>来自：InfoQ</p>    <p> </p>