Skip to content
imshengli blog
Go back

什么是渐进式框架:Angular、React、Vue 设计哲学对比

什么是渐进式框架?Angular、React、Vue 三大框架的设计哲学对比,以及如何根据项目复杂度选型。

· 6 min

在 Vue 的官方文档中,有这么的一句话:

Vue 是一套用于构建用户界面的渐进式框架。

那什么是渐进式框架呢?

在说明这个问题之前,先了解一下前端框架。

前端框架

框架的存在是为了帮助我们应对复杂度。

但框架自身在存在复杂度, 这里就抽象出一个问题,就是要做的应用的复杂度与所使用的框架的复杂度的对比。 进一步说,是所要解决的问题的内在复杂度,与所使用的工具的复杂度进行对比。

Pick the right tool for the job.

三大框架的设计哲学

2018 年前端领域最主流的三个框架:Angular、React、Vue,它们各有不同的设计主张。

Angular:全家桶式框架

Angular 是一个完整的平台。使用 Angular 意味着接受整套方案:TypeScript、依赖注入、RxJS、模块系统、CLI 工具链,全部由框架规定。

Angular 项目 = 模板 + 组件 + 服务 + 模块 + 路由 + HTTP + 表单 + ...

优点是团队协作一致性高,大型项目的架构约束明确。代价是学习曲线陡峭,对小项目来说过重。

React:UI 即函数

React 的核心主张是 UI = f(state)。它只负责视图层,其他事情交给社区。这带来了函数式编程的理念:纯函数、不可变数据、单向数据流。

React 项目 = React(视图) + 自选路由 + 自选状态管理 + 自选构建工具

优点是灵活度极高,思维模型清晰。代价是需要做大量选择,初学者容易迷失在生态中。

Vue:渐进式框架

Vue 的核心主张是”最少侵入”。你可以只用它的模板引擎来渲染视图,也可以逐步引入完整的工具链。框架不强制你一开始就接受所有概念。

Vue 项目 = 从一个 <script> 标签开始,按需扩展

渐进式的具体体现

所谓”渐进式”,意思是 Vue 的技术栈可以按层次逐步引入:

第 1 层:声明式渲染
         └── 只用 Vue 核心,模板 + 数据绑定

第 2 层:组件系统
         └── 拆分页面为可复用组件

第 3 层:客户端路由
         └── 引入 vue-router,实现 SPA

第 4 层:状态管理
         └── 引入 vuex,集中管理共享状态

第 5 层:构建工具
         └── 引入 webpack/vue-cli,单文件组件、热更新

每一层都是可选的。一个简单的页面,用第 1 层就够了:

<!-- 最简用法:一个 script 标签引入 Vue -->
<div id="app">{{ message }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: { message: '只需要一个 script 标签' }
  });
</script>

随着项目变复杂,再逐层加入路由、状态管理、构建工具。这和 Angular 要求一上来就学完整套体系形成对比。

渐进式框架的核心观点

在知乎徐飞的回答中,强调:“渐进式代表的是主张最少”。

主张是框架对使用者的要求,它会影响在业务开发中的使用方式。 比如 Angular 是强主张的,使用时需要考虑是否和其他东西集成, 而 React 主张的是”函数式编程”的理念,它是一种软性侵入; 在 React 中,需要知道什么是副作用,什么是纯函数,如何隔离副作用。 徐飞说,不建议在中后台系统中使用 React,因为大多数人不知道如何把业务映射到函数式的理念中去, 还有,JS本身有太多特性和纯函数式的主张不一致;

Vue是渐进式的,没有强主张,作者推荐使用 Vue 的原因是: 要替换原系统中的那部分,直接使用 Vue 中的那部分功能就好了。

这段话的关键在于”主张最少”四个字。Vue 不要求你理解函数式编程,不要求你学 TypeScript,不要求你掌握依赖注入。你有多少能力,就用多少功能。

如何根据项目复杂度选框架

不同规模的项目,适合不同”重量”的工具:

项目类型复杂度建议方案
活动页、简单交互jQuery 或 Vue 核心
中小型 SPAVue + vue-router
中大型应用中高Vue 全家桶 / React + 生态
企业级复杂系统Angular / React + 严格架构

选择框架时要考虑的因素:

  1. 团队规模:人多时,Angular 的强约束减少沟通成本
  2. 项目周期:短期项目选上手快的,长期维护选生态成熟的
  3. 现有技术栈:已有 jQuery 项目要改造,Vue 的渐进式接入最平滑
  4. 团队熟悉度:框架的好坏不如团队对它的掌握程度重要

总结

“渐进式”不是一个技术特性,而是一种设计理念。它的本质是降低框架对使用者的要求,让复杂度的引入由开发者自己决定。项目简单时用简单的部分,项目变复杂时再逐步引入更多功能。

框架是工具,不是信仰。选对了工具,复杂度才是可控的。

参考文档


Share this post on:

Previous Post
前端性能优化:网络、渲染、代码与图片全链路指南
Next Post
2018 开篇:回顾与技术学习计划