Post on 12-Apr-2017
1
Panoramades solutionsmobiles hybrides
22
Qui suis je ?
Développeur Front End
#JavaScript #Angular #React #Cordova #Gulp #Sass #Ionic
@MeKimak @ekinoExperts
Mickael Dumand
33
• SITE MOBILE Application web accessible depuis une URL.Créer un service
mobile
• Application hybrideApplication web installée sur mobile.
• NatifApplication installée sur mobile développée dans plusieurs langages.
44
Fragmentation des OS majoritaires
Vision actuelle du marché mobile mondial
76%
21%
3%
AndroidiOSWP
87%92%
Android 4.1.x + iOS 8 +
Android et iOS dominent le monde
55
Android et iOS dominent le mondeVision actuelle du marché mobile français
57%37%
6%
AndroidiOSWP
L’objectif de l’hybride
Mutualisation du code.
Gain de temps des développement.
Facilité de maintenance.
6
CAPACITÉMAXIMALE
CAPACITÉPARTIELLE
DÉVELOPPEMENTSPÉCIFIQUE
DÉVELOPPEMENTMUTUALISÉ
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 ?
77
Applicationnative
Applicationhybride
« 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 trouve ça cool l’hybride moi…
9
Facebook et LinkedIn abandonnent leurs applications HTML5 pour du natif
Temps
Monte Marty, je vais t’expliquer.
10L’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
11L’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
12L’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
13L’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
Le vrai problème ?
1515
Aucun SDKHTML5 pour mobile !
1616
Un développeur hybride HTML5en 2012
17Gartner 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
Panorama dessolutions hybrides
19
20
Panorama dessolutions hybrides
21
Panorama dessolutions hybrides
22
Piloter des composants natifs en JavaScript
Native Script
23
JavaScriptCore introduit sous IOS7
JavaScriptCore
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 customisation est limitée aux composants existants.
Peut-on customiser noscomposants ?
• « Keep in mind that there are probably many things that are either broken or not implemented yet. »
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 ?
?
3737
L’hybride :Un « navigateur » dans un conteneur natif !
WebView* = composant natif pour afficher des pages web.
3939
Famo.us
4040
Famo.us
• Une documentation minimaliste…
• Ce n’est pas un framework, c’est un moteur de rendu.
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
4242
Onsen UI
4343
Des composants à regarder de près !
… mais une communauté moins importante que celle de ionic.
Onsen UI Le Twitter Bootstrap du mobile !
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 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.
4848
Ionic View
ngCordova
Ionic CLILes 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 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.
5151
Beaucoup de composants
5252
• TabBar
Beaucoup de composantsspé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 Android 4.1. We will never support versions earlier than those. This is a framework for the future!
5959
Historiquementles « 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 solution d’avenir !
Mise à jour automatique et indépendante de l’OS à partir de la version 5.0.x !!!
En voilà une bonne nouvelle
61
Et aujourd’hui, des solutions ?
6262
• Embarquez une WebView dans vos applications
• Blink + chromium
Crosswalk pour Android
6363
• Ça change le poids de mon application ?Crosswalk pour
Android
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
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 auxAPI natives ?
6767
PlugmanPossibilité de créer son plugin cordova
Développement spécifique natif pour chaque plateformeau sein d’un plugin appelé depuis JavaScript
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é
• Des plugins testés et validés
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 maintenance
La promesse de l’hybride
Marketing baseline
• Write once, run anywhere
• Learn once, write anywhere ( react-native )
• Write once, adapt everywhere (Ionic )
76
Panorama dessolutions hybrides
77
78Gartner Hype Cycle
Visibilité
Temps
Estimation de l’institut Gartner pour l’année prochaine
50% des applications disponibles sur les stores seront hybrides
79
Merc
i.
8080
Mickael Dumand contact@ekino.com
ekino. 157, rue Anatole France 92309 Levallois Perret +33 1 49 68 73 00 contact@ekino.com
ekino