AngularJS pour une application d'entreprise

Transcription

1 AngularJS pour une application d'entreprise SAVOIR FAIRE SERIAL Jean-Philippe Laurent Responsable pôle Web Benoit Charpié-Pruvost Expert AngularJS 18 juin 2015 BRINGING THE HUMAN TOUCH TO TECHNOLOGY BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 1

2 Sommaire ANGULARJS POUR UNE APPLICATION D'ENTREPRISE 1. AngularJS pourquoi? 2. Architecture : Retour d expérience 3. Points forts et bonnes pratiques BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 2

3 1 POURQUOI ANGULARJS? BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 3

4 Au début, Client Lourd APPLICATION DE GESTION CLIENT LOURD Les inconvénients Installation sur poste client Maitrise de l environnement client Accessibilité limité BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 4

5 Application web 1.0 APPLICATION DE GESTION WEB 1.0 Les inconvénients Ergonomie et design pauvre Lenteur BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 5

6 Application web : WOA APPLICATION DE GESTION Web Oriented Architecture Riche Internet Application : HTML5 + JS + CSS Service métier côté serveur data json/xml BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 6

7 Application web : Quelles librairies? APPLICATION DE GESTION BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 7

8 Application Web : AngularJS GOOGLE TREND BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 8

9 2 ARCHITECTURE WOA RETOUR D EXPÉRIENCES BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 9

10 WOA - Concepts APPLICATION DE GESTION Web Oriented Architecture Découplage fort des couches Front et Services API : WebService BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 10

11 HTML View Service REST API WOA - Architecture NOUVEAU PROJET Navigateur Serveur AngularJS Model Model Controller HTTP Business Service CSS Lib JS BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 11

12 Migration Web 1.0 vers WOA BANQUE PRIVÉE 1 Windows Windows Server HTML json VIEW Web ASP API REST Model Business Service HTTP- AMQP Broker AMQP BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 12

13 Connector Integration Backend System BANQUE PRIVÉE 2 Backend System Websphere Service Integration Layer REST API JMS, SOAP,JDBC, Global Business Object HTTP json/xml BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 13

14 3 LES POINTS FORTS D ANGULAR JS BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 14

15 No more boilerplate Registering callbacks Programmatically Marshaling data to and from the UI Manipuler, référencer la DOM Ecrire des tonnes de code juste pour avoir une application qui tourne BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 15

16 Code Bien Structuré Modules Modules Template Controllers Services Directives Template Controllers Services Directives Template Controllers Directives Directives BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 16

17 Code Bien Structuré / Modules Application Fonctionnalité 1 Fonctionnalité 2 Fonctionnalité 3 Third-Party Modules Core BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 17

18 Code Testable Pas de références sur la DOM. Injection de dépendances Outils appropriés Karma, Jasmine, angular-mock BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 18

19 4 PROFESSIONNALISATION / INDUSTRIALISATION BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 19

20 Software Factory BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 20

21 Software Factory / Nouveaux besoins Compilation Issue Tracking Test Automation Quality Analysis Continuous Deployment Source Control Versioning Packaging Concatenation Continuous Integration Minimification Injection BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 21

22 Software Factory / Nouveaux Outils Bower Grunt Gulp BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 22

23 5 BONNES PRATIQUES BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 23

24 Modules POUR NE PAS RÉINVENTER LA ROUE Composants Wrapper de librairies BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 24

25 Autres librairies POUR NE PAS RÉINVENTER LA ROUE BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 25

26 Erreurs à éviter OUCH Référencer la DOM dans les controllers ou services Mettre de la logique dans les controllers Manipuler le scope directement dans le template Faire un seul et même module par application BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 26

27 Responsive Design / Qu est-ce? BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 27

28 Responsive Design / Avantages / Inconvénients BEAUCOUP D AVANTAGES ET QUELQUES INCONVÉNIENTS Ergonomie optimale quelque soit la taille de l écran Retour sur investissement intéressant URL unique Optimisation du référencement Difficile d ajuster les textes Téléchargement de tous les éléments constituant la page Phase de test conséquente Développement plus long et demandant plus de compétences BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 28

29 Merci BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 29