【总结】2017年当下最值得你关注的前端开发框架，不知道你就OUT了！

 

近几年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。

在这篇分享中，我将总结2017年当下最值得你关注的前端开发框架，数据主要来自于GitHub上。流行的框架不代表最好，选择框架最重要的标准还是最适合自己项目的，就是最好的。

本文将介绍：

1、框架的概念和必要性

2、前端流行开发框架具体列举

3、总结和建议

 

---

 

框架的概念和必要性

框架是应用程序的骨架。它要求以特定的方式来进行软件设计，在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。

框架通常提供了比类库更高层次的抽象，帮助快速构建项目的前80％。

框架的缺点：

• 如果你的应用程序超出了框架的范围，最后20％可能会很难
• 框架更新很困难
• 核心框架代码和概念很少更新

为什么要选择框架？

构建和开发前端最重要的基础工作就是选择一个高效并且符合需求的web前端框架，一个合理并且高效开发的框架并不仅仅降低你的时间成本，同时也会给你持续开发的信心和乐趣。

 

---

 

 

前端流行开发框架具体列举

 

 

1. Bootstrap

Bootstrap 毫无争议是最领先的前端框架。鉴于其超级强大的人气，而且每天都还在不断增长。

几乎每个开发人员都知道来自Twitter的开发框架-bootstrap。 它可能是最老牌的前端UI框架之一，最早版本发布于2011年。

现在已发布bootstrap4.0最新版本。

 

 

优势：

• 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
• 浏览器支持：所有的主流浏览器都支持 Bootstrap。

      

• 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
• 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

• 它为开发人员创建接口提供了一个简洁统一的解决方案。
• 它包含了功能强大的内置组件，易于定制。
• 它还提供了基于 Web 的定制。
• 它是开源的。
• 比其他框架提供了更多的资源（包括文章、教程、第三方插件和扩展，主题构建等等）。

 

2. React——来自于Facebook

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React框架本身和我们常用的JavaScript MVC框架，如：AngularJS，Backbone，Ember等，没有直接的可比性。

在React的官方博客中明确阐述了React不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具。

所以顶多算是MVC中的V（view）。React并没有重复造轮子，而是有很多颠覆性的创新。

 

优势：

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

 

3. VUE

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

 

优势：

• 1.简洁
• 2. 轻量
• 3.快速
• 4. 数据驱动
• 5.模块友好
• 6. 组件化

 

4. konckout

Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。

任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。

 

 优势：

• 1.优雅的依赖跟踪-任何时候当数据源模型发生变化时，它都能够自动的更新你UI的指定内容。

• 2.声明式绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定，你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。

• 3.良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。

• 4.纯JavaScript库-兼容任何服务器和客户端技术。

• 5.可以很好的应用到已有的应用程序中-而不需要程序主要架构发生变化。

• 6.简洁-采用Gzip压缩之后只要13K。

• 7.兼容任何主流浏览器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)

• 8.一套全面完整的规范（采用行为驱动开发）-这意味着在新的浏览器或平台中也能够很容易验证通过。

 

5. Backbone

backbone.js是一个web端javascript的mvc框架，算得上是重量级的框架。

它能让你像写java代码一些写js代码，定义类，类的属性以及方法。

更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。

优势：

• 1.体积小, 制定性很强
• 2.提供underscore工具函数, 按照每个程序员不同的Style来处理数据, 或者你自己封装
• 3.提供自定义模版引擎, 也就是说, 你想怎么渲染, 就怎么渲染
• 4.提供完整的RESTful 风格API.想怎么写就怎么写
• 5.模型 , 集合, 视图分离. 逻辑清晰. 只要是个稍微懂规范的程序员, 都可以写出不错的逻辑结构

 

6. Angular 4.X

Angular 2.0于2016年9月发布。这是一个完整的重写，它引入了使用TypeScript创建的基于模块化组件的模型。Angular 4.0于2017年3月发布。

 

 

优点：

• 开发现代Web应用程序的解决方案
• 是标准MEAN栈的一部分，尽管只有少量的教程可用
• 对于熟悉静态类型语言（如C＃和Java）的开发人员，TypeScript提供了一些优势。

缺点：

• 学习曲线陡峭
• 大的代码库
• 不能从Angular 1.x升级
• 与1.x相比，Angular 2.x较难理解

 

---

 

总结和建议

目前最为流程的框架是bootstrap，同时其它的框架也在向着流行的趋势发展。

如果需要一个安全的、通用的Web应用程序，可以考虑使用Vue.js或react。

整体框架已经不再受欢迎了，如果你需要对一个较大型项目进行严格的结构管理，AngularJS是一个不错的选择。目前大多数人坚持使用Angular 1.0版本，但是长远来讲，如果你愿意学习TypeScript，Angular 4.x版本是个更好的选择。