- 前端每周清单：jQuery 3.2发布，滴滴采用Vue 2.0重构Web App、饿了么PWA实践经验分享 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践。更多阅读清单请转向往期索引。

前端每周清单：前端每周清单：jQuery 3.2发布，滴滴采用Vue 2.0重构Web App、饿了么PWA实践经验分享

新闻热点

前端领域最新动态

• 《Facebook发布Create React Native App》：类似于Create-React-App，Create React Native App能够为开发者快速创建零配置的React Native项目，并且与基于Expo构建了完整的可以屏蔽底层原生代码细节的React Native项目，使得开发者可以快速尝试上手React Native项目 。同时，开发者也可以使用 npm run eject命令将项目切换到全配置状态，以方便自行添加原生组件。( http://6me.us/29r )

• 《2017 React大会成功举办》：2017年React Conf于3月13日、14日成功举办，会上来自世界各地的开发者就React Fiber、Flow、Performance、React Native等多个主题发表了演说与讨论，推荐选择自己喜欢的演讲视频观看。( http://conf.reactjs.org/livestream )

• 《jQuery 3.2.0发布》：jQuery 3.2.0中包含了一系列的错误修复、性能提升以及部分弃用API的彻底移除 。重大的更新包括添加了对于自定义CSS属性操作的支持，彻底移除了isArray、nodeName等方法以及修复了.width()等部分方法中的问题。( http://6me.us/BN8 )

• 《Sketch宣布开源其文件格式》：随着近日发布的Sketch 43版本，Sketch宣布开源其文件格式，这也意味着未来可能会有人基于该格式开发Windows版本应用或者简单的Sketch文件浏览器。鉴于其文件格式为JSON，我们也可以畅想未来会出现自动构建的Web Service。( http://6me.us/DyAYEC )

• 《Chromium即将支持APNG》：该Commit会为Chromium添加APNG格式的支持，该格式可以逐步替换现存的Gif格式 。( https://parg.co/bO9 )

• 《Kotlin 1.1新增协程、类型别名特性，提升了对JavaScript的支持》：Kotlin的新版本引入了多项新的语言特性(其中最值得注意的就是协程)，同时还提升了对其JavaScript目标环境的支持。( http://www.infoq.com/cn/news/2017/03/kotlin-11-released )

开发教程

步步为营，掌握基础技能

• 《Flexbox语法清单》：该网页提供了交互式的CSS Flexbox教程，详细介绍了Flexbox的使用语法与经典案例。( http://yoksel.github.io/flex-cheatsheet/ )

• 《Sketch：React Native的Playground 》：随着Create React Native App的发布，Expo发布了能够在线编辑React Native应用的工具Sketch。开发者可以在Web上直接编辑React Native应用代码，或者拖拽方式加入组件，然后通过Expo客户端完成本地预览。( http://6me.us/aGFX )

• 《编写JavaScript框架：客户端路由》：本文是编写JavaScript框架系列的最后一篇，主要着眼于讨论如何实现JavaScript客户端路由及其与服务端路由的区别。( https://parg.co/bOL )

• 《30天学习30个VR项目》：本系列作者介绍了从0到1如何开发30个常见的VR项目，从最基础的图片浏览、视频播放，到交互性动画等等 。( https://risonsimon.com/days-in-vr/ )

• 《CORS详细指南》：本文是对于浏览器中跨域访问协议CORS进行详细介绍，并且以完整的代码交互示例演示CORS协议的效果与使用方法。( https://parg.co/bOF )

• 《Angular的模块间通信》：模块是Angular的构建单元，Angular应用程序的所有可视化元素也是由模块构建的。当我们把模块拆散成更小的模块时，我们就要确保它们可以把数据传来传去。到那时候，恰当地模块间通信机制就成了我们应用程序的基础，可以让所有的数据都保持同步状态。( https://parg.co/bOD )

  工程实践

立足实践，提示实际水平

• 《前端代码测试概述》：作者在本系列文章中介绍了前端代码测试的相关概念与实践技巧，包括了单元测试、集成测试、端到端测试等多个方面。( http://6me.us/posk )

• 《以组件为中心的React懒加载》：React Loadable是以组件为中心的懒加载框架，其基于Webpack 2提供的 import 提供的异步代码分割与加载功能进行了一系列的封装。( http://6me.us/mNHi )

• 《另一种CSS压缩思路》：本文作者提出了一种新的CSS压缩思路，有可能会损坏原有的CSS文件，不过其压缩比率相较于现有的通用CSS压缩策略会更为优秀。( https://luisant.ca/remynifier )

• 《来自Vixlet的React优化策略》：在过去的数年中，来自Vixlet的前端开发团队一直使用React与Redux的开发架构，本文即是该团队分享其在开发过程中发现的React优化策略的介绍。( http://6me.us/dx5 )

• 《PWA在饿了么的实践经验》：本篇旨在和大家分享饿了么M站(https://h5.ele.me/msite/)在PWA改造中的实践经验。涉及到的方面有：PWA线上部署的准备工作、多页应用的prerender优化、实践过程中踩到的(和推进解决的)坑。( https://parg.co/bO7 )

• 《滴滴webapp 5.0 Vue 2.0重构经验分享》：滴滴的webapp是运行在微信、支付宝、手Q以及其它第三方渠道的打车软件。借着产品层面的功能和视觉升级，我们用Vue 2.0对它进行了一次技术重构；本文即是本次重构中的经验分享。( https://github.com/DDFE/DDFE-blog/issues/13 )

  深度阅读

深度思考，升华开发智慧

• 《2017成为专业Web开发者的学习路线图》：作者在此文中以图表的方式展现了2017年中如果想成为专业的Web开发者，应该在Web前端、服务端以及DevOps领域所需要学习到的技术栈以及进阶路线图。( http://6me.us/W0k )

• 《关于JWE安全漏洞的讨论》：JSON Web Token是基于JSON的访问令牌创建标准(RFC 7519)，本文则是介绍了JWE面对的Invalid Curve Attack原理以及受影响的开源库等内容。( http://6me.us/D0iKp )

• 《wasm_lua》：wasm_lua提供了能够运行于WASM环境下的Lua虚拟机，未来基于Lua构建前端框架也是个可行的选择 。( https://github.com/vvanders/wasm_lua )

• 《U.S. Web设计标准》：近日U.S.官方网站的样式与视觉设计指南1.0.0版本发布，包含了大量的Bug修复与反馈修正。( https://parg.co/bO1 )

• 《Preact内部原理探秘》：Preact是提供了类似于React API不过速度更快、包体更小的React替代包，本系列文章是Preact的开发者介绍其内部工作原理。( https://parg.co/bOj )

• 《扩展JS应用在架构性取舍上应关注八点要素》：如果想要构建可扩展的软件，可以从很多角度来思考软件架构。但是如果每个角度都去考虑，根本不可能做出想要的软件。这就是为什么需要从架构的角度对设计进行取舍：取我们最需要的，舍次要的。。( https://parg.co/bOn )

  开源项目

乐于分享，共推前端发展

• 《手淘发布Atlas》：手机淘宝安卓客户端容器化框架Atlas正式宣布开源。Atlas由阿里巴巴移动团队自研，以容器化思路解决大规模团队协作问题，实现并行开发、快速迭代和动态部署，适用于Android 4.x以上系统版本的大小型App开发。(https://github.com/alibaba/atlas)

• 《Animista》：Animista是开箱即用的CSS动画库，其作者还发布了非常易用的在线预览与选择站点，适合于设计人员选择合适的动画效果。( http://animista.net/ )

• 《Quokka.js》：Quokka能够帮助我们在常用的编辑器(譬如VSCode)中快速建立原型试验场，包括了行内错误提示、代码测试与覆盖率提示、富文本输出格式化等等。( https://quokkajs.com/ )

• 《Guetzli》：Google宣布开源新的JPEG编码器Guetzli，与现有的压缩编码工具相比，其能够减少近35%的文件尺寸而依然保持图片质量。( http://6me.us/AM7a )

• 《wasm-loader》：wasm-loader是能够用于Webpack的WASM二进制模块导入工具，其能够允许你在JavaScript代码中导入wasm格式文件并且将二进制文件打包成为JS Bundle的一部分 。( https://github.com/ballercat/wasm-loader )

巅峰人生

一览众山，聆听巅峰故事