Repensando aplicações WordPress com Backbone

Slide 1

Slide 1 text

Repensando aplicações WordPress com BACK  BONE.JS

Slide 2

Slide 2 text

http://jcemer.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

http://www.adaptativa.com.br

Slide 6

Slide 6 text

REQ HTML CLICK JSON GENE ADD JSON CLICK ANIMATE CLASS UE RATE REQUEST ST 1. 2. 3. 4. 5. 6. 7. 8. 9. ...

Slide 7

Slide 7 text

REQ HTML CLICK JSO N G EN E ADD JSON CLICK ANI M ATE CLA SS UE RATE REQ UEST ST

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

DESIGN PATTERNS

Slide 12

Slide 12 text

Solução já conhecida e documentada de como resolver um problema específico.

Slide 13

Slide 13 text

As soluções facilitam a manutenção, o reuso e graças ao conhecimento das abstrações, a leitura.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Learning JavaScript Design Patterns Addy Osmani - 2012

Slide 16

Slide 16 text

Model View Controller é um design pattern introduzido no Smalltalk ainda nos anos 70. MVC

Slide 17

Slide 17 text

São comuns variações deste pattern em frameworks como Zend e Ruby on Rails.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Pequena biblioteca MV* para melhor organizar e separar interesses da sua aplicação.

Slide 21

Slide 21 text

A biblioteca é madura, popular e já foi empregada nas mais complexas aplicações.

Slide 22

Slide 22 text

Backbone.js já faz parte do core do WordPress desde a versão 3.5.

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ESTRUTURA DO BACKBONE.JS

Slide 25

Slide 25 text

Backbone provides a minimal set of data-structuring (Models, Collections) and user interface (Views, URLs) primitives [...]. Addy Osmani http://addyosmani.github.io/backbone-fundamentals

Slide 26

Slide 26 text

MODELS

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

var Question = Backbone.Model.extend({ initialize: function () { console.log('Question initialized'); } }); Herança via protótipos

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

var question = new Question({ id: 345, enunciation: 'Qual o valor da soma...', alternatives: [ '1', '42',//... ] }); Instanciação   com atributos

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

EVENTOS

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

O sujeito notifica mudanças no seu estado para sua lista de ouvintes. Observer Pattern

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Models permitem assistir mudanças nos dados e refletir em várias partes da aplicação.

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

var answer = new Answer({ question_id: 2, alternative_id: 1 }); ! answer.save(); POST: /answer  {question_id: 2, alternative_id: 1}

Slide 48

Slide 48 text

var }); ! Indica que não se trata   de um novo registro ! id: 42, ! ! ! ! answer.save();

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

DELETE: /answer/42 Sincronizar o modelo Excluir o modelo var }); ! ! ! ! answer.destroy();

Slide 54

Slide 54 text

1. Armazenam os dados da aplicação; 2. Notificam ouvintes via eventos; 3. São sincronizáveis com o servidor.

Slide 55

Slide 55 text

COLLECTIONS

Slide 56

Slide 56 text

Coleções são grupos de models.

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

var questions = new Questions(); questions.url = 'questions'; questions.fetch(); Deve retornar um array de atributos

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

answers.every(function (answer) { return answer.correct }) && "You are the best"; Acertou tudo campeão?

Slide 67

Slide 67 text

As collections possuem todos os métodos comuns de arrays e   outros mais.

Slide 68

Slide 68 text

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.

Slide 69

Slide 69 text

VIEWS

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

var NavView = Backbone.View.extend({ initialize: function () { console.log('View initialized'); } }); ! var nav = new NavView({ el: $('[data-nav]') }); Passando um elemento   para a view

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

<ul> <% _.each(questions, function (question) { %> <li><%= question.number %></li> <% }); %> </ul> Código de template   no HTML da página H TM L

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

var NavView = Backbone.View.extend({ initialize: function () { this.model.on('change', this.render, this); }, // ... }); Model notifica render quando   houver alguma mudança

Slide 80

Slide 80 text

var NavView = Backbone.View.extend({ initialize: function () { this.listenTo(model, 'change', this.render); }, // ... }); View espera que render seja   notificado a respeito de mudanças

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Slide 83

Slide 83 text

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.

Slide 84

Slide 84 text

ROUTER

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

var Router = Backbone.Router.extend({ routes: { '' : 'root' 'question/:id': 'question' }, ! question: function () { // Instanciate view } }); Minhas rotas Criação das views

Slide 87

Slide 87 text

As views devem tomar do navegador a gerência da navegação do usuário.

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

Wordpress.com possui uma  REST API para você acessar seu blog. http://developer.wordpress.com/docs/api

Slide 94

Slide 94 text

{ "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’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": "