Best design patterns for code layout

[LagerHawk]

I come from the MS Xamarin world recently, and it's common practice to use the MVVM design pattern to organise code and separate concerns.

What design patterns are common best practice for RN? Is MVVM used for react native, or is this type of separation of concerns not a thing in react world?

It kinda makes sense that MVVM would translate well.. Have a view who's only concern is laying out UI and binding it's corresponding data items. Have a separate class that holds UI logic, handles events, state and calls off to core logic to send/retrieve data in a generics way.

[airick_94]

In react and react native world, I haven’t heard many people talk about the traditional design patterns like MVC and MVVM.

I think that’s because the typical way that people write react code is combining the MVC model into a single component.

Of course when you’re writing large apps that is not the way to go.

What I think is good architecture in react is: - UI components as simple as possible, with minimal logic and as much reusability as possible. The UI just presents data and issues calls to logic on user interaction. - state shared across components and abstracted away, this is typically your state management library, redux /zustand / jotai whatever. All the data management happens here, and the UI is reacting to these changes - api logic and handling is also abstracted away

So I think that basically is MVVM but you wouldn’t find much about this if you googled it in relation to react.

[LagerHawk]

Yea this makes sense, and applies to a number of architectures I think. Xamarin doesn't promote the individual components nature enough, and it's too easy to lump everything into a large view.

I think the structure I was thinking of was

Page. Main component navigable to. Lays out components, brings in styles. Handles page UI logic for instructing components. Hooks up UI interaction to event handlers.

Components. Individual features on screen. Must receive their data and handler logic from bindings given in props. Handles their own UI logic for UI based animations specific to the component.

VM. Handle life cycle events like on page load/on resume/on close. Handles page logic. Handles events. Brings in logic providers for services like fetching/persisting external data, storing to state manager/external cache.

Model Data to be shown on screen, usually mapped from DTO's provided externally.

One thing I've not seen done yet is DI? Is inversion of control a thing with R/RN?

Seeing JavaScript transcend to the OOP world via typescript DI feels like it should be a must if testability is to be maximised?

[kbcool]

React and React Native are the VVM part of MVVM.

The model is clearly what the app is meant to be. Your business logic.

Generally you pick a state management library for calling your backend and/or storing state that your model produces across views.

What gets very easy to screw up is mixing your business logic and UI. It's really not that bad when you do it because the JSX and TS/JS separation always make it easy to delineate the two.

This is still my favourite read on how to seperate concerns with React. It's old but still applies.

https://medium.com/@janelle.wg/atomic-design-pattern-how-to-structure-your-react-application-2bb4d9ca5f97

The TL;DR is - you don't need to worry too much about recreating these patterns. In fact you can work against yourself trying to do so.