Front End modularization How to achieve？

[fendo8888]

Front End modularization How to achieve？

[hank-cp]

1. for old school server renderred via template engine, like jsp/structs/FreeMarker/, etc, since sbp has handled loading static resource inside of plugin, this part should be ready. I am just running out of time to provide examples. Will do it in some days later.

2. for morden front/server separation project, I am still looking for mature solution of dynamically pluggabla framework. For our own production project using sbp right now, it's still built into a whole bundle. I know there is technology dynamically load pluggable bundle via iframe, but there is a lot down side of this approach.

Please let me know if you have any suggestion~

[fendo8888]

Fucking great！If the template engine is used, how to extend the page like hook in WordPress?

[hank-cp]

To make your app extensible, an extension registration framework is needed. You could take a look at my another project skr, wihch provides skeleton of auth/security/extension registration. This project is in kinds of incubation state right now, but it also has been used in some of our production projects.

[fendo8888]

好的

[syifarahmat]

I use extjs but extjs is commercial 😁😁
https://stackoverflow.com/questions/29763532/dynamically-load-extjs-modular-application

[hank-cp]

Webpack 5 module federation might be the key. Will take a close look at it.

[fendo8888]

@hank-cp Can Webpack 5 module federation combine pf4j to achieve modular development and extension points?

[hank-cp]

@hank-cp Can Webpack 5 module federation combine pf4j to achieve modular development and extension points?

No. module federation is totally web technology that nothing relates to pf4j, which is totally server side technoalogy. If it helps, it will be another sbp-vue-client or sbp-angular-client or sbp-reactjs-client project to manage front end modularization specifically.

[ScriptedAlchemy]

Actually, Module Federation works with anything that uses the JavaScript environment runtime. Right now I’ve federated middleware across servers, my GraphQL layer uses module federation against 6 independently deployed systems.

Not sure of the context of this project, but as the creator of Module Federation, I know what will do. If you’ve got questions, I’m happy to discuss.

What is the need here and use case for this project?

[j-barata]

Maybe this kind of library may also be worth taking a look: remote-component or remote-module-loader ?

[ScriptedAlchemy]

That solution still is more complex than module federation. Which is built into webpack itself. It's designed to let you import from other bundles deployed on different URLs, client or server - module federation supports this. You simply import remote components like you would anything else.

https://github.com/module-federation/module-federation-examples/tree/master/server-side-render-only

Module federation also works on projects like next js, though the server implementation in v9 requires a workaround. V10 will support it out the box. SSR and all.

Just sayin, what you want is built-in to webpack and works as expected in production for the past 6 months 🤷‍♂️

[j-barata]

Hi,
Module Federation is a very interesting technology indeed.
As far as I understood, if an application A wants to use two remote modules B and C, they both need to be declared in the webpack config of the application A, right ?
What happens if another plugin (module) D is installed on the application A at runtime (i.e without updating the webpack config and rebuilding the application) ?

But maybe I missed something ?

[ScriptedAlchemy]

Dynamic remotes are supported and I've used them in several ways. In the module federation examples repo, there's a dynamic remote sample doing just that. Remotes can also be nested and circular without problem

[j-barata]

You're probably referring to this feature : dynamic-remote-containers ?
I hadn't seen that feature yet, thank you for mentioning it :) looks great

[j-barata]

Hi,
In this repository I created an example of modular UI, using the remote-component library.
I also planned to evaluate the Webpack 5's Module Federation feature, but for now it is blocked by a CRA limitation.

In the provided example, I have three plugins that each contribute a widget URL to an extension point. The widget is provided as a JS component (in this case, it's a Material UI Card) and the given URLs are loaded by the application's UI.