UI and state management approach for plugins

[robertherber]

Examples use cases:

• Auth plugin that provides UI and state management for login, logout and password reset
• Chat plugin that provides a UI for chat
• CMS plugin that provides a UI for editing and viewing content

Solution	Pros	Cons
Web Components	Web native	Only web, DX?
React Native Components	Universal Components	Runtime dependent, bundle size
React Server Components	Partly runtime independent, probably good together with microfrontends	Still very experimental
SSR	Runtime independent	Not too flexible
Microfrontend	Bundle size	Not too flexible

Ideally we want something that:

• Supports as many target platforms as possible
• Not tightly coupled to a runtime, for two reasons: bundle size and compatiblity
• Easy to use, like providing a /resetPassword page out-of-the-box from a plugin
• Themable
• Customizable - so it can be integrated in an app

Of course hard to check all the boxes :)

There are combinations we could look at. For example adopting React Native Components as our standard would:

• allow rendering and integrating these components on a wide range of platforms
• could potentially be used for SSR, microfrontends and RSC
• could easily be themed

Something to also consider is how to minimize bloat in the plugins. Let’s say we just want to expose a React Native Component we might not want to have it in the same NPM package as the backend code, since it would force UI dependencies when installing it on the backend and vice versa. On the other hand if we expose this Component through any kind of Server Side Rendering this might be desirable to some degree.

For state management using a cross-framework state management system like Zustand or Redux (or maybe just a framework-independent reducer?) is probably a good idea for starters. A library like this is easy to use in any UI framework.

Maybe something along the lines of:

• Reusable Universal React Native components
• Reducer for client state management
• Drop-in client UI using the reusable UI paired with the client state management
• Drop-in SSR using the same reusable UI