前端每周清单第 11 期：Angular 4.1 支持 TypeScript 2.3，Vue 2.3 优化服务端渲染，优秀 React 界面框架合集

作者｜王下邀月熊 编辑｜尾尾 由于微信不支持外链，故在相关内容后的提供了短链接，方便大家复制。查看本文带链接版请移步：https://zhuanlan.zhihu.com/p/26680027。 新闻热点

国内国外，前端最新动态

• 《Angular 4.1.0 发布》：近日 Angular 4.1.0 版本发布，该版本中添加了对于 TypeScript 2.2 以及 2.3 的完整支持；除此之外，本版本还添加了一系列的新特性，并且修复了许多的错误。( angularjs.blogspot.com/2017/04/ang… )。与此同时，TypeScript 2.3 也发布了，（blogs.msdn.microsoft.com/typescript/… ）

• 《Airbnb 设计团队发布 React SketchAPP》：Airbnb 设计团队近日发布能够将 React 组件渲染到 Sketch 文档中的开源工具，它为开发工程师与设计师之间提供了便捷的沟通桥梁。( airbnb.design/painting-wi… )

• 《Vue.js 2.3.0 JoJo's Bizarre Adventure 发布》：近日，Vue.js 发布其 2.3.0 版本，带来了一系列性能的提升与 Bug 修复。该版本对于服务端渲染、异步组件等多个重要的部分进行了优化，值得一提的是，官方还创建了新的基于 Vue 的服务端渲染实现指南。( github.com/vuejs/vue/r… )

• 《斯坦福宣布使用 JavaScript 作为计算机课程的首选语言》：近日，某位有 15 年  Java 教学经验的斯坦福教授决定放弃 Java，而使用 JavaScript 作为计算机入门课程的教学语言。斯坦福官方站点将它们新的 106J 课程描述为：JavaScript 是最流行的构建交互式 Web 的开发语言，本课程会用 JavaScript 讲解 CS106A 中的实例。( parg.co/bNX )

• 《Flow 0.45.0 版本发布》：近日 Flow 0.45.0 版本发布，其引入了一系列的新特征，譬如对于 Unicode 字符的支持、import 表达式的支持等；同时，Flow 还进行了部分错误的修复，并且优化了代码运行效率。( github.com/facebook/fl… )

开发教程

步步为营，掌握基础技能

• 《在 Node.js 应用中如何使用 ESLint》：ESLint 是开源的 JavaScript Linting 工具，它能够帮助开发者解决 JavaScript 无类型语言本身带来的一些错误。ESLint 遵循组件化的设计思想，它允许开发者动态地设置使用的规则，而本文即是介绍基础的 ESLint 环境搭建与使用方法的文章。( parg.co/bN4 )

• 《8 小时内学习 Node.js》：Node.js 是基于 Google Chrome V8 引擎的 JavaScript 框架，其能够用于开发类似于视频直播、单页应用等 IO 密集型的 Web 项目。而本文则是提供了完整的从零到一的 Node.js 学习路线图，包含了基础的环境构建、Console 使用、核心模块使用、基本的 Web 服务器搭建等等内容。( parg.co/bNy )

• 《SSH 背后的故事》：SSH 是最常用的协议之一，而本文则是记录了 SSH 获得其默认端口号 22 的背后的故事。除此之外，本文还记录了 SSH 的基本搭建与使用，以及如何与 iptables 协同使用等内容。( www.ssh.com/ssh/port )

• 《CSS-in-JavaScript：基于组件的样式组织》：通过使用内联样式，我们能够利用 JavaScript 带来的可编程性的便利来组织样式代码。它能够为我们提供类似于 CSS 预处理器、命名空间等多方面的辅助。本文则是介绍了几个常见的适用于 CSS-in-JS  技术的场景，譬如排版、空格等。( parg.co/bNe )

• 《你应该掌握的关于调试 Angular 应用的知识》：调试是 Web  开发中不可或缺的部分，特别是对于那些接管已存在代码库的开发者，他们往往需要经过大量的调试才能了解代码的架构与逻辑。不过貌似 Angular 官方文档中尚缺专门对于 Angular 中调试的讲解，本文则是深度浅出地讲解 Angular 应用开发过程中的调试技巧。本文首先介绍了作者调试源代码的技巧，然后介绍了如何使用框架内置的调试 API 来进行应用调试。( parg.co/bN1)

• 《CSS Grid 布局初体验》：最近 CSS Grid 布局大红大紫，吸引了很多开发者的目光。而最新版的 Firefox、Chrome、Opera、Safari 都添加了对于 CSS Grid 的支持。本文则是聚焦于何谓 CSS Grid 布局、它可以做些什么以及如何投放到生产环境等内容。( parg.co/bNW )

工程实践

立足实践，提示实际水平

• 《一系列优秀的 React 界面框架》：本文列举了多个优秀的 React 界面框架，分析了其特性、适用场景以及潜在的缺陷。本文涉及的框架包括 Material UI、React Desktop、Semantic-UI-React、Ant-Design、Blueprint、React Bootstrap、React Toolbox、Grommet、Fabric 等等。( parg.co/bNh )

• 《使用 gRPC-Web 从 Restful JSON API 迁移到类型安全的 Web API》：目前 Web 开发中，REST + JSON 是标准的 Web 应用于 API 服务器之间的交互方式。不过这种缺少强类型限制的、更多倾向于约定的通信方式往往会使得网络调试相对复杂。本文即介绍了如何扩展 gRPC 以及使用 TypeScript 设计新的系统中多个微服务之间的交互协议。( parg.co/bNf )

