Core Discussion

[webcrumbs-community]

WebCrumbs will be a worldwide framework for micro frontends. This is a new thread to discuss the core of WebCrumbs: how we will gather the pieces together. It is also a place for us to discuss communication between admin and plugins, database management, routing, styles and other topics that result from the decentralized architecture.

[webcrumbs-community]

Introduction

In the heart of modern web development lies the quest for modular and maintainable architectures. Our venture explores a framework where plugins, created using diverse JavaScript frameworks and bundled through Webpack, are managed by an Admin container. This Admin container is constructed with Next.js, known for its robust Server Side Rendering (SSR) capabilities. The goal is to have a setup where the Admin container can be effortlessly integrated into any website through a simple script tag, thereby extending the website's functionality in a modular fashion.

Goal Outline

1. Modular Plugin Design:

   • Create individual plugins using various JavaScript frameworks.
   • Bundle these plugins using Webpack to ensure a standardized and optimized output.

2. Admin Container Creation:

   • Develop an Admin container using Next.js to manage these plugins.
   • Implement lazy loading to ensure optimal performance and resource utilization.

3. Server-Side Rendering (SSR):

   • Utilize the SSR capabilities of Next.js to render the plugins server-side, ensuring a SEO-friendly and performant user experience.

4. Routing Management:

   • Administer control over specific routes and pages through the Admin container, allowing for a structured and organized user interface.

5. Seamless Integration:

   • Design the setup in a way that the Admin container can be easily integrated into any website via a simple script tag.

[aditya4196]

I want to clarify the vision,
We are aiming towards building the plugin architecture with the perspective that the user not only able to use the plugin but also import his own plugin right?

[webcrumbs-community]

(Wrote in a hurry, sorry!). Great question, by the way. I'd start with plugins that are in the registry (registry.webcrumbs.org), and perhaps later expand to other options such as self-hosted plugins.

[webcrumbs-community]

I'm saving some good references here.

[AJBrownson]

@webcrumbs-community Now that the landing page is up, what's next?

[webcrumbs-community]

Now it's the creme de la creme. We must have a functioning admin where we add a simple plugin (hello, Dolly) to the page, all done through webpack. I'll break this task down real soon!

[webcrumbs-community]

I'm thinking this is the way to go, if you'd like to also try them:

https://github.com/module-federation/module-federation-examples

Let me know if you think of any alternative. It seems to do the trick.

Cheers!

[AJBrownson]

@webcrumbs-community I'll look into the link
Breaking down the task would be great

[aditya4196]

@AJBrownson
Im currently working on database schema design but as a group. So I have bandwidth to be able to contribute to this effort too

[AJBrownson]

@aditya4196 once the task is broken down into manageable bits, you'll get a chance to contribute

[AJBrownson]

How's the database schema design coming up?

[aditya4196]

We were able to get a in-depth look at the wordpress database.
We found some similarities.
We will try to get the first draft ready by this wednesday and generate a PR for that.

[webcrumbs-community]

Next steps coming today, guys! I'm working on it. Stay tuned 😎

[webcrumbs-community]

Hey, everyone!
I added an experiment-1 to /core/experiment-1. Check there, please!
Just follow the README.md and it should work (but let me know if not).
See you very soon!

[webcrumbs-community]

I just opened the related to issues #104 and #103. Cheers!

[webcrumbs-community]

Just sharing here something we've discussed in the related issues, to keep it updated!

We're currently exploring the idea of creating a central registry for WebCrumbs, similar to what npm does for packages. This would be a place where all remoteEntry.js files for plugins can be hosted. The vision is to transition from local to a more unified approach, where plugin URLs would follow the structure of registry.webcrumbs.org/plugin-name/version/remoteEntry.js or similar. With a comprehensive database of plugins and their corresponding URLs, this system could theoretically work without the need for constant rebuilds because plugins would load dynamically at runtime. This dynamic loading is part of what we're testing in experiment-1, although we're aware that client-side loading isn't ideal for UX or SEO. We're hopeful that a solution might emerge under #104.

[webcrumbs-community]

Just sharing here something we've discussed during the call earlier today, to keep everyone updated!

We now have experiment-5 that does:

• Dynamic remote component
• Loaded at runtime
• With SSR (using VM and Babel)
• Hydrated on the client (using Webpack)
• With documentation on how to build plugins

You can find the instructions on how to install and test experiment-5 and build other plugins in the experiment-5 README.md (not yet the official documentation; this is for development purpose only).

Next steps

• Experiment with new plugins Task /core: Experiment current structure with more plugins #163
• Experiment with dependencies so that the host do not need to know about the plugin
• Experiment with communication back and forth between the admin and the plugin
• Experiment with plugins in other JavaScript frameworks
• Improve VM security

[thejuliamachado]

Hi, all. Sharing this about what the React team has been working on: https://www.patterns.dev/react/react-server-components/
In particular this:

Some of the early integration work for Server Components will be done via a webpack plugin which:

• Locates all Client components
• Creates a mapping between IDs => chunk URLs
• A Node.js loader replaces imports to Client components with references to this map.
• Some of this work will require deeper integrations (e.g with pieces such as Routing) which is why getting this to work with a framework like Next.js will be valuable.