DEV Community

Cover image for React Native - Clean Architecture
Celiz Matias
Celiz Matias

Posted on

11 3

React Native - Clean Architecture

Hi everyone the last time that I worked in a startup with React Native I found a lot of problems with the scalability and encapsulation of different modules and layers.

The problem

React Native is a framework that you can use to development hybrid mobile applications, so as we know we need a API maybe.. and if this is your case and you have the experience working with this framework. I'm sure that you found problems like this:

crash style

This is a nightmare in big applications because is really difficult to debug, the only way is find in all the code where is the object property that is (undefined | null | any not compatible with the component or styles).

Or in this other case:

crash text

The problem here maybe was a render without the correct data, or some change in the API contract.

 The proposed solution

I study how apply something like Clean Architecture to a react native project and started to build a boilerplate to share with the community.

But this apply to different cases.

  1. If you have a stable backend | api maybe you wanna keep the frontend more easier or lightweight I use something like that:

basic architecture

  1. If you wanna get a stable application, with hard safety layers, testeable and easy to scale but a bigger cost in time.

Clean architecture

data-flow

https://github.com/G33N/rn-clean-architecture

  1. For a really big application I recommended separate the app in independiente modules or small applications, like chat, feed, stories... This is more efficient in bigger teams +2 squads or +10 developers. This help to the organization to give more autonomy and as plus more velocity.

Something like that: https://github.com/G33N/rn-mma-app repo in progress Sorry!

Main resources:
https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html

Thanks for reading! all comments all welcome and help me to build betters things to share with you, so pls leave me your comment!

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay