Panorama des solutions mobile hybrides

3 394 vues

Publié le

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 !

Publié dans : Technologie
  • Soyez le premier à commenter

Panorama des solutions mobile hybrides

  1. 1. 1 Panorama dessolutions mobileshybrides
  2. 2. 22 Qui suis je ? Développeur Front End #JavaScript #Angular #React #Cordova #Gulp #Sass #Ionic @MeKimak @ekinoExperts Mickael Dumand
  3. 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. 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. 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. 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. 7. 77 Application native Application hybride « C’est lent mais c’est moins cher. »« Je préfère le natif ! »
  8. 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. 9 Facebook et LinkedIn abandonnent leurs applications HTML5 pour du natif Temps Monte Marty, je vais t’expliquer.
  10. 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. 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. 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. 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. 14 Le vrai problème ?
  15. 15. 1515 Aucun SDK HTML5 pour mobile !
  16. 16. 1616 Un développeur hybride HTML5 en 2012
  17. 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. 18 Panorama des solutions hybrides
  19. 19. 19
  20. 20. 20 Panorama des solutions hybrides
  21. 21. 21 Panorama des solutions hybrides
  22. 22. 22 Piloter des composants natifs en JavaScript Native Script
  23. 23. 23 JavaScriptCore introduit sous IOS7
  24. 24. 24 Moteur Chrome V8 sous Android Native Script
  25. 25. 2525 Vous connaissez React ? • Le V de MVC • Virtual Dom • Compilation de fichier .jsx
  26. 26. 2626 Vous connaissez React ? • Le V de MVC • Virtual Dom • Compilation de fichier .jsx
  27. 27. 2727 • Native TabBarIOS component React Native • Native MapView component
  28. 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. 29. 2929 • Création du jeu 2048 sur React • Portage de la version React Native, disponible dans les exemples GitHub. Démo
  30. 30. 3030 Version IOS faite en react-native disponible sur l’Apple store. Facebook groups
  31. 31. 3131 NativeScript Release v1.0 le 04 Mai 2015
  32. 32. 3232 Cette approche existe déjà depuis longtemps devenu
  33. 33. 33 AppCelerator Reacting to React Native
  34. 34. 3434 Quel développeur êtes vous ? ?
  35. 35. 3535 Quel développeur êtes vous ? ?
  36. 36. 36 Ce que fait Cordova
  37. 37. 3737 L’hybride : Un « navigateur » dans un conteneur natif ! WebView* = composant natif pour afficher des pages web.
  38. 38. 38
  39. 39. 3939 Famo.us
  40. 40. 4040 Famo.us • Unedocumentation minimaliste… • Cen’estpasunframework,c’estunmoteurde rendu.
  41. 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. 42. 4242 Onsen UI
  43. 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. 44. 4444 TouchstoneJS
  45. 45. 4545 • Une librairie de composants React pour mobile. • Docs will be available soon… TouchstoneJS
  46. 46. 4646 Ionic
  47. 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. 48. 4848 Ionic View ngCordova Ionic CLI Les outils Ionic Ionic push Ionic CreatorIonic lab IoniconsIonic Box
  49. 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. 50. 5151 Beaucoup de composants
  51. 51. 5252 • TabBar Beaucoup de composants spécifiques au mobile • Range
  52. 52. 53 Composants avancés collection-repeat Nécessaire pour optimiser l’affichage de longues listes.
  53. 53. 5454 Platform continuity $ ionic serve --lab --livereload
  54. 54. 55 Composants avancés • Infinite scroll • Pull to Refresh
  55. 55. 5656 Customisable avec Sass
  56. 56. 57 Démo
  57. 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. 58. 5959 Historiquement les « WebViews » ne sont pas performantes ! HTML TEST
  59. 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. 60. 61 Et aujourd’hui, des solutions ?
  61. 61. 6262 • Embarquez une WebView dans vos applications • Blink + chromium Crosswalk pourAndroid
  62. 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. 63. 6464 Même chose sur iOS ! Meilleur support HTML5 et performance correct. HTML TEST
  64. 64. 6565 Et ça s’améliore aussi ! HTML TEST
  65. 65. 66 HTML5 c’est bien mais peut on accéder aux API natives ?
  66. 66. 6767 PlugmanPossibilitédecréersonplugin cordova Développement spécifique natif pour chaque plateforme au sein d’un plugin appelé depuis JavaScript
  67. 67. 68 Java Android
  68. 68. 69 Objective-C
  69. 69. 70 JavaScript
  70. 70. 71 D’autres plugins ? Beaucoup de plugins disponibles … avec un niveau de qualité très variable http://plugins.cordova.io
  71. 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. 72. 73 Une chose est sûre ! Développeur web != développeur hybride != développeur natif
  73. 73. 74 ‘’Things move really fast!’’
  74. 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. 75. 76 Panorama des solutions hybrides
  76. 76. 77
  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. 78. 79 Merci.
  79. 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

×