Entwurfsmuster für mobile JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt

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

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

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>'; }

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(); }); }

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);

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

Entwurfsmuster für mobile JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt

More Related Content

What's hot (9)

Viewers also liked (20)

More from OPITZ CONSULTING Deutschland (20)

Entwurfsmuster für mobile JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt