When the client addressed to us, we had the following requirements:
- the app should work on both iOS and Android platforms;
- the platform should have an integration with phone camera to make photo and video stories (like in Instagram or Facebook);
- the system should be able to work with 1000+ users;
- the user should be able to upload photos/videos of a big size and of good quality and, at the same time;
- the app should work smoothly on any kind of mobile devices (flagship devices, like iPhone 6, 7, X and low end-devices, like Android devices with 512-1024Mb RAM);
- the user should be able to use the app even when there is no Internet connection. The app should synchronize the user’s actions in online and offline modes.
The better choice for the mobile app development with such requirements is React Native. It allows to decrease the time necessary for the development as well as reduce the budget and the support cost.
Before starting the development process, one of the essential things is to choose the optimal variant of build. We’ve chosen to work with Infinite Red Redux as it provides the support for the all new features and it’s extremely maintainable. More to this, it gives great support from the community in Slack.
While performing the tasks listed above, we came across the following issues:
Offline mode smooth work
Our main task here was to synchronize the user’s actions in the offline and online modes. For instance, when the user creates the story in an offline mode and then connects the device to the Net, all his actions from the offline mode should be repeated in the same sequence of actions. If the sequence of actions is not preserved, the synchronization won’t be completed. In this case, the process should be repeated again from a certain state. This is a very specific task that is essential for the big projects. As a rule, it needs a custom solution and increases the time necessary for the development. There was no out-of-the-box solution to this task and no easy way to define the app’s behavior during unstable connection. So, the major part of the solution that we found was custom and it was based on the transactional data transfer.
Camera integration
The primary feature for the app is the ability to use camera for taking photos and videos. However, there are certain peculiarities and limitations to React Native components that work with the hardware. For instance, the ability to switch from a rear camera to the front camera without turning it off. So, if you decided to develop the app with similar functionalities, keep in mind that there is no detailed documentation for implementing such kind of features. We managed to figure out all the peculiarities of such kind of tasks and gained a valuable experience that can be used in the work with similar tasks.
Photo and video compression
As modern mobile devices make 4K photos and videos resolution, one of the main tasks is to give the user ability to upload photos and videos of a big size. The problem here is the following: if to upload the content of a big size firstly on the server and compress it there, it will influence the application render-response time. Our solution was to compress the photos not on the server-side but in the client size, thus minimize the time necessary for uploading the content but at the same time save its quality.
Quick asset render
Again, for a smooth work of the app, it was critical to allow the user edit the pictures/videos immediately after they were taken without the necessity to wait for the picture being saved to phone gallery and uploaded to the server. Our solution of the problem was to retrieve raw data from the camera component. It allowed us to save a few seconds and give the user possibility to work with the content after it has been taken.
Performance optimization with large amount of photos
The app should have had an access to the mobile phone gallery, however, the photos needed to be shown in the same albums as they were on the mobile device. Because, if the photos are shown in a continuous flow, it can lead to memory leaks.
For showing the photos on the app in the same albums as they are on the mobile phone, we came up with a custom solution, as there was no out-of-the-box solution.
At the same time, to avoid the memory leaks and solve the problem of memory usage, while loading a big amount of photos, we used photo lazy loading.
Low-end devices optimization
As the project was big, it was crucial that it works as good on flagship devices, like iPhone 7, 8 or X, as on the low-end ones, like Android devices with 512-1024Mb RAM, for example. That is why, we made an optimization on React Native architecture level, by improving rendering performance and making user rendering tests. React provide the ability to have control over UI rendering in response to user interactions. However finding the right or suitable approach is still the developer’s responsibility, that’s where rendering tests work the best.
Scalable backend
As the app is supposed to be used by a large number of users, one of the ultimate tasks was to build the backend that would cope with the high load.
We used AWS Lambda as mobile application backend because it:
- supports the non-relational database. (We used DynamoDB, as it provides fast and flexible non-relational database service);
- gives an ability to make scalable backend
More to this, we also made swagger - an automated documentation, code generation, and test case generation. It allows optimizing the front-end and back-end developers' work.