Repensando aplicações WordPress com Backbone

Repensando aplicações WordPress com Backbone

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

May 31, 2014
Tweet

Transcript

  1. 3.
  2. 6.

    REQ HTML CLICK JSON GENE ADD JSON CLICK ANIMATE CLASS

    UE RATE REQUEST ST 1. 2. 3. 4. 5. 6. 7. 8. 9. ...
  3. 7.

    REQ HTML CLICK JSO N G EN E ADD JSON

    CLICK ANI M ATE CLA SS UE RATE REQ UEST ST
  4. 13.

    As soluções facilitam a manutenção, o reuso e graças ao

    conhecimento das abstrações, a leitura.
  5. 19.
  6. 23.

    Adding a MVC (Model, View Controller) framework like this to

    WordPress is helping the cause to consider it as a true web framework and able to build web applications on top of it. Jason Bradley http://torquemag.io/backbone-underscore-35
  7. 25.

    Backbone provides a minimal set of data-structuring (Models, Collections) and

    user interface (Views, URLs) primitives [...]. Addy Osmani http://addyosmani.github.io/backbone-fundamentals
  8. 26.
  9. 32.

    var question = new Question({ id: 345, enunciation: 'Qual o

    valor da soma...', alternatives: [ '1', '42',//... ] }); Instanciação 
 com atributos
  10. 35.
  11. 47.

    var answer = new Answer({ question_id: 2, alternative_id: 1 });

    ! answer.save(); POST: /answer
 {question_id: 2, alternative_id: 1}
  12. 48.

    var }); ! Indica que não se trata 
 de

    um novo registro ! id: 42, ! ! ! ! answer.save();
  13. 54.

    1. Armazenam os dados da aplicação; 2. Notificam ouvintes via

    eventos; 3. São sincronizáveis com o servidor.
  14. 61.
  15. 68.

    1. Armazenam grupos de dados da aplicação; 2. Notificam ouvintes

    via eventos, inclusive sobre seus models; 3. São sincronizáveis com o servidor
 Podem requisitar models.
  16. 69.
  17. 71.

    var NavView = Backbone.View.extend({ initialize: function () { console.log('View initialized');

    } }); ! var nav = new NavView({ el: $('[data-nav]') }); Passando um elemento 
 para a view
  18. 74.

    <script type="text/template" data-template="nav"> <ul> <% _.each(questions, function (question) { %>

    <li><%= question.number %></li> <% }); %> </ul> </script> Código de template 
 no HTML da página H TM L
  19. 77.

    var NavView = Backbone.View.extend({ template: _.template( $('[data-template="questions"]').html() ), render: function

    () { this.$el.html(this.template( this.model.toJSON() )); return this; } }); Model é convertido em JSON 
 e passado para o template
  20. 79.

    var NavView = Backbone.View.extend({ initialize: function () { this.model.on('change', this.render,

    this); }, // ... }); Model notifica render quando 
 houver alguma mudança
  21. 80.

    var NavView = Backbone.View.extend({ initialize: function () { this.listenTo(model, 'change',

    this.render); }, // ... }); View espera que render seja 
 notificado a respeito de mudanças
  22. 82.

    var QuestionView = Backbone.View.extend({ events: { 'click [data-alternative]': 'answered' },

    answered: function (event) { var element = $(event.currentTarget); this.model.answer( element.data('alternative')); } }); Quando o usuário clicar 
 em uma alternativa... ... notifica o model 
 da sua escolha
  23. 83.

    1. Possuem um elemento HTML; 2. São semelhantes a controllers

    por conterem lógica de apresentação; 3. Monitoram dados e interações do usuário.
  24. 84.
  25. 86.

    var Router = Backbone.Router.extend({ routes: { '' : 'root' 'question/:id':

    'question' }, ! question: function () { // Instanciate view } }); Minhas rotas Criação das views
  26. 92.
  27. 93.
  28. 94.

    { "ID": 3928, "site_ID": 24866913, "author": { "ID": 9600569, "login":

    "dongomezjr", "email": false, "name": "Don", "nice_name": "dongomezjr", "URL": "http:\/\/carryingthegun.com", "avatar_URL": "https:\/\/0.gravatar.com\/avatar\/9e413dce97a6a11e6a436e1d6 "profile_URL": "http:\/\/en.gravatar.com\/dongomezjr", "site_ID": 24866913 }, "date": "2014-05-29T16:32:10-05:00", "modified": "2014-05-29T16:32:10-05:00", "title": "I&#8217;ve got your back, Gwyneth Paltrow", "URL": "http:\/\/carryingthegun.com\/2014\/05\/29\/ive-got-your-back-gwyneth-p "short_URL": "http:\/\/wp.me\/p1Gl1f-11m", "content": "<p><a href=\"http:\/\/carryingthegun.files.wordpress.com\/2014\/05 https://public-api.wordpress.com/rest/v1/sites/carryingthegun.com/ posts/3928