Le développement mobile multiplateforme avec cordova

7
Cordova : du Web à l’App Sébastien OLLIVIER – Tech Lead Web & MVP – Infinite Square 22/03/2016

Transcript of Le développement mobile multiplateforme avec cordova

Page 1: Le développement mobile multiplateforme avec cordova

Cordova : du Web à l’AppSébastien OLLIVIER – Tech Lead Web & MVP – Infinite Square

22/03/2016

Page 2: Le développement mobile multiplateforme avec cordova

Le développement mobile multiplateformes avec Cordova

Cordova, qu’est-ce que c’est ? Framework de développement cross-platform open-source Basé sur les langages HTML / CSS / JavaScript Un code unique (UI et métier) pour 8 plateformes (mais

possibilité d’autres)

Gain : Coût initial de développement / Coût de maintenance et d’évolution 1,1 code = 4 applications (Web, iOS, Android et Windows) Réutilisation des compétences Web front

Page 3: Le développement mobile multiplateforme avec cordova

Le développement mobile multiplateformes avec Cordova

Techniquement, comment ça marche ? Cordova encapsule une application Web dans

une application native Application Web embarquée en tant que ressources Application native contient une page composée

d’un contrôle WebView Cas particulier pour Windows : WinJS=> On appelle ce type d’application une application hybride

L’utilisateur navigue vers l’application web stockée en local

=> Si c’est bien fait, l’utilisateur ne voit pas de différence avec du natif

HTMLCSS

JavaScript

12:38

Control WebView

HTMLCSSJS

Page 4: Le développement mobile multiplateforme avec cordova

Le développement mobile multiplateformes avec Cordova

Comment j’interagis avec le device ? Mécanisme de plugins Permet la communication entre

l’application web et le code natif de la plateforme

1 plugin = 1 contrat JavaScript N implémentation (iOS, Android, Windows, etc.)

Cordova injecte la bonne implémentation à la génération de l’app

1 seul et même appel JavaScript pour une interaction avec le device

Plugin CORDOVA (JS)

Code WP Code Android Code iOS

Page 5: Le développement mobile multiplateforme avec cordova

Le développement mobile multiplateformes avec Cordova

Créer du code pour une plateforme spécifique ?

Besoin de gérer une spécificité pour une plateforme(ajout d’une feature, adaptation de l’UI, gestion d’une spécificité technique, etc.)

Dossiers merges

Utilisation de Frameworks comme Ionic (adaptation de l’UI)

Exemple de cas réel :http://blog.infinitesquare.com/b/kalbrecht/archives/implementer-une-googlemap-dans-une-application-cordova-avec-angularjs-et-typescript

Page 6: Le développement mobile multiplateforme avec cordova

Le développement mobile multiplateformes avec Cordova

Est-ce que ça marche vraiment ? 2012 : Facebook annonce l’abandon de leur dév hybride (perf,

outillage, accès au device, intégration à l’OS, etc.)

Aujourd’hui : Perfs améliorés (moteurs JavaScript, spécifications HTML 5 / CSS

3, etc.) Accès au device plus facile et plus complet (+ de 1000 plugins) Outillage présent (TACO, PhoneGap, Ionic, Visual Studio, etc.)

=> On a maintenant les moyens de délivrer des applications fluides et performantes, d’un niveau approchant une application native.

Page 7: Le développement mobile multiplateforme avec cordova

Le développement mobile multiplateformes avec Cordova

Comment s'y prendre pour réussir son application ?

Il faut une application Web de qualité Qui s’exécute côté client Niveau de finition important (retours visuel, chargement rapide, transition,

etc.) Fonctionnement hors-ligne Responsive / Adaptatif

Choix des outils (VS, VSTS + Build + Release)=>Pour plus d’infos sur Hockey App http://blog.infinitesquare.com/b/mfery/archives/presentation-dhockeyapp-ou-le-beta-store-multiplateformes Un seul code de base pour toutes les apps (pas de copier-coller) Compétences / Connaissances dans le développement Web Front Tester sur tous les devices cibles au fur et à mesure