Repensando aplicações WordPress com Backbone

Transcript

1. Repensando aplicações WordPress com BACK
 BONE.JS
2. http://jcemer.com
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, ...
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
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.
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