前端每周清单第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中模板语法与数据绑定、常见指令以及响应用户输入等内容；更多Vue相关资料参考这里。( 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等成熟，并且主要使用者以国人为主，与英语社区的交流存在一定语言障碍，同时其灵活性本身也是一种双刃剑，对于某些开发者而言反而会造成困难；更多Vue相关资料参考这里。( 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 )

开源项目

乐于分享，共推前端发展

• 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，注明“前端之巅投稿”。