2019 年该用什么框架？

最近总有小伙伴问我，现在做项目该选用什么框架好呢？这个问题，回答不好是要向全国人民谢罪的，所以我查了很多资料，力求中西结合，文体两开花，希望能够对大家有些帮助。

本篇主要探讨一下当今流行的前端框架以及该如何选择适合的框架。

第一篇：前端主流框架

到底哪些是当今前端的主流框架，每个人有不同的看法，给大家推荐几个网页，可以实时了解大部分人的看法。

[1] Trending JavaScript repositories on GitHub

[2] 前端 top100

[3] GItHub Trending（非官网）

根据这几个页面的情况以及我个人的印象，目前比较热门的框架有这么几个（排名不分先后）：

Bootstrap、Vue、React、Angular

当然还有其它一些优秀的框架，这里不作赘述，欢迎讨论。

1.Bootstrap

先看看 Bootstrap 是怎么自我介绍的吧。

The most popular HTML, CSS, and JS library in the world.

可以说是很嚣张了，尽管有很多人不以为然，但目前来看确实是这样的。它由 Twitter 的工程师开发，一经推出就颇受欢迎，是 GitHub 上 star 前端排名第一的项目（总排名第二）。

优点：

• 简洁的风格： Bootstrap 提供简洁、清新的设计风格，做出的网页看起来比较舒服。

• 方便使用： Bootstrap 无需配置，只需要添加对 js 和 css 的引用即可。其模块化的 css 使使用十分简单，只需要给标签赋予 class 属性，如 btn btn-success，table table-striped 等。

• 移动端兼容较好： Bootstrap 遵循移动端先行的原则，在各个尺寸设备上都表现良好。

• 支持 SASS：在2018年1月下旬，Bootstrap 4 正式版发布，从 Less 迁移到了 SASS，过去最大的槽点之一不存在了。

缺点：

• 容易与已存在代码发生冲突： 如果在项目中途，想要使用 Bootstrap 增进体验，很可能和项目原有的HTML、CSS 和 JavaScript 产生大量的冲突，例如存在相同的类名等。

• 重量： Bootstrap 4.3.1 版本的总大小为 3.43 MB，我们如果在项目中使用它，起码需要引用 bootstrap.min.css(153 k) 与 bootstrap.min.js(57 k) 两个文件，这只是部分功能。当然，如果目标用户没有远隔重洋，这并不算是太大的缺陷。

• 浏览器支持： 由于国内浏览器市场较为复杂，尤其是部分企业内部旧版 IE 、360 浏览器占据主导地位，使用 Bootstrap 会带来一些困扰，但这个问题应该会逐步被解决。

---

小结

我自己还是蛮喜欢 Bootstrap 的，有时候在内网上线一个临时的展示页面，用它真的很方便，但它其实更像一个“库”，本身的能力比较有限。

---

2.Vue

官网：渐进式 JavaScript 框架。
GitHub：Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

比起上面的某 B 谦虚了许多。然而 Vue 在 GitHub 上平均收获 95 个 star，是 GitHub 有史以来星数第 3 多的项目。

优点：

• 渐进式： 所谓“渐进式”的意思就是可以自底向上逐层开发。Vue 十分轻巧，其核心库只关注视图层，不用一开始就像其它框架一样接受各种机制和组件，这也方便了与其它东西的集成。
  与渐进性串联在一起的优点还有：轻量、易用、灵活、模块化

• 响应式： 响应式即当我们改变一个数据值时，会触发一个页面的更新来反映这个变化，这在

• 方便的数据渲染： Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
  假设我们想把一个数据显示在一个元素上，如果使用 JS ，则需要操作 HTML DOM，而 Vue 只需要提供数据以及数据要绑定到的元素 id 上，隐式地操作 HTML DOM。

• 高性能： Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

• 单向数据流： Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

• 完善的中文文档： Vue 的作者尤大神是中国人，原生的中文文档学习起来简直不能再开心。

缺点：

硬要说有什么缺点的话，大概是作者太帅吧。

哈哈，客观来讲，Vue 是一个比较新的框架，生态系统没有一些老框架繁荣，而且跨平台方案尚未成熟，期待会慢慢解决啦。

---

小结

如果你想尝试构建一个中小型的网站，我想目前 Vue 是不错的选择，即使之前对它一无所知。

---

3.React

A JavaScript library for building user interfaces.

React 起源于 Facebook 的内部项目，主要用于构建 UI。GitHub 星数第四，哥儿几个竞争很激烈。

优点：

• 高效： React 具有和 Vue 相似的性能。原因主要是它减少了与 DOM 的交互。

• 灵活： React 可以方便地与已知的库或框架配合。而且使用 React 构建的组件可以复用。

• JSX： JSX 是一种 JS 的语法扩展，它执行地更快，比较灵活，缺点是看起来有些诡异。

• 跨平台： React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发，对开发者是非常棒的。

• 单向数据流： 与 Vue 类似。

• 繁荣的社区： 一是早，二是有 FB 背景，不得了啊。

缺点：

• 学习曲线陡峭： 学习 React 需要知道 JSX 和 ES2015，需要学习构建系统。

---

小结

React 相比 Vue 最大的优势一是跨平台，二是生态繁荣，具体选用哪个看个人实际情况啦。

---

4.Angular

Angular 分为 AngularJS(Angular 1) 和 Angular(Angular 2)两个版本， AngularJS 在复杂度和性能上存在一些问题，在 Angular 上得到了解决，这里我们只讨论Angular(Angular 2)。

Angular is a platform for building mobile and desktop web applications.

优点：

• 跨平台： 正如介绍所说，Angular 的代码可以在不同平台不同应用上复用。

• 高性能： Angular 通过 Web Worker 和服务端渲染，达到了较高的性能。

• 优秀的组件系统： Angular 可以使用自定义组件和大量现有组件扩展模板，可以方便地写出漂亮的应用。

缺点：

• 学习曲线陡峭： Angular 的设计目标是针对大型复杂应用，因此有较大的 API ，需要投入更多的学习时间才能使用。

---

小结

Angular 在开发大型应用的领域是有一些地位的。

---

我想在 2019 年这 4 个框架应该至少可以满足 80％ 的前端开发者的需求，根据自己的实际需要去选择就好啦。

感谢阅读~