Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

68
Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Transcript of Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Page 1: 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”

Page 2: 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…

Page 3: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Who are we?Who are we?

Michael C. Thompson [ [email protected] ]

Software Engineer, IBM Austin, TX

IBM WebSphere Application Server

@barecode

github barecode

Carlos N. Andreu [ [email protected] ]

Software Engineer, IBM Austin, TX

IBM Worklight

@cnandreu

github cnandreu

Page 4: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

We are not rocket scientistsWe are not rocket scientists

The Far Side comic, copyright Gary Larson

Page 5: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Why are we here?Why are we here?

tools, technologies & practices

Page 6: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Why are we here?Why are we here?

right choices = fun and easy!

Page 7: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Real world appReal world app

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

Page 8: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Real world appReal world app

Page 9: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

The Server

Page 10: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

What are we building?What are we building?

TODO application service REST = CRUD operations

JSON = data interchange

Page 11: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

What are we building?What are we building?

Create POST /TODORESTService/ -- create a new item

Page 12: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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 #

Page 13: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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 #

Page 14: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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 #

Page 15: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Development environmentDevelopment environment

simple technologies => simple tools

Page 16: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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

Page 17: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Development environmentDevelopment environment

Eclipse for Web Developers

Page 18: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Development environmentDevelopment environment

IBM WebSphere Application Server V8.5 Liberty Profile

http://wasdev.net

Page 19: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Development environmentDevelopment environment

Liberty Developer Tools Installation from Eclipse Market Place

Page 20: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Source!Source!

Page 21: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

The Client

Page 22: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

GoalsGoals

Mobile Application

Eclipse IDE

DRY

REST API

Fast to Market

Page 23: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

OptionsOptions

native vs hybrid

Page 24: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

MockupMockup

Page 25: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

MockupMockup

Page 26: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

IBM WorklightIBM Worklight

Page 27: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

IBM WorklightIBM Worklight

Page 28: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

IBM WorklightIBM Worklight

Page 29: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

IBM WorklightIBM Worklight

Page 30: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

User Interface – Typical Web AppsUser Interface – Typical Web Apps

Twitter Bootstrap Zurb Foundation

Page 31: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

User Interface – Mobile AppsUser Interface – Mobile Apps

Page 32: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

jQuery MobilejQuery Mobile

Pages

Buttons

Form Elements

List Views

Content formatting

Events

Themes

jquerymobile.com

Page 33: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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>

Page 34: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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>

Page 35: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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 -->

Page 36: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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 -->

Page 37: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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

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

Page 38: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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>

Page 39: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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>

Page 40: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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>

Page 41: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

jQuery Mobile – OutputjQuery Mobile – Output

Page 42: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Navigation – HTML/CSSNavigation – HTML/CSS

Page 43: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Apache CordovaApache Cordova

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

incubator.apache.org/cordova/

Page 44: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Apache Cordova + IBM WorklightApache Cordova + IBM Worklight

WL.TabBar

Page 45: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Apache Cordova + IBM WorklightApache Cordova + IBM Worklight

WL.TabBar WL.OptionsMenu

Page 46: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

AdaptersAdapters

Page 47: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

AdaptersAdapters

Multiple Backend Support Consistent Security Cache Requests No CORS or JSONP

Page 48: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

AdaptersAdapters

Page 49: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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"/>

Page 50: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

AdaptersAdapters

function all() {

var input = {

method : 'get',

returnedContentType : 'json',

path : "TODORESTService”

};

return WL.Server.invokeHttp(input);

}

Page 51: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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"}

Page 52: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

JavaScript ModulesJavaScript Modules

Page 53: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

JavaScript ModulesJavaScript Modules

Start Auto Executing Function

End Auto Executing Function

Page 54: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

JavaScriptJavaScript

Page 55: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

JavaScriptJavaScript

Page 56: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

JavaScriptJavaScript

Page 57: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

QUnitQUnit

JavaScript Unit Testing

Made by the JQuery Team

qunitjs.com

Page 58: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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>

Page 59: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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>

Page 60: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

QUnitQUnit

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

Page 61: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

QUnitQUnit

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

Page 62: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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);

});

Page 63: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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);

});

Page 64: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

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

Page 65: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

SummarySummary

Liberty - Eclipse Market Place service = REST

data = JSON

Page 66: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

SummarySummary

IBM Worklight - Eclipse Market Place UI = jQuery mobile

native = Apache Cordova

REST = adapters

test = QUnit

Page 67: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

QuestionsQuestions

Page 68: Building Functional Hybrid Apps For The iPhone And Android “The Zen of Mobile Apps”

Thank youThank you