Retour d’expérience d’une migration Web to App basée sur Angular.js

1. Migration Web to App
JavaScript Open Day
19 Mars 2015
Sébastien OLLIVIER – TechLead WebApps
sollivier@infinitesquare.com
@SebastienOll

2. JavaScript Open Day – Migration Web to App – page 2
8
Sommaire
 Contexte
 Création de l’application Web
 Création de l’application mobile
 Conclusion

3. JavaScript Open Day – Migration Web to App – page 3
8
Jeu concours - Gagnez deux livres AngularJS
Retweetez pour participer :
• 1er tirage : fin de session
• 2ème tirage : Lundi 22 Mars
@SebastienOll

4. Contexte

5. 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

6. JavaScript Open Day – Migration Web to App – page 6
Solution technique
Objectif : 1 code = 4 applications

7. Création de
l’application web

8. 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

9. 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)

10. Création de
l’application mobile

11. 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

12. 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

13. 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

14. 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

15. 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 projet
 Détecter rapidement les ajustements (graphismes et
performances)
 Garder au maximum un seul et même code