Blueprint of Modern React Native App Architecture

Blueprint of a React Native Application

Previous article we discussed how the React Native framework works internally and the scope for improvement in the framework upgrade which is guided by the community.

in this article, we will mainly focus on how we can adopt design patterns for modern apps by keeping in mind scalability, layer of separation, reusability and stability.

Layer of Separation

When translating product requirements into technical design, it’s essential to dissect and comprehend the various facets of the challenges the product or application aims to address. This involves identifying and categorizing distinct areas of concern, each contributing to solving specific problems or fulfilling particular functionalities.

What are the foundational concerns the application needs to handle accordingly we should plan to build separation or concerns.

Basic scaffolding would be a foundational component with well-defined concerns.

1. User interactions
2. Business logic
3. Data sync and storage
4. Network transactions
5. Instrumentation

Rather than scattering these concerns throughout the codebase, which can create a nightmare for developers when it comes to making changes, cleaning up, or overhauling related code, we opted to segregate these concerns.

This was achieved by either creating dedicated modules or exposing a framework. Doing so allows dependent modules to abstract away implementation details and facilitates extensibility for future development.

Segregation can be achieved based on a couple of criteria, such as determining whether components should be Native or JavaScript-based.

Criteria for components

Performing these long-running/heavy operations on a single thread (UI / JS thread) isn’t efficient and in the long run, will become a bottleneck for UI operations inducing a jittery/laggy experience. So, to keep things simple we can build only UI components in React native and long running, background intensive, data storage components in Native (Android/iOS)

Native Core Libraries

Native Core libraries can be implemented by keeping in mind the different use cases of the product, some default native libraries can be built as part of the mobile platform offering when we design the foundation for the application.

Core Foundationtional Libraries :

1. Analytics
2. Network
3. Data Storage
4. Metrics
5. Core / Bussiness Logic
6. Logger

Core Native Libraries

Modular and Reusable

All these foundational components can be modular and reusable repositories for the organization which can be shared across all the different products.

Utilizing these foundational components accelerates the time to market for any product within an organization.

Repeatedly writing the same code entails multiple development and QA cycles, ongoing maintenance, and stability monitoring.

To circumvent these repetitive cycles and expedite production releases, we prioritize the creation of components — no matter how small — that are agnostic to any specific application.

this is best pratice to develop the modules, with several of them being shared across multiple applications.

Core Framework for React Application

UI / Style Kit — Framework

we can build a UI Style Kit framework that aligns with the organization's design language, it can be a repository of all UI Widgets like buttons, Text, Input and Typography.

Sample Widget’s Library

Designers designed what kind of buttons we will have and they divided these into three.

• Filled Button
• Text Button
• Iconic Button

We could extend this widget library as bundled themes which would help teams to reuse these bundles in application.

export const ThemeContext = React.createContext(defaultTheme);

export function useTheme() {
  const theme = React.useContext(ThemeContext);
  return theme;
}

import * as React from "react";
import { ColorValue } from "react-native";
import colors from "./colors";

export interface Theme {
  primary: ColorValue;
  secondary: ColorValue;
  // The color for the main background of your interface.
  background: ColorValue;
}

export const defaultTheme: Theme = {
  primary: colors.brand.blue,
  secondary: colors.blue.secondary1,
  background: colors.mono.white,
};

Scalability and Real-time

On the Scalability aspect, we could take one of the use cases of seamless user experience which can be achieved by some of the design patterns.

Offline First Design and Handling poor connectivity

which will ensure the app is scalable and reliable for consumers.

To handle Flaky/ Poor network conditions we can build a retry framework that will help us keep the critical business workflow continuity.

Retry framework

Real-Time — Logger

The logger module can be used to log all interactions of users with the application and also it can help in real-time debugging or alerting and monitoring to keep the high resiliency of the application.

• As our scale expands, it’s imperative that our turnaround time for identifying the root cause, assessing the scope and severity of an issue, and ultimately resolving it, decreases to minimize its impact.
• When debugging issues within the mobile application, it’s essential to analyze various data points including user interactions, control and data flow, network interactions (such as API calls), application state, and device information, as well as user and App metadata.

Operational Efficiency-Monitoring and Alerting: setup Splunk and Xmatters to enhance application experience

The solution outlined above enables us to gather data whenever we receive an alert from monitoring tools like Splunk.

Additionally, it captures issues reported by built-in fault detection mechanisms within the app for critical processes or those flagged by our Operations team. With the collected logs and real-time metrics (detailed below), our team can swiftly analyze the data to expedite issue resolution.

While some tech choices, like opting for React Native over Native distribution, may seem opinionated, they were made to leverage the unique strengths of each framework.