SlideShare a Scribd company logo

Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ CONSULTING - Stefan Scheidt

OPITZ CONSULTING Deutschland, profile picture
OPITZ CONSULTING Deutschland

The document discusses design patterns for creating testable and maintainable JavaScript web applications, focusing on integrating jQuery Mobile with AngularJS. It covers various aspects such as two-way data binding, dependency injection, and AJAX techniques, along with practical examples of creating a to-do application. Additionally, it emphasizes the importance of utilizing libraries and frameworks to enhance development efficiency.

Technology
Related topics:
Mobile Web Solutions
1 of 65
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
Design Patterns for JavaScript Web Apps Stefan Scheidt OPITZ CONSULTING GmbH
About me ... stefan.scheidt@opitz-consulting.com (@stefanscheidt)
Mission Markets The company's ambition is to help  Branchspreading organizations to be better than their  Over 600 customers competitors. 29% Trade / Logistics / Our services take place in partnership and 29% Supplier Industry / Services / are aimed at co-operation of many years. Telecommunications 42% Public Clients / Banks and Insurance Associations and Federations Portfolio Basic Data  Business IT Alignment  Founded in 1990  Business Information Management  400 employees  Business Process Management  8 offices  Application Development  SOA and System Integration  IT Infrastructure Management © OPITZ CONSULTING GmbH 2012 Seite 3
And … who are you?
This talk is about ... ... the development of testable and maintainable JavaScript Web Apps
This talk is about ... ... the development of testable and maintainable JavaScript Web Apps
Our Sample App ... http://tigbro.github.com/todo-mobile https://github.com/tigbro/todo-mobile
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ CONSULTING - Stefan Scheidt
Software Design
"Multi Page Web App" Browser Server HTML-Page Controller Data Backend UI Values
"AJAX Web App" Browser Server Change AJAX- Controller Backend Data Engine Events
"Single Page Web App" Browser Server Controller Data Backend
UI Component Libraries
jQuery Mobile http://jquerymobile.com/
How can you create this?
<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
<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
<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
<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
<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
DOM Transformations
<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
<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
Two Way Data Binding
Do it yourself "binding" ...
$('#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>'; }
$('#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>'; }
$('#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>'; }
$('#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>'; }
$('#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>'; }
$('#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>'; }
$('#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>'; }
$('#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>'; }
Wouldn't this be better ... ? function TodoController() { this.todos = []; this.inputText = ''; } TodoController.prototype.addTodo = function() { this.todos.push({ name: this.inputText, done: false }); this.inputText = ''; }
Angular JS Declarative MVC with UI Templates Dependency Injection Two-Way Framework Data Binding http://angularjs.org/#/
Two Way Databinding read read write Data- write DOM Controller binding watch watch
Scopes Scope Expressions $get(<expr>) 'inputText' 'todos.length' $set(<expr>, <value>) Object ... $watch(<expr>, <callback>)
Demo
<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> The DOM
function TodoController() { this.todos = []; this.inputText = ''; } TodoController.prototype.addTodo = function() { this.todos.push({ name: this.inputText, done: false }); this.inputText = ''; } The Controller
<div data-role="page" TodoController Scope ng:controller="TodoController"> inputText: 'new todo' create <input type="text" todos: [...] name="inputText" bind bind <div ng:repeat="todo in todos"> create Repeater Scope Repeater Scope Repeater Scope todo: { todo: todo: { { <input type="checkbox" name="todo.done"/> done: false done: false done: false bind name: 'makemoney' name: 'makemoney' name: 'makemoney' <label> {{todo.name}} } </label> bind }}
We are almost there, but ...
jQuery Mobile & AngularJS The problem: DOM transformations done by jQuery Mobile and AngularJS need to be coordinated!
jQuery Mobile & AngularJS Our Solution: jQuery Mobile Angular Adapter
jQuery Mobile Angular Adapter Integration of jQuery Mobile & AngularJS Extentions for mobile web development Open source on GitHub https://github.com/tigbro/jquery-mobile-angular-adapter
Dependency Injection
Dependency Injection is a design pattern whose purpose is to reduce the dependencies between components. It delegates the responsibility for creation and wiring of objects to an externaly configurable framework. http://de.wikipedia.org/wiki/Dependency_Injection
Dependency Injection is a design pattern whose purpose is to reduce the dependencies between components. It delegates the responsibility for creation and wiring of objects to an externaly configurable framework. http://de.wikipedia.org/wiki/Dependency_Injection
Sample: Calling the backend var readUrl = 'https://secure.openkeyval.org/'; TodoController.prototype.refreshTodos() { var self = this; read(readUrl, function(response) { self.todos = response; }); }
Sample: Calling the backend var readUrl = 'https://secure.openkeyval.org/'; TodoController.prototype.refreshTodos() { var self = this; read(readUrl, function(response) { self.todos = response; }); }
Sample: Calling the backend var readUrl = 'https://secure.openkeyval.org/'; function read(key, success) { var url = readUrl + key; waitdialog.show(); jsonp(url, function(data) { success(data); waitdialog.hide(); }); }
Sample: Calling the backend var readUrl = 'https://secure.openkeyval.org/'; function read(key, success) { var url = readUrl + key; waitdialog.show(); jsonp(url, function(data) { success(data); waitdialog.hide(); }); }
Sample: Calling the backend var readUrl = 'https://secure.openkeyval.org/'; function read(key, success) { var url = readUrl + key; waitdialog.show(); jsonp(url, function(data) { success(data); waitdialog.hide(); }); }
Sample: Calling the backend waitDialog todoController todoStore key value key value key value ... ... refreshToDos ... read ... todoStore waitDialog jsonp jsonp key value ... ... created created by with "new" Factories
Sample: Calling the backend waitDialog todoController todoStore key value key value key value ... ... refreshToDos ... read ... todoStore waitDialog jsonp jsonp key value ... ... created by Dependency Injection
Angular: DI for Services angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory);
Angular: DI for Services angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory() { function read(key, success) { ... } // ... return { read: read // ... } }
Angular: DI for Services angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory(jsonp, waitdialog) { function read(key, success) { ... } // ... return { read: read, // ... } } todoStoreFactory.$inject = ['jsonp', 'waitdialog'];
Angular: DI for Services 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);
Angular: DI for Controller // ... angular.service('todoStore', ...);
Angular: DI for Controller // ... angular.service('todoStore', ...); function TodoController(todoStore) { // do something with todoStore ... } TodoController.$inject = ['todoStore'];
Summary There are quite a lot of useful design patterns for the development of JavaScript Web Apps! Use them!
Summary Libraries and Frameworks can help you to get your stuff done!
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/
The End ... @stefanscheidt @tigbro

More Related Content

PDF
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe
 
PDF
Polymer
Cyril Balit
 
PDF
Create a mobile web app with Sencha Touch
James Pearce
 
PDF
Improving state of M2 front-end - Magento 2 Community Project
Bartek Igielski
 
PDF
[FEConf Korea 2017]Angular 컴포넌트 대화법
Jeado Ko
 
PDF
A mobile web app for Android in 75 minutes
James Pearce
 
PPTX
Migration to jQuery 3.5.x
StanislavIdolov
 
PDF
After max+phonegap
yangdj
 
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe
 
Polymer
Cyril Balit
 
Create a mobile web app with Sencha Touch
James Pearce
 
Improving state of M2 front-end - Magento 2 Community Project
Bartek Igielski
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
Jeado Ko
 
A mobile web app for Android in 75 minutes
James Pearce
 
Migration to jQuery 3.5.x
StanislavIdolov
 
After max+phonegap
yangdj
 

What's hot (20)

PDF
QCon 2015 - Thinking in components: A new paradigm for Web UI
Oliver Häger
 
PDF
Before there was Hoop Dreams, there was McDonald's: Strange and Beautiful
chicagonewsonlineradio
 
PDF
GDI Seattle - Intro to JavaScript Class 4
Heather Rock
 
PPTX
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
PDF
Creating GUI Component APIs in Angular and Web Components
Rachael L Moore
 
PDF
Accessible Salesforce
Shannon Hale
 
PDF
TDC2017 | São Paulo - Trilha Java EE How we figured out we had a SRE team at ...
tdc-globalcode
 
PDF
Creating GUI container components in Angular and Web Components
Rachael L Moore
 
PPTX
jQuery Mobile Introduction ( demo on EZoapp )
EZoApp
 
KEY
WordCamp Denver 2012 - Custom Meta Boxes
Jeremy Green
 
PPTX
APIs for catalogs
X.commerce
 
PDF
Dig Deeper into WordPress - WD Meetup Cairo
Mohamed Mosaad
 
PPTX
AngularJS On-Ramp
Mark Freedman
 
PDF
Java Web Development with Stripes
Samuel Santos
 
PDF
jQuery: Nuts, Bolts and Bling
Doug Neiner
 
PDF
Introduction to Web Components
Felix Arntz
 
PPTX
jQuery Presentasion
Mohammad Usman
 
KEY
Html5 For Jjugccc2009fall
Shumpei Shiraishi
 
PDF
Vaadin DevDay 2017 - Web Components
Peter Lehto
 
PPTX
Educate 2017: Customizing Authoring: How our APIs let you create powerful sol...
Learnosity
 
QCon 2015 - Thinking in components: A new paradigm for Web UI
Oliver Häger
 
Before there was Hoop Dreams, there was McDonald's: Strange and Beautiful
chicagonewsonlineradio
 
GDI Seattle - Intro to JavaScript Class 4
Heather Rock
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
Creating GUI Component APIs in Angular and Web Components
Rachael L Moore
 
Accessible Salesforce
Shannon Hale
 
TDC2017 | São Paulo - Trilha Java EE How we figured out we had a SRE team at ...
tdc-globalcode
 
Creating GUI container components in Angular and Web Components
Rachael L Moore
 
jQuery Mobile Introduction ( demo on EZoapp )
EZoApp
 
WordCamp Denver 2012 - Custom Meta Boxes
Jeremy Green
 
APIs for catalogs
X.commerce
 
Dig Deeper into WordPress - WD Meetup Cairo
Mohamed Mosaad
 
AngularJS On-Ramp
Mark Freedman
 
Java Web Development with Stripes
Samuel Santos
 
jQuery: Nuts, Bolts and Bling
Doug Neiner
 
Introduction to Web Components
Felix Arntz
 
jQuery Presentasion
Mohammad Usman
 
Html5 For Jjugccc2009fall
Shumpei Shiraishi
 
Vaadin DevDay 2017 - Web Components
Peter Lehto
 
Educate 2017: Customizing Authoring: How our APIs let you create powerful sol...
Learnosity
 
Ad

Similar to Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ CONSULTING - Stefan Scheidt (20)

PDF
HTML5 and Mobile
doodoofish
 
PDF
HTML5 New and Improved
Timothy Fisher
 
PDF
混搭移动开发：PhoneGap+JQurey+Dreamweaver
yangdj
 
PDF
HTML5 and the dawn of rich mobile web applications pt 2
James Pearce
 
PPSX
Introduction to Html5
www.netgains.org
 
PPTX
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
crokitta
 
PPTX
jQuery Mobile
mowd8574
 
PDF
Pengenalan AngularJS
Edi Santoso
 
PDF
Once Source to Rule Them All
David Yeiser
 
PPTX
Adobe & HTML5
Terry Ryan
 
PPTX
One Size Fits All
Claudio Meinberg
 
KEY
jQuery: Tips, tricks and hints for better development and Performance
Jonas De Smet
 
PPTX
Angular directive filter and routing
jagriti srivastava
 
PPTX
JQuery Mobile UI
My own sweet home!
 
PDF
iWebkit
Ryan Chung
 
TXT
Xxx
syfwan
 
PDF
E2 appspresso hands on lab
NAVER D2
 
PDF
E3 appspresso hands on lab
NAVER D2
 
PDF
Effective Android Data Binding
Eric Maxwell
 
PPTX
jQuery Mobile - Desenvolvimento para dispositivos móveis
Pablo Garrido
 
HTML5 and Mobile
doodoofish
 
HTML5 New and Improved
Timothy Fisher
 
混搭移动开发：PhoneGap+JQurey+Dreamweaver
yangdj
 
HTML5 and the dawn of rich mobile web applications pt 2
James Pearce
 
Introduction to Html5
www.netgains.org
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
crokitta
 
jQuery Mobile
mowd8574
 
Pengenalan AngularJS
Edi Santoso
 
Once Source to Rule Them All
David Yeiser
 
Adobe & HTML5
Terry Ryan
 
One Size Fits All
Claudio Meinberg
 
jQuery: Tips, tricks and hints for better development and Performance
Jonas De Smet
 
Angular directive filter and routing
jagriti srivastava
 
JQuery Mobile UI
My own sweet home!
 
iWebkit
Ryan Chung
 
Xxx
syfwan
 
E2 appspresso hands on lab
NAVER D2
 
E3 appspresso hands on lab
NAVER D2
 
Effective Android Data Binding
Eric Maxwell
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
Pablo Garrido
 
Ad

More from OPITZ CONSULTING Deutschland (20)

PDF
OC|Webcast: Grundlagen der Oracle Lizenzierung
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast "Java heute" vom 28.09.2021
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast "Java heute" vom 24.08.2021
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast "Daten wirklich nutzen"
OPITZ CONSULTING Deutschland
 
PDF
Architecture Room Stuttgart - "Cloud-native ist nur ein Teil des Spiels!"
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast "Willkommen in der Cloud!"
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast "Die neue Welt der Virtualisierung"
OPITZ CONSULTING Deutschland
 
PDF
10 Thesen zur professionellen Softwareentwicklung
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast: Oracle Lizenzierung - Lizenznews 2021
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast: Oracle Lizenzierung - Die größten Fallen in der Praxis
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast: Oracle Lizenzierung - Virtualisierung und Cloud
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast: Grundlagen der Oracle-Lizenzierung
OPITZ CONSULTING Deutschland
 
PDF
OC|Weekly Talk: Inspect’n’Adapt – Make Change come true!
OPITZ CONSULTING Deutschland
 
PDF
OC|Webcast: Schnell und clever in die AWS Cloud – Migrationsszenarien und Han...
OPITZ CONSULTING Deutschland
 
PDF
OC|Weekly Talk The Power of DevOps…
OPITZ CONSULTING Deutschland
 
PDF
OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...
OPITZ CONSULTING Deutschland
 
PDF
OC|Weekly Talk: Service Management – Was hat sich durch Corona geändert?
OPITZ CONSULTING Deutschland
 
PDF
OC|Weekly Talk - Digitales Coaching & Smart Sparring
OPITZ CONSULTING Deutschland
 
PDF
OC|Weekly Talk - Beratung remote
OPITZ CONSULTING Deutschland
 
PDF
Effiziente Betriebsoptimierung durch Cloud Nutzung
OPITZ CONSULTING Deutschland
 
OC|Webcast: Grundlagen der Oracle Lizenzierung
OPITZ CONSULTING Deutschland
 
OC|Webcast "Java heute" vom 28.09.2021
OPITZ CONSULTING Deutschland
 
OC|Webcast "Java heute" vom 24.08.2021
OPITZ CONSULTING Deutschland
 
OC|Webcast "Daten wirklich nutzen"
OPITZ CONSULTING Deutschland
 
Architecture Room Stuttgart - "Cloud-native ist nur ein Teil des Spiels!"
OPITZ CONSULTING Deutschland
 
OC|Webcast "Willkommen in der Cloud!"
OPITZ CONSULTING Deutschland
 
OC|Webcast "Die neue Welt der Virtualisierung"
OPITZ CONSULTING Deutschland
 
10 Thesen zur professionellen Softwareentwicklung
OPITZ CONSULTING Deutschland
 
OC|Webcast: Oracle Lizenzierung - Lizenznews 2021
OPITZ CONSULTING Deutschland
 
OC|Webcast: Oracle Lizenzierung - Die größten Fallen in der Praxis
OPITZ CONSULTING Deutschland
 
OC|Webcast: Oracle Lizenzierung - Virtualisierung und Cloud
OPITZ CONSULTING Deutschland
 
OC|Webcast: Grundlagen der Oracle-Lizenzierung
OPITZ CONSULTING Deutschland
 
OC|Weekly Talk: Inspect’n’Adapt – Make Change come true!
OPITZ CONSULTING Deutschland
 
OC|Webcast: Schnell und clever in die AWS Cloud – Migrationsszenarien und Han...
OPITZ CONSULTING Deutschland
 
OC|Weekly Talk The Power of DevOps…
OPITZ CONSULTING Deutschland
 
OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...
OPITZ CONSULTING Deutschland
 
OC|Weekly Talk: Service Management – Was hat sich durch Corona geändert?
OPITZ CONSULTING Deutschland
 
OC|Weekly Talk - Digitales Coaching & Smart Sparring
OPITZ CONSULTING Deutschland
 
OC|Weekly Talk - Beratung remote
OPITZ CONSULTING Deutschland
 
Effiziente Betriebsoptimierung durch Cloud Nutzung
OPITZ CONSULTING Deutschland
 

Recently uploaded (20)

PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PDF
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
PDF
Modernizing your data center with Dell and AMD
Principled Technologies
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
Modernizing your data center with Dell and AMD
Principled Technologies
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 

Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ CONSULTING - Stefan Scheidt

  • 1. Design Patterns for JavaScript Web Apps Stefan Scheidt OPITZ CONSULTING GmbH
  • 3. Mission Markets The company's ambition is to help  Branchspreading organizations to be better than their  Over 600 customers competitors. 29% Trade / Logistics / Our services take place in partnership and 29% Supplier Industry / Services / are aimed at co-operation of many years. Telecommunications 42% Public Clients / Banks and Insurance Associations and Federations Portfolio Basic Data  Business IT Alignment  Founded in 1990  Business Information Management  400 employees  Business Process Management  8 offices  Application Development  SOA and System Integration  IT Infrastructure Management © OPITZ CONSULTING GmbH 2012 Seite 3
  • 4. And … who are you?
  • 5. This talk is about ... ... the development of testable and maintainable JavaScript Web Apps
  • 6. This talk is about ... ... the development of testable and maintainable JavaScript Web Apps
  • 7. Our Sample App ... http://tigbro.github.com/todo-mobile https://github.com/tigbro/todo-mobile
  • 10. "Multi Page Web App" Browser Server HTML-Page Controller Data Backend UI Values
  • 11. "AJAX Web App" Browser Server Change AJAX- Controller Backend Data Engine Events
  • 12. "Single Page Web App" Browser Server Controller Data Backend
  • 15. How can you create this?
  • 16. <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
  • 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
  • 22. <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
  • 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. Two Way Data Binding
  • 25. Do it yourself "binding" ...
  • 26. $('#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>'; }
  • 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. Wouldn't this be better ... ? function TodoController() { this.todos = []; this.inputText = ''; } TodoController.prototype.addTodo = function() { this.todos.push({ name: this.inputText, done: false }); this.inputText = ''; }
  • 35. Angular JS Declarative MVC with UI Templates Dependency Injection Two-Way Framework Data Binding http://angularjs.org/#/
  • 36. Two Way Databinding read read write Data- write DOM Controller binding watch watch
  • 37. Scopes Scope Expressions $get(<expr>) 'inputText' 'todos.length' $set(<expr>, <value>) Object ... $watch(<expr>, <callback>)
  • 38. Demo
  • 39. <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> The DOM
  • 40. function TodoController() { this.todos = []; this.inputText = ''; } TodoController.prototype.addTodo = function() { this.todos.push({ name: this.inputText, done: false }); this.inputText = ''; } The Controller
  • 41. <div data-role="page" TodoController Scope ng:controller="TodoController"> inputText: 'new todo' create <input type="text" todos: [...] name="inputText" bind bind <div ng:repeat="todo in todos"> create Repeater Scope Repeater Scope Repeater Scope todo: { todo: todo: { { <input type="checkbox" name="todo.done"/> done: false done: false done: false bind name: 'makemoney' name: 'makemoney' name: 'makemoney' <label> {{todo.name}} } </label> bind }}
  • 42. We are almost there, but ...
  • 43. jQuery Mobile & AngularJS The problem: DOM transformations done by jQuery Mobile and AngularJS need to be coordinated!
  • 44. jQuery Mobile & AngularJS Our Solution: jQuery Mobile Angular Adapter
  • 45. jQuery Mobile Angular Adapter Integration of jQuery Mobile & AngularJS Extentions for mobile web development Open source on GitHub https://github.com/tigbro/jquery-mobile-angular-adapter
  • 47. Dependency Injection is a design pattern whose purpose is to reduce the dependencies between components. It delegates the responsibility for creation and wiring of objects to an externaly configurable framework. http://de.wikipedia.org/wiki/Dependency_Injection
  • 48. Dependency Injection is a design pattern whose purpose is to reduce the dependencies between components. It delegates the responsibility for creation and wiring of objects to an externaly configurable framework. http://de.wikipedia.org/wiki/Dependency_Injection
  • 49. Sample: Calling the backend var readUrl = 'https://secure.openkeyval.org/'; TodoController.prototype.refreshTodos() { var self = this; read(readUrl, function(response) { self.todos = response; }); }
  • 50. Sample: Calling the backend var readUrl = 'https://secure.openkeyval.org/'; TodoController.prototype.refreshTodos() { var self = this; read(readUrl, function(response) { self.todos = response; }); }
  • 51. Sample: Calling the backend var readUrl = 'https://secure.openkeyval.org/'; function read(key, success) { var url = readUrl + key; waitdialog.show(); jsonp(url, function(data) { success(data); waitdialog.hide(); }); }
  • 52. Sample: Calling the backend 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. Sample: Calling the backend 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. Sample: Calling the backend waitDialog todoController todoStore key value key value key value ... ... refreshToDos ... read ... todoStore waitDialog jsonp jsonp key value ... ... created created by with "new" Factories
  • 55. Sample: Calling the backend waitDialog todoController todoStore key value key value key value ... ... refreshToDos ... read ... todoStore waitDialog jsonp jsonp key value ... ... created by Dependency Injection
  • 56. Angular: DI for Services angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory);
  • 57. Angular: DI for Services angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory() { function read(key, success) { ... } // ... return { read: read // ... } }
  • 58. Angular: DI for Services angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory(jsonp, waitdialog) { function read(key, success) { ... } // ... return { read: read, // ... } } todoStoreFactory.$inject = ['jsonp', 'waitdialog'];
  • 59. Angular: DI for Services 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);
  • 60. Angular: DI for Controller // ... angular.service('todoStore', ...);
  • 61. Angular: DI for Controller // ... angular.service('todoStore', ...); function TodoController(todoStore) { // do something with todoStore ... } TodoController.$inject = ['todoStore'];
  • 62. Summary There are quite a lot of useful design patterns for the development of JavaScript Web Apps! Use them!
  • 63. Summary Libraries and Frameworks can help you to get your stuff done!
  • 64. 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/