2017年 JavaScript 明星项目

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

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



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

最受欢迎项目

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
在 2017 年, Vue.js 增加了 40.0k 个 star, 在 GitHub JavaScript 项目 分类中排名第 1。 Tweet
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月
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
在 2017 年, React 增加了 27.8k 个 star, 在 GitHub JavaScript 项目 分类中排名第 2。 Tweet
2.0k
2.0k
2.6k
2.3k
2.3k
2.0k
2.6k
2.2k
2.5k
2.8k
2.5k
2.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
在 2017 年, Create React App 增加了 22.5k 个 star, 在 GitHub JavaScript 项目 分类中排名第 3。 Tweet
2.1k
1.8k
2.3k
1.8k
2.2k
1.8k
1.9k
2.3k
1.5k
1.7k
1.7k
1.5k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Puppeteer

Puppeteer

Headless Chrome Node API
+22.0k☆
在 2017 年, Puppeteer 增加了 22.0k 个 star, 在 GitHub JavaScript 项目 分类中排名第 4。 Tweet
3.9k
2.9k
3.0k
2.2k
1.9k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Axios

Axios

Promise based HTTP client for the browser and node.js
+21.9k☆
在 2017 年, Axios 增加了 21.9k 个 star, 在 GitHub JavaScript 项目 分类中排名第 5。 Tweet
1.5k
1.7k
2.2k
2.0k
1.9k
1.8k
1.9k
1.9k
1.7k
1.7k
1.9k
1.7k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
VS Code

VS Code

Visual Studio Code
+20.2k☆
在 2017 年, VS Code 增加了 20.2k 个 star, 在 GitHub JavaScript 项目 分类中排名第 6。 Tweet
897
1.4k
1.8k
1.7k
1.5k
1.3k
1.4k
1.6k
1.6k
2.5k
2.6k
1.8k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Prettier

Prettier

Prettier is an opinionated code formatter.
+17.7k☆
在 2017 年, Prettier 增加了 17.7k 个 star, 在 GitHub JavaScript 项目 分类中排名第 7。 Tweet
114
1.1k
1.3k
2.6k
1.0k
1.8k
1.0k
1.3k
721
1.4k
956
1.5k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
React Native

React Native

A framework for building native apps with React.
+15.6k☆
在 2017 年, React Native 增加了 15.6k 个 star, 在 GitHub JavaScript 项目 分类中排名第 8。 Tweet
1.2k
1.3k
1.6k
1.3k
1.3k
1.3k
1.3k
1.2k
1.1k
1.2k
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
在 2017 年, Element 增加了 14.9k 个 star, 在 GitHub JavaScript 项目 分类中排名第 9。 Tweet
1.4k
1.2k
1.8k
1.2k
1.1k
1.0k
1.1k
1.1k
1.3k
1.4k
1.3k
1.1k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+14.8k☆
在 2017 年, Electron 增加了 14.8k 个 star, 在 GitHub JavaScript 项目 分类中排名第 10。 Tweet
1.3k
1.2k
1.4k
1.3k
1.3k
1.1k
1.2k
1.2k
1.1k
1.3k
1.2k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
11
Bootstrap

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first project
+14.5k☆
在 2017 年, Bootstrap 增加了 14.5k 个 star, 在 GitHub JavaScript 项目 分类中排名第 11。 Tweet
996
1.0k
1.4k
1.3k
1.1k
1.0k
1.1k
1.4k
1.2k
1.5k
1.3k
1.1k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
12
Parcel

Parcel

📦🚀 Blazing fast, zero configuration web application bundler
+14.0k☆
在 2017 年, Parcel 增加了 14.0k 个 star, 在 GitHub JavaScript 项目 分类中排名第 12。 Tweet
1
1
13.9k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
13
Node.js

Node.js

Node.js JavaScript runtime
+13.7k☆
在 2017 年, Node.js 增加了 13.7k 个 star, 在 GitHub JavaScript 项目 分类中排名第 13。 Tweet
869
1.1k
1.2k
1.0k
1.1k
1.1k
1.0k
1.2k
946
1.8k
1.5k
1.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
14
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
在 2017 年, Ant Design 增加了 13.3k 个 star, 在 GitHub JavaScript 项目 分类中排名第 14。 Tweet
936
1.1k
971
910
928
941
1.1k
887
1.2k
1.3k
1.6k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
15
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting a
+13.1k☆
在 2017 年, Webpack 增加了 13.1k 个 star, 在 GitHub JavaScript 项目 分类中排名第 15。 Tweet
1.4k
1.2k
1.2k
1.1k
1.1k
1.2k
1.1k
995
714
1.0k
1.0k
1.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
16
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
在 2017 年, Next.js 增加了 12.7k 个 star, 在 GitHub JavaScript 项目 分类中排名第 16。 Tweet
893
664
2.1k
1.3k
1.2k
745
1.2k
856
697
1.2k
864
960
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
17
D3

D3

