Browsers, Mobile, and Metro: a year and a half of dabbling in cross-platform coding
Eighteen months ago, I started a year long project to make a guided tour mobile application for group’s senior design class. My group and I, busy with job applications and other such things, decided that in order to save time we would use a build platform that would let us just embed ourselves into a webview and write it all in browser tech.
A year and a half later, I’m much less confused about the state of cross-platform coding, and I have to admit that it’s a very exciting time for developers.
For the senior design project (which, to this day, is hysterically ambiguously titled), we used PhoneGap; Adobe’s suite of tools that wrap around Cordova.
It is helpful to begin describing Cordova before getting into PhoneGap. Cordova is a platform that allows you to take a mobile app created in HTML, CSS, and Javascript and build it into an embedded webview that can be distributed to many devices; off the top of my head, it supports Android, iOS, Windows Phone 8, Windows 8 (which are, as I learned, entirely different!), Blackberry, and a few other devices.
Equally important to the ability to build your apps in web technology and bundle them into their respective mobile app’s is Cordova’s plugins. These plugins expose a Javascript API to access your phones native features such as geolocation, camera, etc. This allows you to take mobile websites and turn them into fully fleshed, complex apps.
Cordova was originally created as the build part of Nitobi’s PhoneGap before it was purchased by Adobe Systems; Adobe donated the underlying codebase to Apache, where it went through a name change and became Cordova.
PhoneGap projects are compiled with Cordova. Adobe also provides PhoneGap Build, a website that will compile your PhoneGap projects into multiple platforms for you (so that you don’t have to install every SDK on every developer’s machine).
Originally, while programming our guided tour application, the relationship between Cordova and PhoneGap was not initially obvious. What I did learn from that experience was that these cross-platform build platforms were very, very helpful.
It didn’t dawn on me how powerful they were until I had to make a mobile application for work.
Several months later when I began to program FunnelFire’s beta mobile application, I once again did my due-diligence and researched cross platform solutions. It is important to note that by this point I had become very familiar with AngularJS, which is becoming FunnelFire’s core frontend framework.
My first step was to look for some mobile app HTML and CSS template to just get me started so that I didn’t have to worry about designing the application for a prototype. My goal was to get a template, rig up an angular project, and just build it with PhoneGap again.
While looking around, I ended up finding the Ionic Framework: this discovery changed my view of cross platform app development from “Oh, nifty” to “Oh my, this is the future, and it is good” in the course of two weeks.
Ionic is like PhoneGap, in that when you build your project you’re really using Cordova to build it. Ionic wraps Cordova, and then gets you started with an amazing frontend framework that is actually compiled into native code.
The creators of ionic are literally creating a frontend framework that gets partially compiled into native code for the most amazing hybrid-app experience that I’ve seen yet.
Ionic was built with AngularJS applications in mind. When you create a new Ionic project, you generate an AngularJS project with some controllers and views generated to work off of. It uses the powerful UI-Router out of the box. Even more exciting is the fact that it comes with a bundle of directives and services that allow you to easily interface with your phone’s technology in your angular app.
Ionic was a big deal because it took away a lot of worries; I didn’t have to worry about forcing something to work in the Angular way, because it was created with Angular in mind. The notorious performance issues of mobile webviews are rapidly being tackled by the Ionic team, as they find better and clever ways to be more than just an embedded webview. Also, even out of the box, it’s just plain old pretty.
Currently, Ionic supports Android and IOS. That was fine, because until the 11th hour I had to only support those 2 platforms. I built out the beta app over the course of 2 weeks.
13 days into my 14 day deadline, I was told that it also needed to work on a Windows 8 Phone by a strange fluke of faith. A phone was being shipped to FunnelFire and I was only in that area for a period of 8 hours. Naturally, the phone didn’t arrive until 2 and a half hours before I had to leave for a different state.
Ionic does not formally support Windows 8 Phone, but enough of it works that (with a huge amount of luck), I was able to simply type in the Cordova build commands, register the phone to my developer account, and deploy the beta app to the phone. Cordova saved me, yet again.
I noticed that the app was much, much more laggy on the Windows Phone 8 device than any other system. I later learned that there was a Windows Phone 8 build environment, which appears to wrap mobile webviews in a Silverlight application, and a Windows 8 environment that goes to more updated phones that runs without Silverlight.
Across the country, with the phone, my boss updated the phone to Windows 8.1 (no longer Windows Phone 8) and we had Cordova rebuild the application for Windows 8, which we then deployed to the newly updated phone. It ran like a dream.
It appears as though Microsoft had hopped on the hybrid app bandwagon. What was more interesting to me was the fact that after I had built for Windows 8, we suddenly had a working Metro app.
The same exact code that my iPhone is running is now also running on a Lenovo Thinkpad as a metro app, and it works shockingly well. Every tested component works almost identically and all systems are now on par in terms of performance.
There were only a few issues getting it to run on Metro; external assets had to be downloaded and referenced locally and we had to make a slightly special build just for Metro because of security concerns.
That being said, Ionic and Cordova had done so much heavy lifting that besides editing a few files for Metro, I was able to leverage the same code to publish a beta application to four different types of devices.
The future of mobile application is exciting, to say the least. After the last year, the direction seems to be moving more and more into hybrid-app territory. I’m already planning my first mobile app personal project, and I know that I’ll be building it on Ionic and Cordova.
Currently Drinking: Amtrak Coffee. Ick.