Codepush Magic: Effortless Over-the-Air Updates for React Native (Part 1)
Over-the-Air (OTA) updates have revolutionised the way we deploy mobile applications. With the advent of tools like CodePush, React Native developers can effortlessly push updates to their apps without requiring users to download a new version from an app store. In this blog post, we’ll delve into the world of CodePush and explore how it empowers developers to seamlessly deliver updates to React Native applications.
What is Code Push?
Code Push is a cloud service provided by Microsoft’s App Center that allows React Native developers to deploy over-the-air updates to their apps without going through the app store submission process.
It acts as a bridge between your code repository and the devices running your app, enabling you to push updates directly to your users in real-time. It’s a powerful tool for pushing bug fixes, performance improvements, and new features directly to users’ devices.
CodePush supports both iOS and Android platforms, making it an indispensable tool for React Native developers.
How Does it Work?
CodePush operates on a simple client-server model. The developer integrates the CodePush SDK into their React Native application. When a new update is ready, the developer uses the CodePush CLI (Command Line Interface) to release it to the CodePush server. The server then notifies the devices that are registered to receive updates. When the app is opened on a device, CodePush checks for available updates and downloads them if any are found.
What sort of changes we can update via the Code Push?
No, we can’t update everything via the CodePush. It only allows us to send javascript file changes and the assets via this service. It’s pretty much similar to the changes that we can see from the browser reloading on web applications.
Library version upgrades, new package additions basically anything which changes your package.json file and the changes to the segments which needs application restarts are not going to work. Instead they’ll crash your application which is on production and cause much severe issues.
Simply the changes that you are able to view on simulator by doing the hot reloading, are the changes that can be sent via the CodePush updates.
Does Apple and Google allow this?
Yes they do. Google allows this. Apple allows it as long as you don’t do dramatical changes to the application. If you are going to change the whole context of your application, such as converting your utility application to e-commerce one, then they’ll going to reject it definitely.
The React-Native is a great platform for using OTA(Over-The-Air). Because The RN(React-Native) application artefacts consist of the native part and JS/asset part.
The native part is about native code(Java, Kotlin, Obj-C, Swift) or its native dependencies or JNI(java native interface) or any other configuration related to the native level like Manifest.json, Gradle, Plist, etc…
The JS/asset part is about JavaScript code and image/font files bundled by Metro before packing production release apk, aab, iap.
Ok.. then why does this structure helps RN use OTA? Well, because both main OS stores(Google Play Console, App store connect) requires guideline compliance about OTA release. OTA release related to native codes in the application is something violating compliance of stores. Also, that is not an easy one. But if you check CodePush document, we can notice releasing JS code with OTA is not violating compliance. Therefore, the native part of the application cannot be updated with OTA but almost all logic in your RN application is on the JS side. Isn’t it? We can update JS/asset part without waiting for store review and quickly. And that is the role of the OTA tool in React-Native.
Refer: https://github.com/microsoft/react-native-code-push#store-guideline-compliance
Pros & Cons
Pros
- Rapid Deployment: Updates are delivered instantly, ensuring users have access to the latest features and bug fixes.
- Improved User Experience: Users don’t need to manually update the app, reducing friction and increasing user satisfaction.
- Agile Development: Developers can iterate and deploy changes faster, enabling quicker responses to user feedback.
- Platform-Agnostic: It works for both iOS and Android, allowing developers to update both platforms simultaneously.
- Deployment Control: Developers can target specific versions of the app or deploy updates to specific groups of users. This allows for controlled rollouts and A/B testing.
Cons
- Limited to React Native: CodePush is specifically designed for React Native applications. If you’re working with a different framework or language, you won’t be able to leverage its benefits.
- Dependency on External Service: Relying on a third-party service (Microsoft’s CodePush) means that developers are subject to the service’s availability and maintenance. If the service experiences downtime or changes in functionality, it could impact the update process.
- Limited to JavaScript: CodePush is optimized for JavaScript-based apps. Developers using other programming languages, such as native platform specific languages for their apps may not benefit from this tool.
Best Developer Practices
- Thorough Testing: Always thoroughly test updates locally before pushing them using CodePush. This includes testing on various devices and screen sizes to ensure compatibility.
- Version Control and Tagging: Implement proper version control practices. Tag releases in your source control system to maintain a clear history of updates.
- Environment-Specific Configurations: Ensure that your app can handle environment-specific configurations. This allows you to manage different configurations for staging and production environments.
- Keep Deployment Keys Secure: Safeguard your deployment keys and credentials. Never expose sensitive information in public repositories.
- Scheduled Deployments: Plan deployments during off-peak hours to minimize disruption to users.
- Understand CodePush Limitations: Be aware of the limitations of CodePush. It may not be suitable for every type of update, especially major changes or updates involving native modules.
- Stay Informed about CodePush Updates: Keep up-to-date with any changes or improvements to CodePush to take advantage of new features or enhancements.
By following these best practices, developers can make the most out of CodePush for React Native development, ensuring smoother and more efficient update processes.
