10月19, 2020

微前端(一)

  1. https://zendev.com/2019/06/17/microfrontends-good-bad-ugly.html?spm=a2c4e.10696291.0.0.49ec19a4QEDYea 文章讨论前端领域,采用微前端架构的好处、弊端。
  2. Why -> 微前端是类似微服务架构,多个应用独立部署,聚合展示。 实现方式很多,需要依具体业务场景不同,选择合适方案。
  3. good
    • 跨团队依赖 ↓
    • 业务特征
      • 项目复杂、庞大
      • 协作团队多
      • 彼此需要独立
  4. bad
    • 集成测试不方便
    • 问题追踪不方便
    • 版本管理
  5. ugly
    • 代码重复下载
    • 用户体验不一致 综上,需要在项目独立性和复用之间找到平衡。
  6. https://zhuanlan.zhihu.com/p/80776391
  7. 微前端的价值
    • 解决巨石应用难维护问题
  8. 中后台系统解决方案
    • 一般是单实例场景,同一时刻,只有一个子应用被展示
  9. 行业现状
    • SPA
    • MPA
    • SPA + MPA
  10. 微前端价值
    • 独立开发,整合到一起保证产品完整的流程体验的能力
  11. 架构 stitching layer,作为调度者,定位: 导航路由 + 资源加载框架
  12. 问题
    1. future state 问题。
      • 表现:当访问子应用路由时,主框架路由先加载完毕,直接跳到404。
      • 解决方案:路由发现
        • Dynamic Routing,在主应用中注册 subApp: {url: 'subApp/*', entry: './subApp.js'}
    2. App Entry
      1. 构建时组合 or 运行时组合
        1. 构建时组合,可以一起打包优化,应用发布相依赖
        2. 运行时组件,构建解耦,运行时会多处一些复杂度
      2. JS Entry vs HTML Entry
        1. JS entry需要提前准备好容器,html entry充当的是资源表的角色,也可以优化成config Entry
      3. 模块管理
        1. umd global export
      4. 应用隔离
        1. 样式隔离
          1. web components, shadow dom, shadow dom无法作用于全局,如全局弹框。
          2. CSS module, BEM, 命名空间,靠约定。新项目可行,旧项目改造困难。
          3. Dynamic stylesheet,应用卸载后,样式一起卸载
        2. JS隔离
          1. 命名空间,前缀,约定
          2. JS 沙箱。在bootstrap 处理global env, mount之前 inject render env。render env 如何定义?
  13. 疑问
    1. 路由调度,如何理解? stitching layer 一般放什么?
    2. 模块管理,umd,global export?systemjs 解决是什么问题?
    3. render env与global env如何理解,unmount时打快照,render env举例?

Refs:

  1. https://medium.com/dazn-tech/adopting-a-micro-frontends-architecture-e283e6a3c4f3
  2. https://martinfowler.com/articles/micro-frontends.html
  3. 可能是你见过最完善的微前端解决方案 https://zhuanlan.zhihu.com/p/80776391

本文链接:http://fengbaiyang.cn/post/micro-front-end-1.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~