2016年 一样,又到了我们回顾 2017年 Javascript 领域发展与变化的时候。

通过对比各项目过去 12 个月在 GitHub 上新增 star 数量,来评估其在 2017 年度的受关注程度,进而选出 2017 年度 JavaScript 领域崛起的明星项目。


下列图表对比了各个项目在 GitHub 上于过去 12 个月新增的 star 数量。分析的数据来源为 Best of JS 网站 ,一个 WEB 领域优秀项目的精选网站。通过点击项目,可以查看更多信息。

目录

  1. 最受欢迎项目
    Vue.jsReactCreate React AppPuppeteerAxiosVS CodePrettierReact NativeElementElectron
  2. 前端框架
    Vue.jsReactAngularPreactHyperapp
  3. Node.js 框架
    ExpressKoaFastifyGunmicro
  4. React 生态圈
    Create React AppAnt DesignNext.jsStorybookGatsby
  5. Vue 生态圈
    ElementiViewVuexWeexNuxt
  6. 移动开发
    React NativeWeexIonicQuasarNativeScript
  7. 编译工具
    TypeScriptBabelFlowReasonPurescript
  8. 构建工具
    ParcelWebpackGulpRollupPoi
  9. 测试框架
    JestAVAMochaJasmineTape
  10. IDE 和编辑器
    VS CodeAtomReactideBracketsNuclide
  11. CSS in JavaScript
    Styled ComponentsCSS ModulesPolishedGlamorousEmotion
  12. 静态网站生成器
    GatsbyHexoReact StaticPhenomicMetalsmith
  13. GraphQL
    GatsbyReact Starter KitApollo clientGraphQLGraphiQL
  14. 总结

最受欢迎项目

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆

2017 趋势

3.0k
3.5k
3.9k
3.1k
3.2k
3.1k
3.6k
3.3k
3.6k
3.4k
3.1k
3.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

GitHub 数据

创建于
2013-07
star 总数
80.7k☆

链接

GitHub
vuejs/vue
项目主页
vuejs.org
Best of JS
bestofjs.org/projects/vuejs
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
3
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
4
Puppeteer

Puppeteer

Headless Chrome Node API
+22.0k☆
5
Axios

Axios

Promise based HTTP client for the browser and node.js
+21.9k☆
6
VS Code

VS Code

Visual Studio Code
+20.2k☆
7
Prettier

Prettier

Prettier is an opinionated code formatter.
+17.7k☆
8
React Native

React Native

A framework for building native apps with React.
+15.6k☆
9
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
10
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+14.8k☆

概述

下面是不分类别的 2017 年度最受欢迎 Javascript 项目,如果你时间很紧,看这部分就够了。

Vue.js 蝉联冠军

Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40K 的 star。相较于 2016 年的(26K star),今年 Vue.js 领先排行榜第 2 名( React )的优势更大了。

那么,是什么令 Vue.js 如此出众?

  • 首先,它学习曲线平缓,使用了与 React 相似语法更让 WEB 开发者熟悉的组件方案;
  • 发展良好的生态圈,社区中涌现出事实上的官方标准库:路由 vue-router,状态管理库: Vuex
  • 把模板、逻辑和样式放入单个 .vue 文件中的单文件组件设计理念在模块化代行其道的今天显得非常亲切;
  • 被流行的 PHP 框架 Laravel 选为默认的视图引擎(View Engine);
  • Evan You 个人维护,通过众筹方式来获取支持的开源项目,而不是由 Facebook 或 Google 这样的互联网巨头来主导。

也许正因为上述最后一点,Vue.js 在中国拥有大量的拥趸。不仅被中国最大的电商平台阿里巴巴使用,也获得了 GitLab 与 Adobe 这些公司青睐。

React 再次获得亚军

React 和 2016 一样稳占第二名,2017 年它在 GitHub 上获得了超过 27K star(再次明确下,此处我们分析的是今年新增的 star 数量而非所有的 star 数量)。

Create React App,是排行榜的季军,已经成为新建 React 项目的首选方式。它的大获成功让不少 React 样板项目(React Boilerplates)慢慢淡出历史舞台。

Dan AbramovRedux 作者,现就职于 Facebook)创建 Create React App 的确是做了一件了不起的工作,他在功能性与简洁性之间取得了巧妙的平衡,比如,它没有集成花哨的样式解决方案(只使用了纯粹的 CSS)和服务器端渲染,却具有恰到好处的封装,这些造就了良好的开发体验。

Axios

Axios 库是最广泛使用的 HTTP 客户端。它能同时在用户端(在用户端发起 Ajax 请求)与服务器端(在 Node.js 环境中)使用。

Axios 的成功或许与 Vue.js 有比较大的关系,因为大量的 Vue.js 教程都使用它来发起 API 请求获取数据。

Puppeteer

Puppeteer 是今年的大事件之一,是 Google Chrome 团队开发的一个无界面 Chrome 浏览器,即一个在后台运行,且能被代码驱动和控制的浏览器。

