Let’s assume your goal is to build a real native mobile app and with that I mean a mobile application that you can ship through the app store. This means it is not a mobile optimised website but a mobile app. You want to build this for Android and iOS. Of course, you can use native languages for this i.e. Java or Kotlin for Android or we can use Swift and Objective C for iOS development.
However, as you may appreciate, this would require learning and writing in different languages for the two platforms. As a web developer you will probably prefer to use JavaScript to write your program, and if you are not a web developer, chances are that you will prefer using one language to write an App for both platforms.
To address this problem, various technology packages or frameworks came forth in the past few years generally known as Hybrid App frameworks.
Let’s have a look at the available options. Obviously, we can use native languages but there we would need to learn two languages. The upside is that we will have access to all the latest and greatest features as soon as they are released; Also, we don’t need to compile our code into a native language as an intermediate step, but the obvious disadvantage is that we have to learn two languages.
In case of Hybrid App frameworks, we have the options like Cordova, Ionic, PhoneGap, where the latter two build on top of Cordova. Here in fact, you create a website (for creating a mobile app) using HTML, JavaScript and CSS and that gets loaded into a component called WebView. WebView is actually a web browser without the navigation and other buttons of a web browser. It essentially loads your web page into a WebView and give the illusion of a native App. However, it is, in fact, a webpage. This, of course, lets you create mobile apps using your existing web skills and the time to market is greatly enhanced as well. You can still access Native device features through the WebView wrapper around the App.
Now the third option is to use a compiled app. In this case, we still use one language and only one technology stack to create the App, but the end result is not a website running in a wrapper, but an actual native app. This is the approach which has been adopted by React Native, Native Script and Flutter. In this case the UI widget libraries that you use are compiled into native code which results in much faster apps than what is available using Hybrid App frameworks. This doesn’t necessarily mean the slower solution is bad as on modern devices, due to the improvement of processing speeds, the performance difference is narrowing down.
A lot has been written in the past about Hybrid App and Native App frameworks. In this article however, we would focus on compiled app solutions based on the third option above and three key ways they differ from each other.
1. Language
These frameworks differ by the language they use. React Native and Native Script both use JavaScript, but Flutter uses a language developed by Google called Dart. Dart 2.0 is out now, and Flutter is compatible with that too. Contrary to what you may be thinking, Dart is not terribly difficult to learn as it resembles other strongly typed languages like Java, C#. If you are coming from that background, it would be easy to get used to the new syntax. As both Dart and Flutter have been developed by Google, you can expect strong integration and smooth working here.
2. Compilation
In case of React Native, JavaScript is not compiled to native code. It is not like your JavaScript code would be converted to machine code. Instead, it would run on a thread, so to say, on the mobile app, but what is really compiled are your UI elements. So, all the UI components you are using are compiled. In the Ionic example these would stay HTML because it is a webpage in the end, but here they would be compiled to Native components. That, of course, leads to better performance.
For Flutter it is a bit different. There the Dart code is compiled into an ARM C/C++ library which means it is basically the machine code or close to the native code. It is not Dart code which is running on a separate instance that talks to the native code. It is compiled to a library which is consumed by the native code. This will probably lead to even better performance.
For NativeScript compilation is the same as react native. It is not compiled to native code, but instead, it runs on a separate thread which communicates with the native code.
3- Resources Available
React Native come with some pre-built and partly adaptive components. With that I mean buttons, text input etc. It has a core set of components but anything more advanced has to be built by recomposing the core components. Few of them are adaptive i.e. they adapt the style of the platform you are running them on. Most of the times you will have to change their styles manually in the code.
In contrast to that, Flutter has a bigger widget library. Everything in flutter is a Widget and it is made by composing Widgets with smaller widgets like a set of Lego blocks. You still need to create Widgets for your unique requirement, however, the platform does provide a bit more variety and choice in terms of the built-in widgets. In this case, also, the built-in widgets are not adaptive. It offers widgets for Android and iOS but you have to switch between them manually by making the checks on the platform where the App is running. Google recommends using Material Design with Flutter which is UI widgets and styles you can customise; however, it would look similar on both iOS and Android versions unless you manually program differences.
In the case of NativeScript, however, we have some pre-built and mostly adaptive components. Here you can also do customisations and create your own components.
About Centricweb
At Centricweb we design, develop and support awesome Mobile and Web apps which truly represent your brand’s unique identity. We are at the forefront of mobile and web technologies which are changing at a dizzying pace. We have worked with most of the major technologies in this spectrum and are continuously adapting to further changes to provide our customers with the most effective solutions at the industry-leading benchmarks for the total cost of ownership (TCO) and Return on Investment (ROI).
Our promise to our customers is Amazon service at Amazon prices! Our team of product gurus, development ninjas, and UI/UX grandmasters work in harmony to deliver you with world-class digital experiences.
If you are a business or a startup looking for a mobile development partner, contact Centricweb today for a friendly no obligations advice.
