2016 JavaScript 后起之秀

译者：zxhycxq

原文链接

【译者注：】因格式问题，图片相关的内容，请参照英文原文：risingstars2016.js.org/

JavaScript 社区在创新方面全速前进，几个月后，曾经的趋势就会过时。

2016 已经结束了,你可能会想自己错过了一些重要的东西？别担心,我们正回顾一下主要的趋势。

让我们看看 by the numbers 这个在2016年推动的项目，它比较了在过去12个月，Github上 增加 的 stars 数量。

在 2015年, React 成为最大赢家 ， Flux 赢得了Flux实现的风暴之战。

谁是2016年JavaScript后起之秀呢？

---

目录

1. 2016最流行的项目

2. 前端框架

3. Node.js 框架

4. React Boilerplates

5. Mobile

6. 编译器

7. 构建工具

8. 测试框架

9. IDE

10. 静态网站生成器

下面的图表对比了在过去12个月中，GitHub上 增加的 stars。

我们分析了来自bestof.js.org （关于web平台的最佳项目清单）的项目。

#1、2016最流行的项目

回顾

通过检查去年中最火的10个项目，你可以得到一个很好的关于2016年Web开发环境是怎么样的回顾，你会发现：

• 3个 UI 框架: Vue.JS, React 和 Angular 2

• 一个新的 node.js 包管理器: Yarn

• 构建桌面应用的领先解决方案: Electron

• 快速开始一个新 React 项目的方案A Create React App

• 移动框架: React Native

• 最有名的 CSS 工具包: Bootstrap

• 基于函数式的状态管理库 : Redux

• 一个强大而又灵活的图标库: D3

它讲述了很多关于JavaScript在2016年无所不在和用途广泛的事。

2016年胜利者是...

Vue.JS 去年在 Github 上获得了超过25,000 个stars, 这意味着一天72个stars，这比包括React和Angular在内的其他框架都多。

vue 2, 利用虚拟DOM的性能,在去年十月份发布。

Vue.JS 被一些大公司（包括阿里巴巴-中国最大的电子商务公司）在生产中使用，所以，你可以认为这是一个安全的选择。

它已经拥有相当成熟的生态系统，包括 router (vue-router) 和一个状态管理库 (Vuex).

看起来 Vue.JS 集 React (组件方法)和 AngularJS (由框架特色增强的html代码模板)于一身.

---

#2前端框架

前端框架类应该对 JavaScript 疲劳 负有一定责任。 看起来，每个月一个新的竞争者出现并发出自己的声音，推动创新的步伐！

确切地说，在这个类别中，混合了两种类别的项目

• 包含所有功能的全能框架,创建现代web应用(路由, 数据获取, 状态管理). AngularJS, Angular 2, Ember 或者 Aurelia 均属此类别。

• UI层更轻的解决方案, 如 React, Vue.JS, Inferno...

我们已经注意到Vue.JS(总体第一),让我们看下其他的竞争者。

React 和他的竞争者

React 位列第二,没有前端开发者可以忽视React和它的生态系统。

React 是如此地受欢迎，以至于它鼓舞了众多其他库意图取其精华，去其糟粕，旨在提高浏览器的性能和构建时间。

Inferno 是这个类别中最流行的项目,它声称是最快的可替代React的项目。

在我们的排名中，紧跟 Inferno 之后， Preact也是一个良好的React 替代品。 它的生态系统相当成熟，例如，具有离线功能的模板、路由、模块，以至于你可以在你的项目中使用任何你Preact项目里面的已存在的React库。

Angular 1 和 2

Angular 项目分为2 个库，因为 Angular 2重写了Angular 1，尽管一些概念保持相同。

Angular 2 用TypeScript编写，利用ES6 实现现代化、彻底的框架。

AngularJS是1.x的分支, 它仍然在许多项目中使用，并将在一段时间内保持流行。

值得注意的是 Ember, 尽管有强大的生态系统和社区，依然未进入前10.

如此看来, 与其选择”开箱即用“的包含所有特征的框架， 开发者们在2016年 ，更加喜欢选择他们自己的解决方案，”按菜单点菜“。

#3、Node.js 框架

在2016年，使用以下解决方案创建和部署node.js应用程序从未如此简单

• Now

• Webtask.io

• Stdlib

像Gomix项目更是降低了Node.js的世界的门槛， 使得任何人都可以轻松地从浏览器中“点点点”书写和分享node.js代码。

那么问题来了，如果你想开发一个web程序，应该选择哪个框架呢？

Express

当你使用 node.js 构建Web应用开发，Express经常被考虑为事实上的web服务器。它的（一个简单的核心，你可以使用中间件件扩展）哲学为大多数node.js 开发者所熟悉。

Koa

Koa这些接近于 Express。但它用ES6 生成器构建，避免有时被称为回调地狱的问题。

Feathers

