Le développement mobile hybride sort du bois @loicknuchel
Le développement mobile hybride sort du bois
@loicknuchel
Loïc Knuchel
Développeur web full-stack
Fondateur de SalooN
Fan de depuis l’alpha ;)
Me contacter : [email protected] - @loicknuchel - http://loic.knuchel.org/
Ionic View
http://view.ionic.io/
Hybride vs Natif
Hybride vs Natif
Hybride vs Natif
Les promesses du natif
Une expérience utilisateur au top !
Des millions d’utilisateurs (et de $$$)
Réalité :
Le natif coûte cher $$$
Réalité :
Le natif coûte cher $$$
Une bonne UX/UI coûte très cher $$$$$$$$$$$$$$$
Réalité :
Le natif coûte cher $$$
Une bonne UX/UI coûte très cher $$$$$$$$$$$$$$$
Le multi-platforme coûte très très cher $$$$$$$$$$$$$$$$$$$$$$$$$$$$$
Réalité :
Le natif coûte cher $$$
Une bonne UX/UI coûte très cher $$$$$$$$$$$$$$$
Le multi-platforme coûte très très cher $$$$$$$$$$$$$$$$$$$$$$$$$$$$$
Les promesses de l’hybride
Du cross-platform easyyyyyy (iOS, Android, WindowsPhone, Blackberry, Symbian, Bada, WebOS, FirefoxOS…)
Les mêmes possibilités que le natif !
Vous connaissez et utilisez déjà les technos web (HTML, CSS, JavaScript)
Pas cher :)
Réalité :
Réalité :
Full-bullshit ?
Ce sont les développeurs qui font une bonne application ! Pas une techno !
Quel objectif ? Avec quels moyens ?
STOP au nombrilisme technique !
Une application est bien plus que du code !Service / UX / Valeur perçue / Design ...
“Hello”
Cordova
“Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript”
● 2009: Nitobi crée PhoneGap● 2011: Adobe rachète PhoneGap● 2012: PhoneGap est cédé à Apache sous le nom de Cordova
Framework UI spécialisé mobile et basé sur Angular
- Styles- Directives- Outils
Natif
Web
Téléphone & APIs natives
Cordova : webview +JavaScript bridges
AngularJS
Ionic
Votre applicationStack technologique
Ionic, c’est le bootstrap des applications mobiles
hybrides (et bien plus...)
Ionic vs concurrents
Ratchet
CommunautéStars Commits Contributeurs Issues Pull-requests
Ionic Framework 15 500 3783 167 2730 475
Famo.us 6800 924 74 364 228
Framework7 3966 1386 22 349 91
Reapp 2085 2015 9 26 9
Onsen UI 1823 2508 41 385 131
Le 14/04/2015
Popularité
Ionic is unique
Platform continuity
Funding : $1M + $2.6M
Ionic toolset
Ionic CLI
Cordova CLI wrapper+
A lot of nice features !
Workflow
$ ionic start myApp blank --sass$ cd myApp$ ionic serve --lab$ ionic platform add android$ ionic resources$ ionic run -l
$ ionic serve --lab
Icon & Splashscreen
$ ionic resources
Livereload
● Navigateur $ ionic serve [--lab]
● Téléphone $ ionic run -l [-c -s]
Crosswalk
$ ionic browser add crosswalk
Ionic View
ionicview
ngCordova
“Gadgets”
$ ionic docs collection-repeat
● Ionicons● Ionic creator● Ionic box
Soon...
Ionic deploy
“The Ionic deploy service makes it possible to
ship new updates to your app without going
through the app store resubmission process.”
Ionic Marketplace
Et beaucoup d’autres services...
● Analytics● A/B tests● ...
Ce que j’attends...
Mock des plugins dans le navigateur
Industrialisation (cf tarifa)
● environnements de build : app package, icon & variables
Material design (cf ionicmaterial.com)
Démo
Testez avec Ionic View ;)
Ressources officielles
http://ionicframework.com/docs/http://codepen.io/ionic/public-list/http://learn.ionicframework.com/http://ngcordova.com/http://forum.ionicframework.com/
Ressources communautaires
http://loic.knuchel.org/blog/ @loicknuchel
https://blog.nraboy.com/ @nraboy
http://mcgivery.com/ @andrewmcgivery
http://www.raymondcamden.com/ @raymondcamden
http://devgirl.org/ @devgirlFL
Ressources autres
https://github.com/loicknuchel/ionic-starterhttp://ionicmaterial.com/https://material.angularjs.org/
Inspiration
http://www.mobile-patterns.com/http://pttrns.com/http://mycolorscreen.com/
Questions ?@loicknuchel - http://loic.knuchel.org/