Depuis deux ans, une nouvelle vague technologique submerge le paysage des applications Web : les architectures MV* côté client.
L’écosystème Web, enfin mature, offre l’opportunité d’avoir des interfaces riches et une meilleure expérience utilisateur grâce à la génération des écrans et la gestion des interactions côté client. En ne gérant plus l’affichage mais uniquement l’envoi des données brutes, le serveur se concentre sur des APIs métier mutualisables avec des applications mobiles notamment.
Venez découvrir au travers d’un retour d’expérience commun entre OCTO et ING Direct, acteur majeur de la banque en ligne en France, la réalisation d’une des toutes premières WebApp mobile multi-plateformes dans le milieu bancaire reposant sur ces nouvelles architectures Web.
Compte-rendu du petit-déjeuner : http://bit.ly/1g2nEnU
3. Agenda
Retour d’expérience ING Direct
http://m.ingdirect.fr
Enjeux du projet
Les nouvelles architectures du Web
Principes d’architecture
Nouveaux frameworks
Industrialisation des développements JavaScript
Web mobile multiplateforme
L’utilisateur au centre des développements
Conclusion
3
25. AngularJS
Backbone.js
Style
Présentation
Templating
X
Composants graphiques
Data binding
X
X
X
X
Echanges / appels distants
Services
MV*
Bookmarking / historique navigation
Contrôleur
X
X
X
Stockage local
Gestion hors-ligne
Détection de fonctionnalité navigateur
Infrastructure
List helper cross navigateur
X
Appels à des fonctions natives
Injection de dépendances
Transverse
X
Sécurité (connexion / profils / stockage)
Logs
Piste d’audit
Comparaison des briques applicatives fournies nativement
25
par Backbone.js et AngularJS
26. Et le gagnant est… AngularJS
Miško Hevery, AngularJS Creator,
Google
« AngularJS is what HTML would have been,
had it been designed for building web-apps »
26
28. Un écosystème industrialisé
DEV
QUALITE
Build
Syntaxe
Architecture applicative
Couverture tests
Run
Qualimétrie
Frameworks et librairies
applicatives
BUILD
Gestion des
dépendances
RUN
WebPerfs
Bugs
Monitoring
Unitaires
Serveur Web
Intégration
Minification
Editeur
Déploiement
IHM
Concaténation
Debugger
Perfs/charge
Détection de device
Obfuscation
Tests
Simulateurs
Génération de sprites
Run
Runner
Versioning/cache
Historique
Outils de dév
Aggrégation indicateurs
Packaging
Synthèse
28
29. Outils utilisés chez ING
QUALITE
BUILD
Syntaxe
Compilation
Compilateur
SASS
Couverture tests
JSHint
Gestion de
dépendance
Grunt
Qualimétrie
Jasmine
Construction
Chrome dev
tools
Minification
Intégration
Protractor
/Selenium
Unitaires
Concaténation
IHM
Obfuscation
Perfs
Versioning
Tests
Plug-ins
Grunt :
concat, uglify,
ngMin, etc.
Packaging
29
31. Intégration continue
Récupérer
les dépendances
Build
Local
(Poste dev)
Gestionnaire
de sources
(Git)
Build
Serveur
d’intégration
Continue
(Jenkins)
Compiler
Référentiel
librairies
(NPM
registry)
Exécuter les tests
Vérifier la qualité
du code
Référentiel
Binaires ING
(Nexus)
Packager
Référentiel
de tâches
et anomalies
(Redmine)
Déployer
Documenter
Plateforme
de tests
Build
Notifications
Usine de Build
Documentation
& Indicateurs
31
32. WebPerfs : un fort impact sur
l’expérience utilisateur
“64% of smartphone users want a site to
load within four seconds; 82% within five
seconds.”
2012 mobile users survey
Keynote Systems
32