The first problem we face when developing a mobile application is that the development time is multiplied by the incompatibility of apps between platforms, Android and iOS. Therefore we will have to make different developments for each of the existing operating systems on the market, so the development time is double. While in Android the development is done in Java or Kotlin, in iOS we must use Objetive C or Swift.
Multi-platform applications
There have been many options to try to mitigate this double work with which we are at the time of making a mobile app.
The first solution a few years ago was to use HTML code and have the app consist only of a browser on which an HTML code was displayed as an application. In this way the only problem was to make a common web code but compatible with the browsers of each platform, a task that was to some extent simple.
The problem with this type of application is that its performance is very low, it is still a code interpreted as any website that we can see in a browser.
PhoneGap and Apache Cordova
Another later and more interesting solution was PhoneGap or Apache Cordova, the same but with a different name. In 2009 the company Nitobi developed PhoneGap. It was based on the previous concept, to develop HTML5 code on a browser in the app. The difference was that it had a Javascript layer that allowed us to access to native functions programmed for each system, for example access to storage, camera, phone calls... This allowed to improve the performance and access to elements of the mobile without having to use own native code.
All the code was donated to the Apache Foundation in 2011, becoming an Open Source project. At that time Adobe bought Nitobi but agreed to donate the code as Open Source, so Apache changes the name of its product to Cordova. So they are the same but from a different vendor.
PhoneGap/Apache Cordova was a very important advance in the development of mobile applications but still had shortcomings. It improved access to native features but, in terms of performance, it was still a browser with HTML5 code.
React Native in multi-platform apps
At this point we were looking for a way to develop an application with the performance of native code but with the benefits of development using a common language. This is where the use of React Native in multi-platform apps comes from, created by Facebook, and in which JavaScript is used.
The solution it provides is a screen design with JSX components in the HTML style but the result will be a native component.
Por ejemplo, una etiqueta <TEXT> en la pantalla, se transformará en un elemento nativo TextView de Android o en un elemento UITextView de iOS según la plataforma para que hayamos realizado la compilación. De esta forma tendremos el beneficio de un desarrollo común pero manteniendo un alto rendimiento cercano a las aplicaciones nativas.
In addition to all of the above, in React Native apps, JavaScript runs directly. It uses a kind of double thread. One running all the native code, from the different modules we use in our app, and another running a virtual machine running JavaScript.
The learning curve of React Native is very short, and if the developer knows React and JavaScript, he can start programming directly from the first minute. There are also tools available to make development and debugging easier: React Developer Tools, React Native Debugger or Redux DevTools.
Installation of React Native
To develop with React Native in multi-platform apps we will use an editor such as Visual Studio Code, which has extensions that help us during programming. Before the installation we must take into account the difference between the two types of development that can be done in React Native:
- Expo CLI: is the easiest way to start developing our apps. Simply by having Node.js and an Android mobile or a simulator. The bad thing is that we have the limitation of not being able to write complementary native code for each platform if we need it at any time.
- React Native CLI: in this case we will need to have Xcode (iOS) and Android Studio (Android) installed so first we will have to prepare the whole environment. The advantage is that in case of any difficulty in which we need native code we can add it without any problem.
On their website they offer us a very simple installation guide of all the necessary tools. In summary, and for the option of applications with React Native CLI, we will need to have installed:
- Node.js.
- JavaDevelopment Kit.
- Android Studio with Android SDK.
- XCode and CocoaPods.
Other multi-platform environments
Nowadays, multiform apps are becoming the preferred option in many cases. This is due to factors such as: continuous updating of components, shorter development time for an application, higher performance as it approaches native code.
Although there are other platforms, the most popular solution today is to use React Native in multi-platform apps. The main reasons are:
- Cordova/PhoneGap: Currently in disuse due to its low performance compared to the other multiplatform options because it is based on a webview with HTML code.
- Ionic: Based as Cordova on HTML , CSS and Javascript. It is a framework that is based on Angular. Also outdated due to low performance compared to native code.
- Xamarin: It is within the Microsoft .Net environment. The language used is C# with native platforms wrapped in a .Net layer. It is older than React Native or Flutter, but perhaps has a longer learning curve.
- Flutter: Is a technology developed by Google, based on Dart language and a portable C++ engine to achieve a framework with a powerful user interface. It is a pre-compiled language that allows the app to communicate directly with the native language core. In addition, the interface components are proprietary.
Conclusion
Finally, and as a summary, the following table shows the differences between the different multiplatform environments for mobile apps. Personally, using React Native in multi-platform apps, is the solution that offers more advantages: performance very close to native apps and a huge community developing components that make our work much easier.
