Is there a Holy Grail for multi platform mobile development?
There are two realities . The first, there's an app for everything. The other, is that programmers (including me), we do not like to do the same thing many times. Believe or not, both have many points in common.
Since apps are made by programmers, we always have a bad time trying to start a new application development, because if you want to make it available to a wide range of people, it requires to do the same app at least two times. And we just don't like it.
Based only on official SDKs, to create an application that supports the three most used platforms (iOS, Android and WindowsPhone), you need to know at least three different languages: Objetive-C (Yuck!) or Swift, Java and C#. And you need to use three different development tools: Xcode for iOS, Android Studio for Android and Visual Studio for Windows/Windows Phone. And of course, you must write your app three times, one on each platform and language.
That's is the best option without any doubts, because you will get the best implementation for each platform, because you use best tools prepared for each platform.
But the great disadvantage, is the development cost. And we are not talking about the price of then development tools.They are free (even the Visual Studio Community). But you will need three developers (one for each platform) or a genius that knows all, but that will cost you more, and of course, the development will last more time.
Another disadvantage is that you need to write the code three times. There are two reasons for that. The first is how each platform conceives the app creation. The different platform uses different flows and the IDEs are entirely different.
The other reason is that languages are different. Despite the fact that Java and C# have some similarities, Objective-C don't looks like nothing similar to the others. Thankfully, Swift is more like C#, but not exactly the same. In any case, you must convert your code form one language to another and track very carefully the changes to reflect them on the other platforms as you work.
With all this in mind, it is no wonder that today exists a lot of tools and frameworks with one premise on mind: write your app once and deploy to to any mobile platform with (almost) no changes on the code. The same thing that some people call magic.
A lot of developers, facing that kind of tempting promises, start to investigate which option is THE ONE. Like Indiana Jones look for the Holy Grail that gives immortality to who uses it, the programmers are looking for the magical or mystical tool that help us to develop mobile applications without any headaches.
But the question remains: Is there any perfect solution? Wich one is the best to learn and use?
Well, i have tested 4 solutions and next i will enumerate their pros and cons. On the future, I will test more if I find some spare time.
Before start, i want to remind you some key points, specially if you are a newcomer on the Mobile development world. The first is that if you want to develop for iOS, you must have a Mac running the latest version of OSX. If you want to develop for Windows Phone and for the Windows Store (creating a UWP app), you need a PC with Windows 10. So, if you need to reach those three platforms, you need a PC and a Mac (or a Mac with Bootcamp). But if you only need to develop for iOS and Android, with a Mac will be sufficient.
Other important things is that you need to test the applications. It's normal no use emulator or simulators to test the apps, but it's recommended to try the apps on actual devices. And because exists a lot of different screen sizes and density's, you may prefer to test your app on several devices. You can also use some cloud testing services to do this. In any case, try to test very well your application before publicity.
And now, my review of the development tools tested.
Phonegap/Cordova
The oldest multi platform development option is Cordova. Particularly, we will be talking about it's more important and complete distribution: Phonegap. Having 7 years on the road, and with the support of the Apache Foundation and Adobe, is the the option that offers the widest range of device supported. It supports 8 Mobile platforms, including Blackberry 10 (rest in peace) and Ubuntu Mobile.
The Phonegap's premise is simple: if you know HTML5, CSS and JavaScript, you can create mobile applications. And is that so.
Phonegap allows you to use your previous Web development skills and create with them mobile applications. And it works!
But mobile applications created using Phonegap are special, because they run inside a web browser (a web view) on the mobile device. Obviously, it's a supercharged web view, because it allows the app to access the camera, gyroscopes, audio, and other device capabilities on a simple and standard way, and without worrying about changes on the code between platforms.
To write the UI, you can use the web framework of you preference: AngularJS, Ionic, Onsen, Telerik, React, Framework7, Bootstrap, VueJS, well, almost all of them are suitable.
Being a mature and open platform, has the support of may big companies. Intel, for example, has an IDE called Intel XDK, that allows you to create Phonegap applications on a very simple way. Even Microsoft, supports development and debug of PhoneGap/Cordoba apps inside the powerful Visual Studio.
Even so,it;s far to be perfect as a solution. The more criticized points against using Phonegap are the app performance and the particular look and feel of some applications.
Regarding the performance, you must take into account that the code runs interpreted in the fly inside a Web View. That extra layer, even with all the optimizations made by the PhoneGap team, makes applications run more slower than native applications on some situations.
The other criticized point, is about the apps UI. Since all the app UI is written on HTML5, they look like an alien when you compare with native applications. Even if we use some libraries that recreates in HTML5 the look and feel of the host platform, you can have a bad time trying to write a custom control.
If you wan to learn to use PhoneGap, you have access to an excellent documentation and you will be able to find a lot of tutorials that will help you to learn and use this framework without mayor problems.
Pros
– A big list of platform supported
– Create mobile apps using web technologies
– Open Source
– A wide range of development tools available like Intel XDK and Visual Studio.
– A very affordable learning curve if you have previous web development skills.
Cons
– Low performance on demanding applications or in devices with low resources.
– Non native UI on applications.
NativeScript
With the support of Telerik (if you have a time developing you will probably know their excellent UI libraries), comes NativeScript, with the promise of allows us to write native applications using Javscript.
To achieve that, it's build on top of the MVVM methodology. It separates the logic layer from the presentation layer, alowing us to write Models and ViewModels on Javascript, the Interface on a XML dialect and customize the look and feel using a CSS subset.
But don't get confused. You are writing the code on Javascript, and you are using CSS, clearly, two web technologies, but Nativescript is not a enhanced Phonegap clone. Nativescript creates 100% native interfaces using the XML and executes the javascript using a powerful Javascript Engine (V8 from Chrome).
Can we call this kind of apps a truly native app if we run interpreted Javascript even with all the V8 optimizations? We can safely call this apps an kind of Hybrid apps, but several step above the Phonegap level, and very close to the native code level. Yes, the code runs on a VM, but thanks to the V8 speed, it's close to the native performance.
On previous versions there was a drawback: the code interpreter used to run on the UI thread, the code will only run if the application is active. But when this article was written, NS added suport for WebWorkers, so, now you can write code that run on a paralel thread.
Being based on Javascript, is good that supports for NPM packages. It supports Nativescript-specific packages and NodeJs packages, so it becomes a very powerful tool, because you have easy access to a huge variety of libraries.
The UI is written on a XML dialect (that remind us a lot to XAML ans AXML). When NativeScript runs, creates native components based on the XML. The behavior and look and feel are the normal for the host platform. Additionally, you can create animations very easily and with an excellent performance.
On the recently released version 2, you also can write your applications using TypeScript and Angular 2. That allows you to share code between your web and your mobile apps, but having a native experience. That killer feature shows the great flexibility of the platform.
Speaking on development tools, you have a variety of plugins that allow you yo edit code on the most common editors. Officially there are excellent integration's with Atom and Visual Studio code.
Even when in Visual Code Studio you can launch debug and deploy from the debug menu, sometimes it looks a lot buggy (at least now). So, if you want to try this, you must use the command line.
This could be a bit inconvenient if you are a newcomer, but, as i always say, i don't trust a programmer who feels uncomfortable with the command line.
Anyway, using that tools, you can be able to build and test your applications on real devices and simulators. The LiveSync feature allows you to see the changes reflected on the app when you save the files, without recompiling every time you made a change. That is a great time saver useful feature, specially when you are tuning your interface look and feel by using a subset of CSS.
On the NativeScript's web, you have access to well explained tutorials, as well a growing and complete documentation. It's recommended to bookmark the documentation page, specially to learn the new features that we see on every new version.
Currently you only can deploy Android and iOS application using NativeScript, but on a future version you will be able to create Windows UWP applications using this tool.
The learning curve, if you have any previous knowledge on MVVM, is very low. And thanks to the tutorials, examples and the growing community, you can solve your questions that will will have during the development.
Pros
– MVVM based development
– Angular 2 Suport
– Native Interfaces
– Open Source
– Performance close to trully native applications
– Small learning curve based on previous knowledge of XML, JS and CSS.
– NPM Package support
– LiveSync Mode
– Web Workers support
Cons
– Currently limited to Android & iOS platforms.
– Very limited CSS subset to use.
Fuse Tools
This is, with Nativescript, one of the most recent alternatives. And like NativeScript, it give us an excellent first impression.
It has a lot of points in common with NativeScript, because it allow us to write fluid user interfaces, near to the truly native ones created with official SDKs.
However, there's some differences. Fuse is more oriented to Designers than Developers, so the project structure is more simple. For example, a small hello world on NativeScript uses around 90 files. But Fuse, only uses 2 files: Project File and the default interface file.
Like NativeScript, it allows you to write complex user interfaces and animations using a markup language, that is later compiled into a C++ code that runs on the device. This results on very fluid interfaces.
The difference with NativeScript (beyond the differences between the markup used), is that you can write animations on the markup directly, when in NS you need to write them on Javascript. It allow Designers to write animations knowing only the markup and without touching a simple line of code.
This is a big deal for Designers that know some markup and do some layout coding on web pages. In fact, you can create an entire app on Markup, With animations and interaction, without writing a dingle line of Javascript code. I'm not saying this is a ideal solution, just that is a big deal for designers.
To edit your apps markup and code, Fuse provides integration's with Sublime Editor 3 and Atom, but you can find other non official implementations for other editors. And because is designer oriented, you can create projects, preview them and do a lot of operations from a visual management tool. Of course, like NativeScript, provides a powerful command line tools to achieve the same tasks, but if you are not familiar with how a terminal works, you can use the management tool for almost all the tasks.
Other point of contact with NativeScript is the Live preview mode, that allows you to see the changes while you write and save them. But it also adds an inspector and a console log, that is very useful for debug apps. All, without recompile your app on every change.
But if you think this tool is only oriented to Designers, you are wrong. Like NativeScript, in Fuse you can write code in Javascript It allows you to create great apps with a very familiar and accessible language. But also it allows you to create more advanced modules and integration's with native languages (Java and Swift/Objective-C) using a customized C# language called Uno. This one is a very powerful feature for advanced developments.
On every version, you get new features, but sometimes, you will need to double check your code/markup if some feature that you use need to be changed or if its deprecated, but's it's normal for this kind of projects.
Regarding the documentation, it grows everyday, but still need to get better. Thankfully, the Forum and Examples (on the Fuse website and on Github), help me to solve almost all questions that i got.
If you have previous knowledge on any Markup language, you can learn how to write apps with Fuse very easily. And it could be more simple if you watch the tutorial videos that Fuse regularly post on his own Youtube Channel. And also you will learn a lot looking the examples and tutorials on the page.
But it have some drawbacks, at least for me. One is that we miss some kind of CSS to style the interfaces.
Another thing, is that creating animations on markup could be a bit confusing, specially when you are a developer try to understand the flow. To the date, i can't find a way to create animations by code.
And, despite the fact that the community help me a lot when i have questions, it coud be difficult to write some kind of code on Javascript or Uno/C#, because the documentation is a bit incomplete at this point. It's understandable because are feature still in development. take into account if you plan to create some kind of advanced feature for your app.
Like NativeScript, it will be always be a Free version, and eventually the platform will be partially Open Sourced, but as today, we don't know if all features will remain free or not.
Pros
– Fluid and sparkling user interfaces with native-like performance.
– Low learning curve.
– Great integration with editors. You can create your app without using the command line.
– LiveSync mode
– You can create advanced Modules with Uno/C#
Cons
– Still no stable release
– Documentation need to be better
– Only available for Android and iOS
Xamarin
The last project that we will comment on this article is, along with PhoneGap, Xamarin is one of the oldest.
About 7 years ago, under the name of Monotouch, this product was launched with the promise of share code and logic between Android and iOS writing on C#.
Since then, this project as come a long way, and now, with the name of Xamarin, rises as one of the most professional and mature platform that we have reviewed. After being sold to Microsoft, becomes a free product. That removes a barrier that keep some of us away from this product: it was very expensive. Now, it's an affordable and powerful alternative, but no without flaws.
The approach that Xamarin proposes is closest to the standard mobile application development flow. So, if you come from web or desktop, you probably must know first how a mobile application works to understand the Xamarin proposal.
With Xamarin you can write your apps using at least two methods. The first one, is the oldest approach that Xamarin proposes. Using native tools, you write the UI and the you write the logic on C#, binded to the UI files that you created. Using this method, you can share about the 90% of the code between platforms in the best case.
But on 2014, Xamarin introduces Xamarin.Forms, a new way that allows you to share more code and get 100% native interfaces.
With Xamarin.Forms, you can write the interface using a customized version of XAML, or by code. The interface defined, creates 100% native controls and bind them to the code directly. Using this method you can share on best scenario case, almost 99% of the code.
Even so, Forms is not a 100% full solution for everything. That will force you to use some hacks or, probably you must write some low level hacks to achieve some specific, platform tasks.
With Xamarin, you can build apps for iOS, Android, Windows Phone and Windows UWP (for Windows 10 devices). Although it not supports many platforms as Phonegap, it's not necessary a bad thing, because it focus on the most relevant ones.
The learning curve is higher than the other platforms. After all, you get more power, and performance, but, it forces you to know more.
However, if you already know C#, you can find on this one the most powerful and versatile tool for multi platform mobile development.
When you look at the IDEs available, you can use Visual Studio on Windows (there's a free Community Version), and on OSX you can use Xamarin Studio, also with a free of charge Community Version. Both development Tools are great, and Xamarin Studio, with every version, gets more and more similar to Visual Studio, on features and Look and Feel.
Currently, there's no a Preview or Xamarins.Forms visual Editor, but you can use Gorila Player, that allows you to preview XamarinF.orms code, and we know that Xamarin is creating a tool for doing the same inside Xamarin Studio, but it's still in alpha state. We don't know if this will be available for Visual Studio any time soon.
Since Microsoft buys Xamarin, the project becomes Open Source, so it's helping to more people know and use this platform.
Pros
– Extremely powerful and loaded with a lot of libraries and API's
– Open Source
– Xamarin Forms simplified the UI creation on multi platform devices.
– Visual Studio and Xamarin Studio are terrific development tools.
Cons
– Higher learning curve
– Xamarin Forms will not meet all the needs for complex applications
The Holy Grail does not exists
So, would we claim that exists any perfect tool for multi platform mobile development? In short, no. And i doubt it will ever exists. But it's not a bad thing necessarily.
I don't think also that one tool could let others out of competition. To sum up, is better if we programmers start to code and stop looking for magic solutions.
All the options reviewed has pros and cons. That Pros and Cons make each tool perfect for some scenarios:
Phonegap/Cordova: ideal for simple apps using web technologies or if you want to migrate a mobile web into an app.
NativeScript: ideal for developers that have some experience on NodeJS / Javascript and want to create apps with a fluid and native user interface. Also suitable to migrate some Angular 2 web apps to native apps.
Fuse: Ideal for graphic designers that want to create fluid and stunning applications with native performance, using markup, but not dirtying their hands with code and all that dirty things that a coder do. Also is perfect for teams with developers and designers working together on the same app, because developers has tool to perform advanced topics.
Xamarin: ideal for complex and demanding apps. It requires much more knowledge, but in exchange you get more features and performance.
In conclusion, the tool will be ideal if we know we want to do, and if you know what you can do the tool in question.
I hope this summary has given a general idea of each tool. Now it's up to you to learn more about each and choose your favorites.