It’s worth mentioning this article will be especially of interest to one that needs to write a custom iOS Plugin for Cordova or add a native UI/feature not available in Sencha Touch. Sencha Touch is using NimbleKit (at least /usr/bin/strings thinks so) for it’s native SDK bridge and components, there is no (published) interface for one to write a plugin/extension for it. Which is why I’m using Cordova; allowing for plugin extensions. Cordova and PhoneGap are effectively the same thing at the moment. PhoneGap is run by Adobe and will soon be offering other commercial offerings to enhance PhoneGap, while Cordova is managed by the Apache Foundation and should remain the core the PhoneGap offering.
Creating a new iOS App
There are several options at your disposal:
- The Apple recommended way with Xcode and Objective-C (which is getting better);
- wrap a web app in a native shell, or
- or use a toolchain that will cross compile to Obj-C byte code like RubyMotion or MonoTouch.
Laurent Sansonetti has created an amazing toolchain to build iOS apps and since my next project will be running on multiple devices, sadly I won’t be using it exclusively. In my opinion, RubyMotion has the best build tool available for iOS when compared to Xcode and Sencha Touch (the two I’ve previously used) and as a bonus, the RubyMotion build process (lib directory) has been open-sourced!
It could be argued that you could use just one framework, either Cordvoa or Sencha Touch to build the iOS app, as they both have build tools (or a build process) and native Cocoa SDKs. Both Cordova and Sencha Touch support multiple platforms (iOS, Android, Windows Mobile, etc.), but we’re going to focus on iOS in this article.
It’s assumed that you’ve already setup a RubyMotion app, understand or have used Cordova, and are familiar with Sencha Touch. I won’t be speaking to how each of these products can work together or their corresponding setups.
RubyMotion can be setup to link to third-party libraries, which is needed to build a Cordova app with RubyMotion. Below is a example Rakefile for your RubyMotion project.
|Rakefile||This file contains the configuration of the project, as well as a default set of tasks. It can be edited to change the RubyMotion configuration or add new build tasks.|
|app/||This directory contains the code of the project.|
|resources/||This directory contains the resources that will automatically be included in the RubyMotion iOS project.|
|resources/www/||This directory will be used by Sencha Touch to host the app code and styles.|
This app structure was borrowed from RubyMotion but modified to my liking to allow me to build for multiple platforms and technologies for my products. I’ve separated the
app/ directory by scope, ie: ios, android, and webview, and rely on the Rakefile to do all the building for CoffeeScript, Sass, Ruby, and other platforms and plugin builds. The
vendor/ directory has CordovaLib copied from
~/Documents/CordovaLib and the Sencha Touch SDK.
Ext.browser.iswhether you’re in the simulator, Cordova (PhoneGap), or Sencha. You could override some of these adapters (or create your own) and hook them into your custom Cordova plugins. You’ll be writing your own interfaces for the Cordova plugins which will effectively be calling the RubyMotion ruby classes.
You can alter the
@viewController.startPage properties to point to your app startpoint. The defaults are www and index.html respectively, which are relative to the
You need to be sure to also copy VERSION and Cordova.plist from CordovaLib and CordovaLibApp into the resources folder. If you do not, Cordova will not build properly. These were in the original Resources Group in a Cordova built Xcode project.
Assuming you have your app setup, you can run
rake which should build with RubyMotion and launch your app.
There is a Hacker News discussion as well.