前端架构-MOM架构及开发规范
前言
以MOM产品为前提提出的前端架构设计,首先需要提到几个关键词。
智能制造;精益生产;数字化转型;Saas平台;Paas平台;Laas平台;工业物联网;信息化;工厂数字化;数字看板;数字孪生;数字经济等等。
自工信部把智能制造放在国家战略上,以国家领导人提出的数字经济为核心,提升国家制造强度。各大软件供应商都想分一碗蛋糕。
如力软等早些年就进入到此行业中更是占用了先机。
我们就先以力软为例,是如何做到技术领先,并可以卖框架到其他中小企业并运用到项目中的。
从力软的技术支持上来讲,架构升级的版本可以说是,国内标杆。
如前端的框架,从C#的三层架构,到MVC,到如今的前后端分离,已经是符合时代的框架。
如后端的架构,从.net freamwork, 到如今的.net core,和如今并行开发的Java后端。
技术也是越来越符合如今的路线,所以力软至今也是一直在升级框架上的各个中间件及系统稳定。
当然,第一碗大蛋糕力软没赶上,反而让不是很出名的黑湖分去了,就因为一个名头,以技术为核心的国内首款saas产品云端Mes系统,并且如今成功融资多轮,且第一轮就融到了1.5个亿。
这都是已经出名并且做到国内领先地步上了。
那为何现在提到了MOM了呢,接下来就到了如何做到技术为核心打造一款前端架构。
接下来就以下几点,输出一些干货。
一。理解什么是MOM。
二。什么样的架构适合当下的MOM开发路线。
三。微前端为解决MOM架构提供的完善的解决方案
四。相关开发流程及技术路线。
一。理解什么是MOM。
目前业内普遍的解释是:MOM是生产运营层面的管理平台,通过协调管理企业的人员、设备、物料等资源,将原材料或零件转化为产品,满足企业制造碎片化、定制化需求。它不仅涵盖MES在内的生产阶段所有的软件系统,还覆盖制造运营全过程,让企业更容易协调各种系统间的工作。
举例来说,传统MES像一架战机,是一个整体的、庞大的系统,性能优良,指哪打哪。MOM更像航空母舰战斗群,灵活组合打击能力更强、范围更广,整体打击效率更高。
就技术而言得到什么答案呢?
所需业务能哪里过于大,并不是往常做项目一样,一个项目组就可以完成整体MOM的巨石项目。
那如何做到多项目组协同开发呢?
首先要考虑到的就是开发语言?简单的结论就是需要一款不限制语言的架构。
如何保证各项目组输出的解决方案风格一致呢? 简单的结论就是 需要一套固定的Ui库及业务库,和通用的第三方库
服务端方面我觉得如今已经没什么好说的,微服务和云计算这三年已经够火了,
有了这些答案,自然就知道如果选择一个适合MOM框架开发路线。
二。什么样的架构适合当下的MOM开发路线。
既然服务端使用的是微服务架构,那前端是不是也可以以微服务的理论去做一套框架的,还好国内有技术先驱《蚂蚁金融科技》
以阿里的qiankun为主,提供了一套稳定及可靠的微前端解决方案。
iframe,SSR等方案就不要再说了,毕竟在Saas平台上,性能要求也是蛮高的,更不用想着把所有的代码全放到一个工程中。
接下来上一张图片,以理想的开发项目过程为结果说明,并以此推出实现路线。
名词解释:
MOM云平台
集成各项目组各个行业,无论是离散还是非标都可以提交到云平台进行项目展示。并作为演示环境。
此时需要至少两点才可满足。
第一点,至少需要一个类似《Nvcos》的注册服务中心,这样可以进行服务管理,把各个模块变成插槽式项目
第二点。服务数据和正式数据的隔离。也就是多租户问题。建议采用共享数据库,隔离数据架构。
NPM包管理
专门管理底层组件库,公共方法,业务组件等等的框架可集成的公司级中间件。
此时至少需要三点。
第一点,通用的组件引用方式。这个没什么好说的,提交到github上,注意一下导出方式,需要同时支持按需加载,全局加载和window对象加载
第二点,要做到组件库统一管理,制作好升级流程,开发组件时考虑好向上兼容的问题。
第三点,工具包是否私有化,是否在需要部署一个私有化npm包管理工具,这里可以用《verdaccio》
技术文档
专门整理框架相关知识点。这个需要很费事,建议有专人维护并发布,且需要开发人员提供升级文档。
这里有几个难点。
第一点,开发人员懒,难以维护发布日志。这里提供两个常见的开源库《MRDoc》《hi knowledge》,这是比较方便实用的且免费一键部署的开发知识库网站
第二点,分类关系提前设置。 例如前端开发规范,后端开发规范,单表页面开发流程,组件实用技巧,框架升级日志,组件升级日志等等
第三点。增加评论功能,负责框架开发可以随时回复开发人员的问题。
自动部署
这个没什么好说的,就是模拟发布操作过程,这个为什么要列出来呢,因为模块过多,后期难以维护,部署成本高,容易服务器冲突,所以通过自动化工具,实现一键式部署程序,这里用到的是《jenkins》。
难点不多,就是需要一个会使用的人,专门为团队配置发布脚本。
Api帮助网站
以现在开发规模,基本已经全面转成前后端分离的架构了,无疑在前后端沟通时增加了额外的成本,所以可以通过api帮助网站,前后端可以不在沟通,主要通过业务经理出的原型和业务流程说明,进行各自开发任务,后端开发后,通过Api网站进行自测,前端也可以通过该网站进行,开发前的接口测试工作,也就是说,后端开发工作比前端工作最好提前一步走,这里推荐使用《Swagger》。这个虽然很古老,但是很常用,而且网上也有很多主题包可以使用,并且可以定制化开发。
难点在于,开发工作会变成更加饱和。
代码生成工具
由于现在开发规范愈发统一,所以代码生成变得反而容易,加上Restful api 的规范。使基础页面自动生成变得容易。
实现方法有二。
其一。利用模板页面进行变量替换,此办法简单易懂,方便维护开发,但是升级难,还好底层组件相关通用全在npm中。
其二。利用代码块进行模板页面拼接,每个代码块进行变量替换,但是开发难,升级反而容易。
推荐使用第一种,先进行快速实现。
技术栈
这个就只能列举一些常用关键的。
《qiankun 2.6》 这个不用说了,主要此套框架就依靠这个来部署的,实现多模块插槽式开发,达到微前端效果。 该技术是不限制开发语言的,只要最后打包规则一样即可。
《devExtreme》 这个听说的人很少,但是说到他的制作者应该有过mes经验的,必然听过,不然我觉得你mes做的可能有点晚,当然我是指c端的。这个库的公司叫做《devpress》,对,就是他,C端的管理系统的控件库,开发公司也是这个名,大概五年前推出了前端库,但是当时只有三层架构和mvc的版本,友好度低到发指,别说国内了,国外使用的人都少。但是现在嘛,虽然国内用的人少,但是国外已经流行起来,并以devPress的大名,越来越多的公司开始使用该ui库,而且该库几乎每天都在更新,目前已经发布到V22.x.x的版本了,里面包含了所有devpress的控件,并且推出了很多适应于B端的控件,且支持各种流行的开发语音。和qiankun 无要求技术栈相同。
《antV》 图表库所有。虽然devExtreme也有图表库,但是毕竟不是专业做图表的。而且antv是蚂蚁出的,毕竟蚂蚁出品必是精品。
lodash和moment 个人建议不要引用的项目中,不如自己手写,因为没必要,引的话,资源虽然不大,但是多余,不如需要什么写什么,更方便自己维护书写文档。就算引用也可以模块内部独立引用,互不影响。