Embed Size (px)
DESCRIPTION
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
Citation preview
1© OCTO 2014
Les Nouvelles Architectures Web
mardi 4 février 2014
Olivier Lament – Manager IT – ING DirectJonathan Meiss – @JohnMeiss – OCTO TechnologyFrançois Petitit – @francoispetitit – OCTO Technology
2
Préambule : des geeks et des boss
3
AgendaRetour d’expérience ING Direct
http://m.ingdirect.fr
Enjeux du projet
Les nouvelles architectures du WebPrincipes d’architecture
Nouveaux frameworks
Industrialisation des développements JavaScript
Web mobile multiplateforme
L’utilisateur au centre des développements
Conclusion
4
http://m.ingdirect.fr
5
Driver 1/3 : l’expérience utilisateur
6
Driver 2/3 : les coûts
7
Driver 3/3 : rationaliser l’architecture du S.I.
8
Principesd’architecture
9
L’évolution des architectures Web
10
L’évolution des architectures Web
11
L’évolution des architectures Web
12
L’évolution des architectures Web
13
API-fication du S.I.
Desktops
Smartphones
Tablettes
Autres … ?
serviceAPI
serviceAPISI
Open APIAPI
14
La sécurité ?
15
Equipe WebApp
PO
Equipe API
Développeurs
PO
Développeurs
API-fication des équipes projet
Ergonome + graphiste
16
Les nouveauxframeworks du Web
17
Evolution des navigateurs depuis l’an 2000
18
Et même sur mobile !
19
MV* = déporter l’application Web côté client
20
Une multiplication des frameworks MV*
21
Lequel choisir ?
22
AngularJS : un intérêt croissant
23
Des communautés très actives
24
Architecture applicative d’une application Web MV*
25
AngularJS Backbone.js
Présentation
Style
Templating X
Composants graphiques
Contrôleur
Data binding X
MV* X X
Bookmarking / historique navigation X X
Services
Echanges / appels distants X X
Stockage local
Gestion hors-ligne
Infrastructure
Détection de fonctionnalité navigateur
List helper cross navigateur X
Appels à des fonctions natives
Transverse
Injection de dépendances X
Sécurité (connexion / profils / stockage)
Logs
Piste d’audit
Comparaison des briques applicatives fournies nativement par Backbone.js et AngularJS
26
Et le gagnant est… AngularJS
« AngularJS is what HTML would have been,
had it been designed for building web-apps »
Miško Hevery, AngularJS Creator,Google
27
Industrialisation
des
Développements
JavaScript
28
Un écosystème industrialisé
PackagingOutils de dév
Gestion des dépendances Monitoring
Frameworks et librairies applicatives
Minification
Obfuscation
ConcaténationEditeur
Simulateurs
Debugger
Runner
Build
Run
WebPerfs
Bugs
Architecture applicative
DEV BUILD RUN
Tests
Qualimétrie
Synthèse
Unitaires
Perfs/charge
IHM
Intégration
Couverture tests
Syntaxe
Aggrégation indicateurs
Historique
QUALITE
Génération de spritesRun
Serveur Web
Déploiement
Détection de device
Versioning/cache
29
Packaging
Construction
Minification
Obfuscation
Concaténation
Compilation
Gestion de dépendance
BUILD
Tests
Qualimétrie
Unitaires
Perfs
IHM
Intégration
Couverture tests
Syntaxe
QUALITE
JSHint
Plug-ins Grunt :
concat, uglify, ngMin, etc.
Compilateur SASS
Jasmine
Protractor /Selenium
Chrome dev tools
Grunt
Versioning
Outils utilisés chez ING
30
Le Maven du Web
31
Intégration continue
Usine de Build
Build
Vérifier la qualité du code
Compiler
Récupérer les dépendances
Déployer
Documenter
Exécuter les tests
Packager
Référentiel de tâches
et anomalies (Redmine)
Plateformede tests
Documentation& Indicateurs
Serveurd’intégration
Continue(Jenkins)
BuildGestionnaire de sources
(Git)BuildLocal
(Poste dev)
Notifications
RéférentielBinaires ING
(Nexus)
Référentiellibrairies
(NPM registry)
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 surveyKeynote Systems
33
Mise en œuvre sur le projet
34
Web mobile
35
Fragmentation des navigateurs
36
Bienvenue au BUG Village !
37
Constamment adapter l’ergonomie et le design
38
La solution : tester en continu…
39
…et rapprocher les acteurs
40
L’utilisateur au centre desdéveloppements
41
Les tests utilisateurs internes
42
La bêta publique
43
Conclusion
44
Aller plus loin : saisir l’opportunité de l’architecture API
45© OCTO 2014
Merci !
Olivier Lament – ING DirectJonathan Meiss - @JohnMeiss
François Petitit - @FrancoisPetitit
Pardon madame...