Bring data to life with SVG, Canvas and HTML.
+12.7k☆
在 2017 年, D3 增加了 12.7k 个 star, 在 GitHub JavaScript 项目 分类中排名第 17。 Tweet
1.1k
1.1k
1.6k
1.3k
1.1k
768
1.0k
1.0k
985
879
879
797
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
18
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
在 2017 年, Angular 增加了 12.2k 个 star, 在 GitHub JavaScript 项目 分类中排名第 18。 Tweet
827
949
1.4k
1.0k
884
911
983
989
925
1.1k
1.2k
930
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
19
Bulma

Bulma

Modern CSS framework based on Flexbox
+12.0k☆
在 2017 年, Bulma 增加了 12.0k 个 star, 在 GitHub JavaScript 项目 分类中排名第 19。 Tweet
1.1k
867
927
840
907
873
1.1k
1.1k
888
1.7k
1.0k
778
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
20
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+11.6k☆
在 2017 年, TypeScript 增加了 11.6k 个 star, 在 GitHub JavaScript 项目 分类中排名第 20。 Tweet
738
855
972
1.1k
928
936
976
1.0k
818
1.2k
1.1k
992
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
21
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
在 2017 年, Preact 增加了 10.4k 个 star, 在 GitHub JavaScript 项目 分类中排名第 21。 Tweet
779
498
575
634
829
920
729
2.0k
1.9k
545
401
532
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
22
Redux

Redux

Predictable state container for JavaScript apps
+10.1k☆
在 2017 年, Redux 增加了 10.1k 个 star, 在 GitHub JavaScript 项目 分类中排名第 22。 Tweet
870
821
1.1k
913
820
780
767
809
738
812
876
797
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
23
Animate.css

Animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
+10.0k☆
在 2017 年, Animate.css 增加了 10.0k 个 star, 在 GitHub JavaScript 项目 分类中排名第 23。 Tweet
784
757
942
922
817
764
776
822
777
894
961
743
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
24
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
在 2017 年, Storybook 增加了 9.7k 个 star, 在 GitHub JavaScript 项目 分类中排名第 24。 Tweet
467
429
666
627
807
940
704
1.0k
671
837
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
25
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
在 2017 年, Gatsby 增加了 9.7k 个 star, 在 GitHub JavaScript 项目 分类中排名第 25。 Tweet
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

概述

下面是不分类别的 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☆
在 2017 年, Vue.js 增加了 40.0k 个 star, 在 GitHub 前端框架 分类中排名第 1。 Tweet
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月
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
在 2017 年, React 增加了 27.8k 个 star, 在 GitHub 前端框架 分类中排名第 2。 Tweet
2.0k
2.0k
2.6k
2.3k
2.3k
2.0k
2.6k
2.2k
2.5k
2.8k
2.5k
2.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
在 2017 年, Angular 增加了 12.2k 个 star, 在 GitHub 前端框架 分类中排名第 3。 Tweet
827
949
1.4k
1.0k
884
911
983
989
925
1.1k
1.2k
930
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
在 2017 年, Preact 增加了 10.4k 个 star, 在 GitHub 前端框架 分类中排名第 4。 Tweet
779
498
575
634
829
920
729
2.0k
1.9k
545
401
532
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Hyperapp

Hyperapp

1 KB JavaScript library for building web applications.
+8.1k☆
在 2017 年, Hyperapp 增加了 8.1k 个 star, 在 GitHub 前端框架 分类中排名第 5。 Tweet
1.2k
779
148
113
2.1k
671
321
746
333
189
1.5k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
dva

dva

🌱 React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)
+5.3k☆
在 2017 年, dva 增加了 5.3k 个 star, 在 GitHub 前端框架 分类中排名第 6。 Tweet
315
403
463
402
387
384
447
525
463
405
551
510
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Inferno

Inferno

An extremely fast, React-like JavaScript library for building modern user interfaces
+4.6k☆
在 2017 年, Inferno 增加了 4.6k 个 star, 在 GitHub 前端框架 分类中排名第 7。 Tweet
1.6k
396
375
237
276
193
239
364
500
151
149
116
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Moon

Moon

🌙 ⚡️ A minimal, blazing fast UI library.
+3.7k☆
在 2017 年, Moon 增加了 3.7k 个 star, 在 GitHub 前端框架 分类中排名第 8。 Tweet
20
356
226
403
1.9k
566
98
96
73
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Angular 1

Angular 1

AngularJS - HTML enhanced for web apps!
+3.6k☆
在 2017 年, Angular 1 增加了 3.6k 个 star, 在 GitHub 前端框架 分类中排名第 9。 Tweet
381
388
392
277
365
347
323
317
270
217
203
130
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Rax

Rax

A universal React-compatible render engine.
+2.6k☆
在 2017 年, Rax 增加了 2.6k 个 star, 在 GitHub 前端框架 分类中排名第 10。 Tweet
1.1k
268
119
124
100
98
122
104
328
87
77
80
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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

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☆
在 2017 年, Express 增加了 6.7k 个 star, 在 GitHub Node.js 框架 分类中排名第 1。 Tweet
542
586
613
587
583
552
512
525
485
610
560
524
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Koa

Koa

Expressive middleware for node.js using ES2017 async functions
+5.8k☆
在 2017 年, Koa 增加了 5.8k 个 star, 在 GitHub Node.js 框架 分类中排名第 2。 Tweet
422
510
609
486
479
489
421
517
465
441
481
460
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Fastify

