SlideShare ist ein Scribd-Unternehmen logo
Mobile Multiplattform-Apps
5. c-Akademie
Mark Zuckerberg: Our Biggest Mistake
Was Betting Too Much On HTML5
http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-
betting-too-much-on-html5/
Antwort Fastbook
• http://fb.html5isready.com/
http://vimeo.com/55486684
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
Ablauf
• Einführung Apps
• Architecture Frameworks
• UI Frameworks
• Hybrid Frameworks
• Demo
• Fazit und Ausblick
Was Analysten sagen
• Gartner -> bis 2015 Grossteil aller Enterprise
Apps werden als Hybrid entwickelt
http://www.gartner.com/newsroom/id/2429815
0%
20%
40%
60%
80%
100%
Consumer Enterprise
Web
Hybrid
Native
Möglichkeiten eine App zu
erstellen
NativeApplication
• Voller Zugriff auf
Geräte API
• Programmiersprachen
• Java
• Objective-C
• C# WebApplication
• Eine Codebasis
• Zugriff auf Hardware
nur durch HTML5
Browserunterstützung
(GPS, Camera)
• Programmiersprachen
• HTML5
• JavaScript
• CSS 3
HybridApplication
• JS-Native
Communication
• App in einem Container
verpackt
• Programmiersprachen
• HTML5
• JavaScript
• CSS3
Hybrid Application?
• Entwickelt mit HTML5; in einen nativen
Container gewrapt
• Keine plattformspezifischen Sprachen wie
Objective-C oder Java
• Kann über einen AppStore vertrieben werden
• Möglichkeit zum Zugriff auf native
Komponenten (Kamera, Mikrofon, Kontakte
oder Notification System)
Pro & Contra - Native App
+ Bessere Performance
+ Flüssigere
Animationen,
Übergänge und
schnellere Startzeit
+ Kann mehr Daten
offline speichern
+ Voller Zugriff auf
Hardware und OS
Features
 Keine gemeinsame
Codebasis
 Unterschiedliche API
und
Programmiersprachen
für Zielplattform
 App Updates müssen
jedes Mal den
Approval-Prozess neu
durchlaufen
Pro & Contra - Web App
+ Eine Codebasis, welche von
jedem browserbasierten
Mobilgerät aufgerufen
werden kann
+ Performance Problem
werden immer mehr
minimiert, da Mobilegeräte
und Javascript Engines
schneller werden
+ Kein Approval-Prozess
benötigt; Apps können
sofort geupdatet werden
 Interpretierter Code
 Kein voller Zugriff auf alle
gerätespezifischen
Möglichkeiten
 Nicht im AppStore
auffindbar
Pro & Contra - Hybrid App
+ App kann über die
bedeutenden AppStores
vertrieben werden
+ Eine Codebasis für alle
unterstützten
Plattformen
+ Zugang über die API auf
einige, oder sogar alle
gerätespezifischen
Features, welche über
den Browser nicht
aufrufbar sind
 Abhängig vom Store
Approval-Prozess
 App Performance
