phodal/microfrontends

Micro-frontend Architecture in Action-微前端的那些事儿

microfrontends's Issues

English version

Hi,

I was trying to check this repo but it is completely in "chinese". :(

请问我这个项目算不算微前端？

https://github.com/mqhe2007/admincraft

Admincraft 是一个基于Vue并且支持模块化分布部署和加载的admin快速开发工具。

公共 UI 库

Hi~ 我有幸在 Github 上看到您写的书，大致了解了 micro FE，但是有一点很要迷惑

如果是 micro server，那我大致可以把一些通用的 utils 抽成一个单独的 服务，然后其他业务服务需要用到这些 utils 的时候就去做 rpc。这样是合理的。但是如果放在微前端，我就很迷惑了，现在看来，微前端只是在做一个网关（分发器）来分发视图？如果我现在有几个前端服务，各自都有共同的工具，我想把它们抽成一个单独的服务，其他前端服务也来做 rpc（类似），现在我的问题是，这个 “rpc” 我该怎么去做？

谢谢您抽空帮我解答～

请教：postMessage 事件对于应用的侵入性太强怎么理解

那如何将一个旧的应用打包成一个webcomponent在新系统中引入呢？

代码隔离要怎么做呢？

比如js的隔离（避免变量污染，全局变量被改）
css的隔离

routing between micro front ends

Hi phodal,
For routing between micro front-ends, where my micro-front ends are separate Angular solutions, how do I go about it? Can you share some reference links/articles relating to explanations using Angular?

For Eg. a scenario where on the click of a button in micro front-end(1) I need to render a web component within micro front-end(2) and also change the url of the page.

Thanks in advance!

我买了你的书，你却告诉我它开源， 悲伤2021

/(ㄒoㄒ)/~~

请问下文中的angualr是ng几

请问下文中的angualr是ng几

基于 chunk 加载模式的尝试

作者 mooa 必然是一种很不错的思路，但是如果一个页面同时存在多个应用页面的时候，按照作者思路把对应应用iframe再放到这个聚合页面内也是一个办法。
我根据作者思路尝试了几种基于 chunk lazyload加载渲染的方案

1. 利用入口app的webpack内部的 require 加载器，按照系统manifest对应关系去加载对应系统的chunk文件和以来的样式和js文件，但是 正如作者所说，每个工程 runtime 文件依赖的不一样导致webpackJsonp 内找不到对应的方法，经测试当一个很干净chunk文件没有runtime依赖的时候是可行的。runtime问题解决，如果用web components 再进行处理就可以满足了

2. 同样的 iframe 加载一个空的依赖系统的页面，通过iframe通信方式，调用iframe内部lazyload方法最终得到药渲染的组件，然后将其渲染到app页面的某个dom上，当然也遇到了各种问题，比如必须统一 redux的对象，同一个store，等等，需要操作dom的时候window对象问题，nginx需要根据一些前缀 referer 加载不同系统的静态资源等等等等，都需要通过封装来区分是独立运行还是以app 加载方式运行。实验结果很不错，做到了每个新系统只加载一次空白页面，利用隐藏iframe系统的lazyload方法直接调用对应chunk组件，渲染到app 外壳dom上。但这种方式也正如你所说约束太多了，等待webpack5 的模块联邦功能看能否真的做到一劳永逸，期待作者更好的更优秀的文章!!!

对【后端解耦，前端聚合】的想法

你好，我感觉这个说法其实不太精确，前端其实也是在技术上做了每个服务的解耦，包括运行隔离、上线运维的隔离等等，但是又在业务上做了聚合；对于后端也是，技术上做了解耦，业务上依然聚合在了一起

我也是最近实现了类似一个微前端的库，居然不知道社区已经讨论的这么火热了

作者可以了解一下，我们基于Vue SSR 的微前端微服务库，它是通过远程组件去实现一个微前端、微服务，不管你是SSR还是CSR渲染的，都是通过远程读取json进行渲染。

https://github.com/fmfe/genesis

P155 纠错

SEO(搜索引擎优化). 提供一个更好的搜索引擎.

这段是否有语法生的问题? 怎么会提供搜索引擎?

前年随手写了个前端框架，现在看发现跟wei前端的理念很像，天然支持组件化的。

感兴趣的朋友可以搜一下，https://github.com/blackcatpolice/Orxer, 和你们的语法也很像！ 哈哈哈哈 不谋而合了

不使用 iframe 时只能使用协商缓存？

子项目部署之后是一个 url，宿主项目通过这个 url 来加载他。

不像 iframe ，是无缓存加载的 html 文档，可以在 html 中引用新版资源

如果更新子项目时还要更新宿主环境，那就不叫独立部署了。

如何分开上报错误？

不使用 iframe 的情况；

公共组件和一个页面不是同一个团队开发的，需要将两者的发生的错误堆栈上报到不同的团队。

好像只能从 stack 中的 path 来区分了啊？

Load config via app.json

Hi, can you give more detailed explanation about deployment.
How is your CI/CD built?

For example
Team A updated their micro app and pushed code to team repo. What will happen next?
CD pipeline triggered and bundles are created. Where do these files are uploaded? Are they in separate docker container?

问个偏业务点的问题，关于鉴权

假设我已经拆解成多个子应用并且能实现独立部署独立运行，也可以将这些子应用聚合在一起作为一个聚合应用发布。
在这样的场景下，如果各个子应用都需要登录权限，该如何去设计能实现子应用和聚合应用使之运行良好呢？

关于微前端的一些探讨

首先，感谢百忙之中的回复。其次，不好意思在Mooa下面提了那个问题。

接着我们讨论的问题：phodal/mooa#13

我还没有尝试过Mooa框架，但是看您的描述主要是针对Angular的，而我们打算采用Vue，所以框架上可能不太适用，但**可以借鉴。

之前都说iframe会有各种缺点，如果我采用iframe去加载一个个的SPA ，不还是会遇到UI的一些问题吗。

您所说的微应用化，还是不太理解。我这么理解，不知道对不对。

1. 子应用单独打包
2. 打包出来的assets文件，都在主应用中加载，所以最后只有一个主应用的index.html，其他子应用的并没有用到

如果是我理解的这样的话，岂不是还是避免不了全局变量名冲突的问题？

conceptions question

Hi!
Early I was try to write to you email about consultation and now, as you ask, will write here. Frst of all, thank you for your post again. It's great and better of all i read about this theme.
My question is not about some framework or library but I want know common principles and get some practice help for newbe.
Have next situation:
I have three web-apps.

1. All use spa practises at front. Uses handmade framework with partial of knockoutjs and requirejs for all and share css.
2. Base initialisation is MVC on java.

Separetly all is fine, but I want make some common shell for loading apps in one ui witout page reloding. Its must looks like additional menu where user can switch apps and then work with app in content area.

I have next targets:

1. All apps must be availible as through common shell so as separated.
2. Planed use different tecnologies and practics on new apps like Vue, Angular for ui.
3. Each app developing by own team.
   Actualy, all targets in foreword of you post)
   In case I think use first method from your post - Basic: Application Distribution Routing.
   So, if you cane give som practice advices or examples, or show best way, its will be wonderful.

Thanks a lot!

关于子项目打包

您好，每一个子项目是独立打包部署的吗？我现在用了一个single-spa的框架，现在可以将不同框架的项目都集成起来，但是需要把所有的项目放在一个项目里集中打包。请问有什么好的解决方案吗