Repensando aplicações WordPress com Backbone

Transcript

1. 1.

   Repensando aplicações WordPress com BACK
 BONE.JS

2. 2.

   http://jcemer.com

3. 3.

   None
4. 4.

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

5. 5.

   http://www.adaptativa.com.br

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

   REQ HTML CLICK JSO N G EN E ADD JSON

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

   A organização de código da maioria das aplicações é precária.

9. 9.

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

10. 10.

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

11. 11.

    DESIGN PATTERNS

12. 12.

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

    específico.
13. 13.

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

    conhecimento das abstrações, a leitura.
14. 14.

    É necessário conhecer diferentes soluções para construir aplicações melhores...

15. 15.

    Learning JavaScript Design Patterns Addy Osmani - 2012

16. 16.

    Model View Controller é um design pattern introduzido no Smalltalk

    ainda nos anos 70. MVC
17. 17.

    São comuns variações deste pattern em frameworks como Zend e

    Ruby on Rails.
18. 18.

    Existem muitas implementações front-end que utilizam conceitos do MVC: AngularJS,

    Ember.js, KnockoutJS, ...
19. 19.

    None
20. 20.

    Pequena biblioteca MV* para melhor organizar e separar interesses da

    sua aplicação.
21. 21.

    A biblioteca é madura, popular e já foi empregada nas

    mais complexas aplicações.
22. 22.

    Backbone.js já faz parte do core do WordPress desde a

    versão 3.5.
23. 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. 24.

    ESTRUTURA DO BACKBONE.JS

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

    MODELS

27. 27.

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

28. 28.

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

29. 29.

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

    models.
30. 30.

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

    } }); Herança via protótipos
31. 31.

    var question = new Question(); Instanciação Modelo

32. 32.

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

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

    question.get('enunciation'); // Qual o valor da soma... Resgatando atributos

34. 34.

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

35. 35.

    EVENTOS

36. 36.

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

    
 com jQuery, ok?
37. 37.

    O sujeito notifica mudanças no seu estado para sua lista

    de ouvintes. Observer Pattern
38. 38.

    lion.on('roar', person.scream); Adicionando ouvinte

39. 39.

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

40. 40.

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

41. 41.

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

    Backbone.js.
42. 42.

    Models permitem assistir mudanças nos dados e refletir em várias

    partes da aplicação.
43. 43.

    question.set('enunciation', 'Qual...'); Notifica ouvintes através de change:enunciation e change

44. 44.

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

45. 45.

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

46. 46.

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

    ! answer.save(); Salvar o modelo
47. 47.

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

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

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

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

    var }); PUT: /answer/42
 {id:42, question_id: 2, alternative_id: 1} !

    id: 42, ! ! ! ! answer.save();
50. 50.

    var }); GET: /answer/42 Sincronizar o modelo ! ! !

    ! answer.fetch();
51. 51.

    Ao chamar fetch (ou mesmo save), é esperado um JSON

    de atributos.
52. 52.

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

    Observer Pattern
53. 53.

    DELETE: /answer/42 Sincronizar o modelo Excluir o modelo var });

    ! ! ! ! answer.destroy();
54. 54.

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

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

    COLLECTIONS

56. 56.

    Coleções são grupos de models.

57. 57.

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

    de questões
58. 58.

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

59. 59.

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

    retornar um array de atributos
60. 60.

    questions.get(345); // question with id 345 Resgatando um 
 model

    pelo seu id
61. 61.

    None
62. 62.

    Biblioteca que fornece utilitários para auxiliar na programação funcional.

63. 63.

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

64. 64.

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


    todos os models
65. 65.

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

    models 
 pelos seus atributos
66. 66.

    answers.every(function (answer) { return answer.correct }) && "You are the

    best"; Acertou tudo campeão?
67. 67.

    As collections possuem todos os métodos comuns de arrays e

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

    VIEWS

70. 70.

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

    elemento HTML.
71. 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. 72.

    O código das views não deve conter HTML. Para isto,

    utilizamos templates.
73. 73.

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

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

    _.template( $('[data-template="nav"]').html() ); Transformando string 
 em código JavaScript

76. 76.

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

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

    Geralmente, as views encapsulam dados e sua lógica de apresentação.

79. 79.

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

    this); }, // ... }); Model notifica render quando 
 houver alguma mudança
80. 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. 81.

    As views são também sua interface com o usuário.

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

    ROUTER

85. 85.

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

86. 86.

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

    'question' }, ! question: function () { // Instanciate view } }); Minhas rotas Criação das views
87. 87.

    As views devem tomar do navegador a gerência da navegação

    do usuário.
88. 88.

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

    questão
89. 89.

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

90. 90.

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

    servidor.
91. 91.

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

92. 92.

    None
93. 93.

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

    http://developer.wordpress.com/docs/api
94. 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. 95.

    A partir disto, já é possível construir uma aplicação.

96. 96.

    Os temas podem usar Backbone.js.

97. 97.

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

98. 98.

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

99. 99.

    You’re the operator with your pocket calculator.

100. 100.

     Obrigado. @jcemer