前言
以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 个人建议不要引用的项目中，不如自己手写，因为没必要，引的话，资源虽然不大，但是多余，不如需要什么写什么，更方便自己维护书写文档。就算引用也可以模块内部独立引用，互不影响。