Migration Web to App
JavaScript Open Day
19 Mars 2015
Sébastien OLLIVIER – TechLead WebApps
sollivier@infinitesquare.com
@...
JavaScript Open Day – Migration Web to App – page 2
8
Sommaire
 Contexte
 Création de l’application Web
 Création de l’...
JavaScript Open Day – Migration Web to App – page 3
8
Jeu concours - Gagnez deux livres AngularJS
Retweetez pour participe...
Contexte
JavaScript Open Day – Migration Web to App – page 5
Contexte
 Elior souhaite fournir, aux parents d’élèves, une applicati...
JavaScript Open Day – Migration Web to App – page 6
Solution technique
Objectif : 1 code = 4 applications
Création de
l’application web
JavaScript Open Day – Migration Web to App – page 8
Une application et non un site
Un utilisateur est plus exigeant avec ...
JavaScript Open Day – Migration Web to App – page 9
AngularJS pour du développement mobile
 Support du touch : ngTouch
 ...
Création de
l’application mobile
JavaScript Open Day – Migration Web to App – page 11
Setup de l’environnement de développement
 Cordova command-line (CLI...
JavaScript Open Day – Migration Web to App – page 12
Multi-Device Hybrid App
 Installation automatisé de l’environnement ...
JavaScript Open Day – Migration Web to App – page 13
Adaptation de l’application web
 Qu’est-ce qui a du être changé ?
 ...
JavaScript Open Day – Migration Web to App – page 14
Interagir avec le device
 Mécanisme de plugins
 Permet la communica...
JavaScript Open Day – Migration Web to App – page 15
Conclusion et tirage au sort…
Objectif initial réussi
 1,1 code = 4...
Prochain SlideShare
Chargement dans…5
×

JavaScript Open Day - Migration Web To App

2 540 vues

Publié le

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

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 540
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 239
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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
  • 11h58
  • JavaScript Open Day - Migration Web To App

    1. 1. Migration Web to App JavaScript Open Day 19 Mars 2015 Sébastien OLLIVIER – TechLead WebApps sollivier@infinitesquare.com @SebastienOll
    2. 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. 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. 4. Contexte
    5. 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. 6. JavaScript Open Day – Migration Web to App – page 6 Solution technique Objectif : 1 code = 4 applications
    7. 7. Création de l’application web
    8. 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. 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. 10. Création de l’application mobile
    11. 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. 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. 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. 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. 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

    ×