Repensando aplicações WordPress com Backbone

Transcript

1. Repensando aplicações
   WordPress com
   BACK

   BONE.JS
   

   View Slide

2. http://jcemer.com
   

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. DESIGN
    PATTERNS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Learning JavaScript
    Design Patterns
    Addy Osmani - 2012
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

24. ESTRUTURA
    DO BACKBONE.JS
    

    View Slide

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
    

    View Slide

26. MODELS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    com atributos
    

    View Slide

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

    View Slide

34. Antes de seguir, é preciso

    abrir um pequeno parêntese.
    (
    

    View Slide

35. EVENTOS
    

    View Slide

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

    com jQuery, ok?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    {question_id: 2, alternative_id: 1}
    

    View Slide

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

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

    View Slide

49. var
    });
    PUT: /answer/42

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. COLLECTIONS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    model pelo seu id
    

    View Slide

61. View Slide

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

    View Slide

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

    View Slide

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

    todos os models
    

    View Slide

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

    pelos seus atributos
    

    View Slide

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

    View Slide

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

    outros mais.
    

    View Slide

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.
    

    View Slide

69. VIEWS
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

74. data-template="nav">
    
    <% _.each(questions,
    function (question) { %>
    <%= question.number %>
    <% }); %>
    
    
    Código de template 

    no HTML da página
    H
    TM
    L
    

    View Slide

75. _.template(
    $('[data-template="nav"]').html()
    );
    Transformando string 

    em código JavaScript
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    houver alguma mudança
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

84. ROUTER
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

92. View Slide

93. Wordpress.com possui uma

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

    View Slide

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’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": "https://public-api.wordpress.com/rest/v1/sites/carryingthegun.com/
    posts/3928
    

    View Slide

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

    View Slide

96. Os temas podem usar Backbone.js.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

100. Obrigado.
     @jcemer
     

     View Slide