backbone, marionnette et polymer sont dans un bateau
TRANSCRIPT
![Page 1: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/1.jpg)
Backbone, Marionnette et Polymer sont dans un bateau ...
@cbalit
![Page 2: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/2.jpg)
Moi...
Cyril Balit Team Leader Front End
@cbalit
![Page 3: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/3.jpg)
CONTEXTE
![Page 4: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/4.jpg)
Stack existante: Backbone
![Page 5: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/5.jpg)
Des briques transverses: authentification
![Page 6: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/6.jpg)
Des besoins d’évolutions
![Page 7: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/7.jpg)
Objectifs
![Page 8: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/8.jpg)
Enrichir la stack existante
![Page 9: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/9.jpg)
Marionnette pour moins de Boilerplate
![Page 10: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/10.jpg)
Initialisation
![Page 11: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/11.jpg)
Views
![Page 12: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/12.jpg)
ET... ...
![Page 13: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/13.jpg)
Polymer pour plus de souplesse
![Page 14: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/14.jpg)
WEB COMPONENTS
HTMLIMPORTS
SHADOWDOM
TEMPLATES CUSTOMELEMENTS
![Page 15: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/15.jpg)
But ...
![Page 16: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/16.jpg)
![Page 17: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/17.jpg)
Polyfills ...
![Page 18: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/18.jpg)
Architecture
![Page 19: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/19.jpg)
<paper-checkbox></paper-checkbox>
<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>
![Page 20: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/20.jpg)
A simple container with a headersection and a content section
<core-header-panel>
<core-header-panel flex>
<core-toolbar>
<core-icon-button icon=“menu">
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<div class=“content”>…</div>
</core-header-panel>
MY APP
![Page 21: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/21.jpg)
<core-drawer-panel>
<core-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</core-drawer-panel>
![Page 22: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/22.jpg)
LE CODE
![Page 23: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/23.jpg)
Notre composant Polymer
![Page 24: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/24.jpg)
Une mire d’authentification pré-connectée
<frf-login>
<frf-login loginurl=“/login"
logouturl=“/logout">
<span>C’est qui ?</span>
</frf-login>
![Page 25: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/25.jpg)
Architecture
frf-login
frf-user
frf-login-form
frf-confirm
html5-paper-input
frf-login-service
core-ajax
![Page 26: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/26.jpg)
API
![Page 27: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/27.jpg)
L’intégration avec marionnette ...
![Page 28: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/28.jpg)
Une vue dédiée, un élément html comme les autresui: {
$frfLogin: 'frf-login'},
events: {
'login-success frf-login': 'onLogin', 'logout-success frf-login': 'onLogout'},
initialize: function () {
userChannel.on(userChannel.EVENTS.ASK_LOGOUT, this.logout,this);
},
onLogin: function (e) {
this.ui.$frfLogin.hide(); var userDatas=this.ui.$frfLogin.get(0).getCurrentUser().toJSON(); userChannel.trigger(userChannel.EVENTS.USER_LOGIN,userDatas);
},
onLogout: function (e) {
userChannel.trigger(userChannel.EVENTS.USER_LOGOUT);
this.ui.$frfLogin.show();},
logout: function () {
this.ui.$frfLogin.get(0).logout();}
![Page 29: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/29.jpg)
Timeline
![Page 30: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/30.jpg)
ALORS ..
![Page 31: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/31.jpg)
Bah il ne nous a rien montré !!!
![Page 32: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/32.jpg)
LES OUTILS
![Page 33: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/33.jpg)
Bower
bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
![Page 34: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/34.jpg)
Yeoman
npm install -g generator-polymer
yo polymer (polymer:app)
yo polymer:el
yo polymer:seed
yo polymer:gh
![Page 35: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/35.jpg)
Webdriver IO
var webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName:
'chrome' } };
webdriverio
.remote(options)
.init()
.url('http://www.google.com')
.title(function(err, res) {
console.log('Title was: ' + res.value);
})
.end();
![Page 36: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/36.jpg)
Web Components Tester
npm install -g web-component-tester
wtc
OU
bower install Polymer/web-component-tester --save
<script src="../../web-component-tester/browser.js"></script>
![Page 37: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/37.jpg)
An exemple
https://github.com/cbalit/re-captcha
![Page 38: Backbone, marionnette et polymer sont dans un bateau](https://reader034.vdocuments.net/reader034/viewer/2022042615/55c384a7bb61ebeb7a8b45a0/html5/thumbnails/38.jpg)
MERCI ...