它可作如下用途:

  • 在真实浏览器中进行自动化界面测试;
  • 用生成页面快照的方式来实现服务端渲染;
  • 利用 Google Chrome “保存为 PDF” 的功能生成PDF文件;

前端框架

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
3
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
4
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
5
Hyperapp

Hyperapp

1 KB JavaScript library for building web applications.
+8.1k☆

前端框架方面向来是兵家必争之地,不过如今已呈三家鼎足分立,大局尘埃落定之势。

Vue、React、Angular 三足鼎立

毫无疑问,目前公认的 3 大 UI 框架分别是 Vue.jsReactAngular

我们习惯称他们为框架,但准确地讲只有 Angular 是_框架_,Vue.jsReact 应归类为_库_。

前文中,我们已经分析了 Vue.js 的成功因素和它的集成方案。

与 Vue.js 相对应的,React 方面却依然处于碎片化的状态,开发者需要根据自身项目的情况,进行技术选型:

  • 页面间的路由切换问题;
  • 如何获取数据;
  • 如何把数据绑定到表单;
  • 如何存储应用的状态;

相反,Angular 生态圈则更可控也更稳定。有一种叫Angular 准则 的最佳实践用来指导开发。

这可能给人一种 Angular 对于多人协同工作更友好的印象。此外,随着支持静态类型的 TypeScript 加入,Angular 也势必能得到更多熟悉 C# 或 Java 的后端开发人员人观注与青睐。

少即是多

在三巨头之后,能非常有趣的发现第四名 Preact

Preact 是一个 React 的小型替代解决方案:有相同的 API,却只有 3KB 的大小。

类似的还有许多竞争者,为了区别于三巨头,它们在浏览器的性能上下功夫,努力做出自己的特色。

Node.js 框架

1
Express

Express

Fast, unopinionated, minimalist web framework for node.
+6.7k☆
2
Koa

Koa

Expressive middleware for node.js using ES2017 async functions
+5.8k☆
3
Fastify

Fastify

Fast and low overhead web framework, for Node.js
+5.8k☆
4
Gun

Gun

A realtime, decentralized, offline-first, graph database engine.
+3.2k☆
5
micro

micro

Asynchronous HTTP microservices
+3.2k☆

JavaScript 已不仅仅局限于 Web 前端应用,也被越来越多的人使用开发后端应用。Node.js 社区颇具有影响力的 Mikeal Rogers 做出了 Node.js 会在一年内超越 Java的预测。

和其他语言都有事实上的标准框架不同的是(如 Ruby 有 Ruby on Rails,Python 有 Django,PHP 有 Laravel),目前基于 Node.js 写服务端程序还没有一个大家都认可的标准框架。

Express 并不是 2017 年度的 Node.js 框架分类排行冠军,毕竟这个项目已经成立多年,但它已转变为许多框架和 CMS 的基础组件,包括 FeathersKeystoneNest

Express 的极简主义设计似乎完美地符合了当今微服务理念的发展趋势:把一个大型程序解耦成几个小的应用。

与去年相比, 今年有 3 个新面孔进入了 node.js 框架分类排行的 TOP 10:

  • Fastify 是一个受 hapi 启发而开发的通用 Web 框架,也适合用作 JSON HTTP API 服务器;
  • Server.js 注重于“开箱即用”的开发体验;
  • Nest 是一个用 TypeScript 写的框架,其模块化和控制器组合的架构设计,让 Angular 用户感到十分亲切。

React 生态圈

1
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
2
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
3
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
4
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
5
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆

React 只专注于视图层 (View Layer),这在为整个生态圈留下更多发展空间的同时,也为自身快速向前发展创造了机会。这个分类下我们会统计基于 ReactReact Native 构建的项目。

Create React App 通过集成优秀的预置和包,解决了新建 React 应用时要进行繁琐复杂的配置问题。今年 Facebook 也继续保持了频繁更新的节奏,使他成为目前 React 生态中最活跃的项目。

作为 Create React App 的一个成功案例,我们可以看 StackBlitz,这是一个在线 IDE,通过 Create React App,让你在数秒内就可以在浏览器中创建一个应用。

即使 Create React App 已被默认为 React 的新建工具包,开发者们仍然可以有其它选项,例如 React boilerplate,这也是十分受人关注的项目,继承了诸如 GraphQL 的很多有用功能。

Ant DesignAnt Design ProMaterial UI 是 React 组件的样式工具集,它们能帮助程序员在新建应用时而不再担心样式问题。

第 10 名 Recompose 的人气值也证明了开发者们喜欢 React 的原因:它的“函数式”特性,一切皆函数。Recompose 提供了一全套的函数来帮助你走的更远。

Vue 生态圈

1
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
2
iView

iView

A high quality UI Toolkit built on Vue.js 2.0
+9.5k☆
3
Vuex

Vuex

🗃️ Centralized State Management for Vue.js.
+7.2k☆
4
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
5
Nuxt

Nuxt

Versatile Vue.js Framework
+6.3k☆
6
Vuetify

Vuetify

Material Component Framework for Vue.js 2
+6.3k☆
7
Mint UI