• 《实测 Vue SSR 的渲染性能：避开 20 倍耗时》：Vue SSR 是 Vue.js 2.0 引入的直出渲染方案，本文将全面解析 virtual-dom-based 及 string-based 的原理并对其进行对比。Vue SSR 的模板是 virtual-dom-based，所以 QQ 空间 Hybrid 业务做 Vue 2.0 的改造的同时，模板类型也从之前的 a 类转换成 b 类。 本文是在实际业务场景中对 Vue SSR 的渲染性能做测试，并解析渲染步骤，给出尝试优化的方案和最终结论。( parg.co/bNv )

• 《从零开始基于 JavaScript 构建简单神经网络》：本文不是纯粹的前端开发文章，对于听说过人工智能与神经网络并且有兴趣的开发者不妨一读。而本文则是渐进地介绍神经网络与深度学习理论基础、如何使用 JavaScript 实现简单的数学公式、如何实现简单的神经网络等内容。( parg.co/bNa )

• 《来自 Vixlet 的 React 优化建议》：近年来 Vixlet 的 Web 团队逐步将其 Web 框架迁移到了 React + Redux 技术架构，本文是来自于 Vixlet 的 React 优化实践总结与建议。( parg.co/bNF )

深度阅读

深度思考，升华开发智慧

• 《在 Web 开发中谨慎使用 CSS in JavaScript》：CSS 是有缺陷的，不过很多项目在选择使用 CSS-in-JavaScript 来组织样式的时候，却是对于 CSS 与 CSS-in-JS 很多的误解。本文以 Styled-Component 为例，列举出了常见的 9 个误解，譬如使用 CSS-in-JS 才能解决命名空间冲突、保证样式的可扩展性、带来了性能提升与样式文件的可组织性等等。( parg.co/bNR )

• 《d3.express：集成交互式编码环境》：本文介绍了尚在开发中的 d3.express，一个类似于 Python Juypter Notebook 的交互式编码环境。d3.express 允许开发者使用大量 d3 内置的功能函数，譬如加载远程的 CSV 文件；并且允许开发者交互地实时预览 SVG、Canvas 等绘制结果，有人认为 d3.express 会是一种基于 JavaScript 的更好的数据可视化解决方案。( parg.co/bNi )

• 《V8 不再使用基准测试引擎 Octane》：JavaScript 基准测试引擎是一段不断进化的历史。随着网页从原始静态页面到现在富客户端应用，都需要基准测试引擎能够与时俱进。SunSpider 是其中比较早的基准测试引擎，它为快速优化 JavaScript 提供了基础。但是，随着虚拟机开发者意识到微基准测试的局限性，基准测试引擎随之更新，针对 SunSpider 的短板进行优化，同时浏览器社区也将 SunSpider 从推荐基准测试引擎中剔除。Octane 基准测试套件最早发布于 2012 年，旨在减轻早期微基准测试引擎的一些缺陷。它源于 V8 的早期简单测试用例，最终成为通用网页性能的基准测试。Octane 包含 17 个不同的测试集，以覆盖各种不同的工作场景。Octane 的内容代表它创建时度量 JavaScript 性能的主流方式。( parg.co/bN9 )

• 《探秘 Google SEO 算法背后的秘密》：SEO 是网站推广过程中不可忽视的一个部分，其全称为搜索引擎优化。本文则是面向 SEO 新手或者老鸟的有关 Google 推荐算法的解构阐述，详细分析了 Google 推荐算法的考量因素，并且给出了如何对网站进行 SEO 优化的实践建议。( parg.co/bNI )

• 《从实用主义视角来看现代前端应用开发》：现代 Web  开发技术变革迅速，而我也经历了从纯 JS 、jQuery、Vaadin、Angular JS、React 等等一系列的变迁。本文则首先思考何谓现代 Web 应用，然后考虑现代 Web 应用常用的项目架构与构建方式，譬如 TypeScript、Webpack、Linting 等内容，然后讨论现代常用的技术架构，譬如 React.j、MobX、依赖注入等相关知识。( dimafeng.com/2017/04/23/… )

开源项目

乐于分享，共推前端发展

• 《Sizzy》：Sizzy 是辅助开发者预览网页在不同屏幕分辨率下显示效果的工具，它能够在同一页上列举出目标网页在多个设备上的显示效果，从而加速响应式开发的速度。( github.com/kitze/sizzy )

• 《create-next-app》：基于 Next.js 的类似于 create-react-app 的快速创建支持服务端渲染的 React 应用的命令行辅助工具。( open.segment.com/create-next… )

• 《Fathom》：Fathom 是 Firefox 开源的用于提取网页中有意义内容的 JavaScript 框架，其能够有效识别页面中的前进 / 后退按钮、地址表单以及主文本内容等等。( github.com/mozilla/fat… )

• 《tamperchrome》：Tamper Chrome 是一个允许你实时截获与修改 HTTP 请求的 Chrome 扩展，其能够用于 Web 安全测试等多个方面，并且它能够运行在包括 Chrome OS 在内的多种操作系统中。( github.com/google/tamp… )

• 《pkg》：pkg 能够将 Node.js 项目打包为单个可执行文件，其允许开发者发布商业级应用而不用担心源代码泄露的风险。pkg 会自动扫描你的 node_modules，然后将需要用到的本地内容打包到可执行文件中。( github.com/zeit/pkg  )