panorama des solutions mobile hybrides

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


Temps

Monte Marty, je vais t’expliquer.

10L’hybride dans le temps

Adobe achète Phone Gap


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


Naissance de PhoneGap

Adobe achète Phone Gap l’open source Apache Cordova




Popularité

Temps

En 2011 Adobe rachète Nitobi et open source le projet






Popularité

Temps

En 2012 Facebook abandonne HTML5 pour ses applications mobiles






Popularité

Temps

En 2012 Facebook abandonne HTML5 pour ses applications mobile



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




Visibilité

Temps

Mais on est en 2015 : les choses changent !

18

Panorama dessolutions hybrides

20


21


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

https://facebook.github.io/react-native/

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

http://ivanvergiliev.github.io/2048-react/

3030

Version IOS faite en react-native disponible sur l’Apple store.

Facebook groups

3131

NativeScript Release v1.0 le 04 Mai 2015

https://www.nativescript.org/blog/nativescript-1.0.0-is-now-available

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

https://cordova.apache.org/

3737

L’hybride :Un « navigateur » dans un conteneur natif !

WebView* = composant natif pour afficher des pages web.

38

http://ionicframework.com/

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

https://github.com/apache/cordova-plugman

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

http://blogs.msdn.com/b/davrous/archive/2014/07/21/how-to-remotely-debug-and-profile-the-performance-of-your-html5-websites-amp-apps-on-windows-phone.aspx

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


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 [email protected]

ekino. 157, rue Anatole France 92309 Levallois Perret +33 1 49 68 73 00 [email protected]

ekino

panorama des solutions mobile hybrides

Technology