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-bi...
Antwort Fastbook
• http://fb.html5isready.com/
http://vimeo.com/55486684
http://www.sencha.com/blog/the-making-of-fastbook...
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....
Möglichkeiten eine App zu
erstellen
NativeApplication
• Voller Zugriff auf
Geräte API
• Programmiersprachen
• Java
• Objec...
Hybrid Application?
• Entwickelt mit HTML5; in einen nativen
Container gewrapt
• Keine plattformspezifischen Sprachen wie
...
Pro & Contra - Native App
+ Bessere Performance
+ Flüssigere
Animationen,
Übergänge und
schnellere Startzeit
+ Kann mehr D...
Pro & Contra - Web App
+ Eine Codebasis, welche von
jedem browserbasierten
Mobilgerät aufgerufen
werden kann
+ Performance...
Pro & Contra - Hybrid App
+ App kann über die
bedeutenden AppStores
vertrieben werden
+ Eine Codebasis für alle
unterstütz...
Users don’t care if it’s native or
web as long as the app is fast and
responsive
Kristofer Joseph, Javascript
Frameworks L...
Consider a Framework
UI
Dojo Toolkit
jQuery mobile
Sencha Touch
KendoUI
Twitter Bootstrap
Zurp
Ratchet
Topcoat
Ionic
…
Arc...
Architecture Frameworks
UI Frameworks Twitter Bootstrap
Zurp
Ratchet
Topcoat
Ionic
…
Architecture
Frameworks
Backbone.JS
A...
Anforderungen an (Web-)App
• Möglichst viel Logik auf dem Client
• Serverzugriff möglichst nur für Daten
• Andere Ansicht ...
Single Page Applications
• Nur benötigte Bereiche werden neu geladen
– Ideal für responsive Designs
– Komplexere User-Inte...
SPA Frameworks Vergleich
AngularJS Backbone.js Ember.js Knockout
Dependency Injection X X
Data Binding X X X
RESTful Web S...
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
– Bidire...
AngularJS Aufbau
AngularJS Vorteile
• Vereinfachung von wiederkehrenden
Aufgaben
• Optimiert auf Test- und Wartbarkeit
• Arbeiten mit Kompo...
Bsp. Codereduzierung
• Ausgabe von:
var hello = "Hallo Welt!";
• „Klassischer“ Ansatz:
<span id=„msg"></span> document.get...
AngularJS
Dependency Injection
• Services können über eindeutigen Namen global
registriert werden
• Derselbe Service wird ...
AngularJS
Dependency Injection
Deklaration an einer Stelle im Programm:
Verwendung an anderer Stelle:
moduleA.factory('val...
AngularJS
Scopes und Events
• Bindeglied zwischen Controller und View
• Definiert Methoden und Properties die in View
bere...
AngularJS
Scopes und Events
$scope.$broadcast(‚event1‘)
$scope.$on(‚event1‘)
$scope.$on(‚event1‘)
$scope.$emit(‚event2‘)
$...
UI Frameworks
UI Frameworks Twitter Bootstrap
Zurp
Ratchet
Topcoat
Ionic
…
Architecture
Frameworks
AngularJS
Custom Stack
...
UI Frameworks
• Responsive CSS3 Frameworks
UI Frameworks
• Mobile optimierte CSS3 Frameworks
Vergleich Mobile UI Frameworks
Framework Android iOS WindowsPhone Blackberry OS
ChocolateChip-UI + + +
KendoUI + + + +
Rat...
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 Co...
Vergleich
Phonegap Titanium Mono/Xamarin
Zugriff auf Gerätefunktionen X X X
Natives User Interface ~ X
Programmiersprache ...
Phonegap Geschichte
• Entwickelt von Nitobi 2009
• Aufgekauft durch Adobe 2011
• Aktuell unter Apache Software Foundation
...
Phonegap
• Container für Web-Apps
– Startet Webanwendung wie eigene native App
– Icon im Menü
– Keine Internetverbindung n...
Phonegap Module
• Accelerometer
• Camera
• Compass
• Contacts
• File
• Geolocation
• Media
• Network
• Notifications
• Sto...
Phonegap Entwicklungsprozess
• App nur mittels HTML, CSS und JavaScript
erstellen
• Konfiguration mittels XML-Datei
• Weni...
Phonegap Build
• Online Compiler
• Erstellen von Apps für versch. Plattformen
– Ohne spezielle Hardware
– Entwickler Lizen...
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 B...
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 M...
Fragen?
Vielen Dank für Ihre Aufmerksamkeit
Nächste SlideShare
Wird geladen in …5
×

Creasoft-Akademie - Mobile Multiplattform Apps

1.128 Aufrufe

Veröffentlicht am

Hybride Mobilapplikationen können eine Alternative zur Nativen Entwicklung auf mehreren Plattformen sein.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.128
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
290
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Creasoft-Akademie - Mobile Multiplattform Apps

  1. 1. Mobile Multiplattform-Apps 5. c-Akademie
  2. 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/
  3. 3. Antwort Fastbook • http://fb.html5isready.com/ http://vimeo.com/55486684 http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
  4. 4. Ablauf • Einführung Apps • Architecture Frameworks • UI Frameworks • Hybrid Frameworks • Demo • Fazit und Ausblick
  5. 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. 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. 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. 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. 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. 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. 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. 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. 13. Architecture Frameworks UI Frameworks Twitter Bootstrap Zurp Ratchet Topcoat Ionic … Architecture Frameworks Backbone.JS AngularJS EmberJS KnockoutJS Custom Stack Hybrid Frameworks
  14. 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. 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. 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. 17. SPA Frameworks Vergleich Quelle: Google Trends AngularJS BackboneJS EmberJS KnockoutJS Suchanfragen:
  18. 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
  19. 19. AngularJS Aufbau
  20. 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. 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. 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. 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. 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
  25. 25. AngularJS Scopes und Events $scope.$broadcast(‚event1‘) $scope.$on(‚event1‘) $scope.$on(‚event1‘) $scope.$emit(‚event2‘) $scope.$on(‚event2‘)
  26. 26. UI Frameworks UI Frameworks Twitter Bootstrap Zurp Ratchet Topcoat Ionic … Architecture Frameworks AngularJS Custom Stack Hybrid Frameworks
  27. 27. UI Frameworks • Responsive CSS3 Frameworks
  28. 28. UI Frameworks • Mobile optimierte CSS3 Frameworks
  29. 29. Vergleich Mobile UI Frameworks Framework Android iOS WindowsPhone Blackberry OS ChocolateChip-UI + + + KendoUI + + + + Ratchet + + Ionic + + Topcoat + + PhoneJS + + + OnsenUI + +
  30. 30. Ionic • Designed für leichtgewichtige Mobile Apps – Keine Web Pages • Built mit LESS • Basiert auf AngularJS
  31. 31. Hybrid Frameworks UI Frameworks Ionic Architecture Frameworks AngularJS Custom Stack Hybrid Frameworks
  32. 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. 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. 34. Phonegap Geschichte • Entwickelt von Nitobi 2009 • Aufgekauft durch Adobe 2011 • Aktuell unter Apache Software Foundation – Apache Cordova • Phonegap == Apache Cordova
  35. 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. 36. Phonegap Module • Accelerometer • Camera • Compass • Contacts • File • Geolocation • Media • Network • Notifications • Storage
  37. 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. 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
  39. 39. Phonegap Beispiele • Wikipedia
  40. 40. Phonegap Beispiele • Logitech Squeezebox Controller
  41. 41. Demo TodoApp mit AngularJS, Ionic und Phonegap UI Ionic Architecture AngularJS Custom Stack Phonegap
  42. 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. 43. Fazit • Hybrid Ansatz weil, – Wartungskosten – Zugang zu Entwicklern – Time to market
  44. 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. 45. Fragen? Vielen Dank für Ihre Aufmerksamkeit

×