前端每周清单第53期：Go与WebAssembly, React Suspense演练, CSS技巧

作者：王下邀月熊 编辑：徐川

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• Go语言的WebAssembly架构:本文档描述了Go编译器中即将加入的WebAssembly架构设计方案，该方案会被合入目前的Go 1.11版本。这也意味着我们可以使用Go来编写WebAssembly模块代码，从而也为Go提供了类似于JavaScript这样能够编写Web端应用的能力。可预见该架构会对软件工程生态体系有一定积极的影响。

• Flutter beta 1发布:作为Mobile Word Congress 2018的一部分，近日Flutter正式发布了其首个Beta版本。Flutter是Google新的移动端界面框架，用来帮助开发者快速构建高质量的跨平台原生界面。Flutter致力于实现以下目标：原生的无缝集成与性能保障，高效率的开发以及大量跨平台的UI工具/组件库。

• 再见，PhantomJS:随着Chrome与Firefox纷纷推出了Headless模式，原本许多的PhantomJS开发活动都逐渐停滞。近日，PhantomJS宣布将会归档其项目，并且停止开发操作；PhantomJS 2.1.1将会是最后一个稳定版本。感谢PhantomJS这些年来带给我们的功能特性，它已经很好地完成了最初的目标与历史使命，感谢&再见。

开发教程

步步为营，掌握基础技能

• Google发布机器学习速成课程:为了帮助更多的人了解与学习机器学习相关的知识技能，Google发布了人工智能学习网站Learn with Google AI。本次课程，一共是15小时，其中包括25节课程以及40多项练习，该课程并不要求任何前置的学习内容，非常适合于各个层次的初学者。非常值得一提的是，本次课程提供了非常完美的中文支持，包括中文配音，中文课程材料以及中文概念讲解。更多相关内容参考 数据科学与机器学习实战手册。

• 深入探究ES2018与ES2019:本小册是对于ES2018与ES2019的特性进行全面的介绍与讲解，目前涵盖了ES2018中的Asynchronous iteration, Rest/Spread Properties, RegExp named capture groups, RegExp Unicode property escapes, RegExp lookbehind assertions, s (dotAll) flag for regular expressions, Promise.prototype.finally(), Template Literal Revision等特性。更多相关内容参考 现代JavaScript开发：语法基础与工程实践。

• React Suspense演练: Dan在JSConf Iceland上演示的Async React Demo吸引了大量的关注，并为我们介绍了Time Slicing与React Suspense这两个特性。本文即是对于Movie Search案例的分析与实践，从而了解React Suspense API的相关特性，包括了simple-cache-provider.SimpleCache, simple-cache-provider.createResource, ReactDOM.unstable_deferredUpdates等。更多相关内容参考现代Web全栈开发与工程架构–React篇。

工程实践

立足实践，提示实际水平

• 你或许不知道的CSS技巧:本文是对于CSS中的一些特性用法进行介绍，有点类似于 30 Seconds of CSS 这样的CSS实用代码片。本文涉及到的技巧譬如基于宽度的垂直排版，多背景动画，字体简写等等。更多相关内容参考 CSS CheatSheet。

• Electron应用自动更新方案设计:在发布一个桌面应用之前，必须要考虑的一个问题是：怎么更新(迭代)？作者设计和实现了Electron应用的一整套自动更新方案，并且已应用于产品上，所以写下这篇文章和大家分享，可以怎么设计和实现一个Electron应用的自动更新，我们对于自动更新需求的考虑可能比你想得稍微复杂一些。本文将首先从需不需要更新开始谈起，接着谈怎么从人肉更新一步步进化到无痛的自动更新。然后，我会向你介绍，一个完善后的自动更新需求可以是怎样的。最后，也是最关键的一部分：我们该采取怎样的更新思路，又该如何设计我们的产品逻辑。更多相关内容参考现代Web应用架构与性能调优。

• 前端案例分析:在前端学习实践的过程中，我们可能会阅读很多类似于构建Todo List的文章，他们是不错的入门文章，却无法告诉你如何来解决真实的，大规模应用中的问题。本文则是列举了一系列企业级应用的实践案例，包括了来自Facebook, Twitter, Google, Airbnb等公司的演讲或者文章。更多相关内容参考 Awesome Web Reference。

深度阅读

深度思考，升华开发智慧

• Didact Fiber: Incremental reconciliation:这是一篇非常不错的深入讲解Fiber实现的文章。Didact是作者实现的类React教学型框架，而本文则瞩目于如何将didact中的部分代码重写以使其适配于最新的React 16架构；作者直接使用了来自React代码库中的结构、变量以及函数名，从而方便理解。本文依次介绍了为何需要Fiber，如何调度MicroTasks，Fiber的数据结构、流程与实现等内容。更多相关内容参考现代Web全栈开发与工程架构–React篇。

• 重构Redux:随着React发布新的Context API，又有了许多关于Redux的讨论：状态管理是否依然解决？众所周知，状态管理一直是应用开发中的难点之一，本文即是对于状态管理中常见的问题进行重新考量：我们是否需要额外的状态管理库，Redux是否值得使用，是否有更好地状态管理方案等。更多相关内容参考现代Web应用架构与性能调优。

• 从JS到DOM的双向追踪: Chrome 66中针对内存泄漏分析进行了优化，从而方便开发者调试内存泄漏相关的问题。现在Chrome DevTools能够追踪并且快照C++ DOM对象，然后从JavaScript对象开始列举出所有的可达对象。该特性是V8垃圾收集器中提供的新C++追踪机制的应用之一，更多相关内容参考Web内存泄漏分析。

开源项目

乐于分享，共推前端发展

• Pandora.js: Pandora.js是阿里开源的Node.js应用管理工具，其基于TypeScript开发，提供了管理、衡量、追踪等一系列的特性。Pandora.js源于多年企业级Node.js应用管理实践，致力于提供从管理监控，到调试部署等全流程的支持。

• filepond: filepond是灵活有趣的JavaScript文件上传控件，它提供了漂亮的过场交互动画以及良好的用户体验，并且利用客户端图片优化技术来保证高性能的上传。

• just-dashboard: just-dashboard能够基于YAML或者JSON配置文件生成数据面板，从而避免了开发者或者数据工程师重复的劳动。just-dashboard还允许使用jq查询，或者指定某个组件的数据抓取地址，just-dashboard会在运行时动态抓取数据并且渲染为图表。

• prompts: prompts是可以在命令行中使用的，轻量级、美观大方、用户友好的交互式提示。与其他框架相比，prompts没有过多的外部依赖，尽可能地简化内部复杂度。

巅峰人生

• 过完年跳槽，要考虑哪些要素？:发完奖金了，过完年了，又到了人心躁动的时节。不少IT圈的小伙伴可能在思考，要不要换工作。今天和大家聊聊IT人换工作这个话题，楼主也面试过的不少候选人，站在面试官的角度，谈谈什么样的IT人会在面试中加分。

前端之巅

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