When I started planning to write this article the idea was to do some VS comparison of both Apache Cordova and NativeScript. But while I was writing notes for this article I figured that it’s not only the technical aspect for comparing any technology, sometime it’s business requirement which override the technical aspect, also when we are comparing 2 technology stack it’s really helpful if you knows what are the pros and cons of two different tech stack, sometimes it’s not the end result which matters more but the overall process using which you arrive at the end result. So I have changed it from VS to OR.
When we talk about process for creating any kind of projects, it involves both business (all the entities who are involved in human resource process or money aspect of project), there are certain decision which are taken at business level so if they are more clear on problems involved upfront they can take better decision. Technical (developers who will bring the app/project to life), will go through some technical details so that developer can take a better decision on whether to go for Hybrid model using ApacheCordova or NativeScript based upon their strength and technical expectations from the project.
We can broadly define mobile app development in 4 different categories:
- Native Apps: using pure languages such as Java, Objective C, Swift or C#, entry level is high, cost of development is high and startup cost can be high based upon availability of good skilled developer in pure languages.
- Cross – Compiled: You create your application in language like C# and then using a tool it will compile the same code to native mobile code example Xamarin. (Not purely sure how this works you can visit this website to learn more about it).
- An instance of platform-specific browser (Web View) is embedded within the application and is used to visualize the HTML and CSS
- Cordova (Phone gap) provides a “native bridge” to access the native resources on the device.
- Resulting applications are hybrid meaning that they are neither truly native mobile application (as all layout rendering is done via Web views instead of platform’s native UI framework) nor purely Web-based (as they are not just web-apps, but packaged as apps for distribution and have access to native device APIs).
- WebView :-
- WebView is a chromeless browser which is configured to run in full screen mode.
- All hybrid mobile app frameworks rely on standard implementation of WebViews for the app presentation tier.
- There are different types of WebViews available depending on the framework we choose.
- The System WebView is a native component provided by the operating system to be able to load web content
- User interface is created using XML based layout language and styled through stripped down version of CSS3.
NativeScript Apps vs Hybrid Apps:
- Major difference between the two types of app creation is UI Stack and User Input.
- UI are instances of the corresponding native widgets/visual – e.g. android.widget.Button on android or UIKit.UIButton on iOS whereas in Hybrid apps UI instances are HTML5 instances which are rendered based upon HTML5 rendering in the WebView supported on particular platform.
- NativeScript Runtime provides full access to the underlying native APIs such as Camera, Location, File System etc. In Hybrid app development access to native APIs is through Cordova Plugins and HTML5 feature set’s available in the particular WebView in the platform.
- Ease of development if you are more at ease with development for websites using desktop browser with your editor where you make a change in editor and you can see the changes using some livesync or real time update of view in browser, or you can use desktop browser to tweak/make UI changes with dev. tools in your Chrome/Firefox browser. You can do almost all those things if you are creating your app using phonegap.
- With Nativescript you can debug your app and push the changes using a tns livesync command with –watch mode but the only problem I found was I was not able to make real time UI updates or I was not able to debug the app in browser view using chrome:\\inspect so you have to be bit extra careful with your UI design.
- If you are familiar with MXML (UI schema used by adobe to create Flex) or XAML a schema used by Microsoft to for creating UI interface for Silverlight apps. You will be at ease with the XML schema Nativescript is using for its UI layer. Or if you have done any development for Android using Java then you are good. In Phonegap you can create your UI layer same way as you would do for your desktop website. The only catch from my existing experience with doing that is the markup schema for desktop web apps is bit complex and you should avoid mapping exact same schema for mobile app it drag down the speed.
- Hybrid implementation:
- Use of web-based technologies leads some Apache Cordova applications to run slower than native applications with similar functionality.
Adobe Systems warns that application maybe rejected by Apple for being too slow or not feeling ‘native’ enough. This can be issue for some Apache Cordova Applications.
If you have some good UI developers who can create nice optimized mobile UIs in HTML/CSS3 for you then you have good combination of team which can create good looking apps for you using Apache Cordova/Hybrid model of mobile app development as the learning curve in moving from desktop website development to mobile app development is not that steep. Same team can create mobile apps using Apache Cordova framework but focus has to be on optimized UIs as my experience with Cordova apps suggest that most of the time it’s the bloated UIs which drags the performance of the app and make it unusable in most of the cases.
In this article I tried to cover the two mobile app development models and I tried to share my experience on how we should approach different model, it can vary from team to team or organization to organization. The idea is to know it better before you pick any tech stack for development. All the Best with your mobile app development.