building functional hybrid apps for the iphone and android “the zen of mobile apps”
TRANSCRIPT
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 [ [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
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