Upload
francois-cherpion
View
1.218
Download
1
Embed Size (px)
Citation preview
Les projets AngularJS
• Impacts sur les projets de la séparation Front & back entre autre avec AngularJS
• Pistes de résolutions basée sur nos expériences
• AngularsJS 2.0 – nouveautés et migration
Objectifs
• Quelques éléments de contexte - API, Microservices, Agilité, DevOps, Cloud
• Organisation de projets Front - Back: impacts, dépendances et solutions
• Les normes & bonnes pratiques issues de Retours d'Expériences
• Un focus sur AngularsJS 2.0
Agenda
L’évolution
Server
HTML/CSS
DAO
Services
Présentation
HTML/CSS
DAO
Services
Présentation
HTML/CSSJavascript
DAO
Services
HTML/CSSJavascript
-MV*
DAO
Services
HTML/CSS /Javascript
-MV*
HTML/CSS /Javascript
-MV* HTML/CSS /
Javascript-
MV*
DAO
ServicesDAO
Services
APPLICATION WEB
STRUCTURATION EN
COUCHE
SÉPARATION PRÉSENTATION
/SERVICE
RETOUR AU
CLIENT/SERVER
*AAS
Arrivée duWeb
Architecture N Tiers
en couche
SOA / Services Client de plus en plus riche
Standardisation des devices
Mobilité / multidevice Front/Back
Application mobile
CloudMicroservices
ContainerDevOps
IoT
Exemple
GED
SMS
HTML/CSS /Javascript
-MV*
HTML/CSS /Javascript
-MV*
HTML/CSS /Javascript
-MV*
Services Orange de
Rappel
Application MobileClient
OAuth2
Console administration
Accès WEB Client
CMS(Jahia)
Account
REST
ImpactsEquipesOrganisation des projets Testing / Mock
Ecosystème back
Le langage JAVA
Le framework JEE
Protocol REST/JSON ;
MQ; JMS; SOAP
Le build Maven; Jenkins
Les données Mongo, MySQL,
Oracle, PostGre,
Cassandra:/Spark
Le Test JUnit, Sonar
Les outilsEclipse
Ecosystème front
Langages CSS, JS, HTML
Framework AngularJS, IONIC, Bootstrap, JQuery
CommunicationREST/JSON Build
Grunt; Bower; nodeJS
MobilePhonegap,
Android studio, XCode
Test Jasmine,
Protractor
Les outilsChrome Dev tools;
Brackets, Webstorm,
Front•Ecosystem•Changement de mindset•Conception (ex: pub/sub; asynchrone, socket)•Orienté utilisateur•Ça ne doit pas juste fonctionner, ça doit être beau !!!
•Mobilité + Multi devices •Design / UX •Wireframe, parcours clients, PSD
Back•Ecosystem•Orienté API •Design, test, cycle de vie
•Données et logique métier•Performances •Scalabilité •Robuste architecture
People
4 ou 5 pattes
FrontBack DevOps
CloudMobile
Front
Back
Fullstack
And you ? 1 profil ? 2 profils ? 1 équipe ? 2 équipes ?
Impacts - Projets
Traditional dev
Brief Sprint 0
Discovery
Design
Test …End
Dev
Discovery
Design
Test
Dev
Discovery
Design
Test
Dev
DAO
Services
Présentation
HTML/CSSJavascript
•Construction d’une application n-Tiers orientée serveur
• 1 Equipe • 1 Product Owner• 1 Scrum master
Le Front du back
• Construction de l’interface utilisateur d’un back• Front : AngularJS• API REST • Back JEE
• Construction parallèle• 2 livrables > 1 application • 2 Equipes projet• 1 Recette
RAMLDAO
Services
HTML/CSSJavascript
-MV*
Le Front ET le Back
• Construction d’une application interne et à destination des clients
• Front : AngularJS• API REST • Back JEE
• 1 application • 1 équipes projet• 1 équipe de recette
• MOCK des services tiers SOAP-UI
• Contrats fournis par les applications tiers
DAO
Services
HTML/CSSJavascript
-MV*
Appli mobile
Services
HTML/CSS /
Javascript-
MV*
HTML/CSS /
Javascript-
MV*
Services
CMS
Services
• Construction d’une application Mobile + Console administration/chat• Front : AngularJS • Phonegap mobile• API REST • Back JEE /Atmosphere
• 1 application • 1 Equipes projet• 1 Recette • Utilisation des environnements de recettes des services providers
Next: Microservices ou *aaS
DAO
Services
HTML/CSS /Javascript
-MV*
HTML/CSS /Javascript
-MV*
DAO
ServicesDAO
Services
• Chaque microservices a sa propre roadmap• 1 équipe 360°
• IT, ITO, Architecte, Product owner, Scrumaster …• Gestion par les API forte
Le contrat…
l’API
• Design aussi générique que possible• Ne pas créer un API en fonction d’un consommateur
• Versioning• Descripteur du contrat de service
• RAML, Doc
• Le provider de l’API • Fournit le MOCK• Responsable de la non régression du service et de la SLA
• Comment simuler les services • Environnement de test• SOAP-UI• Mock AngularJS
API management
–Quelques principes
MOCK … with AngularJS
Bonnes pratiques Angular.Js• L’ouvrage de référence en la matière est Angular
Style Guide de John Papa (Expert Angular chez Google)
https://github.com/johnpapa/angular-styleguide
• Il existe une traduction française :https://github.com/johnpapa/angular-styleguide/blob/master/i18n/fr-FR.md
• Dans la suite, on va se focaliser principalement sur les contrôleurs et les factories
Contrôleurs• Evitez l’utilisation de $scope et utilisez la syntaxe
ControllerAs• Déplacez la logique métier dans les services• Gardez les contrôleurs focalisés (1 contrôleur / 1
vue)
Factories et Services• Référez l’utilisation des factories au services• Ce sont des Singletons• Ils doivent avoir une responsabilité unique• Séparer les appels aux données dans des services
dédiés
Les tests• Librairie de test :
• Jasmine.js• Mocha.js => dans ce cas Chai.js apporte plus d’expressivité aux
assertions• L’utilisation de Mocha/Chai permet d’écrire des assertions de tests
plus expressives.
• Lanceur de Test• Karma
• Navigateur • Phantom.js => Navigateur sans UI• Selenium/Webdriver
• Mock/Bouchons• Sinon.js• Bouchons SoapUi• Bouchons fait maison
Les tests• Les Contrôleurs et Services ainsi écrits, sont des
objets JavaScripts simple et peu dépendants d’Angular et faiblement couplés.
• On va donc pouvoir tester les services de données en utilisant :
• un bouchon SoapUI, • le mock Angular.Js $httpbackend, • ou la fonctionnalité fakeServer de Sinon.js.
• Pour tester les services métiers et les contrôleurs on utilisera des mocks de services de données.
Test de contrôleur
Angular 2.0
• Angular 2 • Typescript (donc EcmaScript6 et sa notion
de Module)• HTML5 (en particuier les Web
Components)
• Angular 2 est 3x plus rapide sur le rendering initial et 5x plus rapide une fois chargé (en particulier pour le scrolling virtuel et le changement de view).
• Angular 2 consomme environ 5x moins de mémoire qu’Angular1
• Renderer • Mobilité => Renderer natif (NativeScript,
…)
• Renderer : Server-Side Rendering
Angular 2
• Suivre les bonnes pratiques décrites dans Angular Style Guide, le guide de bonnes pratiques Angular.js publié par John PAPA.
• Migrer vers la dernière version d’Angular 1.x
• Commencer à regarder Typescript et ES6.
• Pour éviter l’effet Big Bang, il faut savoir que la cohabitation entre Angular 1 et Angular 2 est possible à l’intérieur d’une même application.
• L’equipe d’Angular devrait publier un outil d’assistance à la migration (il est déjà en test chez Google)
• Ressource
• https://angularu.com/ng/session/2015sf/migrating-to-angular2
Migration
30Contacts
6 rue Laferrière75009 Paris
Tel. 01 56 43 48 48 Fax. 01 56 43 48 49
www.objectif-informatique.fr
François CHERPIONDirecteur du développement et de l’Innovation
Twitter : @Francoi06336252Tél : m +33 6 81 83 04 62
Skype: [email protected]@objectif-informatique.fr