Imagine you can deliver updates for your application in minutes, whether it is to fix errors, quickly add a functionality that users have been insistently asking for or simply change the design of your application. Now you can easily do this thanks to the React Native CodePush library.

In today’s world, saving time always translates into saving money and, with this implementation, you will skip the waiting time it takes the app stores to approve the new version of your application. Not to mention the frustration of end-users when they find out there is yet another update they must download to get that fix or that new feature that they have been looking forward to.

What is React Native CodePush?

CodePush is a Microsoft library for React Native and Cordova, which allows you to launch code and image updates through a proprietary server. This will be directly installed without the need for end-users to update the application through the relevant app store.

Image from: microsoft.github.io

How does it work?

The operation is based on wrapping our application in a HOC (higher-order component) of CodePush that is responsible for checking if there are new updates to our code in CodePush and reloading the application with new changes.

React Native CodePush uses its own server to save a copy of each CodePush deploy and a control version if a rollback is necessary; this can be done almost instantaneously. All of this is managed through a friendly control panel provided by Microsoft, which does not only let you control the CodePush deploys but also the conventional ones. It also lets you perform simultaneous testing of the versions on a wide variety of devices and platforms.

The library has a wide variety of configuration parameters that, among other things, allow you to choose at what time to check and download new versions of React Native CodePush for the application and also give you the possibility of using events to determine when each of these processes was completed. For example, you can notify the end-user that a new version will be installed the next time the application is restarted.

Advantages

• Deploy the code update in minutes.
• Download and update in the background.
• Configurable server inquiry mode, onOpen and onResume.
• A copy of the previous update is stored (easy rollback).
• App Center release monitor panel.
• Ideal for patch/fix updates.
• Compatible with:
  • React Native v0.59 and earlier
  • Android (4.1+)
  • iOS (7+)

Disadvantages

• Forces you to have a separate version for iOS and Android.
• Any changes that involve the native code (for example, modifying the AppDelegate.m/MainActivity.java file, adding a new library, etc.) cannot be distributed through CodePush and, therefore, must be updated through the relevant store.
• It does not support the following component properties:

Integrating CodePush

To integrate React Native CodePush into your project, you must first have an account in the Microsoft App Center. You can create it through the following link: appcenter.ms. After creating the account, you must create projects—one for Android and one for iOS—, and follow the sensuous steps you’ll find in the implementation section of your projects.

We recommend using CodePush to perform hotfixes, fix errors or graphic UI changes, because, when incorporating a new feature, in most cases, it depends on the installation of other libraries and this can be delivered by an update through CodePush. Moreover, if adding a new feature, it is convenient to go through the testing and check-up system that the app stores (the Google Play Store and the Apple Store) provide because it is important to comply with their regulations and it is beneficial to take advantage of the feedback users provide when trying out the application with that new functionality.

Code Integration

You will need to create two versions of the code (or branches) one for Android and one for iOS and you will have to repeat the library installation and code integration on each one.

Run this command in your project command line:

yarn add --save react-native-code-push

or this one:

npm install --save react-native-code-push

Once the library is installed, you will need to link it to the project:

react-native link react-native-code-push

At this point, the console will ask you to insert the CodePush keys for platforms.

To get these keys, go to AppCenter and create one application by platform. Then go to your app, Distribute -> CodePush, and press on the top-right tool icon to get the key.

Put the key on the console and React Native will automatically save and link CodePush keys to the project.

For iOS, if the project uses CocoaPods, go to the iOS folder and run:

pod install

Integrating the SDK:

To integrate the SDK to the project, follow the steps stated in the “Overview” section at:

appcenter.ms/orgs/`my_organization`/apps/`yourapp`

Integrating React Native CodePush to project code:

Edit the `App.js` project file, to allow the following code:

This action will link the library and set a default configuration to install updates that, in this case, will check and install updates during app starts.

Releases

To release a new version of CodePush, open the terminal and run:

appcenter codepush release-react -a AsapUy/`MyAppName` -d `Beta`

Replace `MyAppName` with the name of the app, and `Beta` with the name of the environment attached to the key, and the current environment that you want to deploy to.

Final thoughts

As you can see, React Native CodePush is a very valuable tool when making updates to your app. It will not only save you time but also make your users happier. We believe it is definitely worth a try.

