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

 

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

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

本文将介绍：

一、框架的概念和必要性

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

三、总结和建议

 

---

 

框架的概念和必要性

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

框架一般提供了比类库更高层次的抽象，帮助快速构建项目的前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版本是个更好的选择。