Use libraries dedicated to mobile and build features faster on many platforms at once, without compromising on the performance and user experience.
The following article is a part of The Ultimate Guide to React Native Optimization and describes the fourth point of this guide: the importance of using dedicated libraries for mobile.
Why is it important?
In the previous parts of our guide, we have discussed:
- Reducing the device’s battery usage with UI re-renders
- The best practices around using dedicated higher-ordered React Native components
- Picking external libraries
Be sure to check them out.
Now, let’s dive into the best practices for choosing the libraries dedicated to mobile.
Always remember to use libraries dedicated to the mobile platform
Issue: You use web libraries that are not optimized for mobile
While React Native provides web-like functionality for compatibility with the web, it is important to understand that it is not the same environment. It has its own set of best practices, quick wins, and constraints.
For example, while working on a web application, we don’t have to worry too much about the overall CPU resources needed by our application. After all, most of the websites run on devices that are either plugged to the network or have large batteries.
It is not hard to imagine that mobile is different. There’s a wide range of different devices with different architectures and resources available. Most of the time, they run on battery and the drain caused by the application can be a deciding factor for many developers.
In other words - how do you optimize the battery consumption both in the foreground and background can make all the difference.
Not optimized libraries cause battery drain and slow down the app. The OS may limit your application capabilities.
If the library depends heavily on networking, such as real-time messaging or offers an ability to render advanced graphics (3D structures, diagrams), it is very likely that you’re better going with the dedicated mobile library.
The reason is simple - these libraries were developed within the web environment in the first place, assuming capabilities and constraints of the browser. It is very likely that the result of using a web version of a popular SDK will result in extraneous CPU and memory consumption.
Certain OSes, such as iOS, are known to be constantly analyzing the resources consumed by the application in order to optimize the battery life. If your application is registered to perform background activities and these activities take too much of the resources, the interval for your application may get adjusted, lowering the frequency of the background updates that you initially signed up for.
Solution: Use a dedicated, platform-specific version of the library
Let’s take Firebase as an example. Firebase is a mobile platform from Google that lets you build your apps faster. It is a collection of tools and libraries that enable certain features instantly within your app.
Firebase contains SDKs for the web and mobile - iOS and Android respectively. Each SDK contains support for Realtime Database.
Thanks to React Native, you can run the web version of it without major problems:
An example reading from Firebase Realtime Database in RN
However, this is not what you should be doing. While the above example works without issues, it does not offer the same performance as the mobile equivalent. The SDK itself also contains fewer features - no surprises here - web is different and there’s no reason Firebase.js should provide support for mobile features.
In this particular example, it is better to use a dedicated Firebase library that provides a thin layer on top of dedicated native SDKs and offers the same performance and stability as any other native application out there.
Here’s how the above example would look like:
An example reading from Firebase Realtime Database in RN
As you can see, the difference is minimal and boils down to a different import statement. In this case, the library authors did a great job mimicking the API to reduce the potential confusion while switching back and forth between the web and mobile context.
Benefits: Provide the fastest and most performant support with no harm to the battery life
React Native is all about giving you control and freedom to choose how you want to build your application.
For simple things and maximum reusability, you can choose to go with the web version of the library. That will give you access to the same features as in the browser at relatively low effort.
For advanced use cases, you can easily extend React Native with a native functionality and talk directly to the mobile SDKs. Such escape hatch is what makes React Native extremely versatile and enterprise-ready.
It enables you to build features faster on many platforms at once, without compromising on the performance and user experience - something other hybrid frameworks made a standard tradeoff.
Libraries can make the development process easier and faster but it’s crucial to choose the right ones. Using libraries that are not optimized for our target device (mobile in this case) can seriously harm the performance and user experience of your apps. It may lead to undesirable business consequences such as a decrease in the conversion rate of your products.
We are the official Facebook partners on React Native. We’ve been working on React Native projects for over 5 years, delivering high-quality solutions for our clients and contributing greatly to the React Native ecosystem. Our Open Source projects help thousands of developers to cope with their challenges and make their work easier every day.
Contact us if you need help with cross-platform or React Native development. We will be happy to provide a free consultation.