Les statistiques d’utilisation des téléphones mobiles sont en constante progression et trois choix se dessinent actuellement pour délivrer du contenu sur le Web. Un site responsive, un site dédié mobile ou une application disponible sur un store. Et dans ce dernier cas, vous serez très vite confronté aux contraintes des différents systèmes d’exploitation : Android, iOS et Windows Phone – pour les majoritaires. Dans ce contexte, beaucoup d’outils de développement émergent avec un seul objectif : réutiliser les compétences des développeurs Web et mutualiser le code entre les différentes plate-formes. Cette présentation se base sur le retour d’expérience réussie autour de la mise en place de prototypes et de projets client chez Ekino. Je vais vous exposer les solutions que nous n’avons pas retenues en expliquant nos choix. Puis je vais parcourir plus en détail les solutions que nous avons testées : Apache Cordova, Ionic, SuperSonic, ReactNative, etc. Nous verrons que l’expression “Write once, run everywhere” n’est pas toujours vrai. Le but est qu’à la sortie de cette conférence, je vous aie aidé à faire vos choix techniques, en fonction de vos projets et de vos compétences !

1. 1
Panorama
dessolutions
mobileshybrides

2. 22
Qui suis je ?
Développeur Front End
#JavaScript #Angular #React
#Cordova #Gulp #Sass #Ionic
@MeKimak @ekinoExperts
Mickael Dumand

3. 33
• SITE MOBILE
Application web accessible depuis une URL.Créer un service
mobile
• Application hybride
Application web installée sur mobile.
• Natif
Application installée sur mobile développée dans
plusieurs langages.

4. 44
Fragmentation des OS majoritaires
Vision actuelle du
marché mobile mondial
76%
21%
3%
Android
iOS
WP
87%92%
Android
4.1.x + iOS 8 +
Android et iOS dominent le monde

5. 55
Android et iOS dominent le monde
Vision actuelle du
marché mobile français
57%
37%
6%
Android
iOS
WP
L’objectif de l’hybride
Mutualisation du code.
Gain de temps des
développement.
Facilité de maintenance.

6. 6
CAPACITÉ
MAXIMALE
CAPACITÉ
PARTIELLE
DÉVELOPPEMENT
SPÉCIFIQUE
DÉVELOPPEMENT
MUTUALISÉ
APPLICATION HYBRIDE
• Intégration de pages Web à une app. native
• Accès aux fonctionnalités hardware
« WEB APP »
• Pages Web consultées depuis un navigateur
• Accès limité aux fonctionnalités hardware
APPLICATION NATIVE
• Compilation d’un logiciel embarqué
• Accès avancé aux fonctionnalités hardware
HTML5
NATIF
HTML5
NATIF
Comment choisir ?

7. 77
Application
native
Application
hybride
« C’est lent mais c’est moins cher. »« Je préfère le natif ! »

8. 8
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
Temps
Pourquoi les gens
pensent ça Doc ?
Je trouve ça cool
l’hybride moi…

9. 9
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
Temps
Monte Marty, je
vais t’expliquer.

10. 10
L’hybride dans le temps
Adobe achète Phone Gap
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
Aujourd’hui : Augmentation du nombre
de solutions hybrides
Plateau de productivité…
Popularité
Temps
En 2009 la société Nitobi crée PhoneGap
Naissance de PhoneGap @Nitobi

11. 11
L’hybride dans le temps
Naissance de PhoneGap
Adobe achète Phone Gap
l’open source Apache Cordova
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
Aujourd’hui : Augmentation du nombre
de solutions hybrides
Plateau de productivité…
Popularité
Temps
En 2011 Adobe rachète Nitobi et open source le projet

12. 12
L’hybride dans le temps
Naissance de PhoneGap
Adobe achète Phone Gap
l’open source Apache Cordova
Aujourd’hui : Augmentation du nombre
de solutions hybrides
Plateau de productivité…
Popularité
Temps
En 2012 Facebook abandonne HTML5 pour ses applications mobiles
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif

13. 13
L’hybride dans le temps
Naissance de PhoneGap
Aujourd’hui : Augmentation du nombre
de solutions hybrides
Plateau de productivité…
Popularité
Temps
En 2012 Facebook abandonne HTML5 pour ses applications mobile
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
Adobe achète Phone Gap
l’open source Apache Cordova

14. 14
Le vrai problème ?

15. 1515
Aucun SDK
HTML5 pour
mobile !

16. 1616
Un développeur
hybride
HTML5
en 2012

17. 17
Gartner Hype Cycle
Naissance de l’hybride
Adobe achète Phone Gap
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
Aujourd’hui : Augmentation du nombre
de solutions hybrides
Plateau de productivité…
Visibilité
Temps
Mais on est en 2015 : les choses changent !

18. 18
Panorama des
solutions hybrides

19. 19

20. 20
Panorama des
solutions hybrides

21. 21
Panorama des
solutions hybrides

22. 22
Piloter des composants natifs en JavaScript
Native Script

23. 23
JavaScriptCore introduit sous IOS7

24. 24
Moteur Chrome V8 sous Android
Native Script

25. 2525
Vous connaissez
React ?
• Le V de MVC
• Virtual Dom
• Compilation de fichier .jsx

26. 2626
Vous connaissez
React ?
• Le V de MVC
• Virtual Dom
• Compilation de fichier .jsx

27. 2727
• Native TabBarIOS component
React Native
• Native MapView component

28. 2828
• Oui mais vous devrez apprendre une
nouvelle implémentation de Flexbox et
écrire vos styles en JavaScript !
• La customisation est limitée aux
composants existants.
Peut-on
customiser nos
composants ?
• « Keep in mind that there are probably
many things that are either broken or not
implemented yet. »

29. 2929
• Création du jeu 2048 sur React
• Portage de la version React Native,
disponible dans les exemples GitHub.
Démo

30. 3030
Version IOS faite en
react-native disponible sur
l’Apple store.
Facebook
groups

31. 3131
NativeScript Release v1.0 le 04 Mai 2015

32. 3232
Cette approche
existe déjà
depuis
longtemps devenu

33. 33
AppCelerator
Reacting to
React Native

34. 3434
Quel développeur
êtes vous ?
?

35. 3535
Quel développeur
êtes vous ?
?

36. 36
Ce que fait
Cordova

37. 3737
L’hybride :
Un « navigateur »
dans un conteneur
natif !
WebView* = composant natif pour afficher des pages web.

38. 38

39. 3939
Famo.us

40. 4040
Famo.us
• Unedocumentation minimaliste…
• Cen’estpasunframework,c’estunmoteurde
rendu.

41. 41
À tester sur des projets
« évènementiels »
Famo.us
« Famo.us is actively tested on the following devices: »
• Android phones: Nexus 4, Nexus 5, Nexus 6, Moto G
• Android tablets: Nexus 7, Nexus 9
• iOS phones: iPhone 4S, iPhone 5/5C, iPhone 5S, iPhone 6
• iOS tablets: iPad 3/4, iPad Air, iPad Mini, iPad Mini Retina

42. 4242
Onsen UI

43. 4343
Des composants à regarder de près !
… mais une communauté moins importante que
celle de ionic.
Onsen UI
Le Twitter Bootstrap du mobile
!

44. 4444
TouchstoneJS

45. 4545
• Une librairie de composants React pour
mobile.
• Docs will be available soon…
TouchstoneJS

46. 4646
Ionic

47. 4747
• Après avoir levé $1 million à ses début la
société lève $2.6 millions début 2015.
• Certaines offres d’emplois parlent d’Ionic.
• Documentation complète
• Une large communauté, des tutoriaux et
beaucoup de ressources disponibles.
• Un écosystème complet, build, application
de test, extensions etc.
• ng-cordova, ionic creator, View App…
• Fortement basé sur AngularJS
Ionic n’est pas
seulement un
framework, c’est
un SDK.