Mint UI

Mobile UI elements for Vue.js
+5.5k☆
8
vux

vux

Mobile UI Components based on Vue & WeUI
+4.6k☆
9
vue-router

vue-router

🚦 The official router for Vue.js.
+4.6k☆
10
Vue material

Vue material

Material design for Vue.js
+3.7k☆

特约撰稿人: Evan You

虽然我们很欣赏 Vue.js,但不得不承认我们并不太熟悉它的生态圈。

为此我们找了一位专家来点评下今年 Vue.js 的发展情况,那么还有谁能比 Vue.js 作者更熟悉呢?

Guest Writer evan

在 2017 年,伴随着 Vue.js 用户的增长,许多 Vue.js 生态圈中的项目也得到了令人惊喜地快速成长。

ElementiView 是两个最受欢迎的 UI 组件工具包,专注于桌面端 UI 界面的快速开发。而 Mint UIvux 则相反,是移动端最受欢迎的 UI 工具包。

Vuetify 是一款功能最完备的能同时适用于移动端和桌面端的 Material Design 组件框架内置了包括服务端渲染、PWA、CLI 模板支持等诸多特性。

Nuxt 则是一款基于 Vue.js 的更高级的框架,它能让我们流畅地开发具备服务器端渲染能力的 Vue.js 应用,而它的通用性使我们能用同样的代码库来构建单页引用,甚至生成静态网站。

Weex 是一个可以用 Vue.js 语法和 API 来进行原生渲染的移动桌面应用开发。它由阿里巴巴公司开发,并已运用于世界上一些最高频使用的移动应用中,十分注重性能问题上的优化。

移动开发

1
React Native

React Native

A framework for building native apps with React.
+15.6k☆
2
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
3
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+5.5k☆
4
Quasar

Quasar

Quasar Framework
+3.7k☆
5
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+2.9k☆

无所不能的 JavaScript,自然可已用来编写移动应用,这意为着你可以在 WEB 端与 Native 端复用你的组件。

在本分类中,我们为 3 大前端框架找到了对应的解决方案:

与 2016 年一样,React Native 两年蝉联头名,它能让我们使用把 JavaScript 编译成能够运行在 iOS、Android 甚至是 Windows 系统的原生 APP 应用。

正如视频 使用 React Native 来跨平台编译APP中所特别强调的:“Write One, Run Everywhere” 的承诺已经变成现实。

编译工具

1
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+11.6k☆
2
Babel

Babel

:tropical_fish: Babel is a compiler for writing next generation JavaScript.
+5.7k☆
3
Flow

Flow

Adds static typing to JavaScript to improve developer productivity and code quality.
+5.1k☆
4
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+2.1k☆
5
Purescript

Purescript

A strongly-typed language that compiles to Javascript
+1.2k☆

这里我们将讨论那些编译到标准 JavaScript 代码的语言。

通常情况下,在搭建自己的构建工作流时需要编译器可能有 2 个原因:

  • 想立即使用最新的 JavaScript 语言特性,并把它应用到尽可能多的浏览器中,这类需求让 Babel 获得了成功,很多项目都依赖于它;
  • 想为语言添加新的特性,比如“类型检查”;

对 Javascript 程序员进行分类有个热门的问题是:你是用类型的,还是不用类型的?

JavaScript 本身带有基本的动态类型,但缺乏静态类型。而很多开发者倾向于在代码中使用类型,尤其在大型项目中,因为这样可以让代码变得更为健壮且易于阅读和理解。

如果你需要类型,有两个主流可选项:微软的 TypeScript 和 Facebook 的 Flow(Facebook 在自己的主要项目 ReactReact NativeJest 中都有使用)

你可以从 James Kyle 的文章来感受两者的区别: A Comparison Between Adopting Flow or TypeScript

Loading
Loading
Loading
Loading
Loading
Loading

总结

希望我们今年对 JavaScript 领域做出的回顾能够对你有所启发。

可以看到,Vue.js 两年蝉联冠军并且没有丝毫停下来的征兆。

React 生态圈也最终解决了证书问题,继续繁荣发展的势头。

但是如果让我们评选_2017 项目之星_的话,那绝对是 Prettier。有了它,我们写代码时的再也不用担心格式问题!

State of JavaScript 2017 survey 收集和分析了 23,000 位开发者的调研问卷,能帮助你从另一个视角来解读社区演化的方向。

明年此时,你认为谁将入围 2018 年度的 JavaScript 明星项目

  • 一个基于 GraphQL 的新框架?
  • 一个充分利用 WebAssembly 标准的库, 用来打造浏览器上与众不同的全新体验?

请把你的看法告诉我们!最后,感谢您阅读这篇文章,欢迎自由转发。有任何问题或反馈请在 GitHub 上联系我们!


Chinese (simplified) version

Frank Xu

全栈开发者、Lisp 爱好者, 目前旅居日本 Lisp lover, full stack developer living in Japan

Authors

Sacha Greif

Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.

Available Translations

English

日本語

Français

Español

Indonesia