Repensando aplicações WordPress com Backbone

Repensando aplicações WordPress com Backbone

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

May 31, 2014
Tweet

Transcript

  1. Repensando aplicações WordPress com BACK
 BONE.JS

  2. http://jcemer.com

  3. None
  4. Código JavaScript melhora a usabilidade através da adição de interatividade.

  5. http://www.adaptativa.com.br

  6. REQ HTML CLICK JSON GENE ADD JSON CLICK ANIMATE CLASS

    UE RATE REQUEST ST 1. 2. 3. 4. 5. 6. 7. 8. 9. ...
  7. REQ HTML CLICK JSO N G EN E ADD JSON

    CLICK ANI M ATE CLA SS UE RATE REQ UEST ST
  8. A organização de código da maioria das aplicações é precária.

  9. jQuery simplifica requisições e facilita acesso e manipulação de elementos.

  10. Códigos mal escritos ficam fortemente atrelados aos elementos da página.

  11. DESIGN PATTERNS

  12. Solução já conhecida e documentada de como resolver um problema

    específico.
  13. As soluções facilitam a manutenção, o reuso e graças ao

    conhecimento das abstrações, a leitura.
  14. É necessário conhecer diferentes soluções para construir aplicações melhores...

  15. Learning JavaScript Design Patterns Addy Osmani - 2012

  16. Model View Controller é um design pattern introduzido no Smalltalk

    ainda nos anos 70. MVC
  17. São comuns variações deste pattern em frameworks como Zend e

    Ruby on Rails.
  18. Existem muitas implementações front-end que utilizam conceitos do MVC: AngularJS,

    Ember.js, KnockoutJS, ...
  19. None
  20. Pequena biblioteca MV* para melhor organizar e separar interesses da

    sua aplicação.
  21. A biblioteca é madura, popular e já foi empregada nas

    mais complexas aplicações.
  22. Backbone.js já faz parte do core do WordPress desde a

    versão 3.5.
  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
  24. ESTRUTURA DO BACKBONE.JS

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

  27. Os models armazenam os dados da sua aplicação.

  28. var Question = Backbone.Model; Construtor de modelo genérico

  29. É possível utilizar herança para criar um construtor especializado de

    models.
  30. var Question = Backbone.Model.extend({ initialize: function () { console.log('Question initialized');

    } }); Herança via protótipos
  31. var question = new Question(); Instanciação Modelo

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

    valor da soma...', alternatives: [ '1', '42',//... ] }); Instanciação 
 com atributos
  33. question.get('enunciation'); // Qual o valor da soma... Resgatando atributos

  34. Antes de seguir, é preciso
 abrir um pequeno parêntese. (

  35. EVENTOS

  36. $('.element').on('click', function () { // ... }); Eventos do DOM

    
 com jQuery, ok?
  37. O sujeito notifica mudanças no seu estado para sua lista

    de ouvintes. Observer Pattern
  38. lion.on('roar', person.scream); Adicionando ouvinte

  39. lion.trigger('roar'); lion.on('roar', person.scream); Notificando ouvintes

  40. lion.on('roar', person.scream); Aaaaah! lion.trigger('roar');

  41. )Fazer uso de eventos é uma das principais características do

    Backbone.js.
  42. Models permitem assistir mudanças nos dados e refletir em várias

    partes da aplicação.
  43. question.set('enunciation', 'Qual...'); Notifica ouvintes através de change:enunciation e change

  44. Models utilizam jQuery.ajax para dialogar com APIs REST. RESTful

  45. var Answer = Backbone.Model.extend({ urlRoot: '/answer' });

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

    ! answer.save(); Salvar o modelo
  47. var answer = new Answer({ question_id: 2, alternative_id: 1 });

    ! answer.save(); POST: /answer
 {question_id: 2, alternative_id: 1}
  48. var }); ! Indica que não se trata 
 de

    um novo registro ! id: 42, ! ! ! ! answer.save();
  49. var }); PUT: /answer/42
 {id:42, question_id: 2, alternative_id: 1} !

    id: 42, ! ! ! ! answer.save();
  50. var }); GET: /answer/42 Sincronizar o modelo ! ! !

    ! answer.fetch();
  51. Ao chamar fetch (ou mesmo save), é esperado um JSON

    de atributos.
  52. Havendo mudança nos atributos ao sincronizar, os ouvintes são notificados.

    Observer Pattern
  53. DELETE: /answer/42 Sincronizar o modelo Excluir o modelo var });

    ! ! ! ! answer.destroy();
  54. 1. Armazenam os dados da aplicação; 2. Notificam ouvintes via

    eventos; 3. São sincronizáveis com o servidor.
  55. COLLECTIONS

  56. Coleções são grupos de models.

  57. var Questions = Backbone.Collection.extend({ model: Question }); Construtor da coleção

    de questões
  58. Coleções podem carregar models com uma única requisição.

  59. var questions = new Questions(); questions.url = 'questions'; questions.fetch(); Deve

    retornar um array de atributos
  60. questions.get(345); // question with id 345 Resgatando um 
 model

    pelo seu id
  61. None
  62. Biblioteca que fornece utilitários para auxiliar na programação funcional.

  63. Funções para operar dados ficam disponíveis nas collections.

  64. questions.forEach(function (question) { // each question }); navegando por 


    todos os models
  65. answers.where({ correct: true }).length; // total of corrected answers Filtrando

    models 
 pelos seus atributos
  66. answers.every(function (answer) { return answer.correct }) && "You are the

    best"; Acertou tudo campeão?
  67. As collections possuem todos os métodos comuns de arrays e

    
 outros mais.
  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.
  69. VIEWS

  70. As views gerenciam a relação entre seu código e um

    elemento HTML.
  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
  72. O código das views não deve conter HTML. Para isto,

    utilizamos templates.
  73. A Underscore já possui uma micro engine de templates. (

  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
  75. _.template( $('[data-template="nav"]').html() ); Transformando string 
 em código JavaScript

  76. )Os templates de Underscore são simples existem outros mais robustos.

  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
  78. Geralmente, as views encapsulam dados e sua lógica de apresentação.

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

    this); }, // ... }); Model notifica render quando 
 houver alguma mudança
  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
  81. As views são também sua interface com o usuário.

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

  85. O router conecta URLs a estados da sua aplicação.

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

    'question' }, ! question: function () { // Instanciate view } }); Minhas rotas Criação das views
  87. As views devem tomar do navegador a gerência da navegação

    do usuário.
  88. router.navigate('question/' + id, { trigger: true }); Navegar para uma

    questão
  89. URLs fazem parte do histórico de navegação do usuário.

  90. Toda URL definida pelo router deve também ser servida pelo

    servidor.
  91. 1. Gerenciam as rotas da sua aplicação.

  92. None
  93. Wordpress.com possui uma
 REST API para você acessar seu blog.

    http://developer.wordpress.com/docs/api
  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
  95. A partir disto, já é possível construir uma aplicação.

  96. Os temas podem usar Backbone.js.

  97. https://github.com/tareq1988/wp-backbone

  98. https://github.com/herschel666/Backboned-v2

  99. You’re the operator with your pocket calculator.

  100. Obrigado. @jcemer