最新公告
  • 欢迎您光临IO源码网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 微前端在小米 CRM 系统中实践「值得参考」

    微前端在小米 CRM  系统中实践「值得参考」插图

    一、前言

    大规模组织的组织结构、软件架构不断变化。 移动优先(Mobile First )、App中台(One App )、中台战略等各种口号相继提出、修正、发展。 同时,业务也在不断发展,应用程序不断膨胀,映射到软件体系结构。

    现有的Web应用程序(SPA )不能很好地部署和部署,随着时间的推移,各个项目越来越臃肿,Web应用程序的维护变得越来越困难。

    微前端是类似于微服务的体系结构,将微服务的理念应用于浏览器端,即Web应用程序从单一的单体应用程序转换为多个小型前端应用聚合为一的应用。 每个前端应用程序可以是独立运行、独立开发、独立部署

    Techniques,strategiesandrecipesforbuildingamodernwebappwithmultipletipleteamsthatcanshipfeaturesindependently.- microfrontly

    关键词:独立运行、独立开发、独立配置、易于部署,与解耦、聚合、技术堆栈无关

    二、实施微前端的六种方式

    在《前端架构从入门到微前端》这本书中,微前端的实施分为六种。

    2.1 路由分发

    路由分发微前端,即根据路由将不同的业务分发到不同的独立前端应用程序。 这通常可以通过HTTP服务的反向代理来实现,也可以通过应用程序框架附带的路由来解决。 图:

    微前端在小米 CRM  系统中实践「值得参考」插图(1)

    2.2 前端微服务化

    前端微服务化是微服务体系结构在前端的一种实施。

    采用这种方式意味着在一个页面上同时存在并运行两个以上的前端应用程序。 图:

    微前端在小米 CRM  系统中实践「值得参考」插图(2)

    现在主流的框架是Single-SPA、qiankun和Mooa,后者是基于Single-SPA的包。

    2.3 微应用

    微应用程序化意味着开发时应用程序以单一、微应用程序的形式存在,执行时通过构建系统来整合这些应用程序,整合成新的应用程序。

    由于微应用程序化大多通过软件工程进行前端应用程序的汇集,因此也称为组合式集成

    微应用程序化只能使用唯一的前端框架。

    图:

    微前端在小米 CRM  系统中实践「值得参考」插图(3)

    2.4 微件化

    小部件可以直接嵌入在应用程序上运行的代码,由开发人员预先编译,无需在加载时修改或编译。 微前端小部件化是指各业务组最初创建自己的业务代码,将编译的代码部署到指定的服务器上,加载运行时指定的代码即可。

    图:

    微前端在小米 CRM  系统中实践「值得参考」插图(4)

    2.5 iframe

    iFrame非常古老,每个人都认为是普通的技术,但一直很有用。

    HTML内联框架元素iframe表示嵌套的阅读上下文,可以有效地将另一个HTML页面嵌入到当前页面中。

    iframe可以创建新的独立主机环境。 也就是说,前端应用程序之间可以相互独立地工作。 采用iframe有几个重要的前提条件。

    网站不需要SEO支持

    有适当的应用程序管理机制。

    在许多业务场景中,如果难以解决的问题是不可避免的,可以部署iframe来解决。

    2.6 Web Components

    Web Components是一种多种技术,允许开发人员创建封装在代码之外的可重复使用的自定义元素,并在Web应用程序中使用。

    在真正的项目中使用Web Components技术离现在有点远,与Web Components合作构建前端应用是面向未来进化的体系结构。 或者,将来可以用这种方法构建应用程序。

    图:

    微前端在小米 CRM  系统中实践「值得参考」插图(5)

    在实际的业务场景中,经常组合使用上述六种方式中的几种,或者是某种方式的变种。 看看我遇到的真正场景。

    三、真实的业务场景

    现有的三个内部系统以下称为old-a、old-b、c。 其中,old-a和old-b是旧的前后端未分离项目,c是前后端分离的SPA应用,三个系统的架构图大致如下。

    微前端在小米 CRM  系统中实践「值得参考」插图(6)

    可以看到,old-a在一台服务器1上运行,old-b在服务器2上运行,C系统的前端资源在服务器2上,C没有自己的域名。

    三个系统都是对后端同学进行维护和开发,他们的需求如下。

    统一的域名。

    统一的接口和交互。

    系统需要能够简单地扩展

    在开发阶段不想每个系统都有独立的代码仓库

    CI构建

    四、怎么改造?

    4.1 关键点

    考虑到开发同学的需要和开发成本、维护成本和将来的扩展性,系统改造的要点如下。

    申请统一的域名(暂时称为crm.mi.com)。

    调整old-a和old-b两种旧的系统样式以接近系统c。

    三个系统使用统一的菜单和权限

    三个系统使用统一的SSO

    c系统和正在开发的x个系统使用CI解决打包和手动copy问题。

    4.2 微前端几种方式对比

    整体改造方案采用微前端的思想进行。 比较以上六种方法(单击以查看放大图):

    微前端在小米 CRM  系统中实践「值得参考」插图(7)

    4.3 实施

    对于以上几种方式,在具体的实施中采用了路由分发、iFrame、应用微服务化、微应用化的融合方式。 或者可以说是某种方案的变种。 因为改造后同时具备这些方案的特征。

    使用single-spa改造c系统和正在开发的x系统,使用iframe访问旧系统。

    改造后如下图所示。

    微前端在小米 CRM  系统中实践「值得参考」插图(8)

    此时,两个旧系统位于各自的服务器上,c和将来的多个应用程序位于同一台服务器上。 然后,Nginx层为旧系统分配两种路由(暂时称为old-a和old-b ),向各自的服务器发送请求,路由发送到C和xx应用程序的服务器。

    使用React框架的c和xx应用程序根据single-spa改造后,旧系统iframe如何访问?

    部署菜单时,会识别旧的系统路由,并以iframe方式批量处理其中一个应用程序。

    图:

    微前端在小米 CRM  系统中实践「值得参考」插图(9)

    改造后的微前端架构图:

    微前端在小米 CRM  系统中实践「值得参考」插图(10)

    五、一些问题

    5.1 子应用注册方式

    官方样本:

    //single-spa-config.js

    import { registerApplication,start } from ‘single-spa’

    注册应用程序(‘应用程序名称 ‘,加载函数,活动函数)

    start ()

    function loadingFunction() {。

    return import (‘ src/app1/main.JS’ )

    functionactivityfunction (location ) {。

    return location.pathname.index of (‘/app1//’ )==0

    添加应用程序时,必须修改single-spa-config.js文件。

    要以可配置的方式实现子应用程序注册:

    //single-spa-config.js

    import * assinglespafrom’ single-spa’

    importconfigfrom’./manifest.JSON’

    注册应用程序(config )

    singleSpa.start ()

    函数注册应用程序(conf ) {。

    conf.forEach(application={。

    singlespa.register应用程序(

    application.name,

    ()=import (`./$ { application.name }.app/index.JS ` )。

    path prefix (application.active rule,application.strict )是,

    )中被调用,将出现故障

    )。

    function pathPrefix(prefix,strict) {。

    return function(location) {。

    if (严谨) {。

    return location.pathname===prefix

    return location.pathname.starts with (` $ { Prefix } ` )

    //manifest.json

    [

    {。

    ‘name’: ‘layout’,

    ‘活动规则 ‘ :’/’

    },

    {。

    ‘name’: ‘welcome’,

    ‘activeRule’: ‘/ ‘,

    ”strict’: true

    },

    {。

    ‘name’: ‘iframe’,

    ‘activeRule’: ‘/link’

    },

    {。

    ‘name’: ‘app1 ‘,

    ‘activeRule’: ‘/app1 ‘

    },

    {。

    ”name’: ‘app2’,

    ‘activeRule’: ‘/app2’

    []

    5.2 共享cookie

    统一域名的一大好处是iframe域名和主应用程序域名相同。 如果没有跨域,则可以登录到layout集成SSO,通过cookie共享让其他模块获取登录信息。

    5.3 应用之间数据共享及通信

    在这次改造中,由于与应用程序间的数据共享无关,因此没有顶级的store概念。 模块之间的简单通信可以基于postMessage或浏览器的本地事件进行通信。

    //应用程序a

    window.dispatchEvent (

    newcustomevent (‘ iframe : change’,{ detail : { path :’/a/b/c ‘ } )

    )中被调用,将出现故障

    //应用b

    window.addevent listener (‘ iframe : change’,(event)={。

    console.log(event.detail.path )

    )。

    5.4 css隔离

    样式分离有多种处理方法,包括BEM、css Module、CSS前缀、动态加载/卸载样式表和web组件自己的分离机制。

    这次,像postcss插件: postcss-plugin-namespace那样附加css前缀来分离样式。 但是,这个插件不能满足需求,我们的应用程序分布在src/下,命名为name.app,需要给不同的应用程序加上不同的前缀。 因此,我们使用自己定制的插件。

    post CSS.plugin (‘ post CSS-plugin-namespace’,function () )

    返回函数(CSS ) {。

    css.walkRules(rule={。

    IF (Rule.Parent Rule.Parent.tyPe==’ AT Rule’ Rule.Parent.name!==’media’) return

    const file path=rule.source rule.source.input.file

    const appName=/src\/(\S*? \//.exec(filepath)[1]|||足球

    const namespace=appname.split (‘. ‘ ) [0]|||’。

    rule.selectors=rule.selectors.map (s=` # $ { namespace } $ { s====’ body ‘? ‘ ”’ : s} ` )

    )。

    )。

    5.5 js沙箱

    有严重不严重的问题,可以实现js隔离,以防止子应用程序之间的全局变量相互干扰。 常见的方法是通过给全局变量(如css的BEM )加前缀,以约定的方式避免冲突。 这种方式很简单,但不太可靠。

    qiankun内部的实现方式是在应用程序的bootstrap和mount两个生命周期开始之前分别制作全局状态的快照,在应用程序的剪切/卸载时在bootstrap开始之前的阶段制作状态

    六、优化体验 PWA

    创建桌面图标,快速访问

    服务工作器缓存。 优化大文件和不经常更改的文件缓存的加载。

    七、 还可以做什么?

    上述改造基本上满足了业务需要,这项业务还有更多的方法,可以体验更好。

    使用lerna统一管理所有项目,使维护变得容易,每个应用程序都有独立的仓库,可以独立开发。

    使用SystemJS,可以动态加载应用程序,实现独立部署。

    八、总结

    如上所述,这次的实践方式是微前端实现方式的一些结合,或者是某种方式的变种。 理论上可能不是最优的,但在具体问题上是最优解。 体系结构设计必须与当前试图解决的问题一致。“没有最优的架构,只有最合适的架构”

    微前端不是框架或工具,而是一组体系结构系统。

    此系统除了微前端的基础设施以外,还需要微前端配置中心(版本管理、分发战略、动态构建、中心化管理)、微前端观察工具

    整个系统的构建是一项巨大的工程,现在大部分团队都使用微前端的模型和思想来解决现有系统的弱点。

    作者|木子朗

    https://www.Li shuaishuai.com/architecture/1344.html

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!384324621@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有★币奖励和额外收入!

    IO 源码网 » 微前端在小米 CRM 系统中实践「值得参考」

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    IO源码吧
    一个高级程序员模板开发平台

    发表评论

    • 97会员总数(位)
    • 11020资源总数(个)
    • 95本周发布(个)
    • 9 今日发布(个)
    • 439稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情