Panorama des solutions mobile hybrides

2 954 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
0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 954
Sur SlideShare
0
Issues des intégrations
0
Intégrations
310
Actions
Partages
0
Téléchargements
61
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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é
  • Ionic , React native, Native Script
  • C’est le choix de React Native et Native script
  • Permet d’éxecuter du code JavaScript au runtime
  • Javascript core
    Android: V8 : chrome*
  • Le principe de react, c’est de se dire q
  • Le principe de react, c’est de se dire q
  • http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • Besoin d’ajouter une slide

    Http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • Si je suis développeur Web, je dois oublier mes compétences en CSS
  • Si je suis développeur Web, je dois oublier mes compétences en CSS
  • Javascript core

  • Présent sur beaucoup de forums externes au projet.

  • Présent sur beaucoup de forums externes au projet.
  • Ionic docs
    Des styles pré-définis : positive/calm/balanced/energized
  • Author ionic.
  • http://maxime.sh/2013/02/supprimer-le-lag-des-clics-sur-mobile-avec-fastclick/
    https://github.com/ftlabs/fastclick
  • http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • http://jimbergman.net/webkit-version-in-android-version/
    https://developer.chrome.com/multidevice/webview/pixelperfect
  • http://maxime.sh/2013/02/supprimer-le-lag-des-clics-sur-mobile-avec-fastclick/
    https://github.com/ftlabs/fastclick
  • http://maxime.sh/2013/02/supprimer-le-lag-des-clics-sur-mobile-avec-fastclick/
    https://github.com/ftlabs/fastclick
  • http://plugins.cordova.io/
  • http://plugins.cordova.io/
  • J’espère vous avoir convaincu que l’hybride n’est pas seulement un choix pour faire baisser les coûts mais belle est bien une solution d’avenir !
  • 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

    ×