search

hank-cp / sbp

Plugin framework for Spring Boot based on pf4j.
Apache License 2.0
207 stars 67 forks source link

Front End modularization How to achieve？ #1

Open fendo8888 opened 4 years ago

fendo8888 commented 4 years ago

Front End modularization How to achieve？

hank-cp commented 4 years ago

  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 commented 4 years ago

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

hank-cp commented 4 years ago

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 commented 4 years ago

好的

syifarahmat commented 4 years ago

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

hank-cp commented 4 years ago

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

fendo8888 commented 4 years ago

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

hank-cp commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

ScriptedAlchemy commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.