前端每周清单第 19 期： Vue 的优势与劣势；Node.js 有望超越 Java；JS 在嵌入式及物联网的应用现状

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

新闻热点

国内国外，前端最新动态

• Webpack 3.0 正式发布：Webpack 团队近日宣布正式发布 Webpack 3.0 版本。在 2.0 版本发布之后，Webpack 团队与社区联系更为紧密，在优先实现社区希冀的功能需求的同时，提供了更快且更稳定的发布流程。对于本次发布的 Webpack 3.0 版本，用户可以便捷地平滑升级，享受新版本中带来的性能提升与 Magic Comment 等新特征。( https://parg.co/by0 )
• Expo SDK v18.0.0 发布：近日发布的 Expo SDK 18.0.0 版本基于 React Native 0.45，引入了一系列的新特性与性能提升。在该版本中 exp.json 被合并到了 app.json 中，从而简化了 React Native 生态系统与 Expo 使用者之间的差异；并且新的项目不再使用 Expo.registerRootComponent，ExNavigation 也被替换为了 React Navigation。除此之外，Expo 响应的开发工具 XDE、exp、Snack 等也都得到了优化。( https://parg.co/byA )
• Mikeal Rogers: Node.js 会在一年内超越 Java ：在近日的某个采访中，Node.js 的核心创建者与社区管理者之一 Mikeal Rogers， 对 Node.js 在未来的发展表达了乐观的态度。他表示目前全世界范围内已经有了大约八百万开发者在使用 Node.js，并且每年以倍数增长；尽管目前 Java 仍然保持领先，但是如果 Node.js 能保证其发展势头，有望在明年超越 Java。作者在本文中还分享了 Node.js 的现状以及一些发展趣闻和本人的经历，感兴趣者可以阅读原文。( https://parg.co/byE )
• ESLint 4.1.0 发布：ESLint 4.1.0 是对于 ESLint 的小版本更新，包含了部分的新特性引入与此前版本中的异常修复。新版本中的特性包括了细粒度配置，即允许针对同一目录下的不同文件开启不同的配置、允许从 package.json 文件中设置忽略的文件、优化了 autofixes 的用法等等。

开发教程

步步为营，掌握基础技能

• 三分钟交互式介绍 Vue.js ：Vue.js 是近年来逐步流行的轻量级构建前端界面的组件库，其相对平滑的学习曲线确保了开发者能够快速入门使用。而本文作者则循序渐进地介绍了 Vue.js 基础使用知识，并且在每一段中都包含了交互式代码演示；作者依次介绍了 Vue.js 中模板语法与数据绑定、常见指令以及响应用户输入等内容。( https://parg.co/byU )
• 16 行代码构建基于 Node.js 的天气应用：本文是一篇浅显易懂的 Node.js 入门实践介绍，作者利用 Node.js 抓取来自 OpenWeatherMap 的开放数据并且打印在控制台中。本文依次介绍了如何注册并且获得 OpenWeatherMap 的 ApiKey、如何使用 npm 初始化项目、如何利用 request 抓取数据、如何优化命令行交互显示等等。( https://parg.co/byY )
• TDD 与 Vue.js ：在真实的项目中我们免不了需要进行代码测试，而本文即分享如何在 Vue.js 中遵循测试驱动开发的基础知识。本文首先利用 Vue CLI 的默认模板创建了一个简单的组件，然后为其添加部分基础功能，同时会为每个元素添加单元测试。( https://parg.co/byQ )
• React 服务端渲染：本文循序渐进地介绍了 React 中服务端渲染的相关知识，首先讨论了服务端渲染相较于客户端渲染带来的优势、然后介绍了如何在 React 中添加服务端渲染的支持，最后还讨论了如何通过同构的高阶函数在服务端抓取数据然后显示在客户端。( https://css-tricks.com/server-side-react-rendering/ )
• Rust、WebAssembly 与 Webpack ：WebAssembly 是新的运行于 Web 平台的二进制格式，我们能够将 C、C++、Rust 这些语言编译到 .wasm 文件格式中然后在浏览器环境下运行他们；通常这些编译后的代码在包体体积与运行速度上都会比 JavaScript 有明显提升。而本文则着眼于介绍如何在浏览器中执行底层的 Rust 代码，也可以参考这篇文章 ( https://parg.co/by4 ) 来了解更多的关于 WebAssembly 快速实践的知识。( https://parg.co/byh )

工程实践

立足实践，提示实际水平

• 构建生产环境下的 CSS Grid 布局：CSS Grid 为我们带来了真正的网格布局解决方案，会为现有的 Web 布局方式注入新的活力。本文则介绍了 CSS Grid 的基础概念和它带来的机会与挑战，应该如何在实践中利用 CSS Grid 进行应用布局；作者还以 WordPress 主题为例，介绍了真实应用开发中存在的问题、对比了老的解决方法与基于 CSS Grid 的布局方式。本文首先介绍了 CSS Grid 的基础语法与设计模式，然后讨论了在生产环境中应该如何一步步地引入 CSS Grid，包括如何从草稿设计开始进行语义化布局以及对于浏览器兼容性的保证等。( https://parg.co/byc )
• Vue.js 框架的优势与缺陷：Vue.js 已经在国内的很多公司得到了广泛应用，与 Google 的 Angular 以及 Facebook 的 React 鼎足而立，本文作者则是从自己的角度阐述了 Vue.js 目前的优势与潜在缺陷所在。首先 Vue.js 的优势在于其包体较小，良好的文档方便开发者理解与使用，并且能很快地集成到现有项目中，其灵活性与数据通信机制也保证了项目的可扩展性。而目前来看 Vue.js 的缺陷则在于其开发者社区可能不如 React 等成熟，并且主要使用者以国人为主，与英语社区的交流存在一定语言障碍，同时其灵活性本身也是一种双刃剑，对于某些开发者而言反而会造成困难。( https://parg.co/byl )
• JavaScript 在嵌入式设备与物联网中的应用现状：随着近年来 Web 的发展与 JavaScript 的崛起，JavaScript 被应用到了许多原本不曾想象到的场景中，从服务端、工作站、数据库、桌面环境到物联网设备中，都可以见到 JavaScript 的身影。而本文则概括了 JavaScript 在不同的嵌入式微型设备中的应用现状，并且选择了具有代表性的设备介绍了具体的使用场景与实践方法。( https://parg.co/byr )
• 利用 Webpack 加速 Vue.js 应用的四种姿势：Webpack 是开发 Vue.js 单页应用的必须工具之一，它能够帮你处理复杂的编译步骤从而简化开发流程，并且能够帮助你优化应用体积与性能表现。而本文中作者即从单文件组件、优化 Vue 构建配置、浏览器缓存管理、代码分割这四个角度讨论了如何利用 Webpack 提供的特性来加速 Vue.js 应用。( https://parg.co/byC )
• 基于 JavaScript 的机器学习：深入监督学习算法：本文是基于 JavaScript 的机器学习系列的第二部分，主要介绍监督学习算法 kNN。kNN 算法通常被用于分类或者回归问题，本文首先介绍了 kNN 算法的基础原理，然后介绍了如何利用 ml-knn、csvyojson、prompt 等库对 Iris 数据集中的数据进行训练与预测。( https://parg.co/byR )

深度阅读

深度思考，升华开发智慧

• 大前端公共知识梳理：这些知识你都掌握了吗？：近年来，随着移动化联网浪潮的汹涌而来与浏览器性能的提升，iOS、Android、Web 等前端开发技术各领风骚，大前端的概念也日渐成为某种共识。 其中特别是 Web 开发的领域，以单页应用为代表的富客户端应用迅速流行，各种框架理念争妍斗艳，百花竞放。Web 技术的蓬勃发展也催生了一系列跨端混合开发技术，希望能够结合 Web 的开发便捷性与原生应用的高性能性；其中以 Cordova、PWA 为代表的方向致力于为 Web 应用尽可能添加原生体验，而以 NativeScript、ReactNative、Weex 为代表的利用 Web 技术或者理念开发原生应用。 平心而论，无论哪一种开发领域或者技术，他们本质上都是进行图形用户界面（GUI）应用程序的开发，面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以 MFC、Swing、WPF 为主导的桌面应用程序开发时代，其术不同而道相似。( https://parg.co/byS )
• React Express ：针对目前 React 及其生态圈学习曲线过于陡峭的囧境，作者希望创建一个多合一的面向初学者的 React 技术栈学习教程，从最简单的 create-react-app、npm、webpack、babel 等工具的使用，到 ES2015、ES2016、JSX 等基础语法，最后还包括 React、Redux、CSS-in-JS 等工程实践。( https://github.com/dabbott/react-express )
• JavaScript 中存在纯函数吗？：随着函数式编程在前端界面开发中的流行，纯函数的概念相信很多人都很熟悉，不过文本作者认为 JavaScript 中是否存在真正意义上的纯函数还值得商榷。本文首先介绍了纯函数的基本定义，然后给出了我们熟知的 JavaScript 中常见的纯函数定义范式。不过作者认为函数是 JavaScript 中的一等公民，函数变量或者某个 Object 的属性方法都有可能被重新赋值，因此 JavaScript 中无法构建真正严格的纯函数。( https://parg.co/by6 )
• 面向前端开发者的软件开发基本原则：毫无疑问，前端开发者也是软件工程师，作者在本文中介绍了自己归纳的软件工程师应该遵循的基本原则与规范。作者在本文中讨论了避免重复代码（DRY）、单一职责（SRP）、依赖注入（DI）、单元测试等原则，同时给出了一些重构代码与编写 Clean Code 的实践指导书。( https://parg.co/byf )
• HTTP/2 推送技术之难，真的远超我们想象：你深入了解过 HTTP/2 推送技术吗？它远比作者最初想象中更复杂，也更底层。但它在不同浏览器上的表现有非常大差别，让作者感到惊讶。不过，本文并不是吐槽文。作者认为 HTTP/2 推送真的很强大，但并不算能解决所有问题的万灵药。（ https://parg.co/byt ）

开源项目

乐于分享，共推前端发展

• React Flight : React Flight 能够帮我们轻松地构建组件之间的过渡动画，它允许开发者定义初始状态的组件与结束状态的组件，React Flight 会自动地完成组件之间的切换并且添加动画效果。
• react-native-offline-utils ：react-native-offline-utils 允许我们在 React Native 应用中优雅地处理离线情况，能够根据连接情况动态判断需要使用的组件渲染或者数据抓取逻辑。同时 react-native-offline-utils 还能够平滑地集成 Redux，能够自动转发特殊的离线 Action。( https://github.com/rauliyohmc/react-native-offline-utils )
• decaffeinate ：CoffeeScript 在很长一段时间内帮我们解决了传统 JavaScript 中存在的痛点，不过随着 ES6&ES7 的逐步流行，我们还是要从 CoffeeScript 中回归到 JavaScript；decaffeinate 正是能够方便地将 CoffeeScript 代码转化为现代的 JavaScript 代码。( https://github.com/decaffeinate/decaffeinate )
• golden-layout ：golden-layout 是非常强大的基于 JavaScript 的 Web 布局工具，它支持窗口的拖拽、缩放以及原生式的弹窗，同时 golden-layout 还提供了丰富的接口以方便动态增删元素、修改布局或者自定义主题。golden-layout 官网还提供了与 RequireJS、React、Angular 等多种其他流行框架协同使用的示例。( http://golden-layout.com/ )

前端之巅

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

感谢韩婷对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。