本文主要面向前端基础框架和库的选型，不包括构建工具、 UI 库和框架配套解决方案的选择。由于前端发展速度很快，框架层出不穷，特标明本文发布时间为 2021年6月6日，更新时间 2022年2月21日，更新时间 2022年3月14日，只适用于2021年前端基础框架技术选型。只选择了 web 应用开发时使用的框架，桌面端框架如 Electron、Tauri、Flutter，或者跨平台框架例如 React Native、Weex 或者众多的小程序框架本质上和如下列出的框架不是解决同一类问题所以不在对比之列。
框架背景
React 是一款用于构建用户界面的 JavaScript 库，最初于2013年3月发布，由 Facebook 进行开发和维护。最新版本为17.0.2。
Vue 是一款渐进式、可增量采用来构建 UI 界面的 Javascript 框架，它于2014年2月首次由Google前员工 Evan You（尤雨溪）发布。当前最新版本是2.6.12。
Angular 是一款用于构建移动和桌面 web 应用的前端框架，最初于2010年发布，由 Google 进行开发和维护。Angular 1.x名为AngularJS，基于 JavaScript 开发。从 Angular 2开始基于 TypeScript 开发，并去掉了js，直接称为 Angular ，最新版本为12.0.1。
Svelte 是一款轻量级高性能的编译型 Javascript 框架。由 Rich Harris 于16年发布。它避开虚拟DOM的概念，在构建期间即将代码编译到小型原始JavaScript模块中。
jQuery 是一款流行的 Javascript 库，提供了多种方便的DOM操作、事件绑定、CSS操作、Ajax封装的API。由 John Resig 开发。当前最新版本为3.6.0。
Preact 是一款只有3kb的轻量级的类 React 的框架。由 Google 工程师 Jason Miller 开发。当前最新版本为10.5.13。
Ember 是一款基于 Handlebar 模板的 Javascript 框架。Ember在2011年发布，目前由Ember社区维护。当前最新版本为3.27.3。
Inferno 是一款为了追求极致性能的类 React 框架。由 Facebook 工程师 Dominic Gannaway 开发。当前最新版本为7.4.8。
Zepto 是一款轻量级的类 jQeruy 的 Javascript 库。由 Thomas Fuchs 开发。当前最新版本为1.2.0。
San 是一款高兼容性、高性能、轻量级的 Javascript 框架。由百度前端工程师 Erik (董睿)开发。当前最新版本为3.10.3。
Dojo 是一款用 TypeScript 构建的现代 web 应用程序的渐进式框架。由 IBM 开发与支持。当前最新版本为7.0.0。
Polymer 是一款用来构建可重用的 Web 组件（Web Components）的框架。由 Google 发布，当前最新版本是3.4.1，目前已处于维护模式，不再开发新的功能。
Lit是一个轻量级的库，用于构建快速、轻量级的 web 组件。由 Google 发布，属于 Polymer 的替代品。当前最新版本是2.2.0。
特点和优缺点
Angular特点：
- 良好的应用程序架构
- 双向数据绑定
- Angular 指令与 HTML 模板
- 可嵌入、注入和测试
优点：
- 模板功能强大丰富，自带了极其丰富的 Angular 指令，支持双向数据绑定。
- 代码模块化（每个模块的代码独立拥有自己的作用域，model，controller等）
- 是一个比较完善的前端框架，包含服务、模板、数据双向绑定、模块化、路由、过滤器、依赖注入等所有功能
- ng模块化引入了对依赖注入的支持，能够很容易的写出可复用的代码
- Angular 由商业公司 Google 开发，这意味着它有一个坚实的基础支持
缺点：
- Angular 入门较难，需要首先了解 TypeScript 和 ES7 的 decorator 语法，还需要理解 DI
- 对 IE6/7 兼容不是很好
- DI依赖注入如果代码压缩需要显示声明
- 更适合企业级应用开发，对小型项目来说过于过于重量级需要引入过多模块
- 国内使用 Angular 的公司和项目较少
React特点：
- 声明式设计：React采用声明式设计，可以轻松描述应用
- 高效：React通过对DOM的模拟（virtual DOM），最大限度地减少低性能的DOM操作
- 灵活：React 核心只实现了基础的UI渲染部分，可以与已知的库或框架很好的配合
优点：
- 速度快：在UI渲染过程中，React通过在虚拟 DOM 中的微操作来实现对实际DOM的局部更新
- 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的
- 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题时，可以方便地进行隔离
- 单向数据流：Flux是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化
- 同构、纯粹的JavaScript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染应用有助于搜索引擎优化
缺点：
- React仅核心库由 facebook 提供支持，其他相关库例如路由，状态管理等均由社区维护
- React 由商业公司 facebook 支持，React Native 开源协议曾受到质疑
- React17 之前版本基于事件委托的合成事件，表现和使用与原生事件存在差异
Vue特性：
- 轻量级的框架
- 双向数据绑定
- 单页面模板 与 vue 指令
- 插件化
优点：
- 简单：官方文档国际化支持更好，语法更易用，比 Angular 和 React 易学
- 快速：异步批处理方式更新DOM
- 紧凑：~18kb min+gzip，且无依赖
- 组合：vue3支持组合式（composition）api 可以用解耦的、可复用的组件组合应用程序
缺点：
- 缺少工程化设计，不利于复用代码
- 使用了
Object.defineProperty语法，不支持 IE8 以下浏览器 - 由个人开发者 Even You 支持
Svelte特性：
- 轻量级
- 编译型框架
- 无 virtual DOM
优点：
- 编译型框架：线上环境无需单独下载框架包，编译好后直接发布
- 轻量级：比 react、angular、vue的代码量更少，通过CSS缩小后有约17kb的大小，gzip后更是小到了4kb
- 没有 virtual DOM 和 virtual DOM diff，性能更好
缺点：
- 不支持 Typescript
- 配套库不太完善，不支持前端路由
- 框架较新，社区规模较小
| 特性 | 说明 | Vue | React | Angular | Svelte |
|---|---|---|---|---|---|
| 数据监听 | 代码中的某个值变化后，能够通过回调函数实现逻辑 | 支持watch |
支持useCallback() |
支持ngOnChanges |
支持$: |
| 计算属性 | 某个只读变量可以通过另外几个变量和逻辑响应式的得出 | 支持computed |
支持useMemo() |
支持get Var(){} |
支持$: |
| 数据双向绑定 | 主要用于表单提交和更新，用户输入和数据双向绑定，一者变更时另一者随之变化 | 支持v-model |
不支持 使用单向数据绑定 |
支持ngModel |
支持bind:value |
| css scoped | css的作用域只针对当前的组件生效，避免相同的css名字相互影响 | 支持 | 不支持 支持 css in js |
支持 | 支持 |
| 组件生命周期 | 在组件生成，更新，销毁等情况时可以有回调函数实现逻辑 | 支持 | 支持 | 支持 | 支持 |
| SPA前端路由 | 单页APP，url改变不刷新页面 | 支持 | 支持 | 支持 | 不支持 |
| TypeScript | 支持使用 TypeScript | 支持 | 支持 | 支持 | 不支持 |
| 自定义指令(directive) | 为所有页面元素添加全局自定义属性 | 支持 | 不支持 | 支持 | 支持 |
| Pipe/Filter | 可以对字符串、数字在打印模板中进行数据过滤和美化 | 支持 | 不支持 | 支持 | 不支持 |
框架生态
一个好的框架会有一些周边生态来完善框架在面对不同的业务场景时的具体问题。
Angular是一个“完整的解决方案”
Angular 命令行工具 - @angular/cli
Angular 路由管理 - @angular/router
Angular 跨端解决方案 - Cordava Ionic
React 命令行工具 - Create-react-app
React 路由管理 - React-router
React 应用状态管理 - Redux、mobx、flux
React SSR解决方案 - Next.js
React 跨端解决方案 - React Native
React 浏览器开发者工具插件 - react-devtools
Vue 命令行工具 - @vue/cli
Vue 路由管理 Vue-router
Vue 应用状态管理 - Vuex
Vue SSR解决方案 - Nuxt.js
Vue 静态页面生成框架 - Vuepress
Vue 跨端解决方案 - Weex
Vue 浏览器开发者工具插件 - vue-devtools
配套UI组件库
现代 web 应用中，页面一般是由不同的模块组成，为了可以复用代码，提升开发效率，通常会把相同或类似的模块抽象成组件以便于在不同的页面中使用。在长期的开发实践过程中，人们把常用的组件组合成组件库，以便在不同的项目中也可以复用。组件库一般是基于前端基础框架进行扩展，且遵循同一套设计规范。成熟的前端框架很多都有多套配套的UI组件库，可以进一步的提升研发效率。
常用的 Vue UI库有
| ui库 | 介绍 | Github stars | 作者 | 类型 |
|---|---|---|---|---|
| Element UI | 一款界面风格偏向于B端的基于 Vue 2.0 的桌面端组件库 | 50.2k | ElemeFE 饿了么 | PC |
| Vuetify | 一款采用 Material Design 的 vue 组件库 | 31k | John Leider & Heather Leider | Responsive |
| iview ViewUI | 一款基于 Vue 的高质量 UI 工具集 iview4名称变更为 ViewUI |
23.8k 2.3k |
TalkingData 腾云天下 | PC |
| Quasar | 一款基于 Vue 的企业级开源多平台UI库 | 18.7k | Razvan Stoenescu | Responsive |
| vant | 一款基于 Vue2 的移动 UI 组件库 | 17.5k | YouZan 有赞 | Mobile |
| vux | 一款采用 WeUI 设计的移动端 Vue UI 组件库 | 17.4k | Airyland | Mobile |
| mint-ui | 一款基于 Vue2 的移动端组件库 | 16.4k | ElemeFE 饿了么 | Mobile |
| BootstrapVue | 一款基于 Vue2.6 并采用 Bootstrap v4.5 组件和栅格系统设计的 UI 组件库 | 13.2k | pooya parsa & Troy Morehouse | Responsive |
| Vue Material | 一款简单、轻量级的采用 Material Design 的 vue 组件库 | 9.4k | Marcos Moura | Responsive |
| Buefy | 一个基于 Bulma 框架和设计的轻量级的 Vue 响应式UI组件库 | 8.7k | Rafael Beraldo | Responsive |
| muse-ui | 一款采用 Material Design 的 vue2 UI库 | 8.3k | (停止更新) | PC |
常用的 React 组件库有
| ui库 | 介绍 | Github stars | 作者 | 类型 |
|---|---|---|---|---|
| Ant Design | 一款企业级的 React UI组件库 | 72.2k | Alibaba 阿里-支付宝 | |
| Material-UI | 一款采用 Material Design 的简单可定制化的 React 组件库 | 68.7k | ||
| React-Bootstrap | 一款采用 React 构建的 Bootstrap 5 组件库 | 19.4k | ||
| Blueprint | 一款基于 React 的 UI工具集 | 17.8k | PC | |
| Fluent UI | 一款React组件、工具的集合 | 11.5k | Microsoft | |
| Semantic UI React | Semantic-UI的官方 React 组件库 | 12.3k | Semantic | |
| Evergreen | 一款 react UI库 | 10.8k | Segment.io | |
| reactstrap | 一款基于 Bootstrap4 的无状态的 React 库 | 9.9k |
常用的 Angular 组件库有
| ui库 | 介绍 | Github stars | 作者 | 类型 |
|---|---|---|---|---|
| Material2 | Angular官方提供的 Material Design 组件库 | 21.5k |
活跃度和流行趋势
在选择一款前端框架时，流行程度和活跃度是需要考量的一部分。被越多的人使用，说明在业界得到很好的认可，而框架的更新频率和社区&话题活跃度则代表了一款框架之后的趋势，如果作者和主要的 maintainer 都不再更新，那么这款框架基本上也就离自己的尽头不远了。比较通用的考察角度可以包括以下几个方面
- npm包 周期下载量（npm download）
- GitHub 收藏数量及趋势(github stars)
- 框架更新频率(last updated)
- 框架贡献者(contributors)数量
npm trends
参见 npm trends
npm 包的下载量与趋势直观的反映了现存项目对框架包的依赖情况。
但是有些框架可能会拆分为不同的包，在横向对比时不能很好的反应框架的使用量，只能反应对应npm包的下载量。
另外由于历史项目的依赖等，npm包下载量不能很好的预测未来技术的趋势。同时，考虑 registry 镜像的问题，taobao 的 registry 在中国可能有更广泛的使用，所以 npmjs 也不一定能够反映真实的反应国内的 npm 包下载量。
从图中我们可以看到 React 处于一骑绝尘的状态，jQuery 和 Vue 也将其他框架远远的甩在了后面。
这基本上反映了现存项目的框架依赖状态，React 在国际上应用广泛，而且在可预见的未来都很难有框架能够比拟 React。jQuery 在许多项目中仍旧有用武之地。Vue 也被大量项目使用。
GitHub Repo stars
| 框架 | GitHub Repo stars |
|---|---|
| React |  |
| Vue |  |
| Angular2 |  |
| Svelte |  |
| jQuery |  |
| AngularJS |  |
| Preact |  |
| Ember |  |
| Ploymer |  |
| Lit |  |
| Inferno |  |
| Zepto |  |
| San |  |
| Dojo |  |
Github stars 可以反映项目自在 Github 发布以来的关注度。
从 Github Stars 来看，Vue 和 React 均是最受关注的框架，甩了其他框架一个数量级。Angular、Svelte、jQuery 都超过了 5w 的收藏，可以说都是备受关注的框架。使用这些框架开始你的开发，基本上不会有什么大问题，它们都是经过了多数人的验证。
GitHub Repo Star History
GitHub Repo Star History 反映了项目在 Github 流行的趋势。
从 GitHub Repo Star History 来看，React、Vue、Angular 和 Svelte 的斜率比其它项目要大的多，说明这些框架正在变得更加流行（虽然 React、Vue 已经非常流行了）。
