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 ...