Downloaden Sie, um offline zu lesen
Hochgeladen vonLukas Leander Rosenstock
Hybride Entwicklung mit Ionic
Das Dokument behandelt die hybride Entwicklung von Apps mit dem Ionic-Framework, das die Nutzung von Webtechnologien ermöglicht und dabei die Funktionen nativer Apps integriert. Es werden Vor- und Nachteile von Webseiten/Webapps gegenüber nativen Apps sowie die Funktionen und Versionen des Ionic-Frameworks (einschließlich der Unterschiede zwischen Ionic 1 und 2) beschrieben. Abschließend wird die Nutzen von Ionic als Alternative zu nativen Apps hervorgehoben, insbesondere wenn Ressourcen begrenzt sind.
Hybride Entwicklung mit Ionic
- 1. Hybride Entwicklung mitIonic Lukas Rosenstock Webmontag Gießen 22.02.2016
- 2. Wie erreiche ichden 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 desbekannten 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 vollerZugriff 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 ● VollerZugriff 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 ● EigenerEntwickler-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 beideskombinieren?
- 8. Hybride App Nativer iOSContainer Webview Webapp (HTML, CSS & Javascript) Nativer Android Container Webview Native KomponentenNative Komponenten
- 9. PhoneGap/Cordova Adobe Phonegap ist eineDistribution 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 ichmein HTML damit es sich wirklich nach App anfühlt?
- 12. Ionic Framework Nativer iOSContainer Webview Webapp (HTML, CSS & Javascript) Nativer Android Container Webview Native KomponentenNative Komponenten
- 13. Ionic Framework ● Native-lookalikeCSS 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.
- 18.
- 19. Wer steht hinterIonic? ● Drifty Co. → Ionic – TechStars Incubator '13 – VC Funding $1 mio '14, $2.6 mio '15 ● Open Source Framework – MIT-Lizenz
- 20. Ionic Creator – visuellesWeb-Werkzeug
- 21. ionic.io Services derzeit kostenlosim 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' imApp Store / Google Play downloadbar ● Test in App-Umgebung ohne Build-Prozess – Verhalten != Browser
- 24. Ionic Package ● GehosteterBuild-Server – Kein lokales Android SDK bzw. Xcode notwendig → iOS- Builds für nicht-Mac-Nutzer ● Alternative:Adobe PhoneGap Build
- 25. Ionic Deploy ● Automatischoder kontrolliert aktualisieren ● Verschiedene Channels definierbar ('prod', 'beta', 'dev' etc.)
- 26. Fazit ● Nativ istam 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