Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
-
Upload
jonathan-meiss -
Category
Technology
-
view
988 -
download
1
description
Transcript of Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
![Page 1: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/1.jpg)
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
![Page 2: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/2.jpg)
2
Préambule : des geeks et des boss
![Page 3: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/3.jpg)
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
![Page 4: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/4.jpg)
4
http://m.ingdirect.fr
![Page 5: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/5.jpg)
5
Driver 1/3 : l’expérience utilisateur
![Page 6: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/6.jpg)
6
Driver 2/3 : les coûts
![Page 7: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/7.jpg)
7
Driver 3/3 : rationaliser l’architecture du S.I.
![Page 8: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/8.jpg)
8
Principesd’architecture
![Page 9: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/9.jpg)
9
L’évolution des architectures Web
![Page 10: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/10.jpg)
10
L’évolution des architectures Web
![Page 11: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/11.jpg)
11
L’évolution des architectures Web
![Page 12: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/12.jpg)
12
L’évolution des architectures Web
![Page 13: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/13.jpg)
13
API-fication du S.I.
Desktops
Smartphones
Tablettes
Autres … ?
serviceAPI
serviceAPISI
Open APIAPI
![Page 14: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/14.jpg)
14
La sécurité ?
![Page 15: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/15.jpg)
15
Equipe WebApp
PO
Equipe API
Développeurs
PO
Développeurs
API-fication des équipes projet
Ergonome + graphiste
![Page 16: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/16.jpg)
16
Les nouveauxframeworks du Web
![Page 17: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/17.jpg)
17
Evolution des navigateurs depuis l’an 2000
![Page 18: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/18.jpg)
18
Et même sur mobile !
![Page 19: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/19.jpg)
19
MV* = déporter l’application Web côté client
![Page 20: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/20.jpg)
20
Une multiplication des frameworks MV*
![Page 21: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/21.jpg)
21
Lequel choisir ?
![Page 22: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/22.jpg)
22
AngularJS : un intérêt croissant
![Page 23: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/23.jpg)
23
Des communautés très actives
![Page 24: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/24.jpg)
24
Architecture applicative d’une application Web MV*
![Page 25: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/25.jpg)
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
![Page 26: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/26.jpg)
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
![Page 27: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/27.jpg)
27
Industrialisation
des
Développements
JavaScript
![Page 28: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/28.jpg)
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
![Page 29: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/29.jpg)
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
![Page 30: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/30.jpg)
30
Le Maven du Web
![Page 31: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/31.jpg)
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)
![Page 32: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/32.jpg)
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
![Page 33: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/33.jpg)
33
Mise en œuvre sur le projet
![Page 34: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/34.jpg)
34
Web mobile
![Page 35: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/35.jpg)
35
Fragmentation des navigateurs
![Page 36: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/36.jpg)
36
Bienvenue au BUG Village !
![Page 37: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/37.jpg)
37
Constamment adapter l’ergonomie et le design
![Page 38: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/38.jpg)
38
La solution : tester en continu…
![Page 39: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/39.jpg)
39
…et rapprocher les acteurs
![Page 40: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/40.jpg)
40
L’utilisateur au centre desdéveloppements
![Page 41: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/41.jpg)
41
Les tests utilisateurs internes
![Page 42: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/42.jpg)
42
La bêta publique
![Page 43: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/43.jpg)
43
Conclusion
![Page 44: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/44.jpg)
44
Aller plus loin : saisir l’opportunité de l’architecture API
![Page 45: Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs](https://reader035.fdocuments.in/reader035/viewer/2022081413/547fb40eb4af9f90278b48b9/html5/thumbnails/45.jpg)
45© OCTO 2014
Merci !
Olivier Lament – ING DirectJonathan Meiss - @JohnMeiss
François Petitit - @FrancoisPetitit
Pardon madame...