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

SOFEA - Arquiteturas REST com Backbone & HTML5 ...

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 “Proposes to remove all presentation layer logic from the

    server to JavaScript logic on the client.” thinserverarchitecture.com
  2. 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?
  3. 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
  4. Backbone “Gives structure to web applications by providing models, collections

    and views to consume API over a RESTful JSON interface.” backbonejs.org
  5. W3C

  6. FollowView var FollowView = Backbone.View.extend({ initialize: function() { this.collection =

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

    'collection': this.collection, 'el': this.$('.list‑view') }); }
  8. 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;
  9. ButtonModel var ButtonModel = Backbone.Model.extend({ "defaults": { "follow": false },

    urlRoot: function() { return '/api/follow/' } }); return ButtonModel;
  10. ButtonView @initialize ... initialize: function() { this.model = new ButtonModel();

    this.listenTo( this.model, "change", follow ); }, ...
  11. ButtonView @follow ... .done(function(data) { model = new FollowModel(data); Backbone.trigger(

    "u:follow", model ); Backbone.trigger( "u:followCount" ); this.following(); }); ...
  12. FollowView var FollowView = Backbone.View.extend({ initialize: function(){ Backbone.on( 'u:follow', this.addToCollection,

    this ); }, addToCollection: function(model) { this.collection.add(model); } }); return FollowView;