Feathers是一种创建“面向服务”的体系结构的非常灵活的解决方案。 这是创建一个Node.js微服务不错的选择。

Nodal

Nodal 框架的目标是无状态和分布式服务连接到PostgreSQL数据库。

Keystone

Keystone是我所知得到一个管理客户端运行的最佳解决方案之一 ， 目的是管理从MongoDB数据库来的内容。 管理界面从模型自动生成，具有所有CRUD操作和友好的过滤器。

Sails

Sails是一个完整的MVC框架。 受Ruby on Rails的启发（因此名为Sails!）.他已经问世很长时间了。 可以和任何类型的数据库使用，SQL或no-SQL。

Loopback

Loopback是一个有很多的内置功能，包括需要token验证的权限和连接到任何数据库的另一个成熟的框架。

他的杀手级特性是 API 探测功能，通过检查任何用户token的功能，以直观的方式让开发人员检查所有API端点。 如果你必须构建一个API，这绝对是一个不错的选择。

---

#4、React 模板生成器

React 是一个伟大的 UI 库，但使用React和现代Web开发工作流工具需要大量的配置。 那么如何开始创建一个真实世界的应用程序呢？ 这是 React ""模板生成器"" 和其他的“初学者工具包”给出的答案···

创建 React App

Facebook 通过提供一个轻松的叫做创建 React App方法实现需要， 这是使得启动一个新 React 项目非常方便。

Dan Abramov （Redux的创造者，现在在Facebook工作）做了一项伟大的工作： 找到简单和特征之间的正确平衡。 例如，没有花哨的样式解决方案（只是简单的CSS），没有服务器端渲染， 但一切都被很好的打包，开发体验非常棒。

与其竞争者的主要区别是，如果使用Create React App，它将成为项目的依赖项， 所有的黑科技都是隐藏的，你看到的只是你的应用程序代码。 您可以随时升级依赖关系，它不只是一个开始。

React boilerplate

名为React的样板文件有您需要的一模板生成器切， 包括Redux和一些友好的离线功能，很好地利用了web工作者的技术优势。

它让开发人员创建名为渐进式web应用（或PWA）的Web应用程序： 使用名为Service Worker的技术运行的离线Web应用程序， 阅读来自 Nicolás Bevacqua的这篇文章 .

Next.js

Next.js由忙碌的Zeit人员创建，具有服务器端渲染特性， 可用于创建通用应用程序（或同构应用程序，如我们在2015年所说）， 亦即，在代码客户端和服务器端用差不多的代码运行应用程序。

---

#5、Mobile

JavaScript无处不在，你可以使用已知的web开发技术 (HTML, JavaScript, CSS)构建原生移动应用。

React Native

通过React Native，在同样的代码基础上，你可以构建IOS和Android原生移动应用， 使用React开发人员熟悉的概念。 想了解更多关于构建IOS和Android应用，阅读这个教程

其他解决方案,基于 Cordova,依赖Webview来渲染屏幕，并且不如原生解决方案高效。 ""一次编写，到处运行""... 开发者梦想成真了!

Ionic

Ionic 是混合应用理念的先锋，在底层，它基于Cordova来访问移动设备功能。 它非常成熟，有着强大的生态系统。

NativeScript

NativeScript旨在实现与React Native相同的目标（使用Web技术构建真正的移动应用程序）。 它有两种风格，NativeScript Core和NativeScript + Angular 2

展望未来..

一个在2017年密切关注的项目: Weex, 一个构建在Vue.JS之上的移动跨平台UI框架。

#6、编译器

我们在这里谈论生成任何语言（或JavaScript的超集）的JavaScript的编译器（或“transpilers”）。 他们将代码转换为浏览器（或node.js）可以执行的“标准JavaScript”代码。

例如，编译器允许开发人员使用最新版本的JavaScript（ES6）编写代码，而不必担心浏览器支持。

TypeScript

最流行的转译器是 TypeScript,它带给web开发者来自java和c#的静态类型。 事实上， Angular 2使用TypeScript 增加了更多的特性。 这儿有关于在js中使用类型的利弊，阅读这两篇文章，提出你自己的观点。

• 你也不并不需要 TypeScript
• TypeScript: the missing introduction

Babel

Babel与Webpack一起，几乎成为编译ES5代码和标准JavaScript中的库（如React（JSX））所使用的模板的标准。 最初创建的编译ES6，它成为一个更通用的工具，可以完成任何代码转换，感谢这个插件系统。

Flow

Flow不是一个编译器，它只是一个静态类型检测工具，用来“标注”JavaScript代码。 在代码中使用Flow只是增加对于意料之中类型的注释（阅读这里更多关于使用Flow写模块）

它使用Facebook内部的源代码项目，（React，React Native，Flux，Immutable，Jest等）Facebook成为开源世界的主演之一。 这意味深长。

CoffeeScript

