javascript open day - migration web to app
TRANSCRIPT
Migration Web to AppJavaScript Open Day19 Mars 2015
Sébastien OLLIVIER – TechLead WebApps
@SebastienOll
JavaScript Open Day – Migration Web to App – page 28
Sommaire
Contexte
Création de l’application Web
Création de l’application mobile
Conclusion
JavaScript Open Day – Migration Web to App – page 38
Jeu concours - Gagnez deux livres AngularJS
Retweetez pour participer :
• 1er tirage : fin de session
• 2ème tirage : Lundi 22 Mars
@SebastienOll
JavaScript Open Day – Migration Web to App – page 5
Contexte
Elior souhaite fournir, aux parents d’élèves, une application pour : Voir le menu d’un cantine Payer ses factures Inscrire / Désinscrire son enfant de la cantine pour un ou
plusieurs jours Etc.
Objectifs : V1 : Site Web (cible: IE8+) V2 : Applications mobiles iOS, Android, Windows Phone
JavaScript Open Day – Migration Web to App – page 6
Solution technique
Objectif : 1 code = 4 applications
JavaScript Open Day – Migration Web to App – page 8
Une application et non un site
Un utilisateur est plus exigeant avec une application qu’avec un site Chargement rapide
Feedbacks visuels
Transitions
Une application doit fonctionner sans connexion Cache HTML 5
Storage HTML 5 (LocalStorage / IndexedDb)
Une application mobile doit gérer le touch (pas de :hover)
Nécessité d’avoir un contenu adaptatif / responsive
JavaScript Open Day – Migration Web to App – page 9
AngularJS pour du développement mobile
Support du touch : ngTouch Suppression des 300ms d’attente sur le ngClick Ajout de la gesture de type swipe Pour plus de gestures, angular-gestures (basé sur hammerjs)
Supprimer le zoom natif
TypeScript pour gagner en productivité et en robustesse
Optimisations Limiter le nombres de watch Précharger les templates Privilégier les transitions CSS aux animations jQuery (+ autres optimisations classiques)
JavaScript Open Day – Migration Web to App – page 11
Setup de l’environnement de développement
Cordova command-line (CLI) Basé sur Node.js
Nécessite l’installation de l’environnement (Android / iOS / WP)
PhoneGap Build Service de Build dans le Cloud
Possibilité de debug avec Weinre
Visual Studio 2013 & Extension Multi-Device Hybrid App
Visual Studio 2015
JavaScript Open Day – Migration Web to App – page 12
Multi-Device Hybrid App
Installation automatisé de l’environnement de développement
Expérience de développement riche Templates de projet
Compilation du projet pour générer les apps
Debug de l’application directement depuis Visual Studio Ripple
Android
Windows Phone
iOS
Emulateur Android
JavaScript Open Day – Migration Web to App – page 13
Adaptation de l’application web
Qu’est-ce qui a du être changé ? Désactivation du mode de navigation HTML 5
Autorisation des url Windows Phone
Téléchargement de PDF Application Web : ouverture d’un lien dans le navigateur
Application mobile : sauvegarde du PDF sur le device
Règles CSS
Dossier merges de Cordova : contient le code exclusif à une plateforme
JavaScript Open Day – Migration Web to App – page 14
Interagir avec le device
Mécanisme de plugins Permet la communication entre l’application web et du code natif
1 plugin = 1 ou plusieurs implémentations (iOS, WP, Android, etc.)
1 plugin = 1 contrat JavaScript
Cordova injecte la bonne implémentation à la création de l’app
Module Angular ngCordova encapsule les API Cordova
Repository de plugins (> 800) : http://plugins.cordova.io
Plugin CORDOVA (JS)
Code WP Code Android Code iOS
JavaScript Open Day – Migration Web to App – page 15
Conclusion et tirage au sort…
Objectif initial réussi 1,1 code = 4 applications
90% de code commun
AngularJS + Cordova = Combo-Gagnant
Tester sur mobile tout au long du projetDétecter rapidement les ajustements (graphismes et
performances)
Garder au maximum un seul et même code