欢迎来到第四届 JavaScript 明星项目!

让我们通过数字看一下 2019 年在 GitHub 上受到关注的项目。


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

目录

  1. 最受欢迎项目
    Vue.jsVS CodeReactVue Element AdminSvelteAxiosAnt DesignTypeScriptPuppeteerCreate React App
  2. 前端框架
    Vue.jsReactSvelteAngularOmi
  3. Node.js 框架
    NestNext.jsStrapiNuxtExpress
  4. React 生态圈
    Ant DesignCreate React AppGatsbyNext.jsMaterial UI
  5. Vue 生态圈
    Vue Element AdminElementVuetifyNuxtvue-cli
  6. Angular 生态圈
    ngx-adminMaterial Design for AngularAngular CLING-ZORRONgRx
  7. 测试框架
    PuppeteerStorybookCypressJestReact Testing Library
  8. 移动开发
    React NativeQuasarIonicExpocube-ui
  9. 编译工具
    TypeScriptBabelFlowReasonSucrase
  10. 构建工具
    WebpackParcelRollupMicrobundleGulp
  11. CSS in JavaScript
    Styled ComponentsEmotionLinariastyled-systemCSS Modules
  12. GraphQL
    GatsbyHasura GraphQL EnginePrismaGridsomeApollo client
  13. 学习资源
    You Don't Know JS30 seconds of codeJS Algorithms & Data StructuresNode.js Best PracticesTech Interview Handbook
  14. 总结

最受欢迎项目

1
Vue.js

Vue.js

A progressive, incrementally-adoptable framework for building UI on the web
+31.4k☆

2019 趋势

3.1k
2.3k
4.5k
3.3k
2.7k
2.4k
2.4k
2.1k
1.7k
2.2k
1.8k
1.7k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

GitHub 数据

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

链接

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

VS Code

Visual Studio Code
+23.0k☆
3
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+22.9k☆
4
Vue Element Admin

Vue Element Admin

A magical vue admin
+22.7k☆
5
Svelte

Svelte

Cybernetically enhanced web apps
+20.0k☆
6
Axios

Axios

Promise based HTTP client for the browser and node.js
+15.1k☆
7
Ant Design

Ant Design

A UI Design Language and React UI library
+14.6k☆
8
TypeScript

TypeScript

A superset of JavaScript that compiles to clean JavaScript output.
+13.9k☆
9
Puppeteer

Puppeteer

Headless Chrome Node.js API
+13.9k☆
10
Create React App

Create React App

Set up a modern web app by running one command.
+13.5k☆

Vue.js 连续第 4 次登顶年度综合排行榜,它的 GitHub 在 2019 年新增了超过 30k 的 star。

不出意外的是:React 与代码编辑器 VS Code 紧随其后,排名和去年相同。

排名提升最大的是 Vue Element Admin,它是一个使用 Vue.js 组件构建漂亮的仪表板的解决方案,它在今年位于第 4 名。

Svelte 已经出现好几年了,但它在 2019 年真正腾飞,位于第 5 名。

TypeScript 进入了前十,它的成功是过去几年 JavaScript 生态的主要改变之一。

Deno 是由 Node.js 之父构建的 JavaScript 运行时,它在 2018 年的排行榜上是一个新成员。目前依然有热度,位于第 13 名。

前端框架

1
Vue.js

Vue.js

A progressive, incrementally-adoptable framework for building UI on the web
+31.4k☆
2
React

React

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

Svelte

Cybernetically enhanced web apps
+20.0k☆
4
Angular

Angular

One framework. Mobile & desktop.
+12.0k☆
5
Omi

Omi

Next Front End Framework
+3.8k☆

在 2019 年,Svelte 打乱了 UI 框架的格局,位于 Vue.jsReact 之后的第 3 名,超过了 Angular

这是否意味着我们现在有了四巨头而不是三巨头

Svelte 与其他框架非常不同,因为它其实不算是一个框架,而是一个编译器,它的魔力发挥在编译期而不是运行期。

类似于 React 或 Vue,它能使开发人员通过数据驱动的组件完成应用的搭建,但最大的不同是:该框架不是在浏览器中运行的,而是在构建时运行。

