1
Panorama
dessolutions
mobileshybrides
22
Qui suis je ?
Développeur Front End
#JavaScript #Angular #React
#Cordova #Gulp #Sass #Ionic
@MeKimak @ekinoExperts
Mick...
33
• SITE MOBILE
Application web accessible depuis une URL.Créer un service
mobile
• Application hybride
Application web i...
44
Fragmentation des OS majoritaires
Vision actuelle du
marché mobile mondial
76%
21%
3%
Android
iOS
WP
87%92%
Android
4.1...
55
Android et iOS dominent le monde
Vision actuelle du
marché mobile français
57%
37%
6%
Android
iOS
WP
L’objectif de l’hy...
6
CAPACITÉ
MAXIMALE
CAPACITÉ
PARTIELLE
DÉVELOPPEMENT
SPÉCIFIQUE
DÉVELOPPEMENT
MUTUALISÉ
APPLICATION HYBRIDE
• Intégration ...
77
Application
native
Application
hybride
« C’est lent mais c’est moins cher. »« Je préfère le natif ! »
8
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
Temps
Pourquoi les gens
pensent ça Doc ?
Je trou...
9
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
Temps
Monte Marty, je
vais t’expliquer.
10
L’hybride dans le temps
Adobe achète Phone Gap
Facebook et LinkedIn abandonnent
leurs applications HTML5 pour du natif
...
11
L’hybride dans le temps
Naissance de PhoneGap
Adobe achète Phone Gap
l’open source Apache Cordova
Facebook et LinkedIn ...
12
L’hybride dans le temps
Naissance de PhoneGap
Adobe achète Phone Gap
l’open source Apache Cordova
Aujourd’hui : Augment...
13
L’hybride dans le temps
Naissance de PhoneGap
Aujourd’hui : Augmentation du nombre
de solutions hybrides
Plateau de pro...
14
Le vrai problème ?
1515
Aucun SDK
HTML5 pour
mobile !
1616
Un développeur
hybride
HTML5
en 2012
17
Gartner Hype Cycle
Naissance de l’hybride
Adobe achète Phone Gap
Facebook et LinkedIn abandonnent
leurs applications HT...
18
Panorama des
solutions hybrides
19
20
Panorama des
solutions hybrides
21
Panorama des
solutions hybrides
22
Piloter des composants natifs en JavaScript
Native Script
23
JavaScriptCore introduit sous IOS7
24
Moteur Chrome V8 sous Android
Native Script
2525
Vous connaissez
React ?
• Le V de MVC
• Virtual Dom
• Compilation de fichier .jsx
2626
Vous connaissez
React ?
• Le V de MVC
• Virtual Dom
• Compilation de fichier .jsx
2727
• Native TabBarIOS component
React Native
• Native MapView component
2828
• Oui mais vous devrez apprendre une
nouvelle implémentation de Flexbox et
écrire vos styles en JavaScript !
• La cus...
2929
• Création du jeu 2048 sur React
• Portage de la version React Native,
disponible dans les exemples GitHub.
Démo
3030
Version IOS faite en
react-native disponible sur
l’Apple store.
Facebook
groups
3131
NativeScript Release v1.0 le 04 Mai 2015
3232
Cette approche
existe déjà
depuis
longtemps devenu
33
AppCelerator
Reacting to
React Native
3434
Quel développeur
êtes vous ?
?
3535
Quel développeur
êtes vous ?
?
36
Ce que fait
Cordova
3737
L’hybride :
Un « navigateur »
dans un conteneur
natif !
WebView* = composant natif pour afficher des pages web.
38
3939
Famo.us
4040
Famo.us
• Unedocumentation minimaliste…
• Cen’estpasunframework,c’estunmoteurde
rendu.
41
À tester sur des projets
« évènementiels »
Famo.us
« Famo.us is actively tested on the following devices: »
• Android p...
4242
Onsen UI
4343
Des composants à regarder de près !
… mais une communauté moins importante que
celle de ionic.
Onsen UI
Le Twitter Bo...
4444
TouchstoneJS
4545
• Une librairie de composants React pour
mobile.
• Docs will be available soon…
TouchstoneJS
4646
Ionic
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 parl...
4848
Ionic View
ngCordova
Ionic CLI
Les outils Ionic
Ionic push
Ionic CreatorIonic lab
IoniconsIonic Box
4949
Apache Cordova
Plateforme pour construire des applications
natives en utilisant les technologies HTML,
CSS et JavaScr...
5151
Beaucoup de
composants
5252
• TabBar
Beaucoup de composants
spécifiques au mobile
• Range
53
Composants
avancés
collection-repeat
Nécessaire pour optimiser l’affichage de longues listes.
5454
Platform
continuity
$ ionic serve --lab --livereload
55
Composants
avancés
• Infinite scroll
• Pull to Refresh
5656
Customisable avec Sass
57
Démo
58
Ionic is not a good solution if you need to support older
generation devices. Our compatibility starts at iOS 6 and
And...
5959
Historiquement
les « WebViews » ne
sont pas
performantes !
HTML TEST
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 solut...
61
Et aujourd’hui,
des solutions ?
6262
• Embarquez une WebView dans vos applications
• Blink + chromium
Crosswalk pourAndroid
6363
• Ça change le poids de mon application ?
Crosswalk pourAndroid
Testons sur Galaxy SIII avec HTML5Test
• Avec Crosswa...
6464
Même chose sur iOS !
Meilleur support HTML5 et
performance correct.
HTML TEST
6565
Et ça s’améliore aussi !
HTML TEST
66
HTML5 c’est bien mais
peut on accéder aux
API natives ?
6767
PlugmanPossibilitédecréersonplugin
cordova
Développement spécifique natif pour chaque plateforme
au sein d’un plugin ...
68
Java Android
69
Objective-C
70
JavaScript
71
D’autres
plugins ?
Beaucoup de plugins disponibles … avec un niveau de qualité
très variable
http://plugins.cordova.io
7272
ngCordova:
63+ extensions intégrées àAngularJs
Avantages
• Facilement intégré avec Angular
• Une documentation unifié...
73
Une chose est sûre !
Développeur web != développeur hybride != développeur natif
74
‘’Things move really fast!’’
7575
Les mêmes développeurs pour différents OS
• Mutualisation du code
• Gain de temps des développements
• Facilité de ma...
76
Panorama des
solutions hybrides
77
78
Gartner Hype Cycle
Visibilité
Temps
Estimation de l’institut Gartner pour l’année prochaine
50% des applications dispon...
79
Merci.
8080
Mickael Dumand
contact@ekino.com
ekino.
157, rue Anatole
France
92309 Levallois
Perret
+33 1 49 68 73 00
contact@ekin...
Prochain SlideShare
Chargement dans…5
×

Panorama des solutions mobile hybrides

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

Aucun téléchargement
Vues
Nombre de vues
2 659
Sur SlideShare
0
Issues des intégrations
0
Intégrations
322
Actions
Partages
0
Téléchargements
50
Commentaires
0
J’aime
7
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

    ×