Your SlideShare is downloading. ×
Les Nouvelles Architectures Web

mardi 4 février 2014
Olivier Lament – Manager IT – ING Direct
Jonathan Meiss – @JohnMeiss...
Préambule : des geeks et des boss

2
Agenda
Retour d’expérience ING Direct
http://m.ingdirect.fr
Enjeux du projet

Les nouvelles architectures du Web
Principes...
http://m.ingdirect.fr

4
Driver 1/3 : l’expérience utilisateur

5
Driver 2/3 : les coûts

6
Driver 3/3 : rationaliser
l’architecture du S.I.

7
Principes
d’architecture

8
L’évolution des architectures Web

9
L’évolution des architectures Web

10
L’évolution des architectures Web

11
L’évolution des architectures Web

12
API-fication du S.I.
Desktops

API

service

Smartphones

Tablettes
API

Autres … ?

service

API

SI

Open API

13
La sécurité ?

14
API-fication des équipes projet
PO

PO

Equipe
WebApp

Equipe
API

Ergonome +
graphiste
Développeurs

Développeurs
15
Les nouveaux
frameworks du Web

16
Evolution des navigateurs depuis
l’an 2000

17
Et même sur mobile !

18
MV* = déporter l’application Web
côté client

19
Une multiplication des frameworks
MV*

20
Lequel choisir ?

21
AngularJS : un intérêt croissant

22
Des communautés très actives

23
Architecture applicative d’une
application Web MV*

24
AngularJS

Backbone.js

Style

Présentation

Templating

X

Composants graphiques
Data binding

X

X

X

X

Echanges / app...
Et le gagnant est… AngularJS

Miško Hevery, AngularJS Creator,

Google

« AngularJS is what HTML would have been,
had it b...
Industrialisation
des
Développements
JavaScript

27
Un écosystème industrialisé
DEV

QUALITE

Build

Syntaxe

Architecture applicative

Couverture tests

Run

Qualimétrie
Fra...
Outils utilisés chez ING
QUALITE

BUILD

Syntaxe

Compilation

Compilateur
SASS

Couverture tests

JSHint

Gestion de
dépe...
Le Maven du Web

30
Intégration continue
Récupérer
les dépendances

Build
Local
(Poste dev)

Gestionnaire
de sources
(Git)

Build
Serveur
d’in...
WebPerfs : un fort impact sur
l’expérience utilisateur
“64% of smartphone users want a site to
load within four seconds; 8...
Mise en œuvre sur le projet

33
Web mobile

34
Fragmentation des navigateurs

35
Bienvenue au BUG Village !

36
Constamment adapter l’ergonomie
et le design

37
La solution : tester en continu…

38
…et rapprocher les acteurs

39
L’utilisateur au centre des
développements

40
Les tests utilisateurs internes

41
La bêta publique

42
Conclusion

43
Aller plus loin : saisir l’opportunité
de l’architecture API

44
Merci !

Olivier Lament – ING Direct
Jonathan Meiss - @JohnMeiss
François Petitit - @FrancoisPetitit

© OCTO 2014

45
Upcoming SlideShare
Loading in...5
×

Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs

2,089

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,089
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs"

  1. 1. Les Nouvelles Architectures Web mardi 4 février 2014 Olivier Lament – Manager IT – ING Direct Jonathan Meiss – @JohnMeiss – OCTO Technology François Petitit – @francoispetitit – OCTO Technology © OCTO 2014 1
  2. 2. Préambule : des geeks et des boss 2
  3. 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
  4. 4. http://m.ingdirect.fr 4
  5. 5. Driver 1/3 : l’expérience utilisateur 5
  6. 6. Driver 2/3 : les coûts 6
  7. 7. Driver 3/3 : rationaliser l’architecture du S.I. 7
  8. 8. Principes d’architecture 8
  9. 9. L’évolution des architectures Web 9
  10. 10. L’évolution des architectures Web 10
  11. 11. L’évolution des architectures Web 11
  12. 12. L’évolution des architectures Web 12
  13. 13. API-fication du S.I. Desktops API service Smartphones Tablettes API Autres … ? service API SI Open API 13
  14. 14. La sécurité ? 14
  15. 15. API-fication des équipes projet PO PO Equipe WebApp Equipe API Ergonome + graphiste Développeurs Développeurs 15
  16. 16. Les nouveaux frameworks du Web 16
  17. 17. Evolution des navigateurs depuis l’an 2000 17
  18. 18. Et même sur mobile ! 18
  19. 19. MV* = déporter l’application Web côté client 19
  20. 20. Une multiplication des frameworks MV* 20
  21. 21. Lequel choisir ? 21
  22. 22. AngularJS : un intérêt croissant 22
  23. 23. Des communautés très actives 23
  24. 24. Architecture applicative d’une application Web MV* 24
  25. 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. 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
  27. 27. Industrialisation des Développements JavaScript 27
  28. 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. 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
  30. 30. Le Maven du Web 30
  31. 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. 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
  33. 33. Mise en œuvre sur le projet 33
  34. 34. Web mobile 34
  35. 35. Fragmentation des navigateurs 35
  36. 36. Bienvenue au BUG Village ! 36
  37. 37. Constamment adapter l’ergonomie et le design 37
  38. 38. La solution : tester en continu… 38
  39. 39. …et rapprocher les acteurs 39
  40. 40. L’utilisateur au centre des développements 40
  41. 41. Les tests utilisateurs internes 41
  42. 42. La bêta publique 42
  43. 43. Conclusion 43
  44. 44. Aller plus loin : saisir l’opportunité de l’architecture API 44
  45. 45. Merci ! Olivier Lament – ING Direct Jonathan Meiss - @JohnMeiss François Petitit - @FrancoisPetitit © OCTO 2014 45

×