React Native/React Architecture

React Native/React Architecture

React Native and React share similar architectural principles since React Native is based on React. However, React Native extends React’s architecture by incorporating native modules to bridge the gap between JavaScript and native components.

How to Decide the Right Architecture

Choosing the right architecture for your React or React Native project depends on several key factors:

Project Size and Complexity
Team Size and Workflow
Future Scalability

1. Project Size and Complexity

a) Small Projects: For smaller projects with simple requirements, a straightforward architecture with minimal layers is often sufficient. Using functional components with hooks and basic state management can keep the codebase clean and manageable.

b) Large Projects: Larger projects with more complex requirements may benefit from a more structured architecture. This could include state management libraries like Redux or MobX, and a clear separation of concerns between presentation and business logic.

2. Team Size and Workflow

a) Small Teams: Small teams can benefit from a simplified architecture that promotes rapid development and ease of communication. Shared understanding and fewer coordination points are key. Component-based architecture with shared utilities and services works well.

b) Large Teams: Larger teams might require a more modular and scalable architecture. Using design patterns such as Container/Presentational components, feature-based folder structures, and strict code conventions can help manage the complexity.
Incorporating automated testing and continuous integration pipelines can also facilitate smooth collaboration.

3. Future Scalability

a) Scalability Considerations: Planning for future growth is essential. An architecture that supports modularity, reusability, and maintainability will facilitate scaling. Implementing lazy loading, code splitting, and micro-frontends can help manage the increasing complexity as the project grows.

For example:
New social media app with a small team, expecting to grow over time this is how we can choose as per requirement/teamsize.

Types of Architecture:

1. FLAT STRUCTURE

Small projects, prototypes, or quick demos.111

my-small-project/
src/
App.js
index.js
ComponentA.js
ComponentB.js
package.json
README.md

2. FEATURE BASED STRUCTURE

Medium to large projects with distinct features or modules

my-feature-based-project/
src/
features/
auth/
components/
Login.js
Register.js
screens/
LoginScreen.js
RegisterScreen.js
services/
authService.js
authSlice.js
profile/
components/
ProfileDetails.js
screens/
ProfileScreen.js
services/
profileService.js
profileSlice.js
store/
rootReducer.js
store.js
App.js
index.js
package.json
README.md

3. LAYERED STRUCTURE

Projects needing clear separation of concerns.

my-layered-project/
src/
components/
Button.js
Header.js
screens/
HomeScreen.js
LoginScreen.js
services/
apiService.js
utils/
helpers.js
hooks/
useAuth.js
App.js
index.js
package.json
README.md

4. DOMAIN DRIVEN STRUCTURE

Complex applications with distinct business domains.

my-domain-driven-project/
src/
domains/
user/
components/
UserDetails.js
screens/
UserScreen.js
services/
userService.js
event/
components/
EventDetails.js
screens/
EventScreen.js
services/
eventService.js
store/
rootReducer.js
store.js
App.js
index.js
package.json
README.md

5. ATOMIC DESIGN STRUCTURE

Design systems and UI component libraries.

src/
components/
atoms/
molecules/
organisms/
templates/
pages/

6. DUCK STRUCTURE

Projects using Redux for state management.

my-redux-duck-project/
src/
store/
ducks/
auth.js
profile.js
rootReducer.js
store.js
App.js
index.js
package.json
README.md

7. MONOREPO STRUCTURE

Code for multiple projects is stored in a single repository like react native, react js etc.

my-monorepo-project/
packages/
app1/
src/
components/
Button.js
Header.js
screens/
HomeScreen.js
LoginScreen.js
store/
ducks/
auth.js
events.js
index.js
services/
apiService.js
utils/
helpers.js
App.js
__tests__/
unit/
Button.test.js
integration/
App.test.js
e2e/
tests/
app.test.js
config/
wdio.conf.js
package.json
app2/
src/
components/
Footer.js
NavBar.js
screens/
DashboardScreen.js
SettingsScreen.js
store/
ducks/
user.js
posts.js
index.js
services/
userService.js
utils/
formatters.js
App.js
__tests__/
unit/
Footer.test.js
integration/
App.test.js
e2e/
tests/
app.test.js
config/
wdio.conf.js
package.json
shared-components/
src/
Button.js
Header.js
__tests__/
unit/
Button.test.js
package.json
utils/
src/
api.js
helpers.js
__tests__/
unit/
api.test.js
package.json
.github/
workflows/
ci.yml
package.json
lerna.json
yarn.lock
jest.config.js
README.md

8. MICRO-FRONTEND STRUCTURE

Each micro-frontend is an independently deliverable frontend application.

my-react-native-app/
src/
features/
auth/
components/
screens/
services/
profile/
components/
screens/
services/
chat/
components/
screens/
services/
store/
rootReducer.js
store.js
App.js
index.js
package.json
README.md

Some examples of app where specific structures can be used

a) INSTAGRAM

instagram/
src/
features/
feed/
components/
screens/
services/
stories/
components/
screens/
services/
reels/
components/
screens/
services/
messaging/
components/
screens/
services/
profile/
components/
screens/
services/
store/
rootReducer.js
store.js
App.js
index.js
package.json
README.md

b) FLIPKART

flipkart/
packages/
product-listing/
src/
components/
screens/
services/
__tests__/
package.json
checkout/
src/
components/
screens/
services/
__tests__/
package.json
user-account/
src/
components/
screens/
services/
__tests__/
package.json
marketing/
src/
components/
screens/
services/
__tests__/
package.json
package.json
lerna.json
yarn.lock
README.md

a) SPOTIFY

spotify/
src/
domains/
user/
components/
screens/
services/
playlist/
components/
screens/
services/
music/
components/
screens/
services/
recommendations/
components/
screens/
services/
store/
rootReducer.js
store.js
App.js
index.js
package.json
README.md
Please follow and like us:
Pin Share