CoffeeScript和其精简的语法，受 Python 和Ruby 语法启发，但它在2016年不太流行， 大量的开发者通过使用Babel从 CoffeeScript 转移到ES6。

#7、构建工具

在 2016年,我们很难想象一个没有任何构建过程的Web应用。 通常需要一个构建过程来编译模板和优化资源，以便在生产环境中运行Web应用程序。

Webpack

Webpack 是被用来构建单页应用的主要工具，在React生态系统中运行， 新发布的版本2带有一些有前途的增强功能（查看本文介绍 introduction）

Gulp

Gulp Gulp是一个通用的任务运行器，可以用来处理任何形式的自动化过程包括文件系统，因此它不是Webpack或Browserify的直接竞争者。

类似于 Grunt,Gulp通过聚合工作：你可以要求它压缩和合并一系列资源，但它不会像Webpack或Browserify那样自己处理模块化的JavaScript。

然而，它可以很好地与webpack，即使开发人员倾向于使用npm脚本。

Browserify

Browserify,由于其简单的特性，通常深受node.js开发者的喜爱。

基本上，它需要几个node.js包作为输入，并为浏览器生成一个单一的“构建”文件作为输出。 但是，似乎像Webpack一样的工具，更适合Web应用工作流。

展望未来...

在2017年应该关注的模块管理器,它强调性能: rollup.

它使用ES6模块及一个称为”Tree shaking “功能创建bundle， 只包括您在代码中使用到的功能，而非传输整个库。

---

#8测试框架

最有名的两个测试框架是 Jasmine 和 Mocha， 但最近两个项目在2016年有更多的吸引力: AVA 和 Jest.

AVA

AVA, 由多产的 Sindre Sorhus创建的强调性能（并行测试）和ES6。 AVA的语法接近标准测试框架，如Tape 和 Node-tap。

Jest

Jest,另一个 Facebook 项目, 在过去几周里有很多吸引力。 在React社区众所周知，越来越多的人转向Jest（例如阅读这个故事 ），

它可能成为2017年最流行的测试框架。

Jest内置了良好的mocking 功能，而其他测试框架通常依赖于[Sinon.JS]（sinonjs.org/）这样的库。

---

#9、IDE

关于 IDE ，值得一提的是，最流行的两个IDE是使用Web技术开发的开源项目。

Visual Studio Code

在我们的调查结果中，微软以Visual Studio Code带路。

它提供了关于 TypeScript 和 node.js的良好整合. 一些开发人员提到开发速度的提升，感谢IntelliSense功能的改进(整合了高亮和自动完成).

微软和开源在同一句话里出现，没毛病！

Atom

Atom, 由Github推出， 利用 Electron 创建（类似于其它的桌面应用，包括桌面客户端），并不亚于Visual Stdio Code。

关于 Atom 有趣的事实是: 它主要的语言是 CoffeeScript!

---

#10、静态网站生成器

静态网站生成器是生成一系列.html, .css 和 JavaScript文件的工具， 您可以在任何简单的web服务器（Apache或NGNX）上部署，而不用大惊小怪，或者设置数据库或任何web框架。 正如比尔盖茨所说：

Build sites like it's 1995

静态网站快速，强大，易于维护。

SSG非常受欢迎，因为有很多很好的免费解决方案解决静态网站：

• Github pages

• Gitlab pages

• Netlify

• Surge

• Now static

Hexo

在2016年，利用node.js构建的最流行的SSG就是Hexo，它是个一站式SSG， 接近于像Wordpress这样的CMS系统， 他有很多功能，包括国际化插件。

Gatsby

新出的Gatsby是一个非常有趣的解决方案，它因为使用React生态系统来生成静态html文件，从竞争对手脱颖而出。 事实上，您可以组合React组件，Markdown文件和服务器端渲染，这使它非常强大。

#结论

尽管 JavaScript 疲劳™ 和 戏剧事件 (还记得 ""leftpad gate""), 随着如 Vue.JS 和 React Native项目的崛起， 以及新项目如 Yarn 或Create React App. 对社区而言，2016是一个伟大的年份, 我们一直在谈论2016年Github上的项目，但是更重要的是是开发者的满意度。 那么，如果你想了解更多，请看Sacha Greif的JavaScript现状调查， 我们已经收集了超过9,000份答卷。

是时候考虑2017年的后起之秀在哪里了?

以下是我精选的10个项目，在2016年我喜欢这些项目和观点，2017年将保持增长：

• vue.js势头将不会停止：
• Electron
• Create React App
• React Native
• Gatsby (用于构建这个页面！)
• Yarn:一种快速、可靠和安全的依赖包，可以代替NPM、可在这儿查阅node.js包管理工具的状态
• “渐进式web应用”概念
• Node.js的“微服务”解决方案，能够更好实现部署，例如Now
• Node.js的升级：最新一版对ES6语法有很好的支持
• 压轴的是graphql：我的朋友告诉我，可能要搞个大新闻！