Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pluginable cross-platform software design for react & react native

I want to design a cross-platform (Android, iOS, and Web) plugin-able software that means everyone can easily develop a plugin for it and users can pick plugins from the marketplace and install it. Every plugin can:

  • Share data in the back-end side with the core application
  • Have a custom UI in Apps and Web that ideally using a standard UI-kit for consistency (for example Shopify polaris)

In the back-end, there are many best practices in software design like OAuth. but in the frontend, the problem is not straightforward:

  1. Is there any cross-platform UI-kit for react and react-native? for example, using Expo v33+ or ReactNativeWeb we can build the code for android/ios and web but I can't find any cross-platform UI-kit. (NativeBase, Elements or similar cross-platform UI-kits are only for Android and iOS)

  2. In the Frontend, how plugins can share UI using react and react-native (or ideally a cross-platform UI kit) somehow that render in the core dynamically (without needing any update, for example, the plugin provide an endpoint and return a react/native component and the core will render it)

Software architecture

like image 678
Vahid Kharazi Avatar asked Jul 25 '19 10:07

Vahid Kharazi


People also ask

Can React be used for cross-platform?

With React Native, you don't need to hire multiple developers for frontend and backend development as it saves time and money. If many users use your mobile app, then React Native can be used to create a cross-platform mobile application that supports both Android and iOS devices.

What is a cross-platform tool?

In computing, cross-platform software (also called multi-platform software, platform-agnostic software, or platform-independent software) is computer software that is designed to work in several computing platforms.


1 Answers

1 - As far as I know there are few of them, like React Universal UI

2 - With the above UI Kit, the distinction on how components are built (imports remain the same) is done at runtime in the boilerplate:

Web (React)

$ ruui dev

IOS (React Native)

$ react-native run-ios

Android (React Native)

$ react-native run-android

If you want you component to be imported at runtime, well, this is possible for sure in web env (you can do it also with react-create-app, with dev server turned on and no prod static build).

For Android and IOS you'll need an additional build and subscribe your app for the review before going up again to the store (AppStore and Google Play)

like image 178
Mosè Raguzzini Avatar answered Nov 15 '22 03:11

Mosè Raguzzini