编译器能够解析开发者编写的组件,生成直接操作 DOM 的指令式代码。

因此,最终发布到浏览器的代码体积小并且运行速度很快(使得 Svelte 应用适合于比方说嵌入式设备)。

除了具有一流的性能外,它还可以轻松地创建复杂 CSS 动效。

Version 3 改进了响应式的理念:仅仅只需修改变量就能触发 UI 更新。

现在说 Svelte 会像其他三大框架一样成功还为时尚早,但是它在 2020 年绝对值得关注。

Node.js 框架

1
Nest

Nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8)
+11.5k☆
2
Next.js

Next.js

The React Framework
+10.6k☆
3
Strapi

Strapi

Open source Node.js Headless CMS to easily build customisable APIs
+10.2k☆
4
Nuxt

Nuxt

The Vue.js Framework
+7.4k☆
5
Express

Express

Fast, unopinionated, minimalist web framework for node.
+5.1k☆

在 Node.js 框架的类别中,我们迎来了一个新冠军:Nest

Nest 是一个功能全面的 Web 框架,它借鉴了许多 Angular 中的理念。

Next.js 是 2018 年的冠军,今年位于第 2 名。它的前端使用 React、后端使用 Node.js,是构建全栈 Web 应用的最佳方案之一。

位于第 3 名的是 Strapi,它是一个完全开源的 headless CMS,可以使你快速生成和管理 API 接口。 “上手只需四个命令”。 API 接口支持 REST 或 GraphQL!

接下来是 Nuxt,一个使用 Vue.js 构建 Web 应用的全栈框架,支持好几种开发策略,服务器端渲染、客户端渲染或静态生成。

Express 几乎与 Node.js 一样老了,目前仍位于前 5 名。确实,它拥有庞大的生态,并且被许多 Node.js 开发者熟知。但是值得注意的是,它上一次的代码提交已经是 7 个月之前了。时代变了吗?

React 生态圈

1
Ant Design

Ant Design

A UI Design Language and React UI library
+14.6k☆
2
Create React App

Create React App

Set up a modern web app by running one command.
+13.5k☆
3
Gatsby

Gatsby

Build blazing fast, modern apps and websites with React
+11.5k☆
4
Next.js

Next.js

The React Framework
+10.6k☆
5
Material UI

Material UI

React components for faster and easier web development. Build your own design system, or start with Material Design.
+10.2k☆

第 1 名的 Ant Design 和第 5 名的 Material UI 是 React 最受欢迎的组件和小部件类库项目。

第 2 名的 Create React App 依然是创建新 React 应用的事实标准。它今年的主要更新是支持了 TypeScript

React 世界中最大的变化是引入了 Hooks 模式。

React 只是一个视图层,如何在组件之间共享逻辑一直是一个争议。 事实上这个问题的发展历程可以大致描述成 4 个阶段:

  • 2013:使用 Mixin 在 React class 之间共享功能逻辑
  • 2015:高阶组件将 props 注入进 React 组件
  • 2017:Render props 模式
  • 2019:到处都在用 Hooks 写函数式组件

今年,我们已经看到了众多发挥 Hooks 威力的库,它们能够解决以下类型的衍生问题:

  • 状态管理:Redux 现在也提供了 Hooks 的方式,可以方便地与中心化 store 进行交互
  • 路由:React Router 提供了 Hooks 用于访问浏览器历史记录
  • 表单验证:React Hook Form 用独特的方式完成表单验证,它使用非受控表单控制进行实现

Hooks 会是演进的终点吗?

Vue 生态圈

1
Vue Element Admin

Vue Element Admin

A magical vue admin
+22.7k☆
2
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+9.4k☆
3
Vuetify

Vuetify

Material Component Framework for Vue
+7.5k☆
4
Nuxt

Nuxt

The Vue.js Framework
+7.4k☆
5
vue-cli

vue-cli

Standard Tooling for Vue.js Development
+5.8k☆

特约撰稿人:Sébastien Chopin

今年,我们请我们的朋友 Sébastien Chopin 来谈谈 Vue.js 的情况。

