Retour d’expérience :
Polymer chez
Twitter : @ThibautdlB
Thibaut de la Bouvrie
Développement de solutions innovantes pour les métiers de la gestion
du risque...
Twitter : @celine_louvet
Github : celinelouvet
Céline Louvet
Développeuse Full Stack
Anciennement
développeuse Backend Jav...
L’application
L’application
Deloitte EasyRisk
Application en support de cartographie
de risques
http://innovation.deloitte.fr/risk/easyr...
Pourquoi polymer
Deloitte EasyRisk
Choix technique opéré par un
développeur Deloitte
Une application avec les techs du fut...
Les avantages
Deloitte EasyRisk
Prototypage facile
Mode SAAS
Design “inclus”
Réutilisation des “modules” & interfaces
Les difficultées
Deloitte EasyRisk
Quasi inexistence de développeurs
Réticence des technos fournies par
“Google”
Instabili...
L’application
Deloitte EasyRisk
DEMO
Techniquement
Techniquement
1ère version
1ère version en environnement
controlé :
● Nombre d’utilisateurs restreint
● Uniquement Chrome
...
Techniquement
Material Design
Suivi des règles du Material
Design :
● material effect
● ripple effect
● choix d’une couleu...
Phase de digitalisation :
● A la pointe de la technologie
● Émission d’un standard
Techniquement
Besoin stratégique
A la pointe de la technologie
Standard du W3C
Composants clé en main
Techniquement
Avantage des WebComponents
Trop à la pointe de la
technologie ?
Implémentation des
browsers
Techniquement
Inconvénient des WebComponents
Polyfills
Syntaxe
Facile à prendre en main
Techniquement
Avantages de Polymer
En beta
Nouvelles versions
fréquentes
Changements lourds
Techniquement
Inconvénients de Polymer
L’architecture
L’architecture
Vue Macro
DataSource
Custom Elements
FRONTBACK
Facade REST
Services
L’architecture
DataSource en détails
Couche faite en JS
uniquement
DataSource
Custom Elements
FRONT
L’architecture
DataSource en détails
Préparation des requêtes
Extraction des réponses
DataSource
Custom Elements
FRONT
L’architecture
DataSource en détails
Mock de données pour les
tests
DataSource
Custom Elements
FRONT
L’architecture
en détails
DataSource
Custom Elements
FRONT
70 composants
Allant du plus simple au plus
complexe
L’architecture
Éléments en détails
DataSource
Custom Elements
FRONT
Composants communs :
● popup évoluée
● file upload
● d...
L’architecture
Éléments en détails
DataSource
Custom Elements
FRONT
Composants spécifiques :
● vues globales
● le dashboar...
L’architecture
Éléments en détails
DataSource
Custom Elements
FRONT
Quelques tests utilisant
WCT
Les pièges à éviter
Les pièges à éviter
Manque de découpage :
● JS trop complexe
● template trop complexe
● difficile à tester
Les pièges à éviter
Single page app :
● bookmark impossible
● maintenir “l’état” des données
● difficile à tester
Les pièges à éviter
Manque de tests :
● pas d’assurance du
fonctionnement
● plus de code à investiguer
● refactoring diffi...
La suite ?
La suite ?
Migration de 0.5 à 1.0
La suite ?
Simplifier les composants
Ecrire des tests
La suite ?
Intégration avec D3
Des questions ?
Prochain SlideShare
Chargement dans…5
×

Rex polymer par Céline Louvet et Thibaut de la Bouvrie - Meetup Paris Web Components 09/07/15

1 069 vues

Publié le

Retrouvez les slides de la présentation "Rex Polymer" de Céline Louvet de SFEIR et Thibault de la Bouvrie de Deloitte lors du meetup Paris WebComponents du jeudi 09 Juillet chez SFEIR.

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

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

Aucune remarque pour cette diapositive

Rex polymer par Céline Louvet et Thibaut de la Bouvrie - Meetup Paris Web Components 09/07/15

  1. 1. Retour d’expérience : Polymer chez
  2. 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. 3. Twitter : @celine_louvet Github : celinelouvet Céline Louvet Développeuse Full Stack Anciennement développeuse Backend Java Fan des tests Évangeliste Git
  4. 4. L’application
  5. 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. 6. Pourquoi polymer Deloitte EasyRisk Choix technique opéré par un développeur Deloitte Une application avec les techs du futur
  7. 7. Les avantages Deloitte EasyRisk Prototypage facile Mode SAAS Design “inclus” Réutilisation des “modules” & interfaces
  8. 8. Les difficultées Deloitte EasyRisk Quasi inexistence de développeurs Réticence des technos fournies par “Google” Instabilité des 1ères versions
  9. 9. L’application Deloitte EasyRisk DEMO
  10. 10. Techniquement
  11. 11. Techniquement 1ère version 1ère version en environnement controlé : ● Nombre d’utilisateurs restreint ● Uniquement Chrome ● Desktop & mobile
  12. 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. 13. Phase de digitalisation : ● A la pointe de la technologie ● Émission d’un standard Techniquement Besoin stratégique
  14. 14. A la pointe de la technologie Standard du W3C Composants clé en main Techniquement Avantage des WebComponents
  15. 15. Trop à la pointe de la technologie ? Implémentation des browsers Techniquement Inconvénient des WebComponents
  16. 16. Polyfills Syntaxe Facile à prendre en main Techniquement Avantages de Polymer
  17. 17. En beta Nouvelles versions fréquentes Changements lourds Techniquement Inconvénients de Polymer
  18. 18. L’architecture
  19. 19. L’architecture Vue Macro DataSource Custom Elements FRONTBACK Facade REST Services
  20. 20. L’architecture DataSource en détails Couche faite en JS uniquement DataSource Custom Elements FRONT
  21. 21. L’architecture DataSource en détails Préparation des requêtes Extraction des réponses DataSource Custom Elements FRONT
  22. 22. L’architecture DataSource en détails Mock de données pour les tests DataSource Custom Elements FRONT
  23. 23. L’architecture en détails DataSource Custom Elements FRONT 70 composants Allant du plus simple au plus complexe
  24. 24. L’architecture Éléments en détails DataSource Custom Elements FRONT Composants communs : ● popup évoluée ● file upload ● datagrid ● etc.
  25. 25. L’architecture Éléments en détails DataSource Custom Elements FRONT Composants spécifiques : ● vues globales ● le dashboard ● contenu des onglets ● etc.
  26. 26. L’architecture Éléments en détails DataSource Custom Elements FRONT Quelques tests utilisant WCT
  27. 27. Les pièges à éviter
  28. 28. Les pièges à éviter Manque de découpage : ● JS trop complexe ● template trop complexe ● difficile à tester
  29. 29. Les pièges à éviter Single page app : ● bookmark impossible ● maintenir “l’état” des données ● difficile à tester
  30. 30. Les pièges à éviter Manque de tests : ● pas d’assurance du fonctionnement ● plus de code à investiguer ● refactoring difficile
  31. 31. La suite ?
  32. 32. La suite ? Migration de 0.5 à 1.0
  33. 33. La suite ? Simplifier les composants Ecrire des tests
  34. 34. La suite ? Intégration avec D3
  35. 35. Des questions ?

×