Vortrag vom Webmontag Gießen am 22.02.2016

1. Hybride Entwicklung mit Ionic
Lukas Rosenstock
Webmontag Gießen
22.02.2016

2. Wie erreiche ich den Kunden mobil?
● Webseite/Webapp
– Aufruf im Browser via
Suche, URL oder
Bookmark
● Native App
– Installation über App
Store der jeweiligen
Plattform

3. Webseite/Webapp
● Nutzung des bekannten Webentwickler-
Stacks (HTML, CSS und Javascript, ggf.
jQuery,Angular …); responsive oder „m-
dot“
● „Open Web“ ohne ggf. kostenpfichtigen
Gatekeeper
● 100% cross-plattform (auch Exoten!)
● Web-Technologie und
Browserfähigkeiten werden stetig besser

4. Webseite/Webapp
● Kein voller Zugriff auf Fähigkeiten des
Smartphones und des Betriebssystems
● Keine Präsenz auf Homescreen
● Keine Präsenz in App Stores
● Kein einfach verfügbares Zahlungssystem

5. Native App
● Voller Zugriff auf Fähigkeiten des
Smartphones und des Betriebssystems
● Präsenz auf Homescreen und App Store
● Höhere Performance bei der Ausführung
● In-App-Purchase / In-App-Billing

6. Native App
● Eigener Entwickler-Stack
(Programmiersprache, SDK,Tooling) für
jedes System
– Java für Android
– Swift/Objective-C für iOS
– C# für Windows Phone

7. Warum nicht beides kombinieren?

8. Hybride App
Nativer iOS Container
Webview
Webapp
(HTML, CSS
& Javascript)
Nativer Android
Container
Webview
Native KomponentenNative Komponenten

9. PhoneGap/Cordova
Adobe Phonegap
ist eine Distribution von
Apache Cordova

10. PhoneGap/Cordova
Nativer iOS Container
Webview
Webapp
(HTML, CSS
& Javascript)
Nativer Android
Container
Webview
Native KomponentenNative Komponenten

11. Frage:
Wie erstelle ich mein HTML
damit es sich wirklich nach
App anfühlt?

12. Ionic Framework
Nativer iOS Container
Webview
Webapp
(HTML, CSS
& Javascript)
Nativer Android
Container
Webview
Native KomponentenNative Komponenten

13. Ionic Framework
● Native-lookalike CSS
Komponenten
– Buttons, Formulare,
Header, Listen etc.
– Grid-System
● AngularJS-Komponenten
– Tabs, Popups, Menüs,
Navigation etc.
● Templates undTooling
(CLI) für Buildprozess
mit Cordova
● Ionicons (Icon-Font)

14. WelcheVersion?
● Ionic 1.* ↔ Angular 1.*
– z.Z. weiter gepfegt
● Ionic 2.0 beta ↔ Angular 2.0 beta
– Breaking Change
– Cutting Edge!
– 1. Ionic-Release: 10.2.16 (stable im Sommer?!)
● besseres Material Design für Android
● ES6 +TypeScript

15. Empfehlungen
● Ionic 1.*
– für kurzfristigen
produktiven Einsatz (2-5
Monate bis Release),
wenn bereits Angular-
Erfahrung vorhanden
● Angular: Upgrade-
Unterstützung und
„mix&match“ ab 1.5
● Ionic 2.0
– für Neueinsteiger zum
experimentieren, für
langfristige Projekte
http://www.gajotres.net/should-you-upgrade-to-ionic-2/

16. Ionic (ver. 1.*) CSS-Beispiel: Header

17. Ionic CSS-Beispiel: Listen

18. Ionic JS-Beispiel:Action Sheet

19. Wer steht hinter Ionic?
● Drifty Co. → Ionic
– TechStars Incubator '13
– VC Funding $1 mio '14,
$2.6 mio '15
● Open Source
Framework
– MIT-Lizenz

20. Ionic Creator
– visuelles Web-Werkzeug

21. ionic.io Services
derzeit kostenlos im Alpha-Stadium
● Ionic User
– User-Management
● Noch sehr rudimentär!
● Ionic Push
– Versand von Push
Notifications
● IonicView, Deploy &
Package
● Ionic Analytics
– Event-Tracking

22. Ionic Deploy,View & Package
Ionic
Deploy
Ionic
View
Ionic
Package
$ ionic upload

23. IonicView
● 'IonicView' im App
Store / Google Play
downloadbar
● Test in App-Umgebung
ohne Build-Prozess
– Verhalten != Browser

24. Ionic Package
● Gehosteter Build-Server
– Kein lokales Android SDK bzw. Xcode notwendig → iOS-
Builds für nicht-Mac-Nutzer
● Alternative:Adobe PhoneGap Build

25. Ionic Deploy
● Automatisch oder
kontrolliert aktualisieren
● Verschiedene Channels
definierbar ('prod', 'beta',
'dev' etc.)

26. Fazit
● Nativ ist am besten (wenn Resourcen vorhanden!) –
Ionic ist gute Alternative
– Gatekeeper? → Browser-Fallback verfügbar!
● Ionic 1 ist gut, Ionic 2 wird besser
● Services interessant (Preismodell?!) aber noch im
frühen Stadium