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

2. 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…

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

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

5. Why are we here? tools, technologies & practices

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

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

8. Real world app

9. The Server

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

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

12. 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 #

13. 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 #

14. 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 #

15. Development environment simple technologies => simple tools

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

17. Eclipse for Web Developers

18. Development environment IBM WebSphere Application Server V8.5 Liberty Profile http://wasdev.net

19. Development environment Liberty Developer Tools Installation from Eclipse Market Place

20. Source!

21. The Client

22. Goals Mobile Application Eclipse IDE DRY REST API Fast to Market

23. Options native vs hybrid

24. Mockup

25. Mockup

26. IBM Worklight

30. User Interface – Typical Web Apps Twitter BootstrapZurb Foundation

31. User Interface – Mobile Apps

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

33. jQuery Mobile – Getting started

34. jQuery Mobile – Getting started 

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

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

37. jQuery Mobile – inside the content div … …

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

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

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

41. jQuery Mobile – Output

42. Navigation – HTML/CSS

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

44. Apache Cordova + IBM Worklight WL.TabBar

45. Apache Cordova + IBM Worklight WL.TabBarWL.OptionsMenu

46. Adapters

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

48. Adapters

49. Adapters http THE_SERVER.austin.ibm.com 9080

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

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

52. JavaScript Modules

53.  Start Auto Executing Function  End Auto Executing Function

54. JavaScript

55. JavaScript

56. JavaScript

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

58. QUnit

59. QUnit  Unit Tests

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

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

62. 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); });

63. 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); });

64. Time to see the code!

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

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

67. Questions

68. Thank you