http://www.opitz-consulting.com/go/3-4-11 JavaScript-Clients sind ein wichtiger Bestandteil des Mobile Computings, die wart- und testbare Entwicklung ist aber eine Herausforderung. Data Binding erleichtet das Unterfangen durch die klare Trennung von Anwendungscode und UI. OPITZ CONSULTING Solution Architect Stefan Scheidt präsentierte diesen Vortrag am 27. März 2012 auf der Mobile Tech Conference MTC Spring 2012 in München. -- Sie möchten mobile Geschäftslösungen in Ihrem Unternehmen nutzen? Wir beraten Sie gerne. Lesen Sie hier mehr zu unseren Leistungen in diesem Bereich und informieren Sie sich zu unserem Workshop für die professionelle Web-App-Entwicklung mit JavaScript: http://www.opitz-consulting.com/go/3-4-898

1. Stefan Scheidt | OPITZ CONSULTING GmbH
JavaScript Data Binding
mit jQuery Mobile

2. Wer bin ich?
stefan.scheidt@opitz-consulting.com
(@stefanscheidt)

3. Mission Märkte
Wir entwickeln gemeinsam mit allen  Branchenübergreifend
Branchen Lösungen, die dazu führen, dass  Über 600 Kunden
sich diese Organisationen besser entwickeln 29%
als ihr Wettbewerb. 29%
Handel / Logistik /
Dienstleistungen
Industrie / Versorger /
Unsere Dienstleistung erfolgt Telekommunikation
partnerschaftlich und ist auf eine langjährige 42%
Zusammenarbeit angelegt. Öffentliche Auftraggeber / Banken und
Versicherungen / Vereine und Verbände
Leistungsangebot Eckdaten
 Business IT Alignment  Gründung 1990
 Business Information Management  400 Mitarbeiter
 Business Process Management  8 Standorte
 Anwendungsentwicklung
 SOA und System-Integration
 IT-Infrastruktur-Management
© OPITZ CONSULTING GmbH 2012 Seite 3

4. Wer sind Sie?

5. In diesem Vortrag geht‘s um ...
... die Entwicklung
testbarer und wartbarer
mobiler JavaScript Web-Apps

6. In diesem Vortrag geht‘s um ...
... die Entwicklung
testbarer und wartbarer
mobiler JavaScript Web-Apps

7. In diesem Vortrag geht‘s um ...
... die Entwicklung
testbarer und wartbarer
mobiler JavaScript Web-Apps

8. Die Beispiel-App ...
http://tigbro.github.com/todo-mobile
https://github.com/tigbro/todo-mobile

10. Architektur

11. "Multi Page Web App"
Browser Server
HTML-Page
Controller Data Backend
UI Values

12. "AJAX Web App"
Browser Server
Change
AJAX- Controller Ba
Data
Engine
Events

13. "Single Page Web App"
Browser Server
Controller Data Backend

14. Komponenten-Bibliotheken

15. jQuery Mobile
http://jquerymobile.com/

16. Die Beispiel-App

17. <div id="main" data-role="page">
<div data-role="header">
<h1>Todos</h1>
<a href="">Save</a>
<a href="#settings">Settings</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<form data-ajax="false">
<input type="text">
</form>
</div>
<fieldset data-role="controlgroup">
<input type="checkbox" id="todo1"/>
<label for="todo1">create a mobile todo app</label>
</fieldset>
</div>
</div>
jQuery Mobile Markup

18. <div id="main" data-role="page">
<div data-role="header">
<h1>Todos</h1>
<a href="">Save</a>
<a href="#settings">Settings</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<form data-ajax="false">
<input type="text">
</form>
</div>
<fieldset data-role="controlgroup">
<input type="checkbox" id="todo1"/>
<label for="todo1">create a mobile todo app</label>
</fieldset>
</div>
</div>
jQuery Mobile Markup

19. <div id="main" data-role="page">
<div data-role="header">
<h1>Todos</h1>
<a href="">Save</a>
<a href="#settings">Settings</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<form data-ajax="false">
<input type="text">
</form>
</div>
<fieldset data-role="controlgroup">
<input type="checkbox" id="todo1"/>
<label for="todo1">create a mobile todo app</label>
</fieldset>
</div>
</div>
jQuery Mobile Markup

20. <div id="main" data-role="page">
<div data-role="header">
<h1>Todos</h1>
<a href="">Save</a>
<a href="#settings">Settings</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<form data-ajax="false">
<input type="text">
</form>
</div>
<fieldset data-role="controlgroup">
<input type="checkbox" id="todo1"/>
<label for="todo1">create a mobile todo app</label>
</fieldset>
</div>
</div>
jQuery Mobile Markup

21. <div id="main" data-role="page">
<div data-role="header">
<h1>Todos</h1>
<a href="">Save</a>
<a href="#settings">Settings</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<form data-ajax="false">
<input type="text">
</form>
</div>
<fieldset data-role="controlgroup">
<input type="checkbox" id="todo1"/>
<label for="todo1">create a mobile todo app</label>
</fieldset>
</div>
</div>
jQuery Mobile Markup

22. DOM-Transformation
durch jQuery-Mobile

23. <input type="checkbox" id="todo1"/>
<label for="todo1">create a mobile todo app</label>
<div class="ui-checkbox">
<input type="checkbox" name="todo.done" id="todo1">
<label class="ui-btn ui-btn-up-c ui-btn-icon-left
ui-btn-corner-all ui-checkbox-off"
for="todo1" data-theme="c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">create a mobile todo app</span>
<span class="ui-icon ui-icon-checkbox-off
ui-icon-shadow"></span>
</span>
</label>
</div>
jQuery Mobile Markup Transformation

24. <input type="checkbox" id="todo1"/>
<label for="todo1">create a mobile todo app</label>
<div class="ui-checkbox">
<input type="checkbox" name="todo.done" id="todo1">
<label class="ui-btn ui-btn-up-c ui-btn-icon-left
ui-btn-corner-all ui-checkbox-off"
for="todo1" data-theme="c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">create a mobile todo app</span>
<span class="ui-icon ui-icon-checkbox-off
ui-icon-shadow"></span>
</span>
</label>
</div>
jQuery Mobile Markup Transformation

25. Two Way Data Binding

26. Manuelles Binding

27. $('#addTodo').submit(function(event) {
addTodo();
event.preventDefault();
});
function addTodo() {
var inputText = $('#inputText').val();
var list = $('#todos');
var entryCount = list.find('input').length;
list.append(entryTemplate(entryCount, inputText));
list.trigger('create');
$('#inputText').val('');
}
function entryTemplate(index, name) {
var id = 'todo' + index;
return '<input type="checkbox" id="' + id + '"/>' +
'<label for="' + id + '">' + name + '</label>';
}

28. $('#addTodo').submit(function(event) {
addTodo();
event.preventDefault();
});
function addTodo() {
var inputText = $('#inputText').val();
var list = $('#todos');
var entryCount = list.find('input').length;
list.append(entryTemplate(entryCount, inputText));
list.trigger('create');
$('#inputText').val('');
}
function entryTemplate(index, name) {
var id = 'todo' + index;
return '<input type="checkbox" id="' + id + '"/>' +
'<label for="' + id + '">' + name + '</label>';
}

29. $('#addTodo').submit(function(event) {
addTodo();
event.preventDefault();
});
function addTodo() {
var inputText = $('#inputText').val();
var list = $('#todos');
var entryCount = list.find('input').length;
list.append(entryTemplate(entryCount, inputText));
list.trigger('create');
$('#inputText').val('');
}
function entryTemplate(index, name) {
var id = 'todo' + index;
return '<input type="checkbox" id="' + id + '"/>' +
'<label for="' + id + '">' + name + '</label>';
}

30. $('#addTodo').submit(function(event) {
addTodo();
event.preventDefault();
});
function addTodo() {
var inputText = $('#inputText').val();
var list = $('#todos');
var entryCount = list.find('input').length;
list.append(entryTemplate(entryCount, inputText));
list.trigger('create');
$('#inputText').val('');
}
function entryTemplate(index, name) {
var id = 'todo' + index;
return '<input type="checkbox" id="' + id + '"/>' +
'<label for="' + id + '">' + name + '</label>';
}

31. $('#addTodo').submit(function(event) {
addTodo();
event.preventDefault();
});
function addTodo() {
var inputText = $('#inputText').val();
var list = $('#todos');
var entryCount = list.find('input').length;
list.append(entryTemplate(entryCount, inputText));
list.trigger('create');
$('#inputText').val('');
}
function entryTemplate(index, name) {
var id = 'todo' + index;
return '<input type="checkbox" id="' + id + '"/>' +
'<label for="' + id + '">' + name + '</label>';
}

32. $('#addTodo').submit(function(event) {
addTodo();
event.preventDefault();
});
function addTodo() {
var inputText = $('#inputText').val();
var list = $('#todos');
var entryCount = list.find('input').length;
list.append(entryTemplate(entryCount, inputText));
list.trigger('create');
$('#inputText').val('');
}
function entryTemplate(index, name) {
var id = 'todo' + index;
return '<input type="checkbox" id="' + id + '"/>' +
'<label for="' + id + '">' + name + '</label>';
}

33. $('#addTodo').submit(function(event) {
addTodo();
event.preventDefault();
});
function addTodo() {
var inputText = $('#inputText').val();
var list = $('#todos');
var entryCount = list.find('input').length;
list.append(entryTemplate(entryCount, inputText));
list.trigger('create');
$('#inputText').val('');
}
function entryTemplate(index, name) {
var id = 'todo' + index;
return '<input type="checkbox" id="' + id + '"/>' +
'<label for="' + id + '">' + name + '</label>';
}

34. $('#addTodo').submit(function(event) {
addTodo();
event.preventDefault();
});
function addTodo() {
var inputText = $('#inputText').val();
var list = $('#todos');
var entryCount = list.find('input').length;
list.append(entryTemplate(entryCount, inputText));
list.trigger('create');
$('#inputText').val('');
}
function entryTemplate(index, name) {
var id = 'todo' + index;
return '<input type="checkbox" id="' + id + '"/>' +
'<label for="' + id + '">' + name + '</label>';
}

35. Das Ziel ist aber:
function TodoController() {
this.todos = [];
this.inputText = '';
}
TodoController.prototype.addTodo = function() {
this.todos.push({
name: this.inputText,
done: false
});
this.inputText = '';
}

36. Angular JS
Declarative MVC with
UI Templates Dependency Injection
Two-Way Framework
Data Binding
http://angularjs.org/#/

37. Two-Way Databinding
read read
write Data- write
DOM Controller
binding
watch watch

38. Scopes
Scope
Expressions
$get(<expr>)
'inputText'
'todos.length'
$set(<expr>, <value>)
Object
...
$watch(<expr>, <callback>)

39. Demo

40. <div id="main" data-role="page">
<div data-role="header">
<h1>Todos</h1>
<a href="">Save</a>
<a href="#settings">Settings</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<form data-ajax="false">
<input type="text">
</form>
</div>
<fieldset data-role="controlgroup">
<input type="checkbox" id="todo1"/>
<label for="todo1">create a mobile todo app</label>
</fieldset>
</div>
</div> Das DOM

41. function TodoController() {
this.todos = [];
this.inputText = '';
}
TodoController.prototype.addTodo = function() {
this.todos.push({
name: this.inputText,
done: false
});
this.inputText = '';
}
Der Controller

42. <div data-role="page" TodoController-Scope
ng:controller="TodoController">
inputText: 'new todo'
erzeugt
<input type="text" todos: [...]
name="inputText"
bindet
bindet
<div ng:repeat="todo in todos">
erzeugt Repeater Scope
Repeater Scope
Repeater Scope
todo: {
todo:
todo: { {
<input type="checkbox"
name="todo.done"/> done: false
done: false
done: false
bindet
name: 'makemoney'
name: 'makemoney'
name: 'makemoney'
<label>
{{todo.name}} }
</label>
bindet }}

43. Damit ist das Ziel fast erreicht, aber...

44. jQuery Mobile und AngularJS
Das Problem:
Die DOM-Manipulationen von
jQuery Mobile und AngularJS
müssen koordiniert werden!

45. jQuery Mobile und AngularJS
Die Lösung:
jQuery Mobile Angular Adapter

46. jQuery Mobile Angular Adapter
Koordination von jQuery Mobile und AngularJS
Erweiterungen für mobile Web-Apps
Open Source unter
https://github.com/tigbro/
jquery-mobile-angular-adapter

47. Dependency Injection

48. Dependency Injection ist ein Entwurfsmuster
und dient dazu, die Abhängigkeiten zwischen
Komponenten zu minimieren.
Es überträgt die Verantwortung für das
Erzeugen und die Verknüpfung von Objekten an
ein extern konfigurierbares Framework
http://de.wikipedia.org/wiki/Dependency_Injection

49. Dependency Injection ist ein Entwurfsmuster
und dient dazu, die Abhängigkeiten zwischen
Komponenten zu minimieren.
Es überträgt die Verantwortung für das
Erzeugen und die Verknüpfung von Objekten an
ein extern konfigurierbares Framework
http://de.wikipedia.org/wiki/Dependency_Injection

50. Beispiel: Backend-Anbindung
var readUrl = 'https://secure.openkeyval.org/';
TodoController.prototype.refreshTodos() {
var self = this;
read(readUrl, function(response) {
self.todos = response;
});
}

51. Beispiel: Backend-Anbindung
var readUrl = 'https://secure.openkeyval.org/';
TodoController.prototype.refreshTodos() {
var self = this;
read(readUrl, function(response) {
self.todos = response;
});
}

52. Beispiel: Backend-Anbindung
var readUrl = 'https://secure.openkeyval.org/';
function read(key, success) {
var url = readUrl + key;
waitdialog.show();
jsonp(url, function(data) {
success(data);
waitdialog.hide();
});
}

53. Beispiel: Backend-Anbindung
var readUrl = 'https://secure.openkeyval.org/';
function read(key, success) {
var url = readUrl + key;
waitdialog.show();
jsonp(url, function(data) {
success(data);
waitdialog.hide();
});
}

54. Beispiel: Backend-Anbindung
var readUrl = 'https://secure.openkeyval.org/';
function read(key, success) {
var url = readUrl + key;
waitdialog.show();
jsonp(url, function(data) {
success(data);
waitdialog.hide();
});
}

55. Beispiel: Backend-Anbindung
waitDialog
todoStore key value
todoController key value ... ...
key value read ...
todoStore waitDialog
jsonp jsonp
key value
... ...
created created by
with "new" Factories

56. Beispiel: Backend-Anbindung
waitDialog
key value
todoController todoStore ... ...
key value key value
todoStore waitDialog
jsonp jsonp
key value
... ...
created by
Dependency Injection

57. Services und DI mit Angular
angular.service('jsonp', jsonpFactory);
angular.service('waitdialog', waitdialogFactory);

58. Services und DI mit Angular
angular.service('jsonp', jsonpFactory);
angular.service('waitdialog', waitdialogFactory);
function todoStoreFactory() {
function read(key, success) { ... }
// ...
return {
read: read
// ...
}
}

59. Services und DI mit Angular
angular.service('jsonp', jsonpFactory);
angular.service('waitdialog', waitdialogFactory);
function todoStoreFactory(jsonp, waitdialog) {
function read(key, success) { ... }
// ...
return {
read: read,
// ...
}
}
todoStoreFactory.$inject = ['jsonp', 'waitdialog'];

60. Services und DI mit Angular
angular.service('jsonp', jsonpFactory);
angular.service('waitdialog', waitdialogFactory);
function todoStoreFactory(jsonp, waitdialog) {
function read(key, success) { ... }
// ...
return {
read: read
// ...
}
}
todoStoreFactory.$inject = ['jsonp', 'waitdialog'];
angular.service('todoStore', todoStoreFactory);

61. DI für Controller
// ...
angular.service('todoStore', ...);

62. DI für Controller
// ...
angular.service('todoStore', ...);
function TodoController(todoStore) {
// do something with todoStore ...
}
TodoController.$inject = ['todoStore'];

63. jQuery Mobile Angular Adapter
Koordination von jQuery Mobile und AngularJS
Erweiterungen für mobile Web-Apps
Open Source unter
https://github.com/tigbro/
jquery-mobile-angular-adapter

64. jQuery Mobile Angular Adapter
Mobile Events

65. <div id="main" data-role="page"
ng:controller="TodoController"
ngm:pagebeforeshow="refreshTodos()">
...
</div>
Unterstütze Events:
click swipe
pagebeforeshow swiperight
pageshow swipeleft
pagebeforehide tap
pagehide taphold

66. jQuery Mobile Angular Adapter
Navigation

67. <a href="#welcomePage">

68. <a href=""
ngm:click="$navigate('welcomePage')">

69. <a href=""
ngm:click="$navigate(login(),
'success:welcomePage',
'failure:loginPage')">

70. <a href=""
ngm:click="$navigate(login(),
'success:slide:welcomePage',
'failure:loginPage')">

71. jQuery Mobile Angular Adapter
Shared Controller

72. LoginPage
<div id="loginPage" Scope
ng:controller="LoginController">
login
<a ngm:click="login()">

73. LoginPage
<div id="loginPage" Scope
ng:controller="LoginController">
login
<a ngm:click="login()">
<div id="welcomePage" WelcomePage
ng:controller="WelcomeController"> Scope
logout
<a ngm:click="logout()">

74. LoginPage
<div id="loginPage" Scope
ngm:shared-controller=
Authentication-
"auth:AuthenticationController"> auth Controller Scope
<a ngm:click="login()">
login
logout
<div id="welcomePage" WelcomePage
ngm:shared-controller= Scope
"auth:AuthenticationController">
auth
<a ngm:click="logout()">

75. LoginPage
<div id="loginPage" Scope
ngm:shared-controller=
Authentication-
"auth:AuthenticationController"> auth Controller Scope
<a ngm:click="auth.login()">
login
logout
<div id="welcomePage" WelcomePage
ngm:shared-controller= Scope
"auth:AuthenticationController">
auth
<a ngm:click="auth.logout()">

76. jQuery Mobile Angular Adapter
Wait Dialog

77. waitDialog.show('loading');
waitDialog.hide();
waitDialog.show('click to abort',
onClickCallback);

78. One more thing...

79. Sencha Touch Angular Adapter
Koordination von Sencha Touch und Angular JS
Erweiterungen für mobile Web-Apps
semantisches HTML Markup!
Open Source unter
https://github.com/tigbro/
sencha-touch-angular-adapter

80. Sencha Touch Angular Adapter
Koordination von Sencha Touch und Angular JS
Erweiterungen für mobile Web-Apps
semantisches HTML Markup!
Open Source unter
https://github.com/tigbro/
sencha-touch-angular-adapter

81. Plain Sencha Touch
<!DOCTYPE html>
<html>
<head>
<title>TodoMobile</title>
<link rel="stylesheet" href="lib/sencha-touch.css"/>
<script src="lib/sencha-touch-1.1.0.js"></script>
<script src="todo_sencha.js"></script>
</head>
<body>
</body>
</html>

82. new Ext.Application({launch: function() {
new Ext.Carousel({
fullscreen: true,
items: [{xtype: 'panel',
scroll: true,
dockedItems: [{xtype: 'toolbar',
dock: 'top',
title: 'Todos',
items: [{xtype: 'button',
text: 'Save'},
{xtype: 'spacer'},
{xtype: 'button',
text: 'Settings'}]}],
items: [{xtype: 'textfield',
placeHolder: 'enter your todo here',
listeners: {action: addTodo}},
todoPanel]}
// Settings panel omitted
]});
}});

83. <st:carousel
ng:controller="TodoController">
<st:panel id="todos">
<st:toolbar dock="top" title="Todos">
<st:button text="Save"
st:event="{tap:'saveTodos()'}"/>
</st:toolbar>
<st:textfield name="inputText"
st:event="{action:'addTodo()'}"/>
<st:checkboxfield
ng:repeat="todo in todos"
name="todo.done"
label="{{todo.name}}"/>
</st:panel>
</st:carousel>

84. Fazit
Auch bei der Entwicklung
von JavaScript Clients
sollten geeignete Entwurfsmuster
angewendet werden!

85. Fazit
Bibliotheken und Frameworks
helfen bei der Umsetzung!

86. In the hive 11: nectar and pollen
by Max xx, http://www.flickr.com/photos/max_westby/4567762490
Books
By Rodrigo Galindez, http://www.flickr.com/photos/rodrigogalindez/4637637337/
IMG_1300-Edit
by Susan E Adams, http://www.flickr.com/photos/susanad813/3912914836/
Doble Via
by amslerPIX, http://www.flickr.com/photos/amslerpix/6242266697/
MacBook Pro Keyboard
by superstrikertwo, http://www.flickr.com/photos/superstrikertwo/4989727256/
Stubborn Last Drop
by RogueSun Media, http://www.flickr.com/photos/shuttercat7/627798443/

87. Vielen Dank
für Ihr Interesse!
@stefanscheidt