Backbone, marionnette et polymer sont dans un bateau
-
Upload
sfeir -
Category
Technology
-
view
409 -
download
0
Transcript of Backbone, marionnette et polymer sont dans un bateau
Backbone, Marionnette et Polymer sont dans un bateau ...
@cbalit
Moi...
Cyril Balit Team Leader Front End
@cbalit
CONTEXTE
Stack existante: Backbone
Des briques transverses: authentification
Des besoins d’évolutions
Objectifs
Enrichir la stack existante
Marionnette pour moins de Boilerplate
Initialisation
Views
ET... ...
Polymer pour plus de souplesse
WEB COMPONENTS
HTMLIMPORTS
SHADOWDOM
TEMPLATES CUSTOMELEMENTS
But ...
Polyfills ...
Architecture
<paper-checkbox></paper-checkbox>
<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>
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
<core-drawer-panel>
<core-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</core-drawer-panel>
LE CODE
Notre composant Polymer
Une mire d’authentification pré-connectée
<frf-login>
<frf-login loginurl=“/login"
logouturl=“/logout">
<span>C’est qui ?</span>
</frf-login>
Architecture
frf-login
frf-user
frf-login-form
frf-confirm
html5-paper-input
frf-login-service
core-ajax
API
L’intégration avec marionnette ...
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();}
Timeline
ALORS ..
Bah il ne nous a rien montré !!!
LES OUTILS
Bower
bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
Yeoman
npm install -g generator-polymer
yo polymer (polymer:app)
yo polymer:el
yo polymer:seed
yo polymer:gh
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();
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>
An exemple
https://github.com/cbalit/re-captcha
MERCI ...