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
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
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.
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.
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.
components/
atoms/
molecules/
organisms/
templates/
pages/
6. DUCK STRUCTURE
Projects using Redux for state management.
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.
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.
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
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
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
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