微前端的一些思考(UI模块篇)

作者: 张阳君 分类: 前端技术

Docker流行之后,后端越来越推崇微服务架构。前端这两年走过了蛮荒生长时期,进入工业化生产,微前端的概念也慢慢被炒热。微前端的概念很简单,就是能够独立开发,独立部署并且可以很方便地进行集成的架构。现在网上流传着多种微前端的实现方案,诸如路由重定向iframe通讯组合独立组件等等,有兴趣可以自行百度,个人觉得这些方案无法解决前端开发的痛点,反而有点“为了微前端而微前端”的味道。要实现微前端技术架构,首先得搞清前端模块有哪些种类

前端模块的分类

前端模块按照业务划分一共就两类,一类是不带业务的纯UI模块,另一类是带业务、能够和后台进行交互的业务模块。针对这两类模块,微前端应该给出不同的实现方案,不能混为一谈。

纯UI模块的微前端实现

纯UI的前端模块不涉及任何ajax操作,如果每个模块作为微前端的物料,将各个UI模块组合之后,是必然要进行二次开发的。这种微前端,我们可以制作一套脚手架来实现。具体原理我画了一张图,如下:

纯UI微前端原理图

首先我们需要一套项目模板和UI模块模板,UI模块模板主要承载开发工作,所有UI组件可以透过这个模板展示出来,同时每个UI模块模板可以独立编译部署,上线能进行展示,并且可以基于readme生成参数标注和使用说明。我们通过脚手架在项目中加入某个UI模块时,脚手架主要执行如下步骤:

  1. 抽离模块中的核心UI代码片段,塞入项目模板的module文件夹
  2. 在脚手架指定的页面顶部import该module的文件夹路径,并在页面中调用相关组件
  3. 分析项目模板和当前模块模板的差别,给项目模板安装新增依赖
  4. 开发中的项目可以看到新增的UI模块,接下来就可以进行二次开发了,可以根据该UI模块的使用说明给组件指定不同的传入参数,也可以修改module里面的UI源码

上述过程中的第二步可以视情况改为直接安装相应UI模块的npm包,前提是你得在开发完UI模块后同步上传其npm包,与此同时第三步的安装新增依赖也可以省略了(新增的其他依赖npm会自动安装)。源码安装UI模块的好处是,可以浏览并修改源码,可以深层定制模块以适应业务需求。

这样一套脚手架和微前端库已经有现成的实现了,阿里的飞冰就是其中的佼佼者,有兴趣可以去飞冰官网看看。飞冰官网地址:https://alibaba.github.io/ice/。我在公司也实现了一套脚手架和纯UI的微前端库,不过是基于命令行的,和飞冰大同小异,本人最大的体会是:规范是实现纯UI微前端的前提,UI模块的模板和项目模块的模板是需要制定使用规则的。

个人认为,纯UI的微前端更有使用价值,毕竟定制化的需求总是存在的。我会在下一篇文章聊聊如何搭建业务模块的微前端架构,敬请期待。

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!