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 : loicknuchel@gmail.com ...
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, Fire...
Réalité :
Réalité :
Full-bullshit ?
Ce sont les développeurs qui font une
bonne application ! Pas une techno !
Quel objectif ? Avec quels moye...
“Hello”
Cordova
“Apache Cordova is a platform for building
native mobile applications using HTML, CSS
and JavaScript”
● 2009: Nito...
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 application
Stack technolo...
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 3...
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 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 sto...
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 pack...
Démo
Testez avec Ionic View ;)
Ressources officielles
http://ionicframework.com/docs/
http://codepen.io/ionic/public-list/
http://learn.ionicframework.co...
Ressources communautaires
http://loic.knuchel.org/blog/ @loicknuchel
https://blog.nraboy.com/ @nraboy
http://mcgivery.com/...
Ressources autres
https://github.com/loicknuchel/ionic-starter
http://ionicmaterial.com/
https://material.angularjs.org/
Inspiration
http://www.mobile-patterns.com/
http://pttrns.com/
http://mycolorscreen.com/
Questions ?
@loicknuchel - http://loic.knuchel.org/
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Prochain SlideShare
Chargement dans…5
×

Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015

2 189 vues

Publié le

Ionic Framework révolutionne la manière de faire des applications mobile hybride avec Cordova. Il est maintenant facile de faire des applications de qualité et le développement hybride devient, grâce à Ionic, une réelle alternative.

Dans ce talk, au Ch'ti JUG, je donne mon point de vue sur le débat hybride vs natif. Pour moi, tout dépends de l'objectif de l'application et bien sûr du budget alloué.
Après une rapide présentation de Ionic et Cordova, je le compare a ses concurrents. Manifestement, aucun ne tient la comparaison...
Je me focalise ensuite sur les outils développés par drifty autours de Ionic et Cordova qui nous permettent de faciliter grandement le développement ! Ils sont, pour moi, une des forces majeures de ce framework :)
Enfin, je termine par corder une application de chat en live et la faire tester aux participants grâce à Ionic View.
Les derniers slides référencent les liens les plus utiles pour démarrer du bon pied avec Ionic et faire des applications très qualitatives :D

L'article avec la vidéo se trouve ici : http://loic.knuchel.org/blog/2015/04/18/chti-jug-le-developpement-mobile-hybride-sort-du-bois/

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 189
Sur SlideShare
0
Issues des intégrations
0
Intégrations
784
Actions
Partages
0
Téléchargements
64
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015

  1. 1. Le développement mobile hybride sort du bois @loicknuchel
  2. 2. Loïc Knuchel Développeur web full-stack Fondateur de SalooN Fan de depuis l’alpha ;) Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/
  3. 3. Ionic View http://view.ionic.io/
  4. 4. Hybride vs Natif
  5. 5. Hybride vs Natif
  6. 6. Hybride vs Natif
  7. 7. Les promesses du natif Une expérience utilisateur au top ! Des millions d’utilisateurs (et de $$$)
  8. 8. Réalité : Le natif coûte cher $$$
  9. 9. Réalité : Le natif coûte cher $$$ Une bonne UX/UI coûte très cher $$$$$$$$$$$$$$$
  10. 10. 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 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$
  11. 11. 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 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$
  12. 12. 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 :)
  13. 13. Réalité :
  14. 14. Réalité :
  15. 15. 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 ...
  16. 16. “Hello”
  17. 17. 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
  18. 18. Framework UI spécialisé mobile et basé sur Angular - Styles - Directives - Outils
  19. 19. Natif Web Téléphone & APIs natives Cordova : webview + JavaScript bridges AngularJS Ionic Votre application Stack technologique
  20. 20. Ionic, c’est le bootstrap des applications mobiles hybrides (et bien plus...)
  21. 21. Ionic vs concurrents Ratchet
  22. 22. 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
  23. 23. Popularité
  24. 24. Ionic is unique Platform continuity Funding : $1M + $2.6M
  25. 25. Ionic toolset
  26. 26. Ionic CLI Cordova CLI wrapper + A lot of nice features !
  27. 27. Workflow $ ionic start myApp blank --sass $ cd myApp $ ionic serve --lab $ ionic platform add android $ ionic resources $ ionic run -l
  28. 28. $ ionic serve --lab
  29. 29. Icon & Splashscreen $ ionic resources
  30. 30. Livereload ● Navigateur $ ionic serve [--lab] ● Téléphone $ ionic run -l [-c -s]
  31. 31. Crosswalk $ ionic browser add crosswalk
  32. 32. Ionic View ionicview
  33. 33. ngCordova
  34. 34. “Gadgets” $ ionic docs collection-repeat ● Ionicons ● Ionic creator ● Ionic box
  35. 35. Soon...
  36. 36. Ionic deploy “The Ionic deploy service makes it possible to ship new updates to your app without going through the app store resubmission process.”
  37. 37. Ionic Marketplace
  38. 38. Et beaucoup d’autres services... ● Analytics ● A/B tests ● ...
  39. 39. 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)
  40. 40. Démo
  41. 41. Testez avec Ionic View ;)
  42. 42. Ressources officielles http://ionicframework.com/docs/ http://codepen.io/ionic/public-list/ http://learn.ionicframework.com/ http://ngcordova.com/ http://forum.ionicframework.com/
  43. 43. 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
  44. 44. Ressources autres https://github.com/loicknuchel/ionic-starter http://ionicmaterial.com/ https://material.angularjs.org/
  45. 45. Inspiration http://www.mobile-patterns.com/ http://pttrns.com/ http://mycolorscreen.com/
  46. 46. Questions ? @loicknuchel - http://loic.knuchel.org/

×