前端每周清单第 11 期：Angular 4.1支持TypeScript 2.3，Vue 2.3优化

摘要：斯坦福宣布使用作为计算机课程的首选语言近日，某位有年教学经验的斯坦福教授决定放弃，而使用作为计算机入门课程的教学语言。斯坦福官方站点将它们新的课程描述为是最流行的构建交互式的开发语言，本课程会用讲解中的实例。

前端每周清单第 11 期：Angular 4.1支持TypeScript 2.3，Vue 2.3优化服务端渲染，优秀React界面框架合集 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的  Web 前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。

前端 前端每周清单

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

国内国外，前端最新动态

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

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

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

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

《Angular 4.1.0 发布》：近日 Angular 4.1.0 版本发布，该版本中添加了对于 TypeScript 2.2 以及 2.3 的完整支持；除此之外，本版本还添加了一系列的新特性，并且修复了许多的错误。( http://angularjs.blogspot.com... )

步步为营，掌握基础技能

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

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

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

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

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

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

立足实践，提示实际水平

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

《使用 gRPC-Web 从 Restful JSON API 迁移到类型安全的 Web API》：目前 Web 开发中，REST + JSON 是标准的 Web 应用于 API 服务器之间的交互方式。不过这种缺少强类型限制的、更多倾向于约定的通信方式往往会使得网络调试相对复杂。本文即介绍了如何扩展 gRPC 以及使用 TypeScript 设计新的系统中多个微服务之间的交互协议。( https://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的渲染性能做测试，并解析渲染步骤，给出尝试优化的方案和最终结论。( https://parg.co/bNv )

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

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

深度思考，升华开发智慧

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

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

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

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

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

乐于分享，共推前端发展

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

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

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

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

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

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