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 et de l’audit (en Polymer, D3.js, …)

Senior Manager

Deloitte Risk Advisory

Technology Risk Solution

Twitter : @celine_louvet

Github : celinelouvet

Céline Louvet

Développeuse Full Stack

Anciennement

développeuse Backend Java

Fan des tests

Évangeliste Git

L’application

L’applicationDeloitte 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.

Pourquoi polymerDeloitte EasyRisk

Choix technique opéré par un

développeur Deloitte

Une application avec les techs du futur

Les avantagesDeloitte EasyRisk

Prototypage facile

Mode SAAS

Design “inclus”

Réutilisation des “modules” & interfaces

Les difficultéesDeloitte EasyRisk

Quasi inexistence de développeurs

Réticence des technos fournies par

“Google”

Instabilité des 1ères versions

L’applicationDeloitte EasyRisk

DEMO

Techniquement

Techniquement1ère version

1ère version en environnement

controlé :

● Nombre d’utilisateurs restreint

● Uniquement Chrome

● Desktop & mobile

TechniquementMaterial Design

Suivi des règles du Material

Design :

● material effect

● ripple effect

● choix d’une couleur principale et

d’une couleur d’accentuation

Phase de digitalisation :

● A la pointe de la technologie

● Émission d’un standard

TechniquementBesoin stratégique

A la pointe de la technologie

Standard du W3C

Composants clé en main

TechniquementAvantage des WebComponents

Trop à la pointe de la

technologie ?

Implémentation des

browsers

TechniquementInconvénient des WebComponents

Polyfills

Syntaxe

Facile à prendre en main

TechniquementAvantages de Polymer

En beta

Nouvelles versions

fréquentes

Changements lourds

TechniquementInconvénients de Polymer

L’architecture

L’architectureVue Macro

DataSource

Custom Elements

FRONT

BACK

Facade REST

Services

L’architectureDataSource en détails

Couche faite en JS

uniquement

DataSource

Custom Elements

FRONT

L’architectureDataSource en détails

Préparation des requêtes

Extraction des réponses

DataSource

Custom Elements

FRONT

L’architectureDataSource 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

● datagrid

● etc.

L’architectureÉléments en détails

DataSource

Custom Elements

FRONT

Composants spécifiques :

● vues globales

● le dashboard

● contenu des onglets

● etc.

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 difficile

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 ?