Fastify

Fast and low overhead web framework, for Node.js
+5.8k☆
在 2017 年, Fastify 增加了 5.8k 个 star, 在 GitHub Node.js 框架 分类中排名第 3。 Tweet
109
15
87
56
17
91
99
60
2.1k
2.2k
611
342
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Gun

Gun

A realtime, decentralized, offline-first, graph database engine.
+3.2k☆
在 2017 年, Gun 增加了 3.2k 个 star, 在 GitHub Node.js 框架 分类中排名第 4。 Tweet
181
234
128
106
223
1.3k
162
183
87
128
198
184
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
micro

micro

Asynchronous HTTP microservices
+3.2k☆
在 2017 年, micro 增加了 3.2k 个 star, 在 GitHub Node.js 框架 分类中排名第 5。 Tweet
434
277
272
252
273
177
244
419
230
198
223
157
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Keystone

Keystone

node.js cms and web app framework
+3.0k☆
在 2017 年, Keystone 增加了 3.0k 个 star, 在 GitHub Node.js 框架 分类中排名第 6。 Tweet
289
279
289
252
250
252
314
264
193
225
197
235
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Nest

Nest

A progressive Node.js framework for building efficient and scalable server-side applications on top
+3.0k☆
在 2017 年, Nest 增加了 3.0k 个 star, 在 GitHub Node.js 框架 分类中排名第 7。 Tweet
296
120
61
165
391
667
429
385
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Feathers

Feathers

A REST and realtime API layer for modern applications.
+3.0k☆
在 2017 年, Feathers 增加了 3.0k 个 star, 在 GitHub Node.js 框架 分类中排名第 8。 Tweet
305
273
280
257
293
258
250
234
190
232
226
165
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Server.js

Server.js

Simple and powerful server for Node.js
+2.9k☆
在 2017 年, Server.js 增加了 2.9k 个 star, 在 GitHub Node.js 框架 分类中排名第 9。 Tweet
17
10
4
8
3
17
10
8
1
34
2.7k
131
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Meteor

Meteor

Meteor, the JavaScript App Platform
+2.6k☆
在 2017 年, Meteor 增加了 2.6k 个 star, 在 GitHub Node.js 框架 分类中排名第 10。 Tweet
213
197
234
275
289
216
190
189
172
246
195
199
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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☆
在 2017 年, Create React App 增加了 22.5k 个 star, 在 GitHub React 生态圈 分类中排名第 1。 Tweet
2.1k
1.8k
2.3k
1.8k
2.2k
1.8k
1.9k
2.3k
1.5k
1.7k
1.7k
1.5k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
在 2017 年, Ant Design 增加了 13.3k 个 star, 在 GitHub React 生态圈 分类中排名第 2。 Tweet
936
1.1k
971
910
928
941
1.1k
887
1.2k
1.3k
1.6k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
在 2017 年, Next.js 增加了 12.7k 个 star, 在 GitHub React 生态圈 分类中排名第 3。 Tweet
893
664
2.1k
1.3k
1.2k
745
1.2k
856
697
1.2k
864
960
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
在 2017 年, Storybook 增加了 9.7k 个 star, 在 GitHub React 生态圈 分类中排名第 4。 Tweet
467
429
666
627
807
940
704
1.0k
671
837
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
在 2017 年, Gatsby 增加了 9.7k 个 star, 在 GitHub React 生态圈 分类中排名第 5。 Tweet
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Material UI

Material UI

React components that implement Google's Material Design.
+9.6k☆
在 2017 年, Material UI 增加了 9.6k 个 star, 在 GitHub React 生态圈 分类中排名第 6。 Tweet
641
749
833
842
816
757
883
796
701
848
864
918
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
React Navigation

React Navigation

Learn once, navigate anywhere
+8.8k☆
在 2017 年, React Navigation 增加了 8.8k 个 star, 在 GitHub React 生态圈 分类中排名第 7。 Tweet
1.6k
910
846
646
822
612
586
494
535
609
632
486
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
React Router

React Router

Declarative routing for React
+8.7k☆
在 2017 年, React Router 增加了 8.7k 个 star, 在 GitHub React 生态圈 分类中排名第 8。 Tweet
690
748
1.1k
747
762
647
710
725
572
662
673
666
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Create React Native App

Create React Native App

Create a React Native app on any OS with no build config.
+7.7k☆
在 2017 年, Create React Native App 增加了 7.7k 个 star, 在 GitHub React 生态圈 分类中排名第 9。 Tweet
56
34
3.4k
637
498
493
476
478
393
438
403
363
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Ant Design Pro

Ant Design Pro

👨🏻‍💻👩🏻‍💻 An out-of-box UI solution for enterprise applications
+5.7k☆
在 2017 年, Ant Design Pro 增加了 5.7k 个 star, 在 GitHub React 生态圈 分类中排名第 10。 Tweet
2.9k
1.1k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
11
React boilerplate

React boilerplate

A highly scalable, offline-first foundation with the best developer experience and a focus on
+5.3k☆
在 2017 年, React boilerplate 增加了 5.3k 个 star, 在 GitHub React 生态圈 分类中排名第 11。 Tweet
721
607
557
503
413
380
401
351
330
391
343
338
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
12
Recompose

