5.1-Frontend

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

前端 前端每周清单

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

新闻热点

国内国外，前端最新动态

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

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

• 《斯坦福宣布使用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/flow/releases/tag/v0.45.0 )

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

开发教程

步步为营，掌握基础技能

• 《在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/23/modern-frontend/ )

  开源项目

乐于分享，共推前端发展

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

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

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

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

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

巅峰人生

前端之巅

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