# [提纲]微前端分类-2024(容器型+模块型)

微前端的两大方向：容器型、模块型

(opens new window)

# 微前端框架-国内

国内使用率目前估计是: qiankun > micro-app > wujie > emp

qiankun(容器型)
micro-app(容器型)
wujie(容器型)
emp(模块型)

# 微前端框架-国外

bit(模块型+npm化)
Piral(容器型)

# 参考 @ref

微前端五大门派大 Battle @diff @digest
- @doc https://juejin.cn/post/7338230967390224435 (opens new window)
- @ref
  - https://bit.dev/ (opens new window)
  - https://github.com/bytedance/magic-microservices (opens new window) @old

// 微前端的粒度不一定是应用级的
也有可能是页面级，甚至组件级 @eg 模块联邦

===
// 满足以下几点，你可能就不需要 微前端
1) 所有组件都由一个小团队开发即可满足(代码规模小)
2) 改造存量系统的收益大于新老系统混杂带来的问题(重构更划算)
3) 拆分的成本高于治理的成本(高度耦合性)

===
// 无界方案中最重要的两点(精髓中的精髓)
为什么要改写嵌入的 iframe 的域名？ 
-- 为了利用同源 iframe 可以便捷通信的特性

在 iframe 中操作路由，会导致主、子应用路由不统一的问题怎么解决？
-- 监听 iframe 的路由变化并同步到主应用，浏览器的 url 也会同步到 iframe

===
// 现在业界流行的沙箱分成 2 种
一种是快照沙箱，一种是 Proxy 沙箱

const fn = new Function('window', `
    with(window) {
        window.localstorage.setItem('1',123);
    }`
);
fn(fakeWindow);

===
// Piral 
一家德国公司推出的微前端框架
主应用叫“piral instance”
子应用叫“pilets”

只把主应用当成一层壳。渲染逻辑、路径、甚至菜单都可以在子应用中导出?? ==> 怎么预加载

===
// Bit
在微前端层面，Bit 是一个构建时集成的框架

Bit 在本质上就是一个更易用、更强大、更贴合微前端场景的 npm ==> 不支持运行时集成

===
// Magic Microservices
把你用 React 、 Vue 等框架写的代码转换为基于 Web Components 的浏览器通行标签
从而在任何框架的项目中复用

import magic from '@magic-microservices/magic'
import MyModule from '/path/to/your/module'

magic('custom-component', MyModule)

ReactDOM.render(
    <custom-component         
        id="123"
        test
        count={count}
        callback={useProps(() => 'test')}
    ></custom-component>,
    MOUNT_NODE,
);

===
// ShadowRealm API
const red = new ShadowRealm();

globalThis.someValue = 1;

red.evaluate('globalThis.someValue = 2'); 

console.assert(globalThis.someValue === 1); // yields true

// importValue 方法可以异步导入模块，从而在 Realm 自身的环境中执行
const setUniqueValue = 
    await red.importValue('./inside-code.js', 'setUniqueValue');
result = setUniqueValue((x) => x ** 3);
console.assert(result === 16); // yields true

← README [方案]造一个微前端框架-2023(沙箱隔离) →