14
Cross Platform Mobile App Development in Review Presented by: Joseph Payette, CTO

Cross Platform Mobile App Development

Embed Size (px)

DESCRIPTION

Greane Tree Technology CTO Joseph Payette gave our latest “Lunch & Learn” presentation. With the number of tools and frameworks for cross platform mobile application development increasing every year, it can be a challenge to determine the best fit technology for a mobile project. All of these tools and frameworks have their advantages and disadvantages, as they leverage different mechanisms for abstracting differences across mobile devices in an effort to provide a single platform for rapid application development. To bring order to the various options at hand, Joe reviewed mobile application architectures (native, hybrid, and HTML5), and explored and compared a few hybrid tools and frameworks, namely PhoneGap (www.phonegap.com), Appcelerator (www.appcelerator.com), and MoSync (www.mosync.com). Joe’s mobile application development presentation includes sample code for these three tools and frameworks. The Lunch and Learn series is a regular event where we discuss topics of interest to our projects and clients. Last month, Chad Calhoun explored Git Interactive Techniques.

Citation preview

Page 1: Cross Platform Mobile App Development

Cross Platform Mobile App Development

in Review

Presented by: Joseph Payette, CTO

Page 2: Cross Platform Mobile App Development
Page 3: Cross Platform Mobile App Development

Native

● Use native build tools to create binary compatible application packages

● Use existing application distribution channels, such as the AppStore and Google Play

● Target platforms are completely different, and differences must be considered when designing nearly every aspect of the application

Page 4: Cross Platform Mobile App Development

Hybrid Frameworks (a few)

PhoneGap/Apache CordovaUse HTML5, Javascript, & CSS for UI, and Bridge API to acces native features, plus Java and Objective-C for custom componentsAppcelerator TitaniumUse Javascript SDK for all features and Alloy Framework for MVCMoSync WormholeUse HTML5, Javascript, & CSS, and Bridge API to access native features, plus C++ for custom components

Page 5: Cross Platform Mobile App Development

Hybrid●Use framework specific build tools to build a native application shell with an embedded web browser as the presentation layer●Use existing application distribution channels, such as the AppStore and Google Play●Target platforms are completely different although differences can be minimized by utilizing the framework bridge

Page 6: Cross Platform Mobile App Development

HTML5●Use the same build tools for creating web applications, HTML5, Javascript, & CSS●Application distribution channels are completely different than native (and hybrid) channels- HTML5 application stores●Target platform is binary incompatible with native (and hybrid) packages, and differences require emulation or designed intentionally similar

Page 7: Cross Platform Mobile App Development

PhoneGap● No need for an IDE, can use regular text editor● Can build locally on Windows, Mac, and Linux,

given the underlying build tools are available (Xcode and iOS SDK, Android SDK, …)

● Can build in the cloud with PhoneGap build, which builds target packages for you, so you only need build tools for one platform

Page 8: Cross Platform Mobile App Development

PhoneGap (Cont...)● Sudo npm install -g cordova● Codova create hello com.example.hello

HelloWorld● Cordova platform add android● Cordova build● Cordova emulate android

Page 9: Cross Platform Mobile App Development

PhoneGap (cont...) <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

}

function onSuccess(acceleration) {

alert('Acceleration X: ' + acceleration.x + '\n' +

'Acceleration Y: ' + acceleration.y + '\n' +

'Acceleration Z: ' + acceleration.z + '\n' +

'Timestamp: ' + acceleration.timestamp + '\n');

}

function onError() {

alert('onError!');

}

</script>

Page 10: Cross Platform Mobile App Development

Appcelerator Titanium● Recommended to use their Titanium Studio

IDE, resembles Aptana Studio● Can build locally on Windows, Mac, and Linux,

given the underlying build tools are available (Xcode and iOS SDK, Android SDK, …)

● Can build distribution packages locally, but you need build tools for each platform

Page 11: Cross Platform Mobile App Development

Appcelerator Titanium (cont...)

Page 12: Cross Platform Mobile App Development

MoSync

● You don't have to use their IDE, but it's highly recommended – the provide build tools but they aren't user friendly

● Can build locally, on Mac and Windows only. They have instructions for Linux but it's not an end-to-end developer experience

● Can build distribution packages locally, but you need build tools for each platform

Page 13: Cross Platform Mobile App Development

MoSync (cont...)

Page 14: Cross Platform Mobile App Development

MoSync (cont...)<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>

function vibrate() {

mosync.bridge.send(["Custom", "Vibrate", "500"]);

}

document.addEventListener("deviceready", displayDeviceInfo, true);

document.addEventListener("backbutton", function() { mosync.app.exit(); }, true);

</head>

<body>

<div class="pane button" onclick="vibrate()">Vibrate</div>

</body>

</html>