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 !
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.
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
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 !
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
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.
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.
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!
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
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 )
Nous allons parcourir un ensemble de solution qui permettent de créer des applications avec les technologies du Web
RWD : Élaboration d’un site accessible via une url offrant une expérience de lecture optimale sur tous les devices
Application web installé sur le mobile. Le code est mutualisé pour différentes plateformes et permet un accès aux API natives du téléphone.
Application installé sur le mobile développée dans un langage spécifique à chaque OS.
Ok, ça c’est la théorie, mais en pratique ?
En pratique dans la tête des gens, c’est moins cher.
Si on suis doc et qu’on remontent à 2009
La fin de l’hybride
Un manque de maturité des outils
Frameworks, outils de debug etc.
L’expèrience hybride en 2012, c’est aussi agréable que de creuser nu dans la neige
Cycle de popularité des technologies innovantes. Le groupe gartner est un groupe de conseil dans le domaine des techniques qui a mis en place cette représentation.
Lancement de la technologie
Pics des espérances exagérées
Gouffre des désillusions
Plateau de productivité