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/

1. Le développement mobile hybride sort du bois
@loicknuchel

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. Ionic View
http://view.ionic.io/

4. Hybride vs Natif

5. Hybride vs Natif

6. Hybride vs Natif

7. Les promesses du natif
Une expérience utilisateur au top !
Des millions d’utilisateurs (et de $$$)

8. Réalité :
Le natif coûte cher
$$$

9. Réalité :
Le natif coûte cher
$$$
Une bonne UX/UI coûte très cher
$$$$$$$$$$$$$$$

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. 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. 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. Réalité :

14. Réalité :

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. “Hello”

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. Framework UI spécialisé mobile
et basé sur Angular
- Styles
- Directives
- Outils

19. Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
AngularJS
Ionic
Votre application
Stack technologique

20. Ionic, c’est le bootstrap
des applications mobiles
hybrides (et bien plus...)

21. Ionic vs concurrents
Ratchet

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. Popularité

24. Ionic is unique
Platform continuity
Funding : $1M + $2.6M

25. Ionic toolset

26. Ionic CLI
Cordova CLI wrapper
+
A lot of nice features !

27. Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ionic run -l

28. $ ionic serve --lab

29. Icon & Splashscreen
$ ionic resources

30. Livereload
● Navigateur
$ ionic serve [--lab]
● Téléphone
$ ionic run -l [-c -s]

31. Crosswalk
$ ionic browser add crosswalk

32. Ionic View
ionicview

33. ngCordova

34. “Gadgets”
$ ionic docs collection-repeat
● Ionicons
● Ionic creator
● Ionic box

35. Soon...

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.”

38. Ionic Marketplace

39. Et beaucoup d’autres services...
● Analytics
● A/B tests
● ...

40. 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)

41. Démo

42. Testez avec Ionic View ;)

43. Ressources officielles
http://ionicframework.com/docs/
http://codepen.io/ionic/public-list/
http://learn.ionicframework.com/
http://ngcordova.com/
http://forum.ionicframework.com/

44. 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

45. Ressources autres
https://github.com/loicknuchel/ionic-starter
http://ionicmaterial.com/
https://material.angularjs.org/

46. Inspiration
http://www.mobile-patterns.com/
http://pttrns.com/
http://mycolorscreen.com/

47. Questions ?
@loicknuchel - http://loic.knuchel.org/