Téléchargé 104 fois
Téléchargé parekino
Panorama des solutions mobile hybrides
Le document présente un panorama des solutions mobiles hybrides, discutant des avantages et inconvénients des applications hybrides par rapport aux applications natives. Il aborde également l'évolution des technologies comme PhoneGap et des frameworks tels qu'Ionic et React Native, décrivant leur impact sur le développement mobile. En conclusion, il estime qu'à terme, 50% des applications sur les stores seront hybrides, soulignant l'importance croissante de ces technologies.
Contenu connexe
![[FR] Présentation de PhoneGap](https://cdn.slidesharecdn.com/ss_thumbnails/prsentationdephonegap-120110043120-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similaire à Panorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
- 1.
- 2. 22 Qui suis je? Développeur Front End #JavaScript #Angular #React #Cordova #Gulp #Sass #Ionic @MeKimak @ekinoExperts Mickael Dumand
- 3. 33 • SITE MOBILE Applicationweb 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 OSmajoritaires 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 iOSdominent 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égrationde 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 lentmais c’est moins cher. »« Je préfère le natif ! »
- 8. 8 Facebook et LinkedInabandonnent leurs applications HTML5 pour du natif Temps Pourquoi les gens pensent ça Doc ? Je trouve ça cool l’hybride moi…
- 9. 9 Facebook et LinkedInabandonnent leurs applications HTML5 pour du natif Temps Monte Marty, je vais t’expliquer.
- 10. 10 L’hybride dans letemps 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 letemps 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 letemps 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 letemps 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.
- 15.
- 16.
- 17. 17 Gartner Hype Cycle Naissancede 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.
- 19.
- 20.
- 21.
- 22. 22 Piloter des composantsnatifs en JavaScript Native Script
- 23.
- 24. 24 Moteur Chrome V8sous 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 TabBarIOScomponent React Native • Native MapView component
- 28. 2828 • Oui maisvous 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 dujeu 2048 sur React • Portage de la version React Native, disponible dans les exemples GitHub. Démo
- 30. 3030 Version IOS faiteen react-native disponible sur l’Apple store. Facebook groups
- 31. 3131 NativeScript Release v1.0le 04 Mai 2015
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. 3737 L’hybride : Un «navigateur » dans un conteneur natif ! WebView* = composant natif pour afficher des pages web.
- 38.
- 39.
- 40. 4040 Famo.us • Unedocumentation minimaliste… •Cen’estpasunframework,c’estunmoteurde rendu.
- 41. 41 À tester surdes 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.
- 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.
- 45. 4545 • Une librairiede composants React pour mobile. • Docs will be available soon… TouchstoneJS
- 46.
- 47. 4747 • Après avoirlevé $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 Lesoutils Ionic Ionic push Ionic CreatorIonic lab IoniconsIonic Box
- 49. 4949 Apache Cordova Plateforme pourconstruire 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.
- 51. 5252 • TabBar Beaucoup decomposants spécifiques au mobile • Range
- 52. 53 Composants avancés collection-repeat Nécessaire pour optimiserl’affichage de longues listes.
- 53. 5454 Platform continuity $ ionic serve--lab --livereload
- 54. 55 Composants avancés • Infinite scroll •Pull to Refresh
- 55.
- 56.
- 57. 58 Ionic is nota 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égrationdu 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. 6262 • Embarquez uneWebView dans vos applications • Blink + chromium Crosswalk pourAndroid
- 62. 6363 • Ça changele 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 suriOS ! Meilleur support HTML5 et performance correct. HTML TEST
- 64. 6565 Et ça s’amélioreaussi ! HTML TEST
- 65. 66 HTML5 c’est bienmais peut on accéder aux API natives ?
- 66. 6767 PlugmanPossibilitédecréersonplugin cordova Développement spécifique natifpour chaque plateforme au sein d’un plugin appelé depuis JavaScript
- 67.
- 68.
- 69.
- 70. 71 D’autres plugins ? Beaucoup deplugins 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 estsûre ! Développeur web != développeur hybride != développeur natif
- 73. 74 ‘’Things move reallyfast!’’
- 74. 7575 Les mêmes développeurspour 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.
- 77. 78 Gartner Hype Cycle Visibilité Temps Estimationde l’institut Gartner pour l’année prochaine 50% des applications disponibles sur les stores seront hybrides
- 78.
- 79. 8080 Mickael Dumand contact@ekino.com ekino. 157, rueAnatole France 92309 Levallois Perret +33 1 49 68 73 00 contact@ekino.com ekino
Notes de l'éditeur
- #2 Nous allons parcourir un ensemble de solution qui permettent de créer des applications avec les technologies du Web
- #4 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.
- #7 Ok, ça c’est la théorie, mais en pratique ?
- #8 En pratique dans la tête des gens, c’est moins cher.
- #11 Si on suis doc et qu’on remontent à 2009
- #14 La fin de l’hybride
- #16 Un manque de maturité des outils Frameworks, outils de debug etc.
- #17 L’expèrience hybride en 2012, c’est aussi agréable que de creuser nu dans la neige
- #18 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é
- #19 Ionic , React native, Native Script
- #23 C’est le choix de React Native et Native script
- #24 Permet d’éxecuter du code JavaScript au runtime
- #25 Javascript core Android: V8 : chrome*
- #26 Le principe de react, c’est de se dire q
- #27 Le principe de react, c’est de se dire q
- #28 http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #29 http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #30 http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #31 http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #33 Besoin d’ajouter une slide Http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #34 http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #35 Si je suis développeur Web, je dois oublier mes compétences en CSS
- #36 Si je suis développeur Web, je dois oublier mes compétences en CSS
- #39 Javascript core
- #48 Présent sur beaucoup de forums externes au projet.
- #50 Présent sur beaucoup de forums externes au projet.
- #52 Ionic docs Des styles pré-définis : positive/calm/balanced/energized
- #59 Author ionic.
- #60 http://maxime.sh/2013/02/supprimer-le-lag-des-clics-sur-mobile-avec-fastclick/ https://github.com/ftlabs/fastclick
- #61 http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #63 http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #64 http://jimbergman.net/webkit-version-in-android-version/ https://developer.chrome.com/multidevice/webview/pixelperfect
- #65 http://maxime.sh/2013/02/supprimer-le-lag-des-clics-sur-mobile-avec-fastclick/ https://github.com/ftlabs/fastclick
- #66 http://maxime.sh/2013/02/supprimer-le-lag-des-clics-sur-mobile-avec-fastclick/ https://github.com/ftlabs/fastclick
- #72 http://plugins.cordova.io/
- #73 http://plugins.cordova.io/
- #79 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 !