Optimization and Cross-cutting component in React Native app
There are different ways to optimize the mobile application. The guidelines in this topic are created by using React Native reference document, online tutorial, blog reference, and my expertise in mobility.
Optimization:
Enable gZIP Compression: Implement gZip to both server and client-side to reduce the data size.
Cache, Cache, Cache: A great rule of thumb when developing your app is to “cache what matters” — that is, things that are unlikely to change, but are accessed frequently.caching are remote server responses, images, or even calculated values, such as table row heights.
Reuse Expensive Objects: Reuse expensive objects like Date, Table.
Avoid Re-Processing Data: Many apps make calls for data from remote servers to get information the app requires to function. This data usually comes across in JSON or XML format. It’s important to try and use the same data structure at both ends when requesting and receiving the data.
Choose the Right Data Format: There are multiple ways you can transfer data to your app from a web service, but the most common two are JSON and XML. You want to make sure you choose the right one for your app I.e. JSON pr XML.
Choose Correct Data Storage Option: We have several options to store data like file, user default, SQLite. We need to find the right option to store data according to the app requirement.
Speed up Launch Time: Launching your app quickly is very important, especially when the user launches for the first time. First impressions mean a lot for an app! The biggest thing that you can do to ensure your app starts as quickly as possible is to perform as many asynchronous tasks as possible, such as network requests, database access, or parsing data.
Don’t Render if Not Required: It has been recommended that you should not integrate the different states of the lifecycles and props. This is because, initially, it is important to determine whether to upgrade the components or not and also ensure not to overload the reconciler with unnecessary work, which can reduce the JavaScript’s thread’s FPS.
Memory Leakage: It has always been seen that memory leakage has been a major issue with the Android Operating System as there are a number of unwanted processes that are operating in the background. However, you can rectify this problem by scrolling the different lists including VirtualList, SectionList, and FlatList, etc. You don’t need to use the Listview. There are other benefits of scrolling as well such as smoothing of countless scroll pagination
Improvements in the Navigation: The navigation being the core of the application functionality, you should thoroughly concentrate on bringing improvements in navigation and better the performance between the JavaScript and Native elements. As such, you can use four major navigation components in the application. These include-NavigatorIOS (for IOS only)React-navigation, React-native-navigation, and Native-navigation.
The Absence of Multithreading: We have already indicated earlier that React Native basically works on a single thread which makes it quite impossible to carry out multiple tasks at the same time. When this JS library renders a component, the others have to wait until the process is completed. For instance, you cannot incorporate live chat and live video feed altogether simultaneously. In order to avoid crashes or slowdowns, only render one service and then follow with the other threads simultaneously
Cross-cutting component:
The cross-cutting component section is used as a helper for the application. The logic of cross components is different from the application logic. Details of the cross-cutting components are as follows:
Analytics: Use tools like SplunkMint, Google Analytics, Crashlytics, lumberjack for crash log, and the app use analytics.
Code Checker: Use tools like Eslint for projects to have clear consistent coding conventions, with automated enforcement.
Communication: Use a library like reachability for network check.
Exception Handler: Designing an effective exception-management strategy is important for the security and reliability of your application. Good exception handling in your mobile application prevents sensitive exception details from being revealed to the user, improves application robustness, and helps to avoid your application being left in an inconsistent state in the event of an error.
Consider the following guidelines when designing for exception management:
- Design your application to recover to a known good state after an exception occurs
- Do not use exceptions to control logic flow
- Do not catch exceptions unless you can handle them
- Design a global error handler to catch unhandled exceptions
- Design appropriate logging and notification strategy that does not reveal sensitive information for critical errors and exceptions. Handle catch exception with a custom catch exception class
Reference link :
