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

1. Les projets AngularJS

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

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

4. L’évolution
Server
HTML/CSS
DAO
Services
Présentation
HTML/CSS
DAO
Services
Présentation
HTML/CSS
Javascript
DAO
Services
HTML/CSS
Javascript
-
MV*
DAO
Services
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
DAO
Services
DAO
Services
APPLICATION
WEB
STRUCTURATION
EN
COUCHE
SÉPARATION
PRÉSENTATION
/SERVICE
RETOUR
AU
CLIENT/SERVER
*AAS
Arrivée du
Web
Architecture
N Tiers
en couche
SOA / Services
Client de plus en plus riche
Standardisation des devices
Mobilité / multidevice
Front/Back
Application mobile
Cloud
Microservices
Container
DevOps
IoT

5. Exemple
GED
SMS
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
Services Orange
de Rappel
Mail
Application
Mobile
Client
OAuth2
Console
administration
Accès WEB
Client
CMS
(Jahia)
Account
REST

6. Impacts
Equipes
Organisation des projets
Testing / Mock

7. 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
LeTest
JUnit, Sonar
Les outils
Eclipse

8. Ecosystème
front
Langages
CSS, JS, HTML
Framework AngularJS,
IONIC, Bootstrap,
JQuery
Communication
REST/JSON Build
Grunt; Bower; nodeJS
Mobile
Phonegap, Android
studio, XCode
Test
Jasmine, Protractor
Les outils
Chrome Dev tools; Brackets,
Webstorm,

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

10. 4 ou 5
pattes
Front
Back
DevOps
Cloud
Mobile
Front Back Fullstack

11. And you ? 1 profil ? 2 profils ?
1 équipe ? 2 équipes ?

12. Impacts - Projets

13. Traditional dev
Brief Sprint 0
Discovery
Design
Test
…
End
Dev
Discovery
Design
Test
Dev
Discovery
Design
Test
Dev
DAO
Services
Présentation
HTML/CSS
Javascript
•Construction d’une application n-Tiers orientée
serveur
•1 Equipe
•1 Product Owner
•1 Scrum master

14. 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
RAML
DAO
Services
HTML/CSS
Javascript
-
MV*

15. 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/CSS
Javascript
-
MV*

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

17. Next: Microservices ou *aaS
DAO
Services
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
DAO
Services
DAO
Services
• Chaque microservices a sa propre roadmap
• 1 équipe 360°
• IT, ITO, Architecte, Product owner, Scrumaster …
• Gestion par les API forte

18. Le contrat
…
l’API

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

20. MOCK … with AngularJS

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

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

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

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

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

26. Test de contrôleur

27. Angular 2.0

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

29. • 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’equiped’Angulardevraitpublierunoutil
d’assistanceàlamigration(ilestdéjàentestchez
Google)
• Ressource
• https://angularu.com/ng/session/2015sf/migra
ting-to-angular2
Migration

30. Contacts
6 rue Laferrière
75009 Paris
Tel. 01 56 43 48 48
Fax. 01 56 43 48 49
www.objectif-informatique.fr
François CHERPION
Directeur du développement et de l’Innovation
Twitter : @Francoi06336252
Tél : m +33 6 81 83 04 62
Skype: francois.cherpion@live.com
fcherpion@objectif-informatique.fr