SlideShare ist ein Scribd-Unternehmen logo
Hybride Entwicklung mit Ionic
Lukas Rosenstock
Webmontag 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 Android
Container
Webview
Native KomponentenNative Komponenten
PhoneGap/Cordova
Adobe Phonegap
ist eine Distribution von
Apache Cordova
PhoneGap/Cordova
Nativer iOS Container
Webview
Webapp
(HTML, CSS
& Javascript)
Nativer Android
Container
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 Android
Container
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 undTooling
(CLI) für Buildprozess
mit Cordova
● Ionicons (Icon-Font)
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
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 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
Ionic Deploy,View & Package
Ionic
Deploy
Ionic
View
Ionic
Package
$ ionic upload
IonicView
● 'IonicView' 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

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (16)

Hi mary
Hi maryHi mary
Hi mary
 
Menú basal escoles setembre
Menú basal escoles setembreMenú basal escoles setembre
Menú basal escoles setembre
 
Fall 2016 OPT Presentation
Fall 2016 OPT PresentationFall 2016 OPT Presentation
Fall 2016 OPT Presentation
 
How do we use our senses?
 How do we use our senses? How do we use our senses?
How do we use our senses?
 
Practical training general for career services
Practical training general for career servicesPractical training general for career services
Practical training general for career services
 
Webmontag MD.H mySherpas Ignite-Format
Webmontag MD.H mySherpas Ignite-FormatWebmontag MD.H mySherpas Ignite-Format
Webmontag MD.H mySherpas Ignite-Format
 
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)
 
Ccb09 - Comunity Camp 09 - Slides von Sebastian Bluhm
Ccb09 - Comunity Camp 09 - Slides von Sebastian BluhmCcb09 - Comunity Camp 09 - Slides von Sebastian Bluhm
Ccb09 - Comunity Camp 09 - Slides von Sebastian Bluhm
 
Best-Of Stifte
Best-Of StifteBest-Of Stifte
Best-Of Stifte
 
Webmontag Kirche 2.0
Webmontag Kirche 2.0Webmontag Kirche 2.0
Webmontag Kirche 2.0
 
NoSQL - Mongo, Couch und Co
NoSQL - Mongo, Couch und CoNoSQL - Mongo, Couch und Co
NoSQL - Mongo, Couch und Co
 
Infografik Webmontag Marburg
Infografik Webmontag MarburgInfografik Webmontag Marburg
Infografik Webmontag Marburg
 
Bibliographic Framework Transitional Initiative: an introduction
Bibliographic Framework Transitional Initiative: an introductionBibliographic Framework Transitional Initiative: an introduction
Bibliographic Framework Transitional Initiative: an introduction
 
Magdeburg | 2011-06-13 | Eine Handbreit zwischen dir und mir
Magdeburg | 2011-06-13 | Eine Handbreit zwischen dir und mirMagdeburg | 2011-06-13 | Eine Handbreit zwischen dir und mir
Magdeburg | 2011-06-13 | Eine Handbreit zwischen dir und mir
 
Beim Plagiieren erwischt - und nun?
Beim Plagiieren erwischt - und nun?Beim Plagiieren erwischt - und nun?
Beim Plagiieren erwischt - und nun?
 
2010 WMERZ01 Soziale Netzwerke
2010 WMERZ01 Soziale Netzwerke2010 WMERZ01 Soziale Netzwerke
2010 WMERZ01 Soziale Netzwerke
 

Ähnlich wie Hybride Entwicklung mit Ionic

iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
Michael Kühnel
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT Group
 
Mobile Dienste an der Universitätsbibliothek Bielefeld
Mobile Dienste an der Universitätsbibliothek BielefeldMobile Dienste an der Universitätsbibliothek Bielefeld
Mobile Dienste an der Universitätsbibliothek Bielefeld
Sebastian Wolf
 

Ähnlich wie Hybride Entwicklung mit Ionic (20)

Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
 
Mobile Dienste an der Universitätsbibliothek Bielefeld
Mobile Dienste an der Universitätsbibliothek BielefeldMobile Dienste an der Universitätsbibliothek Bielefeld
Mobile Dienste an der Universitätsbibliothek Bielefeld
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
Titanium Vs Phonegap
Titanium Vs PhonegapTitanium Vs Phonegap
Titanium Vs Phonegap
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenAnsätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
 
Responsive design
Responsive designResponsive design
Responsive design
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
BATbern42 Vom Frontend Monolithen zu Micro-Frontends
BATbern42 Vom Frontend Monolithen zu Micro-FrontendsBATbern42 Vom Frontend Monolithen zu Micro-Frontends
BATbern42 Vom Frontend Monolithen zu Micro-Frontends
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 

Mehr von Lukas Leander Rosenstock

PHP Frameworks, Libraries & Tools - BarCamp RheinMain 2013
PHP Frameworks, Libraries & Tools - BarCamp RheinMain 2013PHP Frameworks, Libraries & Tools - BarCamp RheinMain 2013
PHP Frameworks, Libraries & Tools - BarCamp RheinMain 2013
Lukas Leander Rosenstock
 

Mehr von Lukas Leander Rosenstock (8)

Specification-driven API Design with OpenAPI
Specification-driven API Design with OpenAPISpecification-driven API Design with OpenAPI
Specification-driven API Design with OpenAPI
 
Specification-driven API Design vs Technical Writers
Specification-driven API Design vs Technical WritersSpecification-driven API Design vs Technical Writers
Specification-driven API Design vs Technical Writers
 
To SDK or not to SDK?
To SDK or not to SDK?To SDK or not to SDK?
To SDK or not to SDK?
 
Das IndieWeb - mach mit!
Das IndieWeb - mach mit!Das IndieWeb - mach mit!
Das IndieWeb - mach mit!
 
App.net Introduction
App.net IntroductionApp.net Introduction
App.net Introduction
 
PHP Frameworks, Libraries & Tools - BarCamp RheinMain 2013
PHP Frameworks, Libraries & Tools - BarCamp RheinMain 2013PHP Frameworks, Libraries & Tools - BarCamp RheinMain 2013
PHP Frameworks, Libraries & Tools - BarCamp RheinMain 2013
 
OpenID for starters - Barcamp Berlin II
OpenID for starters - Barcamp Berlin IIOpenID for starters - Barcamp Berlin II
OpenID for starters - Barcamp Berlin II
 
OpenID für Anfänger - MRMCD
OpenID für Anfänger - MRMCDOpenID für Anfänger - MRMCD
OpenID für Anfänger - MRMCD
 

Hybride Entwicklung mit Ionic

  • 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
  • 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
  • 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