The post React Native CodePush introduction appeared first on asap developers.

As developers, we always try to find resources and ways to make implementing functionalities, as well as testing and launching an application easier for us. The greatest boom in recent years has undoubtedly been in the development of mobile applications. Since 2007, when the iPhone was launched, Steve Jobs introduced the idea of being able to run applications developed in Ajax and HTML5 that were a standard for the iPhone at that time. However, when the concept of the App Store appeared, it became very popular, leaving all of those ideas behind. With that in mind, today, we’ll like to take a look at what Progressive Web Applications (PWA) have to offer and where they stand in comparison to native apps.

What is a PWA or Progressive Web App?

A Progressive Web Application is a web app that runs on an instance of a browser, is able to consume native services of the device, and offers a native user experience. Let’s break down what each part of PWA entails:

• Progressive: Works for everyone, on all devices that support modern browsers.
• Web: Uses web standards like Javascript, HTML and CSS, all behind the facility of React to develop a responsive, clean, modern and safe web app.
• App: Runs, works and looks like a native app, including push notifications* and offline and local storage access support.

Source: https://developers.google.com

Why should you choose Progressive Web Apps (PWAs) over Native Apps?

One of the major advantages for developers is the fact that, to build a PWA, you need to code using React, which also provides the code for the website. So you’ll be developing a multiple platform app, native for Android and iOS, and also a web app, for all the other devices that integrate a modern browser.

Furthermore, React supports the use of CSS style sheets, which allows to easily integrate styles into any environment of the application, even having a main resource configuration file called manifest.json, where you can change variables such as the icon of the application, application mode, wallpapers, title, splash screen, and many others. There is no doubt this means the configuration can be done in a simple and centralized way.

Moreover, if you develop a PWA, you circumvent the fact that often resources such as styles, functionalities and libraries work differently for each platform. Programming and correcting these aspects usually requires a lot of time and money, in addition to the fact that there are often no libraries that support both platforms because the base language for each platform is different.

From this last point, we can conclude that the cost of developing a PWA is significantly lower than that of developing a native application for each platform. Not to mention saving you save the cost of publication in each of the app stores that requires a paid developer account.

Progressive Web App benefits 

Here’s an overview of all the benefits of developing a Progressive Web App:

• Looks like a native app.
• Easy to develop with ReactJS; lots of documentation available.
• Fast and fluid navigation; uses Service Workers.
• Offline support, WebSQL database; LocalStorage access; push notifications*; allows access to device’s hardware, like Camera, Speakers, etc.
• Quick development; can see changes in real-time; uses a Node server.
• Totally responsive, adapts the design to all screen devices.
• Easy app installation by just going to the website and selecting the “Add to Home” browser option.
• Smaller size than a native app.
• Appears on the device’s app manager, providing the possibility to uninstall it, or clean the cache.
• Instant deploy: just deploys changes to the production web site and the changes will instantly appear on the PWA.

What are the cons?

Of course, like every tool, PWAs also have its disadvantages. Let’s take a look at them:

• Most users usually go directly to the device’s store instead of going to the app website, so it will cause a change of “routine” for the users that may be difficult to get used to.
• *Push notifications for iOS safari browser are not supported yet.
• It is not possible to access specific properties of the hardware of the device and the operating system, meaning you are limited to the basic functions provided by each system.
• If the icon, splash screen, app name or description changes, you can’t get an automatic update from the server. This does not happen with a native app, because just by updating it, you can get a completely new and different app if you want to. 

Conclusion

To sum up, the choice of technology will depend on the requirements and resources of each client. If the objective and scope of the application to be developed do not require specific functions of the device, but do call for the possibility of web access and include a tight budget, the process of analyzing alternatives will probably lead you to develop a PWA as the best option for the client. On the other hand, if your client requires considerable fluidity with animations, access to specific resources of the device—such as the processing of data and content—, or access to specific properties of the hardware of the device, and has a flexible budget, the best option will without a doubt be developing a native application.

For either case, we recommend learning how to use React, React Native, and taking full advantage of them. ReactJS allows you to easily develop websites and PWAs. And, if you want to develop native applications, you should use React Native, whose code and implementation is very similar to ReactJS.

The post Progressive Web Apps vs Native Apps appeared first on asap developers.