SlideShare une entreprise Scribd logo
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/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
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
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 Mongo,
MySQL, Oracle,
PostGre,
Cassandra:/Spark
LeTest
JUnit, Sonar
Les outils
Eclipse
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,
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
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
Services
Présentation
HTML/CSS
Javascript
•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
RAML
DAO
Services
HTML/CSS
Javascript
-
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/CSS
Javascript
-
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
Services
DAO
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’equiped’Angulardevraitpublierunoutil
d’assistanceàlamigration(ilestdéjàentestchez
Google)
• Ressource
• https://angularu.com/ng/session/2015sf/migra
ting-to-angular2
Migration
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

Contenu connexe

Tendances

Angluars js
Angluars jsAngluars js
Angluars js
RYMAA
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
Esokia
 
AngularJS
AngularJSAngularJS
AngularJS
Ouadie LAHDIOUI
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
Yves-Emmanuel Jutard
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
Pierric Cistac
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
Abdoulaye Dieng
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
yllieth
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
Peak Ace
 
Angular 2
Angular 2Angular 2
Angular 2
Zoubir REMILA
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Vincent Caillierez
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
Mael Monnier
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
Ouadie LAHDIOUI
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
Rui Carvalho
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
Horacio Gonzalez
 
Présentation de WCF
Présentation de WCFPrésentation de WCF
Présentation de WCF
Romain Coste
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
OLBATI
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
Cynapsys It Hotspot
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 

Tendances (20)

Angluars js
Angluars jsAngluars js
Angluars js
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
AngularJS
AngularJSAngularJS
AngularJS
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
 
Angular 2
Angular 2Angular 2
Angular 2
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 
Présentation de WCF
Présentation de WCFPrésentation de WCF
Présentation de WCF
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 

Similaire à Retour d'experience projet AngularJS

Meetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec AzureMeetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec Azure
Samir Arezki ☁
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Microsoft
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
Djamel Zouaoui
 
Pourquoi rails est génial? (version longue)
Pourquoi rails est génial? (version longue)Pourquoi rails est génial? (version longue)
Pourquoi rails est génial? (version longue)
Camille Roux
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetup
Aspectize
 
Introduction à Cloud Foundry et au PaaS
Introduction à Cloud Foundry et au PaaSIntroduction à Cloud Foundry et au PaaS
Introduction à Cloud Foundry et au PaaS
Gerard Konan
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
inesrdissi60
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
Ippon
 
03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA 03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA
Cellenza
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)
Vincent Biret
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
Thierry Buisson
 
Architectures microservices
Architectures microservicesArchitectures microservices
Architectures microservices
Riadh MNASRI
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
imenhamada17
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
Microsoft Technet France
 
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Jasmine Conseil
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
Khalid Jebbari
 
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir ArezkiGab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Samir Arezki ☁
 
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir ArezkiGab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
AZUG FR
 

Similaire à Retour d'experience projet AngularJS (20)

Meetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec AzureMeetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec Azure
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
 
Pourquoi rails est génial? (version longue)
Pourquoi rails est génial? (version longue)Pourquoi rails est génial? (version longue)
Pourquoi rails est génial? (version longue)
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetup
 
Introduction à Cloud Foundry et au PaaS
Introduction à Cloud Foundry et au PaaSIntroduction à Cloud Foundry et au PaaS
Introduction à Cloud Foundry et au PaaS
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
 
03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA 03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
 
Architectures microservices
Architectures microservicesArchitectures microservices
Architectures microservices
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
 
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir ArezkiGab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
 
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir ArezkiGab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
Gab 2017 Lyon - les strategies d'intégration avec Azure iPaaS - Samir Arezki
 

Retour d'experience projet 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
  • 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
  • 11. And you ? 1 profil ? 2 profils ? 1 équipe ? 2 équipes ?
  • 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
  • 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.
  • 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