Refonte de l’espace client Bouygues Telecom
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2729628/Dino_10693.png)
REX
Carl
Ogren
Stéphane
Bachelier
Backbone en 2016
?
seriously
????
Trends
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2728448/angular-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2728704/React.js_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2728687/ember-logo2.png)
- Maturité du projet : stable depuis 2013
-
- Modularité : préférence pour une librairie
- React : pas assez de recul
- Angular : non rétro compatibilité v1
Pourquoi
Backbone ?
Projet
-
1 espace client existant
~3 - 4 ans d'existence -
1 nouvel espace client
SPA Backbone
=> Migration sur 3 ans
nécessite la cohabitation des deux espaces
Timeline
Juillet
2015
Octobre
2015
Janvier
2016
début
dev
release
publique
ouverture
beta
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2728964/screen-bytel-a360.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2728984/facture.png)
Nouveau site
Existant
Migration
UX 2 sites ?
NON !
Iframeception
Ou les iframes à la rescousse
IFRAME ?
seriously ????
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2728964/screen-bytel-a360.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2728984/facture.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2729256/lego-frame.png)
iFrame
- Depuis 1997
- Standard HTML5
- Mal-aimé mais très puissant
@rem DotJS 2013 pour les curieux
iFrame abuse
by @rem
window.postMessage({})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2727627/lego-phone.jpg)
Liens existants
- ~60 liens à poser (iframe, onglet, ...)
- 4 profils utilisateurs
- peut être spécifique pour chaque lien
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2729548/presidentbusiness.jpg)
Liens existants
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2732315/Screen_Shot_2016-06-10_at_12.50.27.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2732318/factures.png)
Behaviors
Behaviors
- View interactions
- portable logical chunks
- simple Views
- Don't Repeat Yourself
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2725259/07941795-photo-lego-workers.jpg)
Behaviors
- Aucune logique dans les vues !
- => Uniquement de la configuration de liens
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2725263/lego-investissement-150-millions-dollars-jouets-plus-ecologiques.jpg)
à quoi ça sert ?
Behaviors
<a
data-link-type="external"
data-link="mes-factures"
...
>...</a>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2725259/07941795-photo-lego-workers.jpg)
<a
data-link-type="external"
data-link="mes-factures"
...
>...</a>
<a
data-link-type="external"
data-link="mes-factures"
...
>...</a>
concrètement
Behaviors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2725259/07941795-photo-lego-workers.jpg)
<a
data-link="mes-factures"
href="/mon-compte/mes-factures"
target="_blank | _self | _parent | <name> "
...
>...</a>
<a
data-link="mes-factures"
href="/mon-compte/mes-factures"
target="_blank | _self | _parent | <name> "
...
>...</a>
comment configurer ?
1 - 0
Configuration
Configuration
- Des liens à préciser : path, query
- Un comportement : target, route, iframe
- Environnements : dev, staging, prod
- Des liens à préciser : path, query
- Un comportement : target, route, iframe
- Environnements : dev, staging, prod
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2725258/lego-minifigures-8683-serie-1-personnage-crash-test.jpg)
Configuration
- Un format simple : YAML
- Surchargeable : mécanisme d'héritage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2725258/lego-minifigures-8683-serie-1-personnage-crash-test.jpg)
Tout est configurable !
features, routes, API endpoints, ...
2 - 0
{ Backbone.fetch() }
Bouygues Telecom
- plusieurs API
- pas toujours REST
- du JSONP
- avec certaines spécificités
Contexte
Backbone.Model
- API ~REST : gestion des URLS compliquées
- Deux rôles :
fetch et présentation de données - serialisation toJSON
Notre choix:
uniquement présentation de données
Backbone is pre-configured to sync with a RESTful API
fetch ()
-
surcharge de Backbone.Sync
-
utilisation de superagent (
$.ajax)
- surcouche avec superapi
fetch ()
Ce que l'on gagne :
Promise, configuration, middlewares, cache,
découplage réseau / application
Mission accomplished !
The Team
Conclusion
Backbone n'est pas à la mode
c'est grave docteur ?
Backbone n'est pas à la mode
c'est grave docteur ?
Backbone maintenu
1.3.3 : Avril 2016
Backbone & ES6 ES2015
c'est possible: Marionette V3
Backbone n'est pas à la mode
c'est grave docteur ?
Backbone maintenu
1.3.3 : Avril 2016
Backbone, Angular, React, ...
L'important c'est ce qu'on en fait
#EverythingIsAwesome
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/2729650/serie2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/1931603/Twitter-Logo-New-.png)
@CarlOgren
RasCarlito
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98015/images/1931603/Twitter-Logo-New-.png)
@sbachelier
stephanebachelier
Rex Backbone Bouygues Telecom
By stephane bachelier
Rex Backbone Bouygues Telecom
- 2,505