Using the Humble Object pattern to render React in both web and native environments.

What is the Humble Object?

Usually used for testing, you split the logic from the GUI and make the GUI humble.

This separation makes it easier to test the logic since you don't need to worry about the GUI and how to call the functions through it.

This also makes it easier to render the same logic in different components, even if different engines will render those components.

POC

I made this as a proof of concept, could I write a custom hook and use that same hook in both web and native?

YES!

Being a POC I didn't really care about things like linting, testing, or even how it would scale from there.

While I personally think it would be better to have all components next to each other, it would definitely make the work harder in the long run.

Here’s the link: https://github.com/Noriller/react-reusability-poc

(The how-to test it yourself is in the README)

Making it better

Each meta-framework (think expo for mobile, and any of cra, vite, next, remix, redwood… for web) has its own dependencies, configuration, and whatever else it needs.

To account for that and still be able to do things, I believe a monorepo is the way to go. Each of the logic, web, and mobile would go to its own folder and have whatever it needs there.

And even in different folders, the basic of having the logic agnostic of the render would still be there and make it possible to reutilize code, multiplying the time of the developers.

Write once, render anywhere

Web, Native, VR, TV… while this POC only covers Web and Native, considering all that changes is only the renderer, then you could have a monorepo covering all that.

For good or evil, this also means you could have someone working on the logic, another on the web, and a third on the mobile.

Cover Photo by Ivan Diaz on Unsplash