Scalable React and React Native Apps
How to architect large web and mobile React apps with Redux
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 impressive300%.
Wix — React Native Case at ReactNext 2016
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:
The Modular Software Architecture
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.lock
In 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.
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.
Publicação Automática de Releases para iOS(Apple Store) e Android(Google Play) na Getty/IO
We have developed and used this process and technologies throughout the 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.