微前端

引用参考资料：

• 美团-用微前端的方式搭建类单页应用 基于React技术栈开发
• 微前端 - 将微服务理念延伸到前端开发中
• micro-frontends.org/
• 微前端那些事 微前端框架mooa，服务于angular

Micro Frontends 由ThoughtWorks 2016年提出，将后端微服务的理念应用于浏览器端。 
即将Web应用由单一的单体应用转变为多个小型应用聚合为一的应用。  
“类单页面应用”指由多个微前端聚合而成的单页面应用。各个微前端应用可独立开发、独立测试、独立发布。

微前端背后的理念是将一个网站或者 Web App 当成特性的组合体，每个特性都由一个独立的团队负责。
每个团队都有擅长的特定业务领域或是它关心的任务。
这里，一个团队是跨职能的，它可以端到端，从数据库到用户界面完整的开发它所负责的功能。

微前端架构的实现方式：

• 使用 HTTP 服务器的路由来重定向多个应用
• 在不同的框架之上设计通讯、加载机制，诸如 Mooa 和 Single-SPA
• 通过组合多个独立应用、组件来构建一个单体应用，即微前端合并类单页面应用
• iFrame嵌入。使用 iFrame 及自定义消息传递机制
• 使用纯 Web Components 构建应用
• 结合 Web Components 构建

应用分发路由 --> 路由分发应用

后端微服务是将 函数调用变为远程调用，如http调用。 微前端是将应用内的组件调用变为更细粒度的应用间组件调用。原来只是将路由分发到应用的组件执行，微服务则需要根据路由找到对应的应用，再由应用分发到相应的组件上。

iframe

iframe嵌入需要解决两个核心问题

• 管理应用机制
  在什么情况下，我们会去加载、卸载这些应用；在这个过程中，采用怎样的动画过渡，让用户看起来更加自然。
• 应用通讯机制
  直接在每个应用中创建 postMessage 事件并监听，并不是一个友好的事情。其本身对于应用的侵入性太强，因此通过 iframeEl.contentWindow 去获取 iFrame 元素的 Window 对象是一个更简化的做法。（iframe 跨域的情况下无法获取iframeEl.contentWindow）

iframe嵌入方式容易实现，但会有如下问题：

• 子项目需要改造，需要提供一组不带导航的功能
• iframe嵌入的显示区大小不容易控制，存在一定局限性
• URL的记录完全无效，页面刷新不能够被记忆，刷新会返回首页
• iframe功能之间的跳转是无效的
• iframe的样式显示、兼容性等都具有局限性