vlambda博客
学习文章列表

框架概念最早出现在建筑学领域，它是一个可复用的设计构件，规定了应用的体系结构，阐明了整个设计、协作构件之间的依赖关系、责任分配和控制流程，它为构件复用提供了上下文关系。

针对前端应用开发领域，前端开发框架应该是一个应用工程的骨架，需要为应用开发提供整体设计、规矩开发流程、提供复用机制。

在传统的开发模式里，当开发者创建一个工程时，要么基于空的工程搭建，要么使用开源的或者公司内部的脚手架生成，或基于之前的工程拷贝代码、模板改造。目前，这类开发方式还广泛存在于各大公司中。

这类传统开发方式存在一些瓶颈和痛点，而开发框架的价值，就是为了解决这些痛点。社区里开源的开发框架很多，但它们的功能和目的大多相似，这里以Modern.js为例，在Modern.js中，列举了五点传统开发的瓶颈，具体如下：

1. 脚手架不方便复用和改进：不管哪种形式的脚手架，本质都是复制粘贴一堆样板代码，组成新的项目。时间长了，不同项目之间会差别非常大，如果要做统一的改进，或者把一个项目的沉淀和改进，应用到另一个项目里，都会很困难。另一方面，脚手架本身也在迭代改进，但因为脚手架是一次性的，一用即抛，这些改进不能对原先创建的项目带来好处。

2. 模板没有达到效果：开发脚手架需要各种项目模板。不但脚手架建设者需要提供多种模板，覆盖不同的需求，使用者也经常需要复制原有模板，修改成新的模板，导致模板数量爆炸。模板中有大量重复、又不会完全相同的内容，升级维护模板、在模板之间同步技术沉淀，都有成本。很多模板会缺少更新，长期停滞，把成本留给搭建项目的人。

3. 深度依赖某些库和工具：以Webpack为例，当前的前端项目已经严重和Webpack耦合在一起，导致业务项目中往往需要包含大量的与业务无关的配置内容。另一方面，Webpack本身可能过时，与Webpack耦合导致项目很难应用新的更好的技术和工具。

4. 工程化程度不够：传统的前端项目，对项目开发的工程支持只停留在比较低的水平，比如就像dev和build命令一样，局限于跟编译构建有关的环节，不能解决全链路的问题。

5. React框架能力不足：React本身只解决视图层的问题，距离一个Web框架还缺很多东西，在框架层面上，React是无偏见的，比如没有限制路由实现、组件类型、SSR 解决方案等，也没提供默认的配置和工具体系。

开发框架的价值，主要就体现在解决这些瓶颈和痛点上。

对于UI库，以React为例，官方定义React是用于构建用户界面的 JavaScript 库，所以React是一个用来帮助开发界面的JS框架。

而在实际应用开发过程中，除了UI界面，还需要路由管理、状态管理、权限管理、国际化、SSR、质量管理、组件管理等一系列功能，移动Web开发需要考虑多端适配，以及不同场景下的运行调试构建工具。能够提供这些完备功能、满足绝大部分业务开发场景的框架，才是开发框架。所以UI库是开发框架中的一部分。

下面这张对比图来自Modern.js的某次分享，可以很好地解释脚手架和开发框架的区别。

从这张图可以看到，脚手架生成的前端工程，只是将常用的功能和工具进行简单组合，对工程没有任何限制和约束，不方便升级、扩展、复用。

而开发框架从整体上对各类功能进行抽象规划，将各种功能的实现封装在框架内部，只暴露出统一规范的开发接口，在对工程进行了一定限制的同时，达到规范化和标准化的目的，也更加方便复用和升级，内部某一个工具的添加、更新、替换，都不会影响整个框架的使用。

Modern.js的主要功能，可以归纳成以下6个核心要素：

1. 提供现代Web开发范式；

2. 现代Web应用；

3. 内置工程最佳实践；

4. 包含Web开发全流程；

5. 提供工程标准体系；

6. 定制工程方案。

每一个核心要素都包含许多功能，整合起来基本上涵盖了Modern.js所有的功能模块，这里笔者选择了几个重点功能进行详细介绍，帮助大家更好地理解Modern.js的意义。

一、支持多种类型的工程

Modern.js收敛支持了应用、模块、应用集合三种类型的工程。针对这三类工程分别提供了不同的命令和功能。

1、支持创建不同类型的工程。

2、支持创建适用于移动端应用的多入口。

3、支持在应用和模块中启用某些功能。

4、支持在Monorepo应用集合中创建子应用和子模块。

二、支持一体化BFF

