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