4.3-Frontend

# 前端每周清单第 9 期：React Studio 1.0.2、ECharts GL 1.0 alpha 发布；向 jQuery 用户介绍 Vue

前端 前端每周清单

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

新闻热点

国内国外，前端最新动态

• 《Chrome 59 即将支持 Headless 模式》：近日，Chrome 宣布在 59 版本中开始支持 Headless/Server 模式，允许用户加载网页、提取出 DOM 这样的元数据、生成网页内容的位图等等 Chromium 与 Blink 所支持的功能。同时，著名 Headless 浏览器 PhantomJS 的某位核心开发者宣布退出 PhantomJS，噫吁唏。( https://parg.co/bRi )

• 《Prettier 1.0 发布》：Prettier 是目前最为流行的 JavaScript 格式化工具之一，其能够将代码编译为 AST 然后将格式化之后的代码写回到文件中。在 1.0 正式版中，Prettier 对于 JSX、CSS-in-JS、装饰器、Flow 等语法添加了支持或者优化了格式结果，并且修复了一系列的错误。Prettier 可以同时在命令行、WebStorm、VSCode 等常见的编辑器中使用，笔者建议开发团队应该统一格式化工具以避免无谓的提交。( http://jlongster.com/prettier-1.0 )

• 《Meteor 1.4.4 发布》：近日 Meteor 宣布发布其 1.4.4 版本，包括了对于部分核心依赖的更新与错误的修复，并且提升了整体的稳定性，同时为 Cordova 应用添加了基于 Google 权限认证的功能。( https://parg.co/bRs )

• 《React Studio 1.0.2 发布》：React Studio 是基于 React 的交互式开发工具，在其新版本中优化了界面布局，使得开发者更方便地添加组件到项目中；提供了回撤、隐藏等功能，并且加入了许多新的模板项目，允许自定义 CSS 动画类型等功能。( https://parg.co/bRC )

开发教程

步步为营，掌握基础技能

• 《完整的 HTTP/2 服务端推送指南》：HTTP/2 相较于 HTTP/1 带来了极大的性能提升，而其中的服务端推送允许服务端在客户端请求之前主动地推送未来可能需要的静态资源；这种方式能够较好地在实现 HTTP/1 优化中常用的内联方式的同时避免其带来的实践中的缺陷。而本文则是详细地介绍服务端推送的原理、其解决的问题以及在常见服务器中的配置方式。( https://parg.co/bRH )

• 《利用 React 打造特斯拉电池仪表盘》：本系列文章介绍了如何用 React、Redux 等相关前端技术来打造简单的特斯拉电池仪表盘界面。其第一篇博客着眼于如何使用 create-react-app 创建基本项目并且使用组件内状态来存储数据；而第二篇博客则介绍了如何使用 Redux 来管理外部状态。( https://parg.co/bR3 )

• 《基于 JavaScript 构建数据表达式分词器》：本文是一篇挺有意思的文章，介绍如何利用 JavaScript 解构常见数学表达式并且从中提取出相关实体。本文涉及到的内容包括对于分词器的简单介绍、对于抽象语法树 AST 的介绍以及最终如何使用代码来实现分词算法。( https://parg.co/bRO )

• 《面向重度 jQuery 开发者的 Vue.js 介绍》：本文是一位经验丰富的开发者，在将原有的基于 jQuery 工程重构为基于 Vue.js 工程的过程中总结出的经验与认识介绍。本文首先从零开始介绍如何搭建 Vue.js 基础项目并且一步一步地实现应用的各种特征，同时还对比了利用 Vue.js 与 利用 jQuery 实现的差异性以及二者在设计思想上的区别。( https://parg.co/bRN )

工程实践

立足实践，提示实际水平

• 《Sketch 43 会改变你的工作流》：在近日的 Sketch Meetup 中 Andree 再次确认下个版本的 Sketch 会提供新的开放式文件格式，允许开发者自定义程序来读取或者修改文件。Andree 还提到了所谓设计即代码、代码即设计的理念，本文作者认为即使这种方式还是存在一定的缺陷，但是这种新的开源格式仍然会为开发者与设计者的日常工作流带来极大的改变。( https://parg.co/b4w )

• 《TypeScript 在 Slack 的实践分享》：维护大型的跨平台的 JavaScript 代码库是一件非常具有挑战性的工作，无论是从 Chrome 的 JavaScript 中传递对象给 Objective-C 或者单纯的接受来自 Node.js 中的回调结果，你都需要保证不同的代码对于通讯对象的期望之间的一致性。而本文即是在开发跨平台多终端的应用中，Slack 使用 TypeScript 来约束类型，从而避免意外的类型不一致导致的崩溃的实践经验分享。( https://parg.co/bRR )

• 《Twitter Lite 与高性能可扩展 React PWA 实践》：本文是 Twitter 工程师团队介绍其在开发世界上最大的 PWA 应用之一，Twitter Lite 过程中克服各种各样的性能瓶颈的实践经验。其核心思想包括基于路由的代码切分、避免可能导致掉帧的函数、使用压缩比更好的图片资源、以及优化 React 更新过程、避免频繁修正 Redux Store、延迟注册 ServiceWorker 等部分。( https://parg.co/bRV )

• 《React Native 性能优化》：本文作者承接 React Native 性能瓶颈与解决方案，以新的实际开发中的例子讨论如何优化 React Native 应用性能。作者以类似于 Android 中 Toolbar 的列表为例，介绍了如何对性能进行测试、使用原生的滚动监听、使用声明式接口等多个方面的内容。( https://parg.co/bRk )

深度阅读

深度思考，升华开发智慧

• 《2017 里 JavaScript 带给我的感动》：本文作者纵览了在 2017 年中 JavaScript 生态圈可能迎来的一系列巨大变革。他首先对比了 JavaScript 与 Reason，浅述了二者的优劣对比。然后介绍了 WebAssembly 以及另一个新兴语言 Rust 未来可能在 JavaScript 生态圈中占据的一席之地。最后，作者还介绍了 Docker、Now.sh 以及 Github Pages 等一系列优秀的辅助开发工具，并且畅想了去中心化浪潮下 Web 的未来发展。( https://parg.co/bRh )

• 《算法驱动设计：人工智能是如何改变设计流程的》：大数据时代人工智能不断渗透工作生活的方方面面，而本文作者则是从设计的角度出发，介绍了如何在实际工作中贯彻算法驱动设计的理念，利用算法模型与历史数据来判断什么样的设计可能更会受到用户的青睐；作者还以完整的设计实例介绍了从构建到素材准备的流程。( https://parg.co/bRt )

• 《后 MVC 时代》：在很长一段时间里，MVC(Model-View-Controller)架构是构建应用的黄金法则，而近几年随着 React，Vue.js，Angular 等以组件为中心的库的流行，MVC 架构在前端却趋于平寂。开发者往往将模型、视图与控制器耦合在单个实体内，而打破了传统的 MVC 架构中的约束。类似于 Flux 或者响应式编程的设计思想也改变了应用状态的处理方式，不同于 MVC 中的双向绑定，而是数据在实体之间单向流动。本文即是讨论在所谓后 MVC 时代的 GUI 应用架构的思考。( https://realm.io/news/the-post-mvc-age/ )

• 《浏览器中的原生 ES6 模块：是时候重新考虑打包发布流程？》：ES6 模块标准出台已有数年，而目前最流行的方式就是使用 Babel 等转译工具将 ES6 模块转译为 CommonJS 等模块语法以发布到浏览器中运行。而随着 Safari、Firefox、Edge 都纷纷支持原生 ES6 模块，本文作者也重新思考是否需要改变现有的应用打包与发布流程。本文首先对比介绍了基于 Babel/Webpack 的打包与使用原生的 ES6 模块之间的异同，讨论了真实环境下直接使用原生模块的可行性等内容。( https://parg.co/bRL )

开源项目

乐于分享，共推前端发展

• 《Electron Forge》：Electron Forge 是构建现代 Electron 应用的完整工具集，其整合了很多现存的用于 Electron 的开发工具，去芜存菁，将它们整合为简单易用的能够直接上手的辅助开发工具。( https://parg.co/bRf )

• 《Elasticlunr.js》：Elasticlunr.js 是轻量级的提供了浏览器端搜索与离线搜索的全文搜索引擎，其基于 Lunr.js 开发不过提供了更加灵活的功能。Elasticlunr.js 支持基于时间与指定域的查询，它有点类似于 Solr 不过更为灵活并且对于开发者更为友好。( http://elasticlunr.com/ )

• 《CodeSandbox》：CodeSandbox 是一个在线的 React 编辑器，其能够帮助开发者更快更方便地展示与分享基于 React 的项目。CodeSandbox 会自动化执行类似于编译、打包、依赖管理等多种项目构建中的常见任务，同时 CodeSandbox 还允许开发者添加自定义的 node_modules 中的依赖。( https://parg.co/bR8 )

• 《Slate》：Slate 是类似于 Draft.js 的灵活可自定义的富文本编辑器构建框架，Slate 允许你构建功能丰富的类似于 Medium、Dropbox Paper、Canvas 这样的编辑器。Slate 提供了各式各样的插件，你可以基于 React 与 Immutable 来构建自定义的插件，并且指定哪些插件属于核心插件。( https://docs.slatejs.org/ )

  巅峰人生

前端之巅

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