如下图所示，例子中包含API接口和前端组件，在前端组件中直接引入API文件进行调用，便实现了前端调用BFF接口的功能。

从上面这个例子可以看到，Modern.js的BFF有这样几个特点：

一是不用单独起Node服务，在执行【Modern Dev】命令以后，框架会检查项目中有没有api目录，有的话便会加载进服务之中；

二是使用import导入后像调用函数一样调用接口，将接口标准化，支持TS语法提示。这个功能的实现原理是在编译时转换语法，实际通过createRequrest调用接口，具体转换后的代码如下图所示。

基于BFF功能，框架还支持启用Express等运行时服务端框架，进一步编写服务端代码，这个功能官方称为Web Server。

三、支持SSR和SSG

Modern.js支持在开发调试中启用SSR功能，不用专门搭建一个Node工程，便能实现在HTML中直接包含DOM信息，可以快速展示首屏内容，也利于搜索引擎解析。具体如下图所示：

Modern.js能支持SSR，是因为Modern.js运行时本身就启动了Node服务，只是对开发者是无感知的，但这个Node服务只是开发时有，静态构建以后就不支持了。

为了让纯前端项目构建后依然可以获得类似SSR的效果，Modern.js提供了SSG功能。具体效果可以看下面这两张图，第一张是传统构建方式，第二张是SSG构建。

Modern.js框架提供的功能还有很多，比如支持Electron开发等等，大家感兴趣可以去Modern.js官网查看。

上文中笔者详细介绍了Modern.js框架的主要功能，在前端领域，Modern.js并不是第一个开发框架，在这之前已经有不少开发框架出现，其中一些框架已经广泛应用于前端应用开发之中。

每一个开发框架都有自己的设计思想，但它们都服务于前端开发，需要覆盖前端开发的业务场景，所以不同开发框架提供的功能往往是相似的。本文选取了React领域比较有代表性的Next.js框架和Umi框架进行介绍。

Next.js

Next.js出现得比较早，可以说是React生态里早期最流行的开发框架，也是React官方团队推荐的一个开发框架。Next.js官方定义是一款轻量级的应用框架，可以为开发者提供生产环境所需的所有功能以及最佳的开发体验，其核心功能主要包含以下九大特性：

可以看到，前面提到的SSR和SSG功能、BFF功能等，Next.js也有所支持。事实上，Next.js能流行起来，最主要的原因就是它对SSR和SSG功能的支持。

因为Next.js是先行者，后续出现的开发框架或多或少都对Next.js有所参考，所以上面这九个核心特性，本文中提到的Umi和Modern.js几乎都支持。

Umi

Umi是蚂蚁金服公司开源的开发框架，其最大特点是整合了蚂蚁和阿里的开源生态，如Antd、Qiankun、Ahooks、dumi等，都以插件的方式整合在Umi体系之中，同时Umi也是笔者了解中，前端开发框架里功能最强大、插件最丰富的。

下面这张图是Umi早期版本的架构图，可以大致体现Umi所包含的功能：

其中核心部分是umi-core这个库，从架构图里可以看到，Umi基于路由实现了SSR等功能，还提供了插件机制、生命周期管理、UI辅助等功能。

Umi基于tapable库，实现了一套非常强大的插件机制，Umi内部几乎所有功能都是通过插件方式提供的，包括【dev】命令，同时基于插件机制提供了大量Hook，开发者可以通过这些Hook开发自定义插件，从而实现应用功能的定制和复用。

Umi实现了源码、构建、测试、上线整个应用生命周期的管理。

Umi基于Ant Design Pro组件库，将路由、权限、菜单等功能整合成一体，提供了一套灵活的页面布局，包括导航、菜单栏、404等页面，从而做到让开发者无需关心布局。

上文提及的三个框架中，Next.js是早期最流行的前端开发框架，框架功能经过长期迭代，具备比较好的开发体验。

Umi是蚂蚁金服开源的开发框架，整合了蚂蚁金服强大的开源生态，在功能上有参考Next.js，此外，Umi还提供了强大的插件机制、UI辅助等功能。

Modern.js是近期开源的框架，特点是将各类前端工程收敛成三套标准工程体系。此外，Modern.js还基于Electron，对桌面Web应用提供了支持。Modern.js也提供了一套插件机制，不过内部功能没有完全插件化，插件可扩展的地方也不多。

总结：

本文介绍了前端开发框架的概念，并以Modern.js为例，对前端开发框架常用功能进行了介绍。如果有同学新开发复杂项目时，还在使用create-react-app之类的脚手架，或者使用团队里祖传的工程模板，不妨尝试选择一个前端框架去开发。