Hybride Entwicklung mit Ionic
Lukas RosenstockWebmontag Gießen
22.02.2016
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
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
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
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
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
Warum nicht beides kombinieren?
Hybride App
Nativer iOS Container
Webview
Webapp
(HTML, CSS& Javascript)
Nativer AndroidContainer
Webview
Native KomponentenNative Komponenten
PhoneGap/Cordova
Adobe Phonegapist eine Distribution von
Apache Cordova
PhoneGap/Cordova
Nativer iOS Container
Webview
Webapp
(HTML, CSS& Javascript)
Nativer AndroidContainer
Webview
Native KomponentenNative Komponenten
Frage:Wie erstelle ich mein HTML damit es sich wirklich nach
App anfühlt?
Ionic Framework
Nativer iOS Container
Webview
Webapp
(HTML, CSS& Javascript)
Nativer AndroidContainer
Webview
Native KomponentenNative Komponenten
Ionic Framework
● Native-lookalike CSS Komponenten– Buttons, Formulare,
Header, Listen etc.
– Grid-System
● AngularJS-Komponenten– Tabs, Popups, Menüs,
Navigation etc.
● Templates und Tooling (CLI) für Buildprozess mit Cordova
● Ionicons (Icon-Font)
Welche Version?
● 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
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/
Ionic (ver. 1.*) CSS-Beispiel: Header
Ionic CSS-Beispiel: Listen
Ionic JS-Beispiel: Action Sheet
Wer steht hinter Ionic?
● Drifty Co. → Ionic– TechStars Incubator '13
– VC Funding $1 mio '14, $2.6 mio '15
● Open Source Framework– MIT-Lizenz
Ionic Creator– visuelles Web-Werkzeug
ionic.io Servicesderzeit kostenlos im Alpha-Stadium
● Ionic User– User-Management
● Noch sehr rudimentär!
● Ionic Push– Versand von Push
Notifications
● Ionic View, Deploy & Package
● Ionic Analytics– Event-Tracking
Ionic Deploy, View & Package
IonicDeploy
IonicView
IonicPackage
$ ionic upload
Ionic View
● 'Ionic View' im App Store / Google Play downloadbar
● Test in App-Umgebung ohne Build-Prozess– Verhalten != Browser
Ionic Package
● Gehosteter Build-Server– Kein lokales Android SDK bzw. Xcode notwendig → iOS-
Builds für nicht-Mac-Nutzer
● Alternative: Adobe PhoneGap Build
Ionic Deploy
● Automatisch oder kontrolliert aktualisieren
● Verschiedene Channels definierbar ('prod', 'beta', 'dev' etc.)
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