• Save
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,521 views

Depuis deux ans, une nouvelle vague technologique submerge le paysage des applications Web : les architectures MV* côté client. ...

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

Statistics

Views

Total Views
1,521
Views on SlideShare
1,346
Embed Views
175

Actions

Likes
3
Downloads
0
Comments
0

5 Embeds 175

http://www.scoop.it 103
http://mxwiki 65
https://www.linkedin.com 3
https://twitter.com 2
http://www.slideee.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • 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 d’architecture Nouveaux frameworks Industrialisation des développements JavaScript Web mobile multiplateforme L’utilisateur au centre des développements Conclusion 3 View slide
  • http://m.ingdirect.fr 4 View slide
  • 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 / 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
  • 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
  • Industrialisation des Développements JavaScript 27
  • 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
  • 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
  • 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’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
  • 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
  • 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