Slides de la session 'Cordova : du Web à l'App' de l'event Cordova chez Microsoft

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

2. 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
Le développement mobile multiplateformes avec Cordova

3. 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
Le développement mobile multiplateformes avec Cordova
HTML
CSS
JavaScript
12:38
Control WebView
HTML
CSS
JS

4. 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
Le développement mobile multiplateformes avec Cordova
Plugin CORDOVA (JS)
Code WP Code Android Code iOS

5. 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
Le développement mobile multiplateformes avec Cordova

6. 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.
Le développement mobile multiplateformes avec Cordova

7. 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
Le développement mobile multiplateformes avec Cordova