abhängig durch die
Browsercontrol-
Leistungsfähigkeit des
Mobilgeräts
Users don’t care if it’s native or
web as long as the app is fast and
responsive
Kristofer Joseph, Javascript
Frameworks Lead, Adobe
Consider a Framework
UI
Dojo Toolkit
jQuery mobile
Sencha Touch
KendoUI
Twitter Bootstrap
Zurp
Ratchet
Topcoat
Ionic
…
Architecture Backbone.JS
AngularJS
EmberJS
KnockoutJS
Full Stack Custom Stack
Hybrid Framework
Architecture Frameworks
UI Frameworks Twitter Bootstrap
Zurp
Ratchet
Topcoat
Ionic
…
Architecture
Frameworks
Backbone.JS
AngularJS
EmberJS
KnockoutJS
Custom Stack
Hybrid Frameworks
Anforderungen an (Web-)App
• Möglichst viel Logik auf dem Client
• Serverzugriff möglichst nur für Daten
• Andere Ansicht soll nicht zu komplettem
Laden der Seite führen
• Gegenläufig zu klassischem HTML
• Kommunikation über AJAX
Single Page Application Frameworks
Single Page Applications
• Nur benötigte Bereiche werden neu geladen
– Ideal für responsive Designs
– Komplexere User-Interfaces
– Weniger Datenverkehr
• Clientseitiges MVC
– NUR Client zuständig für:
• Darstellung
• App-Status
– Klare Strukturen/Kapselung
• Vorgehen wie bei nativer App
SPA Frameworks Vergleich
AngularJS Backbone.js Ember.js Knockout
Dependency Injection X X
Data Binding X X X
RESTful Web Services X X
Promises X X
Localization X X X
Template Engine X X X
Routing X X X
Einfache JS-Objekte X
Benutzerdefiniertes HTML X tlw.
Benutzerdefinierte Events X X X
SPA Frameworks Vergleich
Quelle: Google Trends
AngularJS
BackboneJS
EmberJS
KnockoutJS
Suchanfragen:
Was ist AngularJS
• JavaScript Framework für Single-Page
Applikationen
• MVC/MVVM Framework
– Komponenten basiert
– Bidirektionales Binding
• Entwickelt und verwendet von Google
– Auf Testbarkeit ausgelegt
– Open Source Projekt
AngularJS Aufbau
AngularJS Vorteile
• Vereinfachung von wiederkehrenden
Aufgaben
• Optimiert auf Test- und Wartbarkeit
• Arbeiten mit Komponenten
• Keine JavaScript Abhängigkeiten
• Rich-Client Architektur: Webserver wird nur
zum Bereitstellen von Daten benötigt
Bsp. Codereduzierung
• Ausgabe von:
var hello = "Hallo Welt!";
• „Klassischer“ Ansatz:
<span id=„msg"></span> document.getElementById(„msg“)
.textContent = hello;
• The jQuery way:
<span id=„message"></span> $("#message").text(hello);
• The Angular-way:
<span ng-bind="hello"></span>
AngularJS
Dependency Injection
• Services können über eindeutigen Namen global
registriert werden
• Derselbe Service wird überall im Programm
verwendet („Singleton“)
• Framework stellt bestimmte Services bereit
– $http AJAX requests
– $filter Such und Sortierfunktionen
– $location Navigation zwischen Views
– $q Promise API
– …
AngularJS
Dependency Injection
Deklaration an einer Stelle im Programm:
Verwendung an anderer Stelle:
moduleA.factory('valueConverter', function() {
this.convert = function() { … };
}]);
moduleB.factory('testService', ['valueConverter', function(vc) {
this.abc = function() {
return vc.convert();
}
}]);
AngularJS
Scopes und Events
• Bindeglied zwischen Controller und View
• Definiert Methoden und Properties die in View
bereitstehen
• Setzt Änderungen an Properties in View um
• Erlaubt es Änderungen zu überwachen
• Hierarchisch organisiert
AngularJS
Scopes und Events
$scope.$broadcast(‚event1‘)
$scope.$on(‚event1‘)
$scope.$on(‚event1‘)
$scope.$emit(‚event2‘)
$scope.$on(‚event2‘)
UI Frameworks
UI Frameworks Twitter Bootstrap
Zurp
Ratchet
Topcoat
Ionic
…
Architecture
Frameworks
AngularJS
Custom Stack
Hybrid Frameworks
UI Frameworks
• Responsive CSS3 Frameworks
UI Frameworks
• Mobile optimierte CSS3 Frameworks
Vergleich Mobile UI Frameworks
Framework Android iOS WindowsPhone Blackberry OS
ChocolateChip-UI + + +
KendoUI + + + +
Ratchet + +
Ionic + +
Topcoat + +
PhoneJS + + +
OnsenUI + +
Ionic
• Designed für leichtgewichtige Mobile Apps
– Keine Web Pages
• Built mit LESS
• Basiert auf AngularJS
Hybrid Frameworks
UI Frameworks Ionic
Architecture
Frameworks
AngularJS
Custom Stack
Hybrid Frameworks
Cross Mobile Möglichkeiten
Native Android, iOS,
Windows Phone
Skills wird für jede Plattform und Sprache
benötigt
Cross Compiled AppLause
Mono/Xamarin
Non-UI Code kann wiederverwendet werden
UI muss teilweise neu geschrieben werden
Interpreted Appcelerator
RhoMobile
App wird gegen eigene API entwickelt
Hybrid PhoneGap
Cordova
Web App wird innerhalb eines nativen
Container gehostet
Web Apps Twitter
Bootstrap
Responsiver Aufbau der Website
Kein «Native»-Look&Feel
Vergleich
Phonegap Titanium Mono/Xamarin
Zugriff auf Gerätefunktionen X X X
Natives User Interface ~ X
Programmiersprache JavaScript,
HTML, CSS
JavaScript C#
Plattformen iOS
Android
Blackberry
Windows Phone
Ubuntu Phone
Firefox OS
Tizen
iOS
Android
Blackberry
iOS
Android
Windows Phone
Phonegap Geschichte
• Entwickelt von Nitobi 2009
• Aufgekauft durch Adobe 2011
• Aktuell unter Apache Software Foundation
– Apache Cordova
• Phonegap == Apache Cordova
Phonegap
• Container für Web-Apps
– Startet Webanwendung wie eigene native App
– Icon im Menü
– Keine Internetverbindung nötig
– Zusätzliche Funktionalität wird bereitgestellt
• Genauso als Website einsetzbar
Phonegap Module
• Accelerometer
• Camera
• Compass
• Contacts
• File
• Geolocation
• Media
• Network
• Notifications
• Storage
Phonegap Entwicklungsprozess
• App nur mittels HTML, CSS und JavaScript
erstellen
• Konfiguration mittels XML-Datei
• Wenige spezielle Anpassungen für einzelne
Plattformen vornehmen
• Install-Pakete kompilieren und installieren
– Je nach Plattform unterschiedlich
– Teils abhängig vom Entwicklungs-PC
– Oder…
Phonegap Build
• Online Compiler
• Erstellen von Apps für versch. Plattformen
– Ohne spezielle Hardware
– Entwickler Lizenzen weiterhin benötigt
• „Hydration“
– Neue Version wird online erstellt
– Bei App-Start wird automatisch nach Update
gefragt
Phonegap Beispiele
• Wikipedia
Phonegap Beispiele
• Logitech Squeezebox Controller
Demo
TodoApp mit AngularJS, Ionic
und Phonegap
UI Ionic
Architecture AngularJS
Custom Stack
Phonegap
Fazit
• Soll meine App als Hybrid erstellt werden?
– Nein, wenn bereits in native Technologien
investiert wurde und kein Bedarf vorhanden ist
auf neue mobile Plattformen zu wechseln
– Nein, wenn die App komplex und hoch interaktiv
ist
– Ja, wenn die App einfache Funktionen
unterstützen soll
– Ja, wenn die App mehrere Plattformen
unterstützen soll
Fazit
• Hybrid Ansatz weil,
– Wartungskosten
– Zugang zu Entwicklern
– Time to market
The Future
• Besserer Support für HTML5
• Zunahme von optimierten JS Engines
• Optimiertes Rendering
• Leistungsstärkere Mobilgeräte
• Ease of development
• Cross-Plattform
Fragen?
Vielen Dank für Ihre Aufmerksamkeit

