前端框架选型说明

目前 vue,angular,react 这三个前端框架非常流行,但是在很多场景下,我们在选择技术路线的时候总是很纠结,不知道该选择哪一种,这个问题的本质是对框架的优劣认识不清晰。在这里不详细对比技术细节,因为技术细节差异不是我们选择框架的首要因素。

如何选择框架

我们该怎样选择一个框架,我觉得可以从以下几个角度去分析对比几个框架的优劣

  • 这个框架的使用场景。比如是否同时适用于 Web 端和原生 App 或者快速搭建一个小型项目等等。
  • 团队当下的技术能力。学习新框架的时间成本,后期团队维护的成本。
  • 框架能解决哪些问题。优劣势是什么。
  • 框架的生态系统。是否有繁荣的生态系统供我们学习使用。
  • 跨平台性。是否需要同时支持移动端和 pc 端

框架的共同点

都有很好的性能(这里的 angular 指的是 2.0+),都支持数据绑定,组件等基本功能。

框架的不同点

Angular

这是一个给开发者一整套解决方案的框架,相对于 vue 和 react,angular 不需要搭配其他库,就可以构建出一个大型项目,但它并不太适合开发小型应用。下面是 angular 的一些特点~

1.这是一个完整的框架拥有良好的项目结构。通常情况下,我们编写的 js 代码是没有正规的项目结构的,是因为在小型项目中对结构的要求很低,但是在大型项目中则完全不同,比如 webapp 中 ionic 框架就是用的 Angular 作为内核个人觉得也是看中了 angular 的这个特点。但是会丢失一些灵活性。

2.拥有自己的构建工具。在 Angular-CLI 使用打包编译,生成组件等都有相应的命令行,非常方便快捷,虽然 vue 和 React 也有构建工具,但是局限性很大,需要配合其他构建工具,个人觉得 Angular-CLI 足够强大,这也是一套完整的框架带来的红利,不必在选择库上浪费时间。

3.体积较大。虽然在 angular2+ 之后使用了 AOT 和 tree-shaking,但是相对于其他轻量级框架来说还是略显臃肿。加载较慢

4.学习成本较高。需要很多基础概念和使用较复杂的 api 接口,入门相对困难。而且 angular2.0+ 用的是 ts 语言,需要对 ts 语言有一定程度的了解。而且从 angular1.x 升级到 2.x 的时候框架几乎是重写了一遍,导致之前用 angular1 写的程序维护起来比较困难。如果是新入门学习 angular,推荐从 2 开始学起。

5.跨平台优势。有 ionic 等使用 angular 作为内核的框架,如果是用 angular 开发 pc 端+移动端的跨平台开发,组件服务指令都可以复用,这对开发者来说是非常不错的,react 有 React Native 同样也是跨平台非常不错。vue 有与阿里合作 Weex,但是目前来说跟前两个还有很大差距。

6.生态系统庞大。angular 和 react 都有庞大的生态系统,vue 相对较差

总结:它是一个成熟完善的框架,而 React 和 Vue 只是一个 UI 组件库。angular 适用于大型项目,所以会有一些代价,比如学习成本高,如果你只是想用到组件,数据绑定等基础功能去开发一个小型应用,那么 angular 不是最好的选择

Vue

特点:灵活,构建项目可大可小,学习成本低,性能好,适合开发小型应用。这里不是说它不能构建大型应用,只不过个人觉得你如果想开发一个尽可能的小和快的应用,我建议使用 vue

1.灵活性。它从不限制你用什么样的代码组织结构,更加随意。

2.实用性。它虽然很轻量,但却拥有很强大的实用性,数据绑定,计算属性侦听器,组件等常用功能不次于 angular。在很多方面比 angular 更容易上手

3.体积小。vue 相对于 angular 体积小了很多。

4.学习成本较低。你只需要有良好的 HTML 和 JavaScript 基础就可以通过官网上的阅读指南快速投入开发,相比于 react 和 angular 都有很大的优势,angular 需要学习各种各样的 api,理解各种基础概念,还有学习 ts 语言才能进行开发;react 需要知道 JSX 和 ES2015 还需要学习构建系统等

5.跨平台优势较差。与其他两个框架相比,跨平台优势较差,虽然与阿里合作 weex 但是差距还很大。

总结:轻量,学习成本低等等,优点很多。缺点就是他的生态社区跟 angular 和 react 目前还差很远

React

个人觉得 React 和 Vue 有很多相似之处

  • 轻量级,响应式组件
  • 都利用 “Virtual DOM” 虚拟 DOM 实现快速渲染
  • 都服务器端渲染
  • 易于集成路由工具,打包工具以及状态管理工具
  • 优秀的支持和社区

1.灵活性。这点跟 vue 很像,React 可以与已知的库或框架很好地配合。

2.生态圈强大。因为 react 把路由库和状态管理库交给社区维护,虽然相对来说这些方面不如 vue 和 angular 的官方发布稳定,但是造就了生态圈的繁荣。

3.跨平台优势。React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发,类似于 ionic。

4.学习成本一般。在你开始学 React 前,你需要知道 JSX 和 ES2015,相对于 vue 是学习难度高,相对于 angular 来说比较好学,如果要构架大型应用,它的生态是相对复杂,个人觉得没有 angular 官方发布的文档清晰。

总结:react 和 vue 一样只关注视图层,只是一个 UI 组件库,这跟 angular 有本质的区别,如果 react 想开发大型应用需要配合第三方库,他的跨平台优势和生态优势大于 vue。

还有其他的一些前端框架像 Ember,Knockout 等就不一一列举了,可以 点这里 查看他们的差异

选择 Vue 理由

首先我想说,没有哪个框架是绝对的好与不好,只有合适与否。之所以选择 Vue 的理由有如下几个:

  1. 学习成本较低,原因在上文中已说明
  2. 模板和渲染函数的弹性选择
  3. 简单的语法及项目创建
  4. 更快的渲染速度和更小的体积

第三方 UI 组件库选择

Element UI VS iView

主要从以下几个方面来做对比

  • 使用率(npm 平均下载频率,组件数量,star, issue…)
  • API 风格
  • 打包优化
  • 与设计师友好性

使用率(npm 平均下载频率,组件数量,star, issue…)

npm 下载次数及 issue,目前明显未解决 bug 遗留数量,

PS:这个应该跟生态也有关系, 用 element 的人多,发现 bug 的几率更大,另外 iview 里面有很多 issue 写明是 UI 组件的问题 但未标明是确切的 bug


以上截图截止时间:2018.11.1
以上对比其实可以看出, element 开发者团队规模大于 iview 团队,其结果就是 无论是提交代码频率, 发布版本数量 都比 iview 更强!

其他数据不一一列举了,可以去 github 上自行查看
iview
element

结论:

  • element 生态更好,使用频率远超过 iview ,element 开发团队实力更强
  • 一些小众组件上各有所长 整体 iview 更丰富(时间轴,加载进度条,气泡卡片,BackTop,图钉等)
  • 两者 api 总体比较 ,iview 要比 element 简洁许多。 饿了么更侧重于在 template 里直接去渲染模板