Présentation pour le meetup Paris-WebComponents du 09/07/2015. Par Céline Louvet et Thibaut de la Bouvrie

1. Retour d’expérience :
Polymer chez

2. Twitter : @ThibautdlB
Thibaut de la Bouvrie
Développement de solutions innovantes pour les métiers de la gestion
du risque et de l’audit (en Polymer, D3.js, …)
Senior Manager
Deloitte Risk Advisory
Technology Risk Solution

3. Twitter : @celine_louvet
Github : celinelouvet
Céline Louvet
Développeuse Full Stack
Anciennement
développeuse Backend Java
Fan des tests
Évangeliste Git

4. L’application

5. L’application
Deloitte EasyRisk
Application en support de cartographie
de risques
http://innovation.deloitte.fr/risk/easyrisk
Réalisée par Deloitte pour ses besoins
internes et à destination de ses clients.

6. Pourquoi polymer
Deloitte EasyRisk
Choix technique opéré par un
développeur Deloitte
Une application avec les techs du futur

7. Les avantages
Deloitte EasyRisk
Prototypage facile
Mode SAAS
Design “inclus”
Réutilisation des “modules” & interfaces

8. Les difficultées
Deloitte EasyRisk
Quasi inexistence de développeurs
Réticence des technos fournies par
“Google”
Instabilité des 1ères versions

9. L’application
Deloitte EasyRisk
DEMO

10. Techniquement

11. Techniquement
1ère version
1ère version en environnement
controlé :
● Nombre d’utilisateurs restreint
● Uniquement Chrome
● Desktop & mobile

12. Techniquement
Material Design
Suivi des règles du Material
Design :
● material effect
● ripple effect
● choix d’une couleur principale et
d’une couleur d’accentuation

13. Phase de digitalisation :
● A la pointe de la technologie
● Émission d’un standard
Techniquement
Besoin stratégique

14. A la pointe de la technologie
Standard du W3C
Composants clé en main
Techniquement
Avantage des WebComponents

15. Trop à la pointe de la
technologie ?
Implémentation des
browsers
Techniquement
Inconvénient des WebComponents

16. Polyfills
Syntaxe
Facile à prendre en main
Techniquement
Avantages de Polymer

17. En beta
Nouvelles versions
fréquentes
Changements lourds
Techniquement
Inconvénients de Polymer

18. L’architecture

19. L’architecture
Vue Macro
DataSource
Custom Elements
FRONTBACK
Facade REST
Services

20. L’architecture
DataSource en détails
Couche faite en JS
uniquement
DataSource
Custom Elements
FRONT

21. L’architecture
DataSource en détails
Préparation des requêtes
Extraction des réponses
DataSource
Custom Elements
FRONT

22. L’architecture
DataSource en détails
Mock de données pour les
tests
DataSource
Custom Elements
FRONT

23. L’architecture
en détails
DataSource
Custom Elements
FRONT
70 composants
Allant du plus simple au plus
complexe

24. L’architecture
Éléments en détails
DataSource
Custom Elements
FRONT
Composants communs :
● popup évoluée
● file upload
● datagrid
● etc.

25. L’architecture
Éléments en détails
DataSource
Custom Elements
FRONT
Composants spécifiques :
● vues globales
● le dashboard
● contenu des onglets
● etc.

26. L’architecture
Éléments en détails
DataSource
Custom Elements
FRONT
Quelques tests utilisant
WCT

27. Les pièges à éviter

28. Les pièges à éviter
Manque de découpage :
● JS trop complexe
● template trop complexe
● difficile à tester

29. Les pièges à éviter
Single page app :
● bookmark impossible
● maintenir “l’état” des données
● difficile à tester

30. Les pièges à éviter
Manque de tests :
● pas d’assurance du
fonctionnement
● plus de code à investiguer
● refactoring difficile

31. La suite ?

32. La suite ?
Migration de 0.5 à 1.0

33. La suite ?
Simplifier les composants
Ecrire des tests

34. La suite ?
Intégration avec D3

35. Des questions ?