主流前端框架简介

Web 框架比较

Angular / React / Vue

框架共同点

  • 实现前端开发的数据与结构分离
  • 完善的组件化设计,可复用的前端组件。
  • 虚拟DOM,性能表现都很出色,差别不大。
  • 必需语言:Javascript / Html / CSS;可选:ES6 / Typescript
  • 官方提供 StarterKit,一键安装开发环境,快速开始。

框架差异

Angular React Vue
学习难度 困难 中等 简单
框架定位 完整的前端架构、工具链 仅视图层 视图层 + 必要工具
技术生态 丰富的自有模块 丰富的第三方插件和社区支持 较丰富的自有模块和第三方插件
优点 熟练后开发效率高 更好地满足自定义需求 上手快,容易理解
缺点 上手慢,需要理解的框架概念多 花更多时间选择插件、构建架构 语法糖多,初学者开发复杂项目容易使用不当
适用项目 中大型项目 各类项目 中小型项目
使用者 较少

移动端框架比较

Ionic / Cordova

Ionic Cordova
跨平台 * 同一份代码,Web 页面 / iOS App / Android App
较原生 App 开发的优势 * Web 技术开发速度快;跨平台;低成本
底层框架 Angular
UI 界面 移动设备的 UI 规范,丰富的 UI 组件,主题样式可选、可定制
使用 UI 组件的缺点 UI 组件的可定制程度低;遇到 Bug 自行修复难,需等官方修复。
系统功能调用 蓝牙、健康套件、指纹认证等,及 Cordova 插件支持的功能。 通过丰富的第三方插件调用各种系统功能
性能(官方) 移动端优化工作(限制 DOM 交互、移除 jQuery、触发硬件加速等)
性能(实际)* iOS 和安卓旗舰设备上效果好,使用流畅;中低端安卓设备上效果一般,会出现卡顿。
开发者文档 * 丰富
收费服务 实时部署、错误监控等

* 表示共同点

其它主流的移动端框架

  • 饿了么 Mint UI (Vue)
  • 蚂蚁金服 Ant Design Mobile (React)
  • Onsen UI (Angular / React / Vue)

Q&A

  • Q: 什么是混合开发?
    A: native + web = hybrid
  • Q: 如何选择框架 or 原生 or 混合?
    A: 产品需求、开发人手、开发周期、后期维护

Thanks !