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 e...
• Quelques éléments de contexte -
API, Microservices, Agilité,
DevOps, Cloud
• Organisation de projets Front -
Back: impac...
L’évolution
Server
HTML/CSS
DAO
Services
Présentation
HTML/CSS
DAO
Services
Présentation
HTML/CSS
Javascript
DAO
Services
...
Exemple
GED
SMS
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
Services Orange
de Rap...
Impacts
Equipes
Organisation 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 Mo...
Ecosystème
front
Langages
CSS, JS, HTML
Framework AngularJS,
IONIC, Bootstrap,
JQuery
Communication
REST/JSON Build
Grunt;...
Front
• Ecosystem
• Changement de mindset
• Conception (ex:
pub/sub; asynchrone,
socket)
• Orienté utilisateur
• Ça ne doi...
4 ou 5
pattes
Front
Back
DevOps
Cloud
Mobile
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
Ser...
Le Front du back
• Construction de l’interface utilisateur d’un back
• Front : AngularJS
• API REST
• Back JEE
• Construct...
Le Front ET le Back
• Construction d’une
application interne et à
destination des clients
• Front : AngularJS
• API REST
•...
Appli mobile
Services
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
Services
CMS
Services
• Construction d’une a...
Next: Microservices ou *aaS
DAO
Services
HTML/CSS /
Javascript
-
MV*
HTML/CSS /
Javascript
-
MV*
DAO
Services
DAO
Services...
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 co...
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 ch...
Contrôleurs
• Evitez l’utilisation de $scope et utilisez la syntaxe
ControllerAs
• Déplacez la logique métier dans les ser...
Factories et Services
• Référez l’utilisation des factories au services
• Ce sont des Singletons
• Ils doivent avoir une r...
Les tests
• Librairie de test :
• Jasmine.js
• Mocha.js => dans ce cas Chai.js apporte plus d’expressivité
aux assertions
...
Les tests
• Les Contrôleurs et Services ainsi écrits, sont des
objets JavaScripts simple et peu dépendants
d’Angular et fa...
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 ...
• Suivre les bonnes pratiques décrites dans
Angular Style Guide, le guide de bonnes
pratiques Angular.js publié par John P...
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 CHERPI...
Prochain SlideShare
Chargement dans…5
×

Retour d'experience projet AngularJS

1 240 vues

Publié le

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

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 240
Sur SlideShare
0
Issues des intégrations
0
Intégrations
15
Actions
Partages
0
Téléchargements
67
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Retour d'experience projet AngularJS

  1. 1. Les projets AngularJS
  2. 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. 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. 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. 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. 6. Impacts Equipes Organisation des projets Testing / Mock
  7. 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. 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. 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. 10. 4 ou 5 pattes Front Back DevOps Cloud Mobile Front Back Fullstack
  11. 11. And you ? 1 profil ? 2 profils ? 1 équipe ? 2 équipes ?
  12. 12. Impacts - Projets
  13. 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. 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. 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. 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. 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. 18. Le contrat … l’API
  19. 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. 20. MOCK … with AngularJS
  21. 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. 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. 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. 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. 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. 26. Test de contrôleur
  27. 27. Angular 2.0
  28. 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. 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. 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

×