React, the Humble – Write once, render in Web and Native

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Bruno Noriller

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

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Bruno Noriller

Print Share Comment Cite Upload Translate Updates

APA

Bruno Noriller | Sciencx (2022-10-16T19:41:58+00:00) React, the Humble – Write once, render in Web and Native. Retrieved from https://www.scien.cx/2022/10/16/react-the-humble-write-once-render-in-web-and-native/

MLA

" » React, the Humble – Write once, render in Web and Native." Bruno Noriller | Sciencx - Sunday October 16, 2022, https://www.scien.cx/2022/10/16/react-the-humble-write-once-render-in-web-and-native/

HARVARD

Bruno Noriller | Sciencx Sunday October 16, 2022 » React, the Humble – Write once, render in Web and Native., viewed ,<https://www.scien.cx/2022/10/16/react-the-humble-write-once-render-in-web-and-native/>

VANCOUVER

Bruno Noriller | Sciencx - » React, the Humble – Write once, render in Web and Native. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/16/react-the-humble-write-once-render-in-web-and-native/

CHICAGO

" » React, the Humble – Write once, render in Web and Native." Bruno Noriller | Sciencx - Accessed . https://www.scien.cx/2022/10/16/react-the-humble-write-once-render-in-web-and-native/

IEEE

" » React, the Humble – Write once, render in Web and Native." Bruno Noriller | Sciencx [Online]. Available: https://www.scien.cx/2022/10/16/react-the-humble-write-once-render-in-web-and-native/. [Accessed: ]

rf:citation

» React, the Humble – Write once, render in Web and Native | Bruno Noriller | Sciencx | https://www.scien.cx/2022/10/16/react-the-humble-write-once-render-in-web-and-native/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.