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
HTML
IMPORTS
SHADOW
DOM
TEMPLATES CUSTOM
ELEMENTS
But ...
Polyfills ...
Architecture
<paper-checkbox></paper-checkbox>
<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
e...
A simple container with a header
section and a content section
<core-header-panel>
<core-header-panel flex>
<core-toolbar>...
<core-drawer-panel>
<core-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</core-drawer-...
LE CODE
Notre composant Polymer
Une mire d’authentification pré-
connectée
<frf-login>
<frf-login loginurl=“/login"
logouturl=“/logout">
<span>C’est qui ?...
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 autres
ui: {
$frfLogin: 'frf-login'
},
events: {
'login-success frf-login': 'onL...
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-e...
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' } };
w...
Web Components Tester
npm install -g web-component-tester
wtc
OU
bower install Polymer/web-component-tester --save
<script...
An exemple
https://github.com/cbalit/re-captcha
MERCI ...
Backbone, marionnette et polymer sont dans un bateau
Prochain SlideShare
Chargement dans…5
×

Backbone, marionnette et polymer sont dans un bateau

1 323 vues

Publié le

Retrouvez les slides de la présentation de Cyril Balit lors du meetup Backbone.js Paris du 21 Avril 2015 chez Mozilla Paris.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 323
Sur SlideShare
0
Issues des intégrations
0
Intégrations
13
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Backbone, marionnette et polymer sont dans un bateau

  1. 1. Backbone, Marionnette et Polymer sont dans un bateau ... @cbalit
  2. 2. Moi... Cyril Balit Team Leader Front End @cbalit
  3. 3. CONTEXTE
  4. 4. Stack existante: Backbone
  5. 5. Des briques transverses: authentification
  6. 6. Des besoins d’évolutions
  7. 7. Objectifs
  8. 8. Enrichir la stack existante
  9. 9. Marionnette pour moins de Boilerplate
  10. 10. Initialisation
  11. 11. Views
  12. 12. ET... ...
  13. 13. Polymer pour plus de souplesse
  14. 14. WEB COMPONENTS HTML IMPORTS SHADOW DOM TEMPLATES CUSTOM ELEMENTS
  15. 15. But ...
  16. 16. Polyfills ...
  17. 17. Architecture
  18. 18. <paper-checkbox></paper-checkbox> <paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input>
  19. 19. A simple container with a header section 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
  20. 20. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
  21. 21. LE CODE
  22. 22. Notre composant Polymer
  23. 23. Une mire d’authentification pré- connectée <frf-login> <frf-login loginurl=“/login" logouturl=“/logout"> <span>C’est qui ?</span> </frf-login>
  24. 24. Architecture frf-login frf-user frf-login-form frf-confirm html5-paper-input frf-login-service core-ajax
  25. 25. API
  26. 26. L’intégration avec marionnette ...
  27. 27. Une vue dédiée, un élément html comme les autres ui: { $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(); }
  28. 28. Timeline
  29. 29. ALORS ..
  30. 30. Bah il ne nous a rien montré !!!
  31. 31. LES OUTILS
  32. 32. Bower bower install --save Polymer/polymer bower install --save Polymer/core-elements bower install --save Polymer/paper-elements
  33. 33. Yeoman npm install -g generator-polymer yo polymer (polymer:app) yo polymer:el yo polymer:seed yo polymer:gh
  34. 34. 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();
  35. 35. 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>
  36. 36. An exemple https://github.com/cbalit/re-captcha
  37. 37. MERCI ...

×