Sébastien Chopin 是 Nuxt 的作者,Nuxt 在 2 个不同的类别中(Vue.js 生态圈和 Node.js 框架)都位于前 5 名。

Guest Writer atinux

Vue Element Admin 连续两年成为最受欢迎的 Vue 生态项目,它基于 Element,是一个使用 Vue.js 组件构建漂亮的仪表板的解决方案。

第 2 名就是 Element,这是一个包含大量可用组件的 UI 库。

遵循 Material Design 的组件框架 Vuetify 在 2019 年 7 月发布了 v2.0 并跻身前 5 名。

Nuxt 是用于构建 Vue.js 应用的 Web 框架,已连续 3 年位居前 5 名。

最后,在第 5 名,我们看到了 vue-cli,这是 Vue.js 官方的工具,它能让使用者通过功能强大的图形界面启动项目。

Angular 生态圈

1
ngx-admin

ngx-admin

Customizable admin dashboard template based on Angular 8+
+4.8k☆
2
Material Design for Angular

Material Design for Angular

Component infrastructure and Material Design components for Angular
+2.4k☆
3
Angular CLI

Angular CLI

CLI tool for Angular
+2.1k☆
4
NG-ZORRO

NG-ZORRO

An enterprise-class UI components based on Ant Design and Angular.
+1.7k☆
5
NgRx

NgRx

Reactive libraries for Angular
+1.3k☆

特约撰稿人:Benjamin Blackwood

今年,我们请我们的朋友 Benjamin Blackwood 来谈谈 Angular 的情况。

Benjamin 是来自 Australia Post 的前端开发者,并且有超过 4 年的 Angular 使用经验。

Guest Writer bblackwo

ngx-admin 是最受欢迎的 Angular 项目,它提供了创建管理员仪表盘的模板。

第 2 名是 Material Design for Angular,包含 Material Design 组件以及 Angular CDK。

类似于 React 和 Vue 的情况,Ant Design 组件库 NG-ZORRO 位于第 4 名。

Angular 在 2019 年发布了一个大版本。 Version 8 在 5 月发布。作为该发布版的一部分,Angular CLI 现在可以创建两个独立的打包(morden 与 legacy),将打包大小减少至多 20%。还有一个新的 Builders API,它允许你修改现有的 CLI 命令或添加新命令。

Version 9 目前处于候选发布状态,预计将在 2020 年初发布。Version 9 的主要变化是一个名为 Ivy 的新编译器,也有其他优化。Ivy 编译器有望具有更短的 re-build 时间和更小的打包大小。

测试框架

1
Puppeteer

Puppeteer

Headless Chrome Node.js API
+13.9k☆
2
Storybook

Storybook

UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more!
+12.0k☆
3
Cypress

Cypress

Fast, easy and reliable testing for anything that runs in a browser.
+7.8k☆
4
Jest

Jest

Delightful JavaScript Testing.
+6.5k☆
5
React Testing Library

React Testing Library

Simple and complete React DOM testing utilities that encourage good testing practices.
+5.7k☆
Loading
Loading
Loading
Loading
Loading
Loading

总结

在前端众多的有趣趋势中:Svelte 框架会持续增长吗?

或者我们可能会更多地采用 Web 标准实现(比方说 Web Components)?

2019 年最有趣的故事之一是 Apple Music 发布了 Web 版客户端,它使用 Web Components 并通过 Stencil 编译,Stencil 也是今年榜上有名的 UI 框架之一。 这是 Web Components 在“现实世界”的真实案例!

还有一大进步是你可以发布 使用原生 ES 模块化的应用

在后端方面,Node.js 到 2019 年已经有 10 年历史了,但新功能依然在快速增加。

从 v13.2.0 起,Node.js 直接支持了 ES 模块化语法,并且能够导入 Web Assembly 模块。 Workers Threads API 可以支撑计算密集型工作。

无论是浏览器还是 Node.js,平台的持续演进都使得 JavaScript 开发工作激动人心。

感谢你们的关注,我们明年再见!

Chinese (simplified) version

Seognil LC

略懂点 JavaScript,做过点翻译工作 写了 前端开发入门指南JavaScript 学习指南

Authors

Sacha Greif

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

Available Translations

English

Español

日本語