Weitere ähnliche Inhalte

Was ist angesagt?

iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellenMichael Kühnel
 
Mobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache CordovaMobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache Cordova
Yvette Teiken
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
Daniel Fisher
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
Hendrik Lösch
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
Torsten Fink
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
Christian Kaltepoth
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
OPEN KNOWLEDGE GmbH
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
gedoplan
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
gedoplan
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Philipp Burgmer
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
persillie
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
Patric Boscolo
 
Hybrid App Development mit Intel XDK
Hybrid App Development mit Intel XDKHybrid App Development mit Intel XDK
Hybrid App Development mit Intel XDK
Hans Rudolf Tremp
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
gedoplan
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
André Krämer
 
BATbern42 End-to-End Verantwortlichkeit in der Praxis: Scion Workbench
BATbern42 End-to-End Verantwortlichkeit in der Praxis: Scion WorkbenchBATbern42 End-to-End Verantwortlichkeit in der Praxis: Scion Workbench
BATbern42 End-to-End Verantwortlichkeit in der Praxis: Scion Workbench
BATbern
 
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
Andreas Kunz
 
Web-API-Design in Java
Web-API-Design in JavaWeb-API-Design in Java
Web-API-Design in Java
OPEN KNOWLEDGE GmbH
 
User Interface Trends für Geschäftsanwendungen
User Interface Trends für GeschäftsanwendungenUser Interface Trends für Geschäftsanwendungen
User Interface Trends für Geschäftsanwendungen
Stefan von Niederhäusern
 
Das Microsoft AppStudio (beta)
Das Microsoft AppStudio (beta)Das Microsoft AppStudio (beta)
Das Microsoft AppStudio (beta)Peter Nowak
 

Was ist angesagt? (20)

iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
Mobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache CordovaMobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache Cordova
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Hybrid App Development mit Intel XDK
Hybrid App Development mit Intel XDKHybrid App Development mit Intel XDK
Hybrid App Development mit Intel XDK
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
BATbern42 End-to-End Verantwortlichkeit in der Praxis: Scion Workbench
BATbern42 End-to-End Verantwortlichkeit in der Praxis: Scion WorkbenchBATbern42 End-to-End Verantwortlichkeit in der Praxis: Scion Workbench
BATbern42 End-to-End Verantwortlichkeit in der Praxis: Scion Workbench
 
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
 
Web-API-Design in Java
Web-API-Design in JavaWeb-API-Design in Java
Web-API-Design in Java
 
User Interface Trends für Geschäftsanwendungen
User Interface Trends für GeschäftsanwendungenUser Interface Trends für Geschäftsanwendungen
User Interface Trends für Geschäftsanwendungen
 
Das Microsoft AppStudio (beta)
Das Microsoft AppStudio (beta)Das Microsoft AppStudio (beta)
Das Microsoft AppStudio (beta)
 

Andere mochten auch

Creasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft AG
 
Next Generation Java - Ceylon, Kotlin, Scala & Fantom im Überblick
Next Generation Java - Ceylon, Kotlin, Scala & Fantom im ÜberblickNext Generation Java - Ceylon, Kotlin, Scala & Fantom im Überblick
Next Generation Java - Ceylon, Kotlin, Scala & Fantom im Überblick
Benjamin Schmid
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
2009-05 Endurreisn Fyrirlestur
2009-05 Endurreisn Fyrirlestur2009-05 Endurreisn Fyrirlestur
2009-05 Endurreisn Fyrirlestur
Gudjon Mar Gudjonsson
 
06 Weblog in der Schules
06 Weblog in der Schules06 Weblog in der Schules
06 Weblog in der Schules
joness6
 
Ungarische Ökumenische Hiflsorganisation
Ungarische Ökumenische HiflsorganisationUngarische Ökumenische Hiflsorganisation
Ungarische Ökumenische HiflsorganisationRalf buda
 
Museen und Wikis
Museen und WikisMuseen und Wikis
Museen und Wikis
Thomas Tunsch
 
Referencias additu
Referencias addituReferencias additu
Referencias additu
Additu
 
presentación informática
presentación informáticapresentación informática
presentación informática
Carol Menendez Suarez
 
Twitter im Kunst- und Kulturbereich: Sinnvoll oder sinnlos?
Twitter im Kunst- und Kulturbereich: Sinnvoll oder sinnlos?Twitter im Kunst- und Kulturbereich: Sinnvoll oder sinnlos?
Twitter im Kunst- und Kulturbereich: Sinnvoll oder sinnlos?Christian Henner-Fehr
 
Pantallazos
Pantallazos Pantallazos
Pantallazos
Leonel Danesis
 
Süss Nándor emléktábla - német
Süss Nándor emléktábla - németSüss Nándor emléktábla - német
Süss Nándor emléktábla - németmombudapest
 
Tweetups in Museen und Kultureinrichtungen // „Hochkultur im digitalen Zeital...
Tweetups in Museen und Kultureinrichtungen // „Hochkultur im digitalen Zeital...Tweetups in Museen und Kultureinrichtungen // „Hochkultur im digitalen Zeital...
Tweetups in Museen und Kultureinrichtungen // „Hochkultur im digitalen Zeital...
Sybille Greisinger
 
Mobile Anwendungen und ihr Einfluss auf Bibliotheken
Mobile Anwendungen und ihr Einfluss auf BibliothekenMobile Anwendungen und ihr Einfluss auf Bibliotheken
Mobile Anwendungen und ihr Einfluss auf Bibliotheken
Rudolf Mumenthaler
 
El documento 1 sin imagenes ni formas
El documento 1 sin imagenes ni formasEl documento 1 sin imagenes ni formas
El documento 1 sin imagenes ni formas
karenlorena03
 
Sistema respiratorio-gamonal-seminario
Sistema respiratorio-gamonal-seminarioSistema respiratorio-gamonal-seminario
Sistema respiratorio-gamonal-seminario
Meell Rojas Altamirano
 
Taller de reciclaje
Taller de reciclajeTaller de reciclaje
Taller de reciclaje
Junior Acuña
 
Dokumentation digitaler Sammlungen. Sammlungsidentifizierung (Deutsches Museu...
Dokumentation digitaler Sammlungen. Sammlungsidentifizierung (Deutsches Museu...Dokumentation digitaler Sammlungen. Sammlungsidentifizierung (Deutsches Museu...
Dokumentation digitaler Sammlungen. Sammlungsidentifizierung (Deutsches Museu...
giulianadefrancesco
 
LA ROBOTICA
LA ROBOTICALA ROBOTICA
LA ROBOTICA
josue moposita
 

Andere mochten auch (20)

Creasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVC
 
Next Generation Java - Ceylon, Kotlin, Scala & Fantom im Überblick
Next Generation Java - Ceylon, Kotlin, Scala & Fantom im ÜberblickNext Generation Java - Ceylon, Kotlin, Scala & Fantom im Überblick
Next Generation Java - Ceylon, Kotlin, Scala & Fantom im Überblick
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Seline J. DOS
Seline J. DOSSeline J. DOS
Seline J. DOS
 
2009-05 Endurreisn Fyrirlestur
2009-05 Endurreisn Fyrirlestur2009-05 Endurreisn Fyrirlestur
2009-05 Endurreisn Fyrirlestur
 
06 Weblog in der Schules
06 Weblog in der Schules06 Weblog in der Schules
06 Weblog in der Schules
 
Ungarische Ökumenische Hiflsorganisation
Ungarische Ökumenische HiflsorganisationUngarische Ökumenische Hiflsorganisation
Ungarische Ökumenische Hiflsorganisation
 
Museen und Wikis
Museen und WikisMuseen und Wikis
Museen und Wikis
 
Referencias additu
Referencias addituReferencias additu
Referencias additu
 
presentación informática
presentación informáticapresentación informática
presentación informática
 
Twitter im Kunst- und Kulturbereich: Sinnvoll oder sinnlos?
Twitter im Kunst- und Kulturbereich: Sinnvoll oder sinnlos?Twitter im Kunst- und Kulturbereich: Sinnvoll oder sinnlos?
Twitter im Kunst- und Kulturbereich: Sinnvoll oder sinnlos?
 
Pantallazos
Pantallazos Pantallazos
Pantallazos
 
Süss Nándor emléktábla - német
Süss Nándor emléktábla - németSüss Nándor emléktábla - német
Süss Nándor emléktábla - német
 
Tweetups in Museen und Kultureinrichtungen // „Hochkultur im digitalen Zeital...
Tweetups in Museen und Kultureinrichtungen // „Hochkultur im digitalen Zeital...Tweetups in Museen und Kultureinrichtungen // „Hochkultur im digitalen Zeital...
Tweetups in Museen und Kultureinrichtungen // „Hochkultur im digitalen Zeital...
 
Mobile Anwendungen und ihr Einfluss auf Bibliotheken
Mobile Anwendungen und ihr Einfluss auf BibliothekenMobile Anwendungen und ihr Einfluss auf Bibliotheken
Mobile Anwendungen und ihr Einfluss auf Bibliotheken
 
El documento 1 sin imagenes ni formas
El documento 1 sin imagenes ni formasEl documento 1 sin imagenes ni formas
El documento 1 sin imagenes ni formas
 
Sistema respiratorio-gamonal-seminario
Sistema respiratorio-gamonal-seminarioSistema respiratorio-gamonal-seminario
Sistema respiratorio-gamonal-seminario
 
Taller de reciclaje
Taller de reciclajeTaller de reciclaje
Taller de reciclaje
 
Dokumentation digitaler Sammlungen. Sammlungsidentifizierung (Deutsches Museu...
Dokumentation digitaler Sammlungen. Sammlungsidentifizierung (Deutsches Museu...Dokumentation digitaler Sammlungen. Sammlungsidentifizierung (Deutsches Museu...
Dokumentation digitaler Sammlungen. Sammlungsidentifizierung (Deutsches Museu...
 
LA ROBOTICA
LA ROBOTICALA ROBOTICA
LA ROBOTICA
 

Ähnlich wie Creasoft-Akademie - Mobile Multiplattform Apps

We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT Group
 
AngularJs
AngularJsAngularJs
AngularJs
NETUserGroupBern
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Jens Küsters
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
Peter Hecker
 
Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
Digicomp Academy AG
 
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenAnsätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
CrowdArchitects GmbH
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
Hendrik Lösch
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
QAware GmbH
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro sessionVirttoo org
 
Was ist eigentlich SharePoint
Was ist eigentlich SharePointWas ist eigentlich SharePoint
Was ist eigentlich SharePoint
Max Nowack
 
SharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-TrackSharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-Track
Unic
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerSandro Sonntag
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Peter Hecker
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
die.agilen GmbH
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Björn Wilmsmann
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
Digicomp Academy AG
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
adesso AG
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
 

Ähnlich wie Creasoft-Akademie - Mobile Multiplattform Apps (20)

We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
AngularJs
AngularJsAngularJs
AngularJs
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
 
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenAnsätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
 
Was ist eigentlich SharePoint
Was ist eigentlich SharePointWas ist eigentlich SharePoint
Was ist eigentlich SharePoint
 
SharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-TrackSharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-Track
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 

Mehr von Creasoft AG

Creasoft Akademie - Diszipliniertes Anforderungsmanagement in agilen Projekten
Creasoft Akademie - Diszipliniertes Anforderungsmanagement in agilen ProjektenCreasoft Akademie - Diszipliniertes Anforderungsmanagement in agilen Projekten
Creasoft Akademie - Diszipliniertes Anforderungsmanagement in agilen Projekten
Creasoft AG
 
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft AG
 
Creasoft c-Day 2011 - Exploratives Testen
Creasoft c-Day 2011 - Exploratives TestenCreasoft c-Day 2011 - Exploratives Testen
Creasoft c-Day 2011 - Exploratives TestenCreasoft AG
 
Creasoft - Einführung Windows Communication Foundation
Creasoft - Einführung Windows Communication FoundationCreasoft - Einführung Windows Communication Foundation
Creasoft - Einführung Windows Communication FoundationCreasoft AG
 
Creasoft - Software QS
Creasoft - Software QSCreasoft - Software QS
Creasoft - Software QSCreasoft AG
 
Creasoft - Software QS Review
Creasoft - Software QS ReviewCreasoft - Software QS Review
Creasoft - Software QS ReviewCreasoft AG
 
Creasoft - Windows powershell
Creasoft - Windows powershellCreasoft - Windows powershell
Creasoft - Windows powershellCreasoft AG
 
Creasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft AG
 

Mehr von Creasoft AG (8)

Creasoft Akademie - Diszipliniertes Anforderungsmanagement in agilen Projekten
Creasoft Akademie - Diszipliniertes Anforderungsmanagement in agilen ProjektenCreasoft Akademie - Diszipliniertes Anforderungsmanagement in agilen Projekten
Creasoft Akademie - Diszipliniertes Anforderungsmanagement in agilen Projekten
 
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus Entwicklersicht
 
Creasoft c-Day 2011 - Exploratives Testen
Creasoft c-Day 2011 - Exploratives TestenCreasoft c-Day 2011 - Exploratives Testen
Creasoft c-Day 2011 - Exploratives Testen
 
Creasoft - Einführung Windows Communication Foundation
Creasoft - Einführung Windows Communication FoundationCreasoft - Einführung Windows Communication Foundation
Creasoft - Einführung Windows Communication Foundation
 
Creasoft - Software QS
Creasoft - Software QSCreasoft - Software QS
Creasoft - Software QS
 
Creasoft - Software QS Review
Creasoft - Software QS ReviewCreasoft - Software QS Review
Creasoft - Software QS Review
 
Creasoft - Windows powershell
Creasoft - Windows powershellCreasoft - Windows powershell
Creasoft - Windows powershell
 
Creasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVC
 

Creasoft-Akademie - Mobile Multiplattform Apps

  • 2. Mark Zuckerberg: Our Biggest Mistake Was Betting Too Much On HTML5 http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was- betting-too-much-on-html5/
  • 4. Ablauf • Einführung Apps • Architecture Frameworks • UI Frameworks • Hybrid Frameworks • Demo • Fazit und Ausblick
  • 5. Was Analysten sagen • Gartner -> bis 2015 Grossteil aller Enterprise Apps werden als Hybrid entwickelt http://www.gartner.com/newsroom/id/2429815 0% 20% 40% 60% 80% 100% Consumer Enterprise Web Hybrid Native
  • 6. Möglichkeiten eine App zu erstellen NativeApplication • Voller Zugriff auf Geräte API • Programmiersprachen • Java • Objective-C • C# WebApplication • Eine Codebasis • Zugriff auf Hardware nur durch HTML5 Browserunterstützung (GPS, Camera) • Programmiersprachen • HTML5 • JavaScript • CSS 3 HybridApplication • JS-Native Communication • App in einem Container verpackt • Programmiersprachen • HTML5 • JavaScript • CSS3
  • 7. Hybrid Application? • Entwickelt mit HTML5; in einen nativen Container gewrapt • Keine plattformspezifischen Sprachen wie Objective-C oder Java • Kann über einen AppStore vertrieben werden • Möglichkeit zum Zugriff auf native Komponenten (Kamera, Mikrofon, Kontakte oder Notification System)
  • 8. Pro & Contra - Native App + Bessere Performance + Flüssigere Animationen, Übergänge und schnellere Startzeit + Kann mehr Daten offline speichern + Voller Zugriff auf Hardware und OS Features  Keine gemeinsame Codebasis  Unterschiedliche API und Programmiersprachen für Zielplattform  App Updates müssen jedes Mal den Approval-Prozess neu durchlaufen
  • 9. Pro & Contra - Web App + Eine Codebasis, welche von jedem browserbasierten Mobilgerät aufgerufen werden kann + Performance Problem werden immer mehr minimiert, da Mobilegeräte und Javascript Engines schneller werden + Kein Approval-Prozess benötigt; Apps können sofort geupdatet werden  Interpretierter Code  Kein voller Zugriff auf alle gerätespezifischen Möglichkeiten  Nicht im AppStore auffindbar
  • 10. Pro & Contra - Hybrid App + App kann über die bedeutenden AppStores vertrieben werden + Eine Codebasis für alle unterstützten Plattformen + Zugang über die API auf einige, oder sogar alle gerätespezifischen Features, welche über den Browser nicht aufrufbar sind  Abhängig vom Store Approval-Prozess  App Performance abhängig durch die Browsercontrol- Leistungsfähigkeit des Mobilgeräts
  • 11. Users don’t care if it’s native or web as long as the app is fast and responsive Kristofer Joseph, Javascript Frameworks Lead, Adobe
  • 12. Consider a Framework UI Dojo Toolkit jQuery mobile Sencha Touch KendoUI Twitter Bootstrap Zurp Ratchet Topcoat Ionic … Architecture Backbone.JS AngularJS EmberJS KnockoutJS Full Stack Custom Stack Hybrid Framework
  • 13. Architecture Frameworks UI Frameworks Twitter Bootstrap Zurp Ratchet Topcoat Ionic … Architecture Frameworks Backbone.JS AngularJS EmberJS KnockoutJS Custom Stack Hybrid Frameworks
  • 14. Anforderungen an (Web-)App • Möglichst viel Logik auf dem Client • Serverzugriff möglichst nur für Daten • Andere Ansicht soll nicht zu komplettem Laden der Seite führen • Gegenläufig zu klassischem HTML • Kommunikation über AJAX Single Page Application Frameworks
  • 15. Single Page Applications • Nur benötigte Bereiche werden neu geladen – Ideal für responsive Designs – Komplexere User-Interfaces – Weniger Datenverkehr • Clientseitiges MVC – NUR Client zuständig für: • Darstellung • App-Status – Klare Strukturen/Kapselung • Vorgehen wie bei nativer App
  • 16. SPA Frameworks Vergleich AngularJS Backbone.js Ember.js Knockout Dependency Injection X X Data Binding X X X RESTful Web Services X X Promises X X Localization X X X Template Engine X X X Routing X X X Einfache JS-Objekte X Benutzerdefiniertes HTML X tlw. Benutzerdefinierte Events X X X
  • 17. SPA Frameworks Vergleich Quelle: Google Trends AngularJS BackboneJS EmberJS KnockoutJS Suchanfragen:
  • 18. Was ist AngularJS • JavaScript Framework für Single-Page Applikationen • MVC/MVVM Framework – Komponenten basiert – Bidirektionales Binding • Entwickelt und verwendet von Google – Auf Testbarkeit ausgelegt – Open Source Projekt
  • 20. AngularJS Vorteile • Vereinfachung von wiederkehrenden Aufgaben • Optimiert auf Test- und Wartbarkeit • Arbeiten mit Komponenten • Keine JavaScript Abhängigkeiten • Rich-Client Architektur: Webserver wird nur zum Bereitstellen von Daten benötigt
  • 21. Bsp. Codereduzierung • Ausgabe von: var hello = "Hallo Welt!"; • „Klassischer“ Ansatz: <span id=„msg"></span> document.getElementById(„msg“) .textContent = hello; • The jQuery way: <span id=„message"></span> $("#message").text(hello); • The Angular-way: <span ng-bind="hello"></span>
  • 22. AngularJS Dependency Injection • Services können über eindeutigen Namen global registriert werden • Derselbe Service wird überall im Programm verwendet („Singleton“) • Framework stellt bestimmte Services bereit – $http AJAX requests – $filter Such und Sortierfunktionen – $location Navigation zwischen Views – $q Promise API – …
  • 23. AngularJS Dependency Injection Deklaration an einer Stelle im Programm: Verwendung an anderer Stelle: moduleA.factory('valueConverter', function() { this.convert = function() { … }; }]); moduleB.factory('testService', ['valueConverter', function(vc) { this.abc = function() { return vc.convert(); } }]);
  • 24. AngularJS Scopes und Events • Bindeglied zwischen Controller und View • Definiert Methoden und Properties die in View bereitstehen • Setzt Änderungen an Properties in View um • Erlaubt es Änderungen zu überwachen • Hierarchisch organisiert
  • 26. UI Frameworks UI Frameworks Twitter Bootstrap Zurp Ratchet Topcoat Ionic … Architecture Frameworks AngularJS Custom Stack Hybrid Frameworks
  • 27. UI Frameworks • Responsive CSS3 Frameworks
  • 28. UI Frameworks • Mobile optimierte CSS3 Frameworks
  • 29. Vergleich Mobile UI Frameworks Framework Android iOS WindowsPhone Blackberry OS ChocolateChip-UI + + + KendoUI + + + + Ratchet + + Ionic + + Topcoat + + PhoneJS + + + OnsenUI + +
  • 30. Ionic • Designed für leichtgewichtige Mobile Apps – Keine Web Pages • Built mit LESS • Basiert auf AngularJS
  • 31. Hybrid Frameworks UI Frameworks Ionic Architecture Frameworks AngularJS Custom Stack Hybrid Frameworks
  • 32. Cross Mobile Möglichkeiten Native Android, iOS, Windows Phone Skills wird für jede Plattform und Sprache benötigt Cross Compiled AppLause Mono/Xamarin Non-UI Code kann wiederverwendet werden UI muss teilweise neu geschrieben werden Interpreted Appcelerator RhoMobile App wird gegen eigene API entwickelt Hybrid PhoneGap Cordova Web App wird innerhalb eines nativen Container gehostet Web Apps Twitter Bootstrap Responsiver Aufbau der Website Kein «Native»-Look&Feel
  • 33. Vergleich Phonegap Titanium Mono/Xamarin Zugriff auf Gerätefunktionen X X X Natives User Interface ~ X Programmiersprache JavaScript, HTML, CSS JavaScript C# Plattformen iOS Android Blackberry Windows Phone Ubuntu Phone Firefox OS Tizen iOS Android Blackberry iOS Android Windows Phone
  • 34. Phonegap Geschichte • Entwickelt von Nitobi 2009 • Aufgekauft durch Adobe 2011 • Aktuell unter Apache Software Foundation – Apache Cordova • Phonegap == Apache Cordova
  • 35. Phonegap • Container für Web-Apps – Startet Webanwendung wie eigene native App – Icon im Menü – Keine Internetverbindung nötig – Zusätzliche Funktionalität wird bereitgestellt • Genauso als Website einsetzbar
  • 36. Phonegap Module • Accelerometer • Camera • Compass • Contacts • File • Geolocation • Media • Network • Notifications • Storage
  • 37. Phonegap Entwicklungsprozess • App nur mittels HTML, CSS und JavaScript erstellen • Konfiguration mittels XML-Datei • Wenige spezielle Anpassungen für einzelne Plattformen vornehmen • Install-Pakete kompilieren und installieren – Je nach Plattform unterschiedlich – Teils abhängig vom Entwicklungs-PC – Oder…
  • 38. Phonegap Build • Online Compiler • Erstellen von Apps für versch. Plattformen – Ohne spezielle Hardware – Entwickler Lizenzen weiterhin benötigt • „Hydration“ – Neue Version wird online erstellt – Bei App-Start wird automatisch nach Update gefragt
  • 40. Phonegap Beispiele • Logitech Squeezebox Controller
  • 41. Demo TodoApp mit AngularJS, Ionic und Phonegap UI Ionic Architecture AngularJS Custom Stack Phonegap
  • 42. Fazit • Soll meine App als Hybrid erstellt werden? – Nein, wenn bereits in native Technologien investiert wurde und kein Bedarf vorhanden ist auf neue mobile Plattformen zu wechseln – Nein, wenn die App komplex und hoch interaktiv ist – Ja, wenn die App einfache Funktionen unterstützen soll – Ja, wenn die App mehrere Plattformen unterstützen soll
  • 43. Fazit • Hybrid Ansatz weil, – Wartungskosten – Zugang zu Entwicklern – Time to market
  • 44. The Future • Besserer Support für HTML5 • Zunahme von optimierten JS Engines • Optimiertes Rendering • Leistungsstärkere Mobilgeräte • Ease of development • Cross-Plattform
  • 45. Fragen? Vielen Dank für Ihre Aufmerksamkeit