Le document traite des implications de l'utilisation d'AngularJS dans le développement de projets, notamment la séparation entre le front-end et le back-end, tout en proposant des solutions basées sur l'expérience. Il aborde également les nouveautés d'AngularJS 2.0, les bonnes pratiques à adopter, et l'organisation des projets dans le contexte des microservices et de la méthodologie DevOps. Enfin, le document évoque des outils de test et de développement qui facilitent la création d'applications modernes performantes.

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