petit déjeuner octo - nouvelles architectures web front-end et apis

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...