前端每周清单第14期：Vue现状与展望、编写现代JavaScript代码、Web开发者安全自检列表

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• 《Google IO 2017召开》：美国时间5月17日- 19日，Google IO 2017大会于美国加利福尼亚州山景城的海岸线圆形剧场召开；会议提及了AI、Kotlin、Android 8.0、HOME、Assistant等等很多值得关注的东西。会议上Google还宣布将Kotlin语言作为安卓开发的一级编程语言；Kotlin由JetBrains公司开发，与Java完全互通，并具备诸多Java尚不支持的新特性。( https://events.google.com/io/ )

• 《微软Build 2017召开》：2017年5月10日，微软Build 2017在美国西雅图如期举办。本次大会涉及人工智能、云计算、物联网、Office 365以及开发工具等多个方面 。微软公布了Windows下一个重要更新 ——Windows 10 Fall Creators Update的更多细节，并提出了“ Windows love all Developers ”、“ Windows is Your Home for Development ”等口号，在开发工具、发布渠道、多设备同步等方面做出了努力，旨在吸引各个平台的开发者。( https://parg.co/bkH )

• 《新版本Create React App特性概述》：不到一年前，React官方发布了Create React App这个零配置的快速创建React应用的脚手架工具；而本文则介绍了近几个月来Create React App中加入的新特性。新版的Create React App中切换到了Webpack 2，并且优化了运行时错误提示，同时还默认启用了Progressive Web Apps支持，并且引入了Jest 20、动态导入等等一系列的新特性。( https://parg.co/bkY )

• 《Polymer 2.0发布》：近日Polymer发布其2.0版本，新版本充分利用了原生Web平台的特性，提升了互操作性，并且提供了平滑的迁移方式。Polymer 2.0中最大的特性之一就是支持基于ES6类的语法，使得开发者能够获得更加贴近于原生开发的体验。( https://parg.co/bkq )

开发教程

步步为营，掌握基础技能

• 《基于JavaScript的异步依赖加载》：在Web应用开发中我们经常会将一些首屏不需要的脚本或者样式文件以异步方式加载；而本文则是介绍了多种异步加载网页中依赖资源的方式，作者还将常用的方法整合为了fetchInject这个开源库，方便使用者快速进行脚本地异步加载。( https://parg.co/bkG )

• 《React Native开发中的80/20定律》：在构建React Native应用时，我们常常发现某些20%的投入会带来80%的产出。本文则是作者在构建了自己首个React Native应用之后的感悟，作者发现引入静态类型、通用组件以及精益部署之后，整个想法的开发速度与项目质量得到了较大地提升。( https://parg.co/bko )

• 《利用不可变数据编写安全清晰的代码》：不可变性是函数式编程语言的重要特性之一，它能够帮助我们编写更加安全与清晰可读的代码。本文作者则是以对于不可变数组、纯函数以及它们在实际并发情况下的操作入手介绍如何在编写代码中引入不可变性的思想。( https://parg.co/bkd )

• 《从零开始构建WhatsApp应用》：本系列文章深入浅出地介绍了如何利用GraphQL与React Native构建类似于WhatsApp的应用Chatty。前几部分主要介绍了如何搭建基础环境、设计GraphQL Schemas、进行数据查询与交互等内容，而本文则着重于介绍如何为Chatty添加权限验证特性。( https://parg.co/bk0 )

• 《基于Electron构建Github Desktop Beta》：Electron是著名的利用HTML、CSS、JavaScript等Web技术构建桌面应用的辅助工具；本文则是介绍了四个仅有原生应用开发背景的工程师如何利用Electron逐步构建Github Desktop Beta的经验。( https://parg.co/bkK )

工程实践

立足实践，提示实际水平

• 《编写现代JavaScript代码》：JavaScript被仅用来更新页面元素状态的日子一去不返，我们也需要编写更加现代的JavaScript代码。本文则是介绍了如何利用Linter来格式化代码、如何使用ES2015+特性、如何使用函数式编程等建议来提升JavaScript的代码质量。( https://dev.to/scastiel/writing-modern-javascript-code )

• 《Web开发者安全自检列表》：Michael O’Brien在本文中分享了一系列简单而又重要的Web开发者应该掌握的安全自检列表；本文涵盖了数据库、开发流程、权限验证、DoS、Web流量、API、验证、云配置、基础设施等等多个方面，以提醒开发者在构建云端Web应用时注意避免某些显而易见的风险。( https://parg.co/b8w )

• 《AMP与MIP等移动页面加速框架的探索与实践》：随着移动互联网技术发展与H5生态的不断演化，在前端领域涌现出了一些通用的、开源的移动H5页面加速框架。其中以Google提出的AMP(Accelerated Mobile Pages)开源框架与百度提出的MIP(Mobile Instant Pages)开源框架为代表。本主题主要从技术的层面讨论:移动H5页面速度体验方面遇到的挑战和问题，以及解决方法的探索过程；从架构设计层面，解析通用移动页面加速框架的设计思路和实现原理；从技术实现角度，剖析移动页面加速中的重难点问题与解决方法实践；从实际应用上，提供提升移动页面加速切实可行的操作方法。( https://parg.co/bkU )

• 《如何做好H5性能优化？》：智能手机的普及、移动互联网的发展、微信异军突起，都为H5的发展提供了良好的环境。当前，H5已被广泛应用于营销、广告、传播之中。而针对H5效率慢、体验差的硬伤，如何做好性能测试并优化其性能就显得尤为重要。红豆Live是微博子公司有信旗下的一款语音直播产品，有各种H5页面。我们在做H5性能测试时进行了总结，本文将为大家详细介绍H5性能测试的关注点、测试工具及常见问题。( https://parg.co/bkl )

• 《如何快速地为React站点设置A/B测试》：A/B测试，或者称为分割测试，是用来随机地为用户展示网页以测试不同产品设计的反馈效果。A/B测试对提升真实应用的用户接受度非常有帮助，而本文则是介绍了如何利用react-ab-test这个工具快速地针对React站点设置A/B测试收集用户反馈信息。( https://parg.co/bkE )

深度阅读

深度思考，升华开发智慧

• 《重构Airbnb前端架构》：本文是近日Airbnb开发团队在思索重构代码库中JavaScript部分的经验总结，主要着眼于产品驱动开发以及技术沉淀、从传统的Rails架构中积攒的经验以及新的技术栈的某些特性等方面。本文首先介绍了从Rails迁移过程中的一些经验，譬如将原本完全的服务端渲染界面所需要的数据切分为了API与Non-API两大类，并且使用Hypernova来进行React服务端渲染。然后介绍了如何在应用前端通过引入懒加载与异步加载等方式提升前端性能与用户体验。( https://parg.co/bkA )

• 《最终，JavaScript成为了一流语言》：2003年，保罗·格雷厄姆(Paul Graham)在文中提到，他的公司决定使用Lisp(一门编程语言)，并且指出自己公司相比竞争对手的优势在于Lisp。如果Lisp像法语，那么现如今的JavaScript就像英语一般。尽管二者的语法不一致，但英语是世界上最广泛使用的语言，JavaScript是最广泛应用的计算语言。然而，JavaScript仍未得到与其他语言同等的尊重。尽管它的使用率在创业公司和大型公司中持续增长，但若非必要，人们不会认为它是一门有用的语言。大公司的高级工程师声称它不是一门“真正的”编程语言，许多人并不知道除了操作像素外它还能被用于何处。。( https://parg.co/bkb )

• 《如何看待snabbdom的作者开发的前端框架Turbine抛弃了虚拟DOM？》：近日snabbdom的作者写了个FRP的前端框架，该框架不仅不用虚拟DOM (以及snabbdom)，还称当前的大多数FRP以及基于观察者模式的框架在虚拟DOM的使用上存在问题；此情况引引发了很多人参与讨论，阅读这些讨论还是有助于提升对于虚拟DOM以及单页面应用数据流的理解。( https://parg.co/bkc )

• 《案例分析：为何我们不使用框架来开发应用？》：Nick Gauthier在本文中阐述了他们在，构建分布式团队使用的视频会议工具MeetSpace时候，的技术选型上的考虑；在目前大家习惯于基于某个框架去构建Web应用的背景下是个有趣的阅读文章。( https://parg.co/b8D )

• 《理解WebAssembly的文件格式》：为了保证WebAssembly能够被人们阅读与理解，需要提供对于wasm二进制格式的文本表示。该特性着眼于能够在文本编辑器、浏览器开发者工具等开发工具中浏览WebAssembly文件，而本文则介绍了这种文件格式的规范与工作原理，以及底层的字节码与上层的JavaScript对象之间的关联关系。( https://parg.co/bk6 )

开源项目

乐于分享，共推前端发展

• 《Mavo》：Mavo是纯粹的基于HTML标记的用来创建富客户端Web应用的框架，它允许开发者在没有服务端或者JavaScript脚本的情况下快速创建动态应用。( https://parg.co/b8n )

• 《Sharp》：高性能的Node.js图片处理模块，能够提供面向JPEG、PNG、WebP以及TIFF等多种格式的图片，的尺寸重置、旋转等等常见的操作。( https://parg.co/bkm )

• 《leerraum.js》：leerraum.js是基于typeset的PDF排版与布局辅助工具，其目标在于简化PDF中可视化对象的定位与操作。( https://parg.co/bkS )

• 《react-pdf》：在浏览器、移动端与服务端皆可适用的基于React语法的PDF文件创建工具。( https://github.com/diegomura/react-pdf )

巅峰人生

前端之巅

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