2019 年选什么前端框架?

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% 的前端开发者的需求,根据自己的实际需要去选择就好啦。

感谢阅读~

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页