Le document traite des nouvelles architectures web, centré sur l'expérience utilisateur et l'industrialisation des développements JavaScript. Il présente des principes architecturaux, l'évolution des frameworks, et souligne l'importance de l'API dans les projets. La conclusion invite à saisir les opportunités offertes par les architectures basées sur les APIs.

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. Préambule : des geeks et des boss
2

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. http://m.ingdirect.fr
4

5. Driver 1/3 : l’expérience utilisateur
5

6. Driver 2/3 : les coûts
6

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

8. Principes
d’architecture
8

9. L’évolution des architectures Web
9

10. L’évolution des architectures Web
10

11. L’évolution des architectures Web
11

12. L’évolution des architectures Web
12

13. API-fication du S.I.
Desktops
API
service
Smartphones
Tablettes
API
Autres … ?
service
API
SI
Open API
13

14. La sécurité ?
14

15. API-fication des équipes projet
PO
PO
Equipe
WebApp
Equipe
API
Ergonome +
graphiste
Développeurs
Développeurs
15

16. Les nouveaux
frameworks du Web
16

17. Evolution des navigateurs depuis
l’an 2000
17

18. Et même sur mobile !
18

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

20. Une multiplication des frameworks
MV*
20

21. Lequel choisir ?
21

22. AngularJS : un intérêt croissant
22

23. Des communautés très actives
23

24. Architecture applicative d’une
application Web MV*
24

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

27. Industrialisation
des
Développements
JavaScript
27

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

30. Le Maven du Web
30

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

33. Mise en œuvre sur le projet
33

34. Web mobile
34

35. Fragmentation des navigateurs
35

36. Bienvenue au BUG Village !
36

37. Constamment adapter l’ergonomie
et le design
37

38. La solution : tester en continu…
38

39. …et rapprocher les acteurs
39

40. L’utilisateur au centre des
développements
40

41. Les tests utilisateurs internes
41

42. La bêta publique
42

43. Conclusion
43

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

45. Merci !
Olivier Lament – ING Direct
Jonathan Meiss - @JohnMeiss
François Petitit - @FrancoisPetitit
© OCTO 2014
45