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…

Who are we? Michael C. Thompson [ ] Software Engineer, IBM Austin, TX IBM WebSphere Application github barecode Carlos N. Andreu [ ] Software Engineer, IBM Austin, TX IBM github cnandreu

We are not rocket scientists The Far Side comic, copyright Gary Larson

Why are we here? tools, technologies & practices

Why are we here? right choices = fun and easy!

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

Real world app

The Server

What are we building? TODO application service REST = CRUD operations JSON = data interchange

What are we building? Create POST /TODORESTService/ -- create a new item

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

Eclipse for Web Developers

Development environment IBM WebSphere Application Server V8.5 Liberty Profile

Development environment Liberty Developer Tools Installation from Eclipse Market Place

Source!

The Client

Goals Mobile Application Eclipse IDE DRY REST API Fast to Market

Options native vs hybrid

Mockup

Mockup

IBM Worklight

User Interface – Typical Web Apps Twitter BootstrapZurb Foundation

User Interface – Mobile Apps

jQuery Mobile Pages Buttons Form Elements List Views Content formatting Events Themes jquerymobile.com

jQuery Mobile – Getting started

jQuery Mobile – Getting started 

jQuery Mobile – common/todo.html Todo App Hello World!

jQuery Mobile – common/todo.html Todo App Hello World!

jQuery Mobile – inside the content div … …

jQuery Mobile – inside the content div … Add New Delete Done …

jQuery Mobile – inside the content div … Add New Delete Done Buy Milk and Cookies Finish App …

jQuery Mobile – inside the content div … Add New Delete Done Buy Milk and Cookies Finish App Empty List …

jQuery Mobile – Output

Navigation – HTML/CSS

Apache Cordova Accelerometer Capture Geolocation Notifications Contacts File System Access Events Even your own via Cordova plugins! incubator.apache.org/cordova/

Apache Cordova + IBM Worklight WL.TabBar

Apache Cordova + IBM Worklight WL.TabBarWL.OptionsMenu

Adapters

Adapters Multiple Backend Support Consistent Security Cache Requests No CORS or JSONP

Adapters

Adapters http THE_SERVER.austin.ibm.com 9080

Adapters function all() { var input = { method : 'get', returnedContentType : 'json', path : "TODORESTService” }; return WL.Server.invokeHttp(input); }

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

 Start Auto Executing Function  End Auto Executing Function

JavaScript

JavaScript

JavaScript

QUnit JavaScript Unit Testing Made by the JQuery Team qunitjs.com

QUnit

QUnit  Unit Tests

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

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

QUnit test('asynchronous test', function() { // Pause the test first stop(); setTimeout(function() { ok(true); // After the assertion has been called, // continue the test start(); }, 100); });

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

Summary Liberty - Eclipse Market Place service = REST data = JSON

Summary IBM Worklight - Eclipse Market Place UI = jQuery mobile native = Apache Cordova REST = adapters test = QUnit

Questions

Thank you