javascript open day - migration web to app

Migration Web to AppJavaScript Open Day19 Mars 2015

Sébastien OLLIVIER – TechLead WebApps

[email protected]

@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


Jeu concours - Gagnez deux livres AngularJS

Retweetez pour participer :

• 1er tirage : fin de session

• 2ème tirage : Lundi 22 Mars

@SebastienOll

Contexte


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


Solution technique

Objectif : 1 code = 4 applications

Création de

l’application web


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


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)

Création de

l’application mobile


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


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


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


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

http://plugins.cordova.io/


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

javascript open day - migration web to app

Technology