Recompose

A React utility belt for function components and higher-order components.
+5.0k☆
在 2017 年, Recompose 增加了 5.0k 个 star, 在 GitHub React 生态圈 分类中排名第 12。 Tweet
301
282
439
426
597
467
437
481
437
396
393
379
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
13
react-loadable

react-loadable

A higher order component for loading components with promises.
+4.9k☆
在 2017 年, react-loadable 增加了 4.9k 个 star, 在 GitHub React 生态圈 分类中排名第 13。 Tweet
499
262
212
377
307
285
178
553
511
471
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
14
NativeBase

NativeBase

Essential cross-platform UI components for React Native
+4.4k☆
在 2017 年, NativeBase 增加了 4.4k 个 star, 在 GitHub React 生态圈 分类中排名第 14。 Tweet
315
546
433
414
403
381
344
335
322
272
311
326
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
15
Enzyme

Enzyme

JavaScript Testing utilities for React
+4.4k☆
在 2017 年, Enzyme 增加了 4.4k 个 star, 在 GitHub React 生态圈 分类中排名第 15。 Tweet
322
362
369
399
342
325
341
344
380
411
408
382
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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☆
在 2017 年, Element 增加了 14.9k 个 star, 在 GitHub Vue 生态圈 分类中排名第 1。 Tweet
1.4k
1.2k
1.8k
1.2k
1.1k
1.0k
1.1k
1.1k
1.3k
1.4k
1.3k
1.1k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
iView

iView

A high quality UI Toolkit built on Vue.js 2.0
+9.5k☆
在 2017 年, iView 增加了 9.5k 个 star, 在 GitHub Vue 生态圈 分类中排名第 2。 Tweet
351
613
485
566
929
626
576
1.3k
788
585
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Vuex

Vuex

🗃️ Centralized State Management for Vue.js.
+7.2k☆
在 2017 年, Vuex 增加了 7.2k 个 star, 在 GitHub Vue 生态圈 分类中排名第 3。 Tweet
547
597
713
632
588
579
553
582
600
569
638
555
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
在 2017 年, Weex 增加了 6.5k 个 star, 在 GitHub Vue 生态圈 分类中排名第 4。 Tweet
26
116
1.4k
839
764
668
550
563
608
538
456
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Nuxt

Nuxt

Versatile Vue.js Framework
+6.3k☆
在 2017 年, Nuxt 增加了 6.3k 个 star, 在 GitHub Vue 生态圈 分类中排名第 5。 Tweet
164
354
625
515
537
481
592
732
532
606
635
498
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Vuetify

Vuetify

Material Component Framework for Vue.js 2
+6.3k☆
在 2017 年, Vuetify 增加了 6.3k 个 star, 在 GitHub Vue 生态圈 分类中排名第 6。 Tweet
322
191
363
385
402
360
569
554
1.1k
777
615
585
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Mint UI

Mint UI

Mobile UI elements for Vue.js
+5.5k☆
在 2017 年, Mint UI 增加了 5.5k 个 star, 在 GitHub Vue 生态圈 分类中排名第 7。 Tweet
116
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
vux

vux

Mobile UI Components based on Vue & WeUI
+4.6k☆
在 2017 年, vux 增加了 4.6k 个 star, 在 GitHub Vue 生态圈 分类中排名第 8。 Tweet
306
382
510
392
361
383
394
399
373
311
409
426
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
vue-router

vue-router

🚦 The official router for Vue.js.
+4.6k☆
在 2017 年, vue-router 增加了 4.6k 个 star, 在 GitHub Vue 生态圈 分类中排名第 9。 Tweet
408
400
460
411
396
407
370
352
374
403
351
313
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Vue material

Vue material

Material design for Vue.js
+3.7k☆
在 2017 年, Vue material 增加了 3.7k 个 star, 在 GitHub Vue 生态圈 分类中排名第 10。 Tweet
328
405
449
320
307
304
303
293
251
273
245
234
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

特约撰稿人: Evan You

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

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

在 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☆
在 2017 年, React Native 增加了 15.6k 个 star, 在 GitHub 移动开发 分类中排名第 1。 Tweet
1.2k
1.3k
1.6k
1.3k
1.3k
1.3k
1.3k
1.2k
1.1k
1.2k
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
在 2017 年, Weex 增加了 6.5k 个 star, 在 GitHub 移动开发 分类中排名第 2。 Tweet
26
116
1.4k
839
764
668
550
563
608
538
456
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+5.5k☆
在 2017 年, Ionic 增加了 5.5k 个 star, 在 GitHub 移动开发 分类中排名第 3。 Tweet
500
443
515
530
509
437
439
419
421
465
510
311
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Quasar

Quasar

Quasar Framework
+3.7k☆
在 2017 年, Quasar 增加了 3.7k 个 star, 在 GitHub 移动开发 分类中排名第 4。 Tweet
17
297
341
244
314
266
298
397
360
343
301
331
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+2.9k☆
在 2017 年, NativeScript 增加了 2.9k 个 star, 在 GitHub 移动开发 分类中排名第 5。 Tweet
241
224
245
238
255
224
217
211
299
280
271
233
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

无所不能的 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☆
在 2017 年, TypeScript 增加了 11.6k 个 star, 在 GitHub 编译工具 分类中排名第 1。 Tweet
738
855
972
1.1k
928
936
976
1.0k
818
1.2k
1.1k
992
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Babel

Babel

Babel is a compiler for writing next generation JavaScript.
+5.7k☆
在 2017 年, Babel 增加了 5.7k 个 star, 在 GitHub 编译工具 分类中排名第 2。 Tweet
390
382
447
395
361
336
371
412
397
564
1.1k
587
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Flow

Flow

Adds static typing to JavaScript to improve developer productivity and code quality.
+5.1k☆
在 2017 年, Flow 增加了 5.1k 个 star, 在 GitHub 编译工具 分类中排名第 3。 Tweet
335
303
505
577
484
447
381
420
372
433
392
417
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+2.1k☆
在 2017 年, Reason 增加了 2.1k 个 star, 在 GitHub 编译工具 分类中排名第 4。 Tweet
186
79
186
143
115
85
72
151
284
266
201
395
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Purescript

Purescript

A strongly-typed language that compiles to Javascript
+1.2k☆
在 2017 年, Purescript 增加了 1.2k 个 star, 在 GitHub 编译工具 分类中排名第 5。 Tweet
123
77
96
101
63
96
92
106
99
121
123
108
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
ClojureScript

ClojureScript

Clojure to JS compiler
+1.0k☆
在 2017 年, ClojureScript 增加了 1.0k 个 star, 在 GitHub 编译工具 分类中排名第 6。 Tweet
73
59
83
75
54
72
81
70
59
56
54
46
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
CoffeeScript

CoffeeScript

Unfancy JavaScript
+896☆
在 2017 年, CoffeeScript 增加了 896 个 star, 在 GitHub 编译工具 分类中排名第 7。 Tweet
77
78
63
98
71
62
70
70
118
96
56
37
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Elm

Elm

Compiler for Elm, a functional language for reliable webapps.
+880☆
在 2017 年, Elm 增加了 880 个 star, 在 GitHub 编译工具 分类中排名第 8。 Tweet
71
51
82
53
62
56
51
50
55
63
55
61
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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

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

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

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

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

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

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

构建工具

1
Parcel

Parcel

📦🚀 Blazing fast, zero configuration web application bundler
+14.0k☆
在 2017 年, Parcel 增加了 14.0k 个 star, 在 GitHub 构建工具 分类中排名第 1。 Tweet
1
1
13.9k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting a
+13.1k☆
在 2017 年, Webpack 增加了 13.1k 个 star, 在 GitHub 构建工具 分类中排名第 2。 Tweet
1.4k
1.2k
1.2k
1.1k
1.1k
1.2k
1.1k
995
714
1.0k
1.0k
1.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Gulp

Gulp

The streaming build system
+3.6k☆
在 2017 年, Gulp 增加了 3.6k 个 star, 在 GitHub 构建工具 分类中排名第 3。 Tweet
344
313
376
391
303
254
291
302
237
286
270
228
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Rollup

Rollup

Next-generation ES6 module bundler
+3.5k☆
在 2017 年, Rollup 增加了 3.5k 个 star, 在 GitHub 构建工具 分类中排名第 4。 Tweet
338
267
270
498
288
289
254
260
200
203
297
362
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Poi

Poi

Delightful web development.
+2.7k☆
在 2017 年, Poi 增加了 2.7k 个 star, 在 GitHub 构建工具 分类中排名第 5。 Tweet
127
132
94
129
82
78
54
165
178
200
1.3k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
FuseBox

FuseBox

A blazing fast js bundler/loader with a comprehensive API
+2.5k☆
在 2017 年, FuseBox 增加了 2.5k 个 star, 在 GitHub 构建工具 分类中排名第 6。 Tweet
109
1.3k
185
76
107
276
81
92
94
100
60
75
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Browserify

Browserify

browser-side require() the node.js way
+1.1k☆
在 2017 年, Browserify 增加了 1.1k 个 star, 在 GitHub 构建工具 分类中排名第 7。 Tweet
101
90
81
103
94
77
72
82
76
89
94
92
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

构建工具分类中的排行冠军是 Parcel,这或许是今年最大的惊喜,作为一个 8 月份才在 GitHub 上发布的新项目却已达到 14K 个 star 的关注度。

Parcel 不仅提供现代前端开发所需的各种功能,还有个碾压性的优势:零配置!这是它与依靠大量 "loaders" 的 Webpack 最大区别。

请别误解数字,Webpack 依然是最流行的构建应用,它在 GitHub 上 有 35K 的 star 和超 500 人的贡献者。目前有许多项目使用了它,包括今年最流行的两个项目:Create React AppGatsby

Webpack 不断在迭代更新,2.0 版本可以让开发者通过动态加载的方式轻松实现“代码分割”的功能。

WebpackParcel 同时定位于构建 WEB 应用,而 Rollup 则定位于的构建,它专注于 ES6 模块的性能提升上。

Rollup 已被一些主流的库使用,值得一提的是 React 团队也在 2017 年把它们的构建系统从 Browserify 切换到了 Rollup

React 博客中提到

Rollup 可以预编译并且集成到应用中,能与 React 之类相似的库做到完美配合。

PoiParcel 有同样的目标:一款现代网络应用构建工具,它默认零配置但你可以通过使用 preset 来扩展。

测试框架

1
Jest

Jest

🃏 Delightful JavaScript Testing.
+7.1k☆
在 2017 年, Jest 增加了 7.1k 个 star, 在 GitHub JavaScript 测试框架 分类中排名第 1。 Tweet
498
519
647
549
884
499
549
476
473
705
664
675
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
AVA

AVA

Futuristic JavaScript test runner
+4.8k☆
在 2017 年, AVA 增加了 4.8k 个 star, 在 GitHub JavaScript 测试框架 分类中排名第 2。 Tweet
1.0k
522
452
377
358
304
315
303
260
321
294
245
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Mocha

Mocha

☕️ simple, flexible, fun javascript test framework for node.js & the browser
+3.1k☆
在 2017 年, Mocha 增加了 3.1k 个 star, 在 GitHub JavaScript 测试框架 分类中排名第 3。 Tweet
242
253
266
244
251
230
231
259
238
269
295
287
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Jasmine

Jasmine

Simple JavaScript testing framework for browsers and node.js
+1.2k☆
在 2017 年, Jasmine 增加了 1.2k 个 star, 在 GitHub JavaScript 测试框架 分类中排名第 4。 Tweet
93
95
128
97
106
94
96
120
88
76
109
83
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Tape

Tape

tap-producing test harness for node and browsers
+1.0k☆
在 2017 年, Tape 增加了 1.0k 个 star, 在 GitHub JavaScript 测试框架 分类中排名第 5。 Tweet
149
90
135
105
91
63
65
70
79
54
57
51
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

正如我们去年预计的一样 (这是我们第一次预测成功!),Jest 成了今年测试框架类别中的王者。

Jest 最初是 Facebook 因为 React 组件测试目的而开发的,但最近几个月革命性的版本变更(发布了 22 个大版本)使得它现在能同时用于测试前端、后端代码。

Jest 有几个大的闪光点:

  • 无需配置,默认地设定已经满足通常需求;
  • 强大的开发者体验 (智能观察模式,直观的错误报告);
  • 语法上与 Mocha 很接近,许多程序员熟悉 describeit 这样的关键词;
  • 不需要额外的库来创建 assertions,已全部内置;
  • 独特的"快照"模式可以作为重新运行测试时的对比基准;

AVA,去年的第一名,仍然有许多吸引人的特点。

这个项目由 Sindre Sorhus 创建并在他所有的项目中使用,熟悉他的同学肯定知道这意味着什么!

相较于 JestAVA 更侧重于并行测试上的速度,更轻量,也更接近测试标准,语法上与测试框架 Tape 接近。

IDE 和编辑器

1
VS Code

VS Code

Visual Studio Code
+20.2k☆
在 2017 年, VS Code 增加了 20.2k 个 star, 在 GitHub IDE 分类中排名第 1。 Tweet
897
1.4k
1.8k
1.7k
1.5k
1.3k
1.4k
1.6k
1.6k
2.5k
2.6k
1.8k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Atom

Atom

The hackable text editor
+9.1k☆
在 2017 年, Atom 增加了 9.1k 个 star, 在 GitHub IDE 分类中排名第 2。 Tweet
838
766
764
604
798
695
774
871
921
763
724
557
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Reactide

Reactide

Reactide is the first dedicated IDE for React web application development. http://reactide.io
+7.4k☆
在 2017 年, Reactide 增加了 7.4k 个 star, 在 GitHub IDE 分类中排名第 3。 Tweet
2.2k
181
109
66
76
34
71
38
73
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Brackets

Brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
+1.9k☆
在 2017 年, Brackets 增加了 1.9k 个 star, 在 GitHub IDE 分类中排名第 4。 Tweet
138
164
233
142
172
126
189
161
192
142
112
106
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Nuclide

Nuclide

An open IDE for web and native mobile development, built on top of Atom
+1.4k☆
在 2017 年, Nuclide 增加了 1.4k 个 star, 在 GitHub IDE 分类中排名第 5。 Tweet
152
167
154
152
145
101
127
75
123
68
82
76
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

在这里我们讨论的是利用 WEB 技术来构建的开源的代码编辑器( Sublime 粉丝们对不住了!)。

2016 年由微软主导的 VS Code 与 GitHub 主导的 Atom 在本类别中齐头并进。今年他们也依然处于领先地位,不过在互相较量中,VS Code 己领先它的对手一大截。

每个月 VS Code 都会发布新版本,带来更多实用 IDE 功能同时性能上却没有太大的损耗。即使不安装任何插件,你也有一大堆开箱即用的功能:

  • Git 集成功能;
  • 自动补全:JavaScript 语法,文件路径进行补全,npm 包名字等等;
  • React 语法集成等;

此外,你可以在编辑器中添加 Prettier 插件,这样每次保存时它都会自动格式化文件,在这样的编程环境下编码真是一种享受。

CSS in JavaScript

1
Styled Components

Styled Components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without
+8.7k☆
在 2017 年, Styled Components 增加了 8.7k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 1。 Tweet
852
545
899
861
874
744
703
697
625
677
555
703
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
CSS Modules

CSS Modules

Documentation about css-modules
+2.9k☆
在 2017 年, CSS Modules 增加了 2.9k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 2。 Tweet
234
227
272
234
313
307
246
254
194
210
234
217
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Polished

Polished

A lightweight toolset for writing styles in JavaScript ✨
+2.9k☆
在 2017 年, Polished 增加了 2.9k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 3。 Tweet
518
262
210
139
96
94
129
96
103
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Glamorous

Glamorous

💄 Maintainable CSS with React
+2.9k☆
在 2017 年, Glamorous 增加了 2.9k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 4。 Tweet
531
273
206
196
292
139
151
120
165
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Emotion

Emotion

⚡️ The Next Generation of CSS-in-JS
+2.5k☆
在 2017 年, Emotion 增加了 2.5k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 5。 Tweet
488
257
190
352
186
298
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Styled JSX

Styled JSX

Full CSS support for JSX without compromises
+1.7k☆
在 2017 年, Styled JSX 增加了 1.7k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 6。 Tweet
125
133
216
138
163
105
123
76
92
231
135
129
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Aphrodite

Aphrodite

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum
+1.5k☆
在 2017 年, Aphrodite 增加了 1.5k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 7。 Tweet
167
117
161
194
172
135
101
99
91
85
62
91
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Glamor

Glamor

inline css for react et al
+1.3k☆
在 2017 年, Glamor 增加了 1.3k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 8。 Tweet
208
92
100
140
192
92
122
98
56
75
69
69
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
JSS

JSS

JSS is an authoring tool for CSS which uses JavaScript as a host language.
+1.3k☆
在 2017 年, JSS 增加了 1.3k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 9。 Tweet
94
107
107
94
101
107
115
94
89
120
142
126
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Radium

Radium

A toolchain for React component styling.
+1.2k☆
在 2017 年, Radium 增加了 1.2k 个 star, 在 GitHub CSS in JavaScript 分类中排名第 10。 Tweet
144
120
112
126
99
92
89
88
68
81
106
68
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

目前 React 社区仍然没有就如何有效管理组件样式这个问题达成共识,即没有标准的解决方案。

如果无需太多自定义的标准样式,可以用 Material UIAnt Design 这样现成的组件工具包。如果需要更高度灵活的自定义,你仍然能使用传统方式:用一个像 BootstrapBulma 这样的全局 CSS 样式,通过修改组件的 className 属性来达到目的。这样做缺点是组件无法进行自我样式管理,因为样式分布在单独的文件中。

CSS in JavaScript 概念的出现即是为了解决上述问题。

概念本身很简单:既然我们在 React 中己能通过 JavaScript 来同时控制逻辑和模板部分,何不再进一步,连样式也一并管理了呢?

Styled Components 是今年本类别的冠军,它利用 JavasScript 最近新加入的模板字符串特性,让开发者在 React 组件中直接使用标准的 CSS 语法编写样式。

CSS Modules,作为本类别的亚军,则采用了混合的解决方案。它让开发者自己挑选诸如标准 CSS, SASS, NO slug Less, NO slug Stylus等方式编写样式,再以文件的方式导入到组件中。

Mark DalgleishCSS Modules 的作者,写了一篇有意思的文章来阐述 CSS-in-JavaScript 解决方案:A Unified Styling Language。如果你对 CSS-in-Javascript 解决方案仍持怀疑态度的话,那此文绝对不容错过。

静态网站生成器

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
在 2017 年, Gatsby 增加了 9.7k 个 star, 在 GitHub 静态网站 分类中排名第 1。 Tweet
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Hexo

Hexo

A fast, simple & powerful blog framework, powered by Node.js.
+6.2k☆
在 2017 年, Hexo 增加了 6.2k 个 star, 在 GitHub 静态网站 分类中排名第 2。 Tweet
664
519
609
487
469
431
494
537
471
509
476
486
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
React Static

React Static

⚛️ 🚀 A progressive static-site generator for React.
+3.0k☆
在 2017 年, React Static 增加了 3.0k 个 star, 在 GitHub 静态网站 分类中排名第 3。 Tweet
2.2k
341
338
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Phenomic

Phenomic

Modular website compiler ⚡️
+1.4k☆
在 2017 年, Phenomic 增加了 1.4k 个 star, 在 GitHub 静态网站 分类中排名第 4。 Tweet
140
392
123
103
127
125
92
59
50
77
42
67
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Metalsmith

Metalsmith

An extremely simple, pluggable static site generator.
+1.0k☆
在 2017 年, Metalsmith 增加了 1.0k 个 star, 在 GitHub 静态网站 分类中排名第 5。 Tweet
107
90
72
85
82
72
136
73
81
72
80
61
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

静态网站生成器(SSG,Static Site Generator)是指能够生成一坨 HTML、CSS、JS 文件,方便你快速部署到 WEB 服务器上而不需要安装和配置数据库的工具。

静态网站具有速度快,稳定且易于维护的特点。作为 2016 年的亚军,Gatsby 今年成功拨得头筹。它新增了许多新功能来助你优化静态网站:

  • 快速浏览和导出速度;
  • 主动预加载机能;
  • 智能代码分解 (模板 + 网页数据);

Gatsby 使用 React 来做视图层(View Layer),构建时候则用 GraphQL 来查询内容。它有一个强大的社区并且 React 官网也是用 Gatsby 的来搭建的.

React Static 是本类别的新面孔。它从 Create React App 项目中获得灵感,定位于做一个轻量的 Gatsby 替代方案,专注于性能和简洁。

此外,值得一提的是 Next.js 也能当静态网站生成器来用。

GraphQL

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
在 2017 年, Gatsby 增加了 9.7k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 1。 Tweet
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
React Starter Kit

React Starter Kit

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post
+4.3k☆
在 2017 年, React Starter Kit 增加了 4.3k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 2。 Tweet
414
371
363
417
449
358
350
367
308
347
313
258
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Apollo client

Apollo client

A fully-featured, production ready caching GraphQL client for every UI framework and GraphQ
+4.1k☆
在 2017 年, Apollo client 增加了 4.1k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 3。 Tweet
64
338
348
285
295
327
295
331
414
438
393
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
GraphQL

GraphQL

GraphQL is a query language and execution engine tied to any backend service.
+2.8k☆
在 2017 年, GraphQL 增加了 2.8k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 4。 Tweet
127
165
266
250
323
250
220
210
250
244
212
276
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
GraphiQL

GraphiQL

An in-browser IDE for exploring GraphQL.
+2.6k☆
在 2017 年, GraphiQL 增加了 2.6k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 5。 Tweet
213
222
242
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Relay

Relay

Relay is a JavaScript framework for building data-driven React applications.
+2.5k☆
在 2017 年, Relay 增加了 2.5k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 6。 Tweet
157
128
193
541
201
191
212
181
161
171
148
206
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Apollo Server

Apollo Server

GraphQL server for Express, Connect, Hapi, Koa and more
+2.3k☆
在 2017 年, Apollo Server 增加了 2.3k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 7。 Tweet
301
199
179
208
187
211
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Graphcool

Graphcool

⚡️ Prisma turns your database into a realtime GraphQL API
+1.7k☆
在 2017 年, Graphcool 增加了 1.7k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 8。 Tweet
241
939
477
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Vulcan

Vulcan

🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
+1.4k☆
在 2017 年, Vulcan 增加了 1.4k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 9。 Tweet
127
65
109
140
138
153
149
140
91
79
88
79
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
GraphQL Playground

GraphQL Playground

🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collabor
+1.3k☆
在 2017 年, GraphQL Playground 增加了 1.3k 个 star, 在 GitHub Javascript GraphQL 项目 分类中排名第 10。 Tweet
172
134
109
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

在未来回顾 GraphQL 的历史时,2017 年很有可能会成为一个转折点。

the New York Times 这样的大公司开始使用 GraphQL,RelayApollo (两个主要的 GraphQL 客户端框架) 也在今年发布了两个重要的版本更新。

在这两大库的身后,像 Graphcool 这样的公司也提供了大量的工具和库,而 Vulcan 这样的全栈框架也开始采用 GraphQL 。

值得注意的是今年最有人气的静态网站生成器 Gatsby 也在数据处理中使用了 GraphQL 。

随着越来越多的人加入到 GraphQL 阵营来, 可以预见其在技术上广泛取代 REST 只是一个时间问题。

杂项

1
json-server

json-server

Get a full fake REST API with zero coding in less than 30 seconds (seriously)
+9.5k☆
607
720
755
701
850
1.5k
898
809
628
655
782
671
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Feather

Feather

Simply beautiful open source icons
+9.4k☆
4.6k
504
2.7k
633
197
510
281
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Frappé Charts

Frappé Charts

📊🍩📈 Simple, responsive, modern SVG Charts with zero dependencies
+9.0k☆
8.4k
604
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
socket.io

socket.io

Realtime application framework (Node.JS server)
+8.6k☆
646
576
821
745
812
730
768
736
683
688
749
663
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Yarn

Yarn

📦🐈 Fast, reliable, and secure dependency management.
+8.4k☆
1.0k
965
941
726
755
553
511
519
593
664
549
577
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
SemanticUI

SemanticUI

Semantic is a UI component framework based around useful principles from natural language.
+8.3k☆
618
675
781
1.9k
683
621
570
594
444
492
492
451
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Three.js

Three.js

JavaScript 3D library.
+8.3k☆
615
685
737
640
652
621
580
629
594
739
821
953
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Lodash

Lodash

A modern JavaScript utility library delivering modularity, performance, & extras.
+8.0k☆
574
555
695
613
644
699
711
770
622
632
797
665
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
echarts

echarts

A powerful, interactive charting and visualization library for browser
+7.6k☆
384
488
676
611
634
648
737
697
614
557
892
699
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
anime.js

anime.js

JavaScript Animation Engine
+7.6k☆
426
351
442
601
541
613
483
574
888
875
522
1.3k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

因为分类里无法做到全部罗列,所以在这里我们介绍下那些没有进入分类的热门项目。

总结

希望我们今年对 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

Original version

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