Choosing the Right Mobile Development Platform

Choosing the Right Mobile Development Pla5orm @ChrisGriﬃth

These opinions and thoughts are my own, and may
or may not reﬂect the opinions of the company that I work for. Disclaimer

What are you building?

Applica5on vs. Game?

Na5ve App vs. Web App?

Na5ve App vs. Pseudo-‐Na5ve App?

Device Pla?orms to support?

Discoverability

Upda5ng you app

Device Integra5on? Accelerometer Camera Capture
Compass Connec5on Contacts Device Informa5on Events File Geoloca5on Media No5ﬁca5on Storage

What does jQuery Mobile do? jQuery Mobile makes it
easy to develop user interfaces for mobile web apps.

<body> <div id="homePage" data-‐role="page"> <div data-‐role="header">
<h1>Header</h1> </div> <div data-‐role="content"> <p>Content</p> </div> <div data-‐role="footer"> <h4>Footer</h4> </div> </div> </body> Basic Structure

Basic Structure

<body> <div id="homePage" data-‐role="page"> <div data-‐role="header">
<h1>Page Title</h1> </div> <div data-‐role="content"> <p>My page content</p> <p><a href="#about">About this app</a></p> </div> <div data-‐role="footer"> <h4>Footer</h4> </div> </div> <div data-‐role="page" id="about"> <div data-‐role="header"> <h1>About This App</h1> </div> <div data-‐role="content"> <p>This app rocks! <a href="#homePage">Go home</a></p> </div> </div> </body> Basic Structure

Performance

$(document).bind("mobileinit", funcXon() { $.mobile.defaultPageTransiXon = "none";
$.mobile.defaultDialogTransiXon = "none"; }); Performance

Device Access? Limited Device by device
But… GeOng bePer

Templa5ng

Templa5ng $('#hikeDetailsPage').live('pageshow', funcXon(event) { var hikeDetailsHTML;
hikeDetailsHTML = Mustache.to_html(hikeDetailsTemplate, currentHikeData); $('#hikeDetails').html(hikeDetailsHTML); });

Styling

Android

ApplicaXon container that allows you to build naXvely installed
apps using HTML, CSS & JavaScript What is PhoneGap

What pla?orms support PhoneGap

Building it phonegap.com/start

Building it build.phonegap.com

Building it

Device Access Accelerometer Camera Capture
Compass Connec5on Contacts Device Informa5on File Geoloca5on Media No5ﬁca5on Storage

Beyond the mobile web PhoneGap is extensible with a
“naXve plugin” model that enables you to write your own naXve logic to access via JavaScript. There are lots of open source plugins at heps://github.com/phonegap/ phonegap-‐plugins Learn more at hep:// wiki.phonegap.com/w/page/36752779/ PhoneGap%20Plugins

Android

Going na5ve-‐ish

Native UI Real native tables, tabs, sliders, and views Local
and Remote Data Local SQL Database, Lightweight Key/Value Store, XHR Social APIs Integrated Facebook Connect and YQL Rich Media APIs Local and streaming audio and video, media recording Open Source and Extensible Extend Titanium with custom modules in native code Integrated Analytics Baked-in analytics APIs Development Tools Develop and distribute your app for multiple platforms from a single tool Pla?orm features

Performance

Pla?orm features Accelerometer Camera Capture
Compass Connec5on Contacts Device Informa5on File Geoloca5on Media No5ﬁca5on Storage

SDK installa5on required

App Structure

App.js Ti.UI.setBackgroundColor('#ﬀf'); var currentMap = "Sedona"; var
currentHike = ""; var baseLaXtude = 34.866285; var baseLongitude = -‐111.763573; var handFont = "Marker Felt"; var bodyFont = "Times New Roman"; var AppTabGroup = require('ui/AppTabGroup'); new AppTabGroup().open(); AppTabGroup.orientaXonModes = [Titanium.UI.PORTRAIT, Titanium.UI.UPSIDE_PORTRAIT]; if ( Ti.Pla5orm.osname == 'android' ) { handFont = "Droid Sans"; bodyFont = "Droid Serif" }

HikesWindow.js funcXon HikesWindow(Xtle) { var HikeDetailsWindow = require('ui/HikeDetailsWindow');
var self = Ti.UI.createWindow({ Xtle:Xtle, backgroundColor:'white', barColor:'#bb9650' }); var hikes_db = Titanium.Database.install('/Hikes.db','Hikes'); var hikeData = []; …

Android

The future…

What pla?orms support Adobe AIR?

SDK installa5on required * Highly Recommended

Device Access Accelerometer Camera Capture
Connec5on File Geoloca5on Media Storage

Na5ve Extensions Samples Gyroscope Licensing NetworkInfo
No5ﬁca5on Vibra5on Game Center iAd AdMob

Run5me Requirement ~7+ MB to app size Cap5ve
Run5me

Making it look good

Performance

App Structure

Android

What is Sencha Touch 2? Javascript API for mobile
apps Built on Web Standards Targets WebKit

What is Sencha Touch 2?

Sencha Touch is licensed under free commercial and open
source licenses for applicaXon development, and a paid commercial license for OEM uses.

What pla?orms support Sencha Touch?

<!DOCTYPE HTML> <html manifest="" lang="en-US"> <head> <meta charset="UTF-8"> <title>Hike Sedona</title>
<script id="microloader" type="text/javascript" src="sdk/ microloader/development.js"></script> </head> <body> <div id="appLoadingIndicator"> <div></div> <div></div> <div></div> </div> </body> </html> Basic Structure

Ext.deﬁne("HikeSedona.view.Main", { extend: 'Ext.tab.Panel',
conﬁg: { tabBarPosiXon: 'boeom', items: [ { xclass: 'HikeSedona.view.hike.Card'}, { xclass: 'HikeSedona.view.LocaXon'} ] } }); Basic Structure

App Structure

Components Audio Carousel
Forms Icons List Search List Maps Nested List Overlays Tabs Video

Sencha Designer

Device Access Accelerometer Camera Connec5on
Status Geoloca5on No5ﬁca5ons Storage

Na5ve Packaging Sencha SDK Tools

Sencha Architect

Performance

Android

Now go build something!

Thanks! chris.griffi[email protected] @chrisgriffith hep://chrisgriffith.wordpress.com/

Choosing the Right Mobile Development Platform

Choosing the Right Mobile Development Platform

More Decks by Chris Griffith

Other Decks in Technology

Featured

Transcript