前端框架分析

何谓“框架”？

“框”指约束，“架”即支撑，框架会规范我们书写代码时各个部分的结构以及它们之间的依赖关系和交互流程，简单点说，我们只需要遵循框架的规范去写业务，而与业务无关的内容由框架自身完成，从而提高开发效率。随着各种插件的完善，某类框架会逐渐形成一个完善的生态系统，如React全家桶。

为什么要使用框架？

随着业务越来越复杂，使用原生js开发的成本越来越高。

前端框架要解决的问题

传统的原生开发方式的不足

• 代码层面问题
  缺少规范，代码混乱->结构化开发
  缺少限制，容易冲突->独立文件，独立作用域
  缺少支撑，能力要求高->提供支持，只关注业务
• 效率问题
  关注所有流程->关注业务
  团队效率低->并行开发
  测试效率低->模块测试，自动化测试
• 传统的多页应用的问题
  路由体验问题->使用单页路由，提高用户体验
  无页面切换效果->可以添加过场动画
  浪费服务器资源->减轻服务器压力

框架开发的不足

兼容性问题，SEO不友好
有场景要求，开发自由度降低（受场景约束）
黑盒开发，框架本身有出错的风险
有学习成本

框架并不完美，但合理使用会极大地提高开发效率。

前端三大框架：Angular VS React VS Vue

Angular

• 背景：2009年发布，Google
• 主要版本：1.x，2.x，4.x，5.x
• 基于html的大而全的MVC框架

React （中文译为反应）

• 背景：2013年5月开源，Facebook
• 最新版本：16.x
• 基于js的视图层框架
• React 简洁 灵活 高效

Vue

• 背景：2014年2月开源，尤雨溪，现加入阿里Weex团队
• 主要版本：0.1x，1.x，2.x
• 基于html的视图层框架

框架对比

	Angular	React	Vue
组织方式	MVC	模块化	模块化
数据绑定	双向绑定	单向绑定	双向绑定
模板能力	强大	自由(jsx)	简洁易用
自由度	较小	大	较大
路由	静态路由	动态路由(v4)	动态路由
背景	Google	Facebook	阿里巴巴
文档	英文	英文	多语言
上手难度	较高	较高	一般
App方案	Ionic	RN	Weex

使用场景：

• Angular：后端开发人员构建CURD类型应用
• React：前端开发人员构建复杂的Web应用（严谨，灵活，可持续迭代，生态成熟）
• Vue：前端开发人员快速构建Web应用