3.1-Frontend

#前端每周清单：Instant App将至，WebAssembly将获默认支持，PWA实践渐增

新闻热点

前端领域最新动态

• 《WebAssembly成员就API设计与二进制格式达成一致》：近日，WebAssembly CG成员单位Chrome、Edge、Firefox以及Webkit就初始版本的WebAssembly API以及 二进制格式达成一致，标志着浏览器预览阶段的结束，各大浏览器会开始默认支持WebAssembly，让我们拭目以待。( http://suo.im/AXQU )

• 《斯坦福CS授课开始用JavaScript替换Java》：今年春学期，斯坦福计划将CS106J课程实验性地使用JavaScript而不是Java进行教学；并且将CS106S: “Programming Abstraction and Social Good” 作为独立课程发布，鼓励学生思考他们未来能够承担的社会职位。( http://suo.im/4DY8LJ )

• 《Ant Design 2.7.3发布，阿里前端设计语言&前端框架》：Ant Design 2.7.3发布了，Ant Design是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于React的前端框架实现。( http://suo.im/3hwBf9 )

• 《备受瞩目的Instant App即将到来》：Android一向致力于让用户能以更加省力的方式发现并使用各种应用，而Android Instant App正是这一理念的集中体现——这是一种用户无需安装即可运行Android应用的全新方式。( http://suo.im/1AddvL )

开发教程

步步为营，掌握基础技能

• 《CSS Grid指南》:网格系统是布局设计的核心之一，在Web开发中我们经常需要借助第三方库来创建合适的网格系统。而CSS Grid则是一个二维布局系统，能够辅助开发者创建基于网格的用户界面，此文则是详细地介绍CSS Grid的语法细节以及调试实例。( https://tympanus.net/codrops/css_reference/grid/ )

• 《基于Vue.js开发一个Pokemon Battle指南》:本文是非常详细的如何利用Vue.js开发一个宠物小精灵的战斗场景的教程，还是挺有意思的。( http://suo.im/1jwicW )

• 《Web常见权限认证技术详解》：此文详细阐述了Web开发中常用的权限认证技术，首先介绍了Web开发中与权限相关的常见名词，而后介绍了HTTP Basic Authentication、基于Session的认知、基于Token的认证、JWT、OAuth以及OpenID。( https://github.com/teesloane/Auth-Boss )

• 《ECMAScript 4背后的故事》:本文是对于1999 ~ 2008年之间JavaScript世界发生的大事件的详细介绍，阐述了ECMAScript 4从提出到角力到流产的前世今生。( http://suo.im/phBiE )

• 《React Native与Swift性能对比》：作为混合式开发框架，React Native在运行时仍然会实际调用Objective-C或者Java。此文作者同时用Swift与React Native构建了相同的应用，并且从CPU、GPU、内存使用、电池耗费等多个角度对这二者进行性能分析。结果表明二者性能相差无几，Swift在CPU占用略占优势，二者的GPU占用不相伯仲，而React Native在内存上则有一定长处。( http://suo.im/2MWZnA )

• 《React与MobX开发中的测试驱动开发》:本文对于React与MobX的基本使用进行了介绍，阐述了为何作者认为MobX是个不错的Redux的替代以及如何对MobX进行单元测试。( http://suo.im/2PE2A6 )

• 《基于React与GraphQL的全栈开发指南》：GraphQL最早由Facebook提出以解决复杂多变的查询问题，弥补REST中的不足。它允许界面组件以声明式获取数据而忽略后端实现细节。本系列文章是由Apollo团队提供，讲解如何基于React与GraphQL开发应用。( http://6me.us/O6p )

工程实践

立足实践，提示实际水平

• 《React开发中的10个微模式》：此文是Gilbertson在工作中总结而来的React开发中常见的设计模式总结，譬如输入域的唯一标识分配、CSS控制等等 。( http://suo.im/42S8Kb )

• 《美团点评前端无痕埋点实践》：构建一个数据平台大体上包括数据采集、数据上报、数据存储、数据计算，以及数据的可视化展示等几个重要的环节。前端数据采集与上报是整个流程中最重要的一环，只有确保前端数据生产的全面、准确、及时，最终产生的数据结果才是可靠的、有价值的。为了解决前端埋点的准确性、及时性、开发效率等问题，业内各家公司从不同角度，提出了多种技术方案，本文则是美团点评前端无痕埋点实践。( http://suo.im/fVPpT )

• 《工程实践中的PWA利器清单》:本文是Google Chrome团队的Addy Osmani所写，介绍了这两年来他们团队开发或者推荐的一系列能够用于生产环境的PWA开发工具或者辅助库。此文作者同时来列举了目前在很多主流站点应用PWA之后带来的一系列包括离线优先、首屏加载优化等提升用户体验的实践案例。( http://suo.im/1IxGPJ )

• 《深入了解JavaScript中错误对象与堆栈跟踪》：JavaScript中Error对象的堆栈跟踪信息包含了从异常抛出点到构造函数的所有栈帧信息，而手动地去捕获与操作堆栈跟踪信息有助于我们在开发测试或者异常处理相关的框架时有更好地实践。( http://suo.im/MiMWd )

• 《Airbnb使用React重构搜索功能的实践》：早在2015年，Airbnb的工程团队就决定将React作为主要的前端开发栈，不过因为其搜索页面过于复杂因此直到2016年初才开始迁移工作。本文就是Airbnb进行代码重构的经验介绍。( http://6me.us/2mS )

• 《百度搜索对PWA的探索和初步实践》:本文是百度搜索资深Web前端工程师沈洲在前端之巅微信群中的分享整理总结而成，介绍了百度天气PWA应用的开发实践，本周还分享了《PWA实践：从一个简单的页面开始》与《PWA实践：理解和创建Service Worker脚本》等PWA相关内容 。(http://6me.us/JS85s)

深度阅读

深度思考，升华开发智慧

• 《对于在浏览器中使用UDP协议的一系列考虑》:现代浏览器与网站大多构建于HTTP协议之上，而对于类似 agar.io 这样的实时游戏往往会选择WebSockets协议。此文作者首先介绍了下这些基于TCP的应用层协议面对的所谓对头阻塞问题，然后又讨论了QUIC以及WebRTC在构建专用服务器时的不足。最后，作者分析了使用UDP作为传输协议存在的问题，并且提出了 netcode.io 这个轻量级的传输加密的基于UDP封装的网络协议。( http://suo.im/3j4EV6 )

• 《对比探秘WebAssembly性能优越之谜》:本系列文章通过有趣的漫画介绍了WebAssembly的前世今生，并且与JavaScript就加载、解析、编译、执行等浏览进行了详细对比，从而介绍WebAssembly的性能缘何相较于JavaScript会好上很多。同时作者也强调，WebAssembly与JavaScript各有所长，未来并不会存在太多的竞争，更多的是相辅相成，各司其职。( http://suo.im/3jsTUH )

• 《为何使用Node.js》：本文来自于Node.js的技术专家Tomislav Capan，此文最早发布于2013年，详细介绍了Node.js的内部原理，并且论述了Node.js适用的业务场景与典型的范模式。( http://suo.im/3sFwvm )

• 《槽糕的JavaScript框架们》：此文作者Matt Burgess严肃地吐槽批评了几乎所有的现今流行的JavaScript框架，与他上一篇文章伟大的JavaScript框架一起阅读效果更佳。当然，作者并不是想让大家回到茹毛饮血的岁月，而是希望能以辩证地态度去认识与使用框架。( http://6me.us/e9R )

• 《当我们在谈大前端的时候，我们谈的是什么》：大前端到底指的是什么？事实上大前端并没有明确的定义，它由国内业界发明，甚至没有对应的英文词汇。在客户端开发上，Native与HTML5之争持续快十年，吵了人们都失去兴趣了，从现在来看，并没有谁取代谁，而是有融合的趋势，融合之后的产物就是大前端。本文则是对于大前端的一些探讨，还可以参考《大前端年终总结与展望：大前端时代即将来临？》。( http://6me.us/5XC )

• 《来自Google的API设计指南》：这是来自于Google的网络API设计指南，最早于2014在Google内部推行，指导了包括Cloud APIs等在内的一系列对外服务。该指南同时适用于REST API与RPC API，特别是gRPC API。( http://6me.us/dgoI )

开源项目

乐于分享，共推前端发展

• 《notie》：这是一个轻量级的、零依赖的面向JavaScript的通知、输入以及选择套件库。它允许弹出警示信息、确认输入框、允许用户输入信息、允许用户进行选择以及进行日期选择等。( https://github.com/jaredreich/notie )

• 《跨浏览器通用存储接口Store.js》：Store.js能够根据浏览器情况自动选择合适的底层存储，并且提供了统一的API接口。Store.js始于2010年，目前已经被运用到数以千计的站点中。而近日Store.js发布了2.0版本，其提供了完整的可插拔式的存储支持以及大量的附加功能。( https://github.com/marcuswestin/store.js )

• 《Rapscallion》：React服务端渲染的性能一直是广为诟病，相较于其他前端框架会满上很多，笔者在此文中也进行过简要探讨。而Rapscallion则是新的支持React服务端渲染的开源包体，它支持异步非阻塞渲染，相较于renderToString其能达到将近50%的性能提升。同时Rapscallion官方还为我们准备了基于Redis的缓存实例。( http://suo.im/3YS6pz )

• 《在浏览器中实现自动驾驶汽车》：人工智能与深度学习的浪潮滚滚而来，也给我们带来了很多有趣的应用。该项目利用JavaScript创建了一个完整的自我学习的代理，能够在一个2D环境下控制某个车辆自动规避各种障碍 。用户还可以通过鼠标绘制出新的障碍，而小车可以通过强化学习不断进行自我更新，值得一试。( http://suo.im/4egERz )

• 《Caporal.js》：特性全面的可用于创建Node.js命令行工具的框架，包括了帮助信息生成、自动补全等。( https://github.com/mattallty/Caporal.js )

• 《Gutenberg》：网页打印时的格式错乱一直是个头痛的问题，而Gutenberg,css提供了一系列基本的仅在打印时才会加载的样式，优化专用于打印的格式显示。( https://github.com/BafS/Gutenberg )

巅峰人生

一览众山，聆听巅峰故事