48. 4848
Ionic View
ngCordova
Ionic CLI
Les outils Ionic
Ionic push
Ionic CreatorIonic lab
IoniconsIonic Box

49. 4949
Apache Cordova
Plateforme pour construire des applications
natives en utilisant les technologies HTML,
CSS et JavaScript.
L’écosystème
Gulp
Outil d’automatisation « task runner » il
permet d’écrire des tâches récurrentes de
développement en JavaScript.
AngularJs
Framework JavaScript pour programmer des
applications Web SPA (Single Page
Application)
Sass
Outil permettant d’étendre les
fonctionnalités CSS par la compilation.

50. 5151
Beaucoup de
composants

51. 5252
• TabBar
Beaucoup de composants
spécifiques au mobile
• Range

52. 53
Composants
avancés
collection-repeat
Nécessaire pour optimiser l’affichage de longues listes.

53. 5454
Platform
continuity
$ ionic serve --lab --livereload

54. 55
Composants
avancés
• Infinite scroll
• Pull to Refresh

55. 5656
Customisable avec Sass

56. 57
Démo

57. 58
Ionic is not a good solution if you need to support older
generation devices. Our compatibility starts at iOS 6 and
Android 4.1. We will never support versions earlier than
those. This is a framework for the future!

58. 5959
Historiquement
les « WebViews » ne
sont pas
performantes !
HTML TEST

59. 6060
Mais ça s’améliore…
Intégration du moteur de Chrome
pour la version 4.4.x !
L’hybride est sans aucun doute,
une solution d’avenir !
Mise à jour automatique et
indépendante de l’OS
à partir de la version 5.0.x !!!
En voilà une bonne nouvelle

60. 61
Et aujourd’hui,
des solutions ?

61. 6262
• Embarquez une WebView dans vos applications
• Blink + chromium
Crosswalk pourAndroid

62. 6363
• Ça change le poids de mon application ?
Crosswalk pourAndroid
Testons sur Galaxy SIII avec HTML5Test
• Avec Crosswalk : 494 // SunSpider : 1670,5ms
• Sans Crosswalk : 326 // SunSpider : 1732,7ms
 Application installée = ~58Mb
 En téléchargement = ~20Mb

63. 6464
Même chose sur iOS !
Meilleur support HTML5 et
performance correct.
HTML TEST

64. 6565
Et ça s’améliore aussi !
HTML TEST

65. 66
HTML5 c’est bien mais
peut on accéder aux
API natives ?

66. 6767
PlugmanPossibilitédecréersonplugin
cordova
Développement spécifique natif pour chaque plateforme
au sein d’un plugin appelé depuis JavaScript

67. 68
Java Android

68. 69
Objective-C

69. 70
JavaScript

70. 71
D’autres
plugins ?
Beaucoup de plugins disponibles … avec un niveau de qualité
très variable
http://plugins.cordova.io

71. 7272
ngCordova:
63+ extensions intégrées àAngularJs
Avantages
• Facilement intégré avec Angular
• Une documentation unifié
• Des plugins testés et validés

72. 73
Une chose est sûre !
Développeur web != développeur hybride != développeur natif

73. 74
‘’Things move really fast!’’

74. 7575
Les mêmes développeurs pour différents OS
• Mutualisation du code
• Gain de temps des développements
• Facilité de maintenance
La promesse de
l’hybride
Marketing baseline
• Write once, run anywhere
• Learn once, write anywhere ( react-native )
• Write once, adapt everywhere (Ionic )

75. 76
Panorama des
solutions hybrides

76. 77

77. 78
Gartner Hype Cycle
Visibilité
Temps
Estimation de l’institut Gartner pour l’année prochaine
50% des applications disponibles sur les
stores seront hybrides

78. 79
Merci.

79. 8080
Mickael Dumand
contact@ekino.com
ekino.
157, rue Anatole
France
92309 Levallois
Perret
+33 1 49 68 73 00
contact@ekino.com
ekino