http://www.opitz-consulting.com/go/3-4-898 JavaScript-Anwendungen werden immer leistungsfähiger, aber auch immer komplexer. Wie kann eine Anwendung trotz wachsender Größe wartbar und testbar bleiben? Entwurfsmuster helfen, dieses Ziel zu erreichen. Stefan Scheidt, Solution Architect und Mobile-Web-Experte bei OPITZ CONSULTING, hielt diesen Vortrag bei der Mobile Tech Conference in Frankfurt a. M am 04.September 2012. -- Zukunft?! Wir arbeiten dran. Mobile Solutions by OPITZ CONSULTING http://www.opitz-consulting.com/go/3-4-898 Über uns: Als führender Projektspezialist für ganzheitliche IT-Lösungen tragen wir zur Wertsteigerung der Organisationen unserer Kunden bei und bringen IT und Business in Einklang. Mit OPITZ CONSULTING als zuverlässigem Partner können sich unsere Kunden auf ihr Kerngeschäft konzentrieren und ihre Wettbewerbsvorteile nachhaltig absichern und ausbauen. Über unsere IT-Beratung: http://www.opitz-consulting.com/go/3-8-10 Unser Leistungsangebot: http://www.opitz-consulting.com/go/3-8-874 Karriere bei OPITZ CONSULTING: http://www.opitz-consulting.com/go/3-8-5

1. Stefan Scheidt
OPITZ CONSULTING GmbH
Entwurfsmuster für
mobile JavaScript-Web-Apps

2. Entwurfsmuster für mobile
JavaScript-Web-Apps
Stefan Scheidt
OPITZ CONSULTING GmbH

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

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

6. Wer sind Sie?

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

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

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

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

12. Architektur

13. "Multi Page Web App"
Browser Server
HTML-Page
Model
View Data Backend
UI Values Controller

14. "AJAX Web App"
Browser Server
Change Model
AJAX- View Ba
Data
Engine Controller
Events

15. "Single Page Web App"
Browser Server
Model
View Data Backend
Controller

16. Komponenten-Bibliotheken

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

18. Die Beispiel-App

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

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

24. DOM-Transformation
durch jQuery-Mobile

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

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

27. Two Way Data Binding

28. Manuelles Binding

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. $('#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>';
}

36. $('#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>';
}

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

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

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

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

41. Demo

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

43. Mit Angular ...
function TodoController($scope) {
$scope.todos = [];
$scope.inputText = '';
$scope.addTodo = function() {
$scope.todos.push({
name: $scope.inputText,
done: false
});
$scope.inputText = '';
};
}
TodoController.$inject = ['$scope'];

44. <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"
value="todo.done"/> done: false
done: false
done: false
bindet
name: 'makemoney'
name: 'makemoney'
name: 'makemoney'
<label>
{{todo.name}} }
</label>
bindet }}

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

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

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

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

51. Beispiel: Backend-Anbindung
function refreshTodos() {
var self = this;
read('ToDoApp', function(response) {
self.todos = response;
});
}

52. Beispiel: Backend-Anbindung
function refreshTodos() {
var self = this;
read('ToDoApp', function(response) {
self.todos = response;
});
}

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
var readUrl = 'https://secure.openkeyval.org/';
function read(key, success) {
var url = readUrl + key;
waitdialog.show();
jsonp(url, function(data) {
success(data);
waitdialog.hide();
});
}

56. Beispiel: Backend-Anbindung
waitDialog
todoController todoStore key value
key value key value ... ...
refreshTodos ... read ...
todoStore waitDialog
jsonp jsonp
key value
... ...
created by
Factories

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

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

59. Services und DI mit Angular
function jsonpFactory() {
// returns jsonp function
// ...
}
function waitdialogFactory() {
// returns waitdialog object
// ...
}

60. Services und DI mit Angular
var module = angular.module("todo", []);

61. Services und DI mit Angular
var module = angular.module("todo", []);
module.factory('jsonp', jsonpFactory);
module.factory('waitdialog', waitdialogFactory);

62. Services und DI mit Angular
var module = angular.module("todo", []);
module.factory('jsonp', jsonpFactory);
module.factory('waitdialog', waitdialogFactory);
function todoStoreFactory(jsonp, waitdialog) {
function read(key, success) {
// use jsonp, waitdialog here
}
return {
read: read
};
}

63. Services und DI mit Angular
var module = angular.module("todo", []);
module.factory('jsonp', jsonpFactory);
module.factory('waitdialog', waitdialogFactory);
function todoStoreFactory(jsonp, waitdialog) {
function read(key, success) {
// use jsonp, waitdialog here
}
return {
read: read
};
}
todoStoreFactory.$inject = ['jsonp', 'waitdialog'];

64. Services und DI mit Angular
var module = angular.module("todo", []);
module.factory('jsonp', jsonpFactory);
module.factory('waitdialog', waitdialogFactory);
function todoStoreFactory(jsonp, waitdialog) {
// ...
}
todoStoreFactory.$inject = ['jsonp', 'waitdialog'];
module.factory('todoStore', todoStoreFactory);

65. Controller und DI mit Angular
function TodoController($scope, todoStore) {
...
}
TodoController.$inject = ['$scope', 'todoStore'];
module.controller("rylc.TodoController", TodoController);

66. Controller und DI mit Angular
function TodoController($scope, todoStore) {
...
}
TodoController.$inject = ['$scope', 'todoStore'];
module.controller("rylc.TodoController", TodoController);

67. Controller und DI mit Angular
function TodoController($scope, todoStore) {
...
}
TodoController.$inject = ['$scope', 'todoStore'];
module.controller("rylc.TodoController", TodoController);

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

69. jQuery Mobile Angular Adapter
Mobile Events

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

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. Fazit
Auch bei der Entwicklung
von JavaScript Clients
sollten geeignete Entwurfsmuster
angewendet werden!

79. Fazit
Bibliotheken und Frameworks
helfen bei der Umsetzung!

80. Fazit
Eine praxiserprobte Kombination für die
Entwicklung mobiler Web-Apps:
jQuery Mobile
+ AngularJS
+ jQuery Mobile Angular Adapter

81. 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/

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

83. www.opitz-consulting.com/go_mobile