building functional hybrid apps for the iphone and android “the zen of mobile apps”

Building Functional Hybrid Apps For The iPhone And Android

“The Zen of Mobile Apps”

IBM's statements regarding its plans, directions, and intent are subject to change or withdrawal at IBM's sole discretion.

Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.

The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion.

Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.

Please note…Please note…

Who are we?Who are we?

Michael C. Thompson [ mcthomps@us.ibm.com ]

Software Engineer, IBM Austin, TX

IBM WebSphere Application Server

@barecode

github barecode

Carlos N. Andreu [ cnandreu@us.ibm.com ]

Software Engineer, IBM Austin, TX

IBM Worklight

@cnandreu

github cnandreu

We are not rocket scientistsWe are not rocket scientists

The Far Side comic, copyright Gary Larson

Why are we here?Why are we here?

tools, technologies & practices

Why are we here?Why are we here?

right choices = fun and easy!

Real world appReal world app

quick (and dirty) What we build is not as important as how we choose to build it

Real world appReal world app

The Server

What are we building?What are we building?

TODO application service REST = CRUD operations

JSON = data interchange

What are we building?What are we building?

Create POST /TODORESTService/ -- create a new item

What are we building?What are we building?

Create POST /TODORESTService/ -- create a new item

Read GET /TODORESTService/ -- list all items

GET /TODORESTService/count -- get number of items

GET /TODORESTService/# -- get item by #

What are we building?What are we building?

Create POST /TODORESTService/ -- create a new item

Read GET /TODORESTService/ -- list all items

GET /TODORESTService/count -- get number of items

GET /TODORESTService/# -- get item by #

Update PUT /TODORESTService/# -- update an item by #

What are we building?What are we building?

Create POST /TODORESTService/ -- create a new item

Read GET /TODORESTService/ -- list all items

GET /TODORESTService/count -- get number of items

GET /TODORESTService/# -- get item by #

Update PUT /TODORESTService/# -- update an item by #

Delete DELETE /TODORESTService/ -- delete all items

DELETE /TODORESTService/# -- delete item by #

Development environmentDevelopment environment

simple technologies => simple tools

Hourly

Daily

Weekly

Monthly

Frequency

• Modify file within an application• Debug a problem in an application• Restart/redeploy application• Restart server• Share code with team• Change app structure• Make config change• Share config change with team• Reproduce problem from another environment• Upgrade to new service release• Create application• Install server

fastest

faster

fast

Time to complete

Development environmentDevelopment environment

Development environmentDevelopment environment

Eclipse for Web Developers

Development environmentDevelopment environment

IBM WebSphere Application Server V8.5 Liberty Profile

http://wasdev.net

Development environmentDevelopment environment

Liberty Developer Tools Installation from Eclipse Market Place

Source!Source!

The Client

GoalsGoals

Mobile Application

Eclipse IDE

DRY

REST API

Fast to Market

OptionsOptions

native vs hybrid

MockupMockup

MockupMockup

IBM WorklightIBM Worklight

IBM WorklightIBM Worklight

IBM WorklightIBM Worklight

IBM WorklightIBM Worklight

User Interface – Typical Web AppsUser Interface – Typical Web Apps

Twitter Bootstrap Zurb Foundation

User Interface – Mobile AppsUser Interface – Mobile Apps

jQuery MobilejQuery Mobile

Pages

Buttons

Form Elements

List Views

Content formatting

Events

Themes

jquerymobile.com

jQuery Mobile – Getting startedjQuery Mobile – Getting started

<head>

<!-- … make sure to include jQuery! -->

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css" />

<script src="js/jquery.mobile-1.1.0.js"></script>

<!-- … -->

</head>

jQuery Mobile – Getting startedjQuery Mobile – Getting started

<head>

<!-- … make sure to include jQuery! -->

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css" />

<script src="js/jquery.mobile-1.1.0.js"></script>

<!-- … -->

</head>

jQuery Mobile – common/todo.htmljQuery Mobile – common/todo.html

<div data-role="page" id="main" >

<div data-role="header">

<h1>Todo App</h1>

</div>

<div data-role="content" >

Hello World!

</div><!-- /content -->

</div><!-- /page -->

jQuery Mobile – common/todo.htmljQuery Mobile – common/todo.html

<div data-role="page" id="main" >

<div data-role="header">

<h1>Todo App</h1>

</div>

<div data-role="content" >

Hello World!

</div><!-- /content -->

</div><!-- /page -->

jQuery Mobile – inside the content divjQuery Mobile – inside the content div…

<input type="text” placeholder="Write your tasks here..." />

…

jQuery Mobile – inside the content divjQuery Mobile – inside the content div…

<input type="text” placeholder="Write your tasks here..." />

<div class="controls" data-role="controlgroup" data-type="horizontal">

<a href="#” data-role="button" data-icon="plus">Add New</a>

<a href="#” data-role="button" data-icon="delete">Delete Done</a>

</div>

…

jQuery Mobile – inside the content divjQuery Mobile – inside the content div…

<input type="text” placeholder="Write your tasks here..." />

<div class="controls" data-role="controlgroup" data-type="horizontal">

<a href="#” data-role="button" data-icon="plus">Add New</a>

<a href="#” data-role="button" data-icon="delete">Delete Done</a>

</div>

<ul data-role="listview" data-filter="true" data-inset="true" >

<li data-icon="false"><a id="0" href="#">Buy Milk and

Cookies</a></li>

<li data-icon="false"><a id="0" href="#">Finish App</a></li>

</ul>

…

jQuery Mobile – inside the content divjQuery Mobile – inside the content div…

<input type="text” placeholder="Write your tasks here..." />

<div class="controls" data-role="controlgroup" data-type="horizontal">

<a href="#” data-role="button" data-icon="plus">Add New</a>

<a href="#” data-role="button" data-icon="delete">Delete Done</a>

</div>

<ul data-role="listview" data-filter="true" data-inset="true" >

<li data-icon="false"><a id="0" href="#">Buy Milk and

Cookies</a></li>

<li data-icon="false"><a id="0" href="#">Finish App</a></li>

</ul>

<div class="center”>Empty List</div>

…

jQuery Mobile – OutputjQuery Mobile – Output

Navigation – HTML/CSSNavigation – HTML/CSS

Apache CordovaApache Cordova

Accelerometer Capture Geolocation Notifications Contacts File System Access Events Even your own via Cordova plugins!

incubator.apache.org/cordova/

Apache Cordova + IBM WorklightApache Cordova + IBM Worklight

WL.TabBar

Apache Cordova + IBM WorklightApache Cordova + IBM Worklight

WL.TabBar WL.OptionsMenu

AdaptersAdapters

AdaptersAdapters

Multiple Backend Support Consistent Security Cache Requests No CORS or JSONP

AdaptersAdapters

AdaptersAdapters

<connectivity>

<connectionPolicy

xsi:type="http:HTTPConnectionPolicyType">

<protocol>http</protocol>

<domain>THE_SERVER.austin.ibm.com</domain>

<port>9080</port>

</connectionPolicy>

<loadConstraints maxConcurrentConnectionsPerNode=“9001" />

</connectivity>

<procedure name="all"/>

AdaptersAdapters

function all() {

var input = {

method : 'get',

returnedContentType : 'json',

path : "TODORESTService”

};

return WL.Server.invokeHttp(input);

}

Adapters - OutputAdapters - Output

{ "array": [ { "content": "Master REST and JSON", "done": false, "id": 0 }, { "content": "Finish OSCON app!", "done": true, "id": 1 }], "isSuccessful": true, "statusCode": 200, "statusReason": "OK"}

JavaScript ModulesJavaScript Modules

JavaScript ModulesJavaScript Modules

Start Auto Executing Function

End Auto Executing Function

JavaScriptJavaScript

JavaScriptJavaScript

JavaScriptJavaScript

QUnitQUnit

JavaScript Unit Testing

Made by the JQuery Team

qunitjs.com

QUnitQUnit

<script src="js/jquery-1.7.2.js"></script> <link rel="stylesheet" href="test/qunit.css” /> <script type="text/javascript" src="test/qunit.js"></script>

QUnitQUnit

<script src="js/jquery-1.7.2.js"></script> <link rel="stylesheet" href="test/qunit.css” /> <script type="text/javascript" src="test/qunit.js"></script>

<!-- QUnit HTML --> <h1 id="qunit-header”>Unit Tests</h1> <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> <div id="qunit-fixture"></div>

QUnitQUnit

test( "hello test", function() { ok( 1 == "1", "Passed!" );});

QUnitQUnit

test( "hello test", function() { ok( 1 == "1", "Passed!" );});

QUnitQUnit

test('asynchronous test', function() {

// Pause the test first stop(); setTimeout(function() { ok(true); // After the assertion has been called,

// continue the test start(); }, 100);

});

QUnitQUnit

test('asynchronous test', function() {

// Pause the test first stop(); setTimeout(function() { ok(true); // After the assertion has been called,

// continue the test start(); }, 100);

});

Time to see the code!Time to see the code!

SummarySummary

Liberty - Eclipse Market Place service = REST

data = JSON

SummarySummary

IBM Worklight - Eclipse Market Place UI = jQuery mobile

native = Apache Cordova

REST = adapters

test = QUnit

QuestionsQuestions

Thank youThank you