Scalable React and React Native Apps
How to architect large web and mobile React apps with Redux
React is an incredible JavaScript library created by Facebook and Instagram, focused on creating users interfaces, it dominate the view layer of modern web and mobile applications in the world’s best tech companies. React makes simple the development of interactive user interfaces that can be updated efficiently for each change of state.
Using declarative programming React make easy to debug and create a more predictable code.
React Native is the version of React that supports cross-platform mobile development. According to Facebook, React Native is very similar to React, but instead of using web components, it uses native components to create the building blocks.
PROTIP: The React / React Native does not make assumptions about the application’s current architecture. Most people consider React as the View layer of the MVC pattern and it can be used along any back-end technology, such as Java, Ruby, Python and Node.js
The Wix case demonstrates how easy it is to scale the mobile apps development, They migrated development for their application IOS and Android to React Native and increased their development speed in impressive 300%.
PROTIP: With React Native it is possible reuse up to 90% of the written code between platforms iOS and Android.
Is It Some Magic?
No, it’s not magic, React isn’t perfect, to create scalable applications with React and Reactive Native you have to manage the application state in a consistent and maintainable way using libraries like Redux, Mobx, Effex, Flux or even frameworks like Relay.
At Getty/IO we use Redux with Immutablejs.
PROTIP: Redux is basically a state container that takes the best parts of the Flux architecture to a logical and efficient conclusion. Its aim is to make state changes more predictable.
Although widely used with React, Redux can also be used with other libraries. Ex: Angular, Ember or Dart.
Redux provides a sustainable standard for developing complex and large-scale applications, regardless of platform.
Creating Better Apps
In order to create better products, we decided to build a reference architecture for new projects with React and React Native technologies.
This architecture takes into account enterprise usage, application exponential growth, performance, scalability, testability, interoperability, and usability.
Our front-end stack:
- React
- React Native
- Redux
- Immutablejs (optional)
The Modular Software Architecture
According to our experience, there are several ways to organize a javascript project, each form has its advantages and disadvantages.
We understand that the code should be clean and should provide support for adding new features without compromising the existing codebase. All code must follow a implementation plan to ensure everyone understands what was written.
Taking this into account, we have design a well defined structure for enterprise use, already organized by modules that maximizes the reuse of components.
.
├── package.json
├── src
│ ├── Root.js - Main App Component
│ ├── Routes.js - Routes
│ ├── assets
│ ├── components - Reusable Components
│ │ ├── home
│ │ │ ├── __tests__
│ │ │ │ ├── Card.spec.js
│ │ │ │ └── EventItem.spec.js
│ │ │ ├── Card.js
│ │ │ └── EventItem.js
│ │ ├── ...
│ │ └── shared
│ ├── config
│ │ ├── constants.js - Constants and Configs
│ ├── modules
│ │ ├── home
│ │ │ ├── actions
│ │ │ │ ├── index.js - Action Creators
│ │ │ │ └── types.js - Action Types
│ │ │ ├── components
│ │ │ │ └── HomeScreen.js - Redux Container
│ │ │ └── reducers
│ │ │ ├── index.js - Redux Module
│ │ │ └── reducers.js - Redux Module Reducers
│ │ ├── events
│ │ ├── navigation
│ │ ├── ...
│ ├── store
│ │ ├── store.js
│ │ └── reducers.js
│ ├── styles
│ │ └── main.js
│ └── utils
│ ├── date-utils.js
│ ├── string-utils.js
│ ├── storage-utils.js
│ └── responsive-utils.js
├── tests
│ ├── components
│ └── modules
│ ├── home
│ │ ├── actions
│ │ │ ├── home.action.spec.js
│ │ │ └── home.actionTypes.spec.js
│ │ ├── reducers
│ │ │ └── home.reducers.spec.js
│ │ └── components
│ │ ├── HomeScreen.spec.js
│ ├── navigation
│ ├── events
│ ├── login
│ └── survey
└── yarn.lockIn this example it is possible to observe that the containers are separated by modules and the reusable components are totally independent. For each module defined a set of tests for Actions, Types, Reducers and Components must be defined too.
The tests folder location here it’s a matter of preference here, you can use the Jest __tests__ standard as well.
Weekly Releases
In order to consistently collect feedback from users, we’ve also defined the weekly releases that which key users or even potential customers are invited to participate.
At the beginning of each week we define a goal for each and, from that goal, we organize the tasks for the sprint. Each sprint ends on Friday and on that is when we make a final week build for each platform.
The Results
We have developed and used this process and technologies since 2015. So far the results have been surprising.
Every time we create a new application, the reference architecture receives numerous optimizations that have been collected as feedback from previous projects.
With the Redux reference implementation of all business logic is modular and decoupled from the front end and the same on mobile apps and web apps.
Applications that needed six months to be developed on two platforms can now be created in one third of the time.
With the use of React and Redux, we can also equalize the code between developers, all code is done using the same blueprints and if something different appears, our lint will complain in the continuous integration cycle.
Connect
Together, we imagine and create web and mobile applications that scale automatically and are always available from any device anywhere.
Send a message to us at hello@getty.io.
