Retour d'experience projet AngularJS

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

Mail

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: francois.cherpion@live.comfcherpion@objectif-informatique.fr