Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis

SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis

The Developers Conference 2014
Gabriel Zigolis' presentation for TDC Floripa 2014 about SOFEA - Service-Oriented Front-End Architecture with Backbone and HTML5

Gabriel Zigolis

May 14, 2014
Tweet

More Decks by Gabriel Zigolis

Other Decks in Technology

Transcript

  1. SOFEA Arquiteturas REST com Backbone e HTML5 Gabriel Zigolis /

    @zigolis
  2. None
  3. WTF is SOFEA ?

  4. S O F E A Service Oriented Front End Architecture

  5. SOFEA “Proposes to remove all presentation layer logic from the

    server to JavaScript logic on the client.” thinserverarchitecture.com
  6. Divisão de responsabilidades no desenvolvimento Baixo acoplamento das camadas Comunicação

    client/server através de verbos HTTP O client requisita o que e quando O que nós ganhamos com isso?
  7. REST in peace

  8. R E S T “Software architectural style consisting of a

    coordinated set of architectural constraints applied components, conectors and data elements, within a distributed hypermedia system.” Roy Thomas Fielding
  9. Características Client‑Server Stateless Cache HTTP verbs: GET, POST, PUT, DELETE...

  10. None
  11. Backbone “Gives structure to web applications by providing models, collections

    and views to consume API over a RESTful JSON interface.” backbonejs.org
  12. Características Poderosa LIB JavaScript Adaptável, baseada no padrão MV* Moderninha,

    largamente usada em SPA Magrinha, apenas 6.5Kb
  13. None
  14. HTML5 é a n... Tá de brinqueichon uite me, cara?

  15. HTML5 Rocks

  16. W3C

  17. Material em PT

  18. Collection

  19. None
  20. None
  21. Wooow... What's happened?

  22. Magic?

  23. WebSocket?

  24. Fala para eles, Isabelle

  25. Collection

  26. None
  27. None
  28. Hands on

  29. None
  30. JavaScript é terapia! Mulinari, King of Xanxerê

  31. ListView

  32. FollowCollection var FollowCollection = Backbone.Collection.extend({ url: '/api/following/', model: FollowModel });

    return FollowCollection;
  33. FollowModel var FollowModel = Backbone.Model.extend({ urlRoot: function() { return '/api/follow/'

    } }); return FollowModel;
  34. FollowView var FollowView = Backbone.View.extend({ initialize: function() { this.collection =

    new FollowCollection(); this.collection.fetch(); } ... }); return FollowView;
  35. FollowView @followList initialize: function() { ... this.followList = new FollowListView({

    'collection': this.collection, 'el': this.$('.list‑view') }); }
  36. FollowListView var FollowListView = Backbone.View.extend({ template: _.template( $('#tmp‑list‑view').html() ), initialize:

    function() { this.listenTo( this.collection, 'sync remove add', this.render ); }, ... }); return FollowListView;
  37. FollowListView @render ... render: function() { this.$el.html(this.template({ 'collection': this.collection, 'view':

    this })); }
  38. FollowButton

  39. ButtonModel var ButtonModel = Backbone.Model.extend({ "defaults": { "follow": false },

    urlRoot: function() { return '/api/follow/' } }); return ButtonModel;
  40. ButtonView var ButtonView = Backbone.View.extend({ el: '.follow‑section', events: { 'click

    .follow' : 'follow' }, ... }); return ButtonView;
  41. ButtonView @initialize ... initialize: function() { this.model = new ButtonModel();

    this.listenTo( this.model, "change", follow ); }, ...
  42. ButtonView @follow ... follow: function() { this.model.set({ follow: true });

    this.model.save() .done(function(data) { ... }
  43. ButtonView @follow ... .done(function(data) { model = new FollowModel(data); Backbone.trigger(

    "u:follow", model ); Backbone.trigger( "u:followCount" ); this.following(); }); ...
  44. Here is where the magic happens!

  45. FollowView var FollowView = Backbone.View.extend({ initialize: function(){ Backbone.on( 'u:follow', this.addToCollection,

    this ); }, addToCollection: function(model) { this.collection.add(model); } }); return FollowView;
  46. ...and the magic goes on and on

  47. That's all, folks. e não esqueçam do ;

  48. gabriel.zigolis@gmail.com Gabriel Zigolis zigolis.com github.com/zigolis speakerdeck.com/zigolis slideshare.com/zigolis