L'histoire d'HTML5 pour les développeurs Windows Phone 8
JavaScript Open Day - Migration Web To App
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
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
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)
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
Hinweis der Redaktion
11h32
Décrire rapidement ce qu’est AngularJS et Cordova
AngularJS : Framework JavaScript permettant de créer des applications web de type SPA (Single Page Application), par Google
Cordova : Framework permettant de créer des applications mobiles à partir d’application Web, par Apache depuis 2011
11h38
Démo de l’application en mode desktop & mobile : https://bonapp.elior.com/gonesse/menus
Retours visuels => page de recherche d’un établissement
Offline => stockage des menus dans le localStorage
Responsive => page de recherche et page de menu
Autres optimisations :
Respecter les contraintes du langages JavaScript
Limiter l’usage des filtres
Manipuler le DOM dans les directives
TypeScript : Langage qui se transcompile en JavaScript (avantages : compilation / typage statique)
11h48
Démo :
Montrer Visual Studio 2015 avec le template de projet
L’émulateur Android
Ripple
Compilation génère un projet
Accéder à la caméra en HTML 5 :
http://caniuse.com/#search=camera
Démo App’Exposants