SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis

  • View
    574

  • Download
    3

Embed Size (px)

DESCRIPTION

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

Transcript

  • 1. SOFEA ArquiteturasRESTcom BackboneeHTML5 Gabriel Zigolis / @zigolis

2. WTFis SOFEA ? 3. SOFEA Service Oriented Front End Architecture 4. SOFEA Proposes to remove all presentation layer logic from the server to JavaScript logic on the client. thinserverarchitecture.com 5. Diviso de responsabilidades no desenvolvimento Baixo acoplamento das camadas Comunicao client/server atravs de verbos HTTP O client requisita o que e quando Oquensganhamoscomisso? 6. REST inpeace 7. REST 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 8. Caractersticas ClientServer Stateless Cache HTTP verbs: GET, POST, PUT, DELETE... 9. Backbone Gives structure to web applications by providing models, collections and views to consume API over a RESTful JSON interface. backbonejs.org 10. Caractersticas Poderosa LIB JavaScript Adaptvel, baseada no padro MV* Moderninha, largamente usada em SPA Magrinha, apenas 6.5Kb 11. HTML5an... Tde brinqueichon uiteme, cara? 12. HTML5Rocks 13. W3C 14. MaterialemPT 15. Collection 16. Wooow... What'shappened? 17. Magic? 18. WebSocket? 19. Falaparaeles,Isabelle 20. Collection 21. Handson 22. JavaScriptterapia! Mulinari, King of Xanxer 23. ListView 24. FollowCollection var FollowCollection = Backbone.Collection.extend({ url: '/api/following/', model: FollowModel }); return FollowCollection; 25. FollowModel var FollowModel = Backbone.Model.extend({ urlRoot: function() { return '/api/follow/' } }); return FollowModel; 26. FollowView var FollowView = Backbone.View.extend({ initialize: function() { this.collection = new FollowCollection(); this.collection.fetch(); } ... }); return FollowView; 27. FollowView@followList initialize: function() { ... this.followList = new FollowListView({ 'collection': this.collection, 'el': this.$('.listview') }); } 28. FollowListView var FollowListView = Backbone.View.extend({ template: _.template( $('#tmplistview').html() ), initialize: function() { this.listenTo( this.collection, 'sync remove add', this.render ); }, ... }); return FollowListView; 29. FollowListView@render ... render: function() { this.$el.html(this.template({ 'collection': this.collection, 'view': this })); } 30. FollowButton 31. ButtonModel var ButtonModel = Backbone.Model.extend({ "defaults": { "follow": false }, urlRoot: function() { return '/api/follow/' } }); return ButtonModel; 32. ButtonView var ButtonView = Backbone.View.extend({ el: '.followsection', events: { 'click .follow' : 'follow' }, ... }); return ButtonView; 33. ButtonView@initialize ... initialize: function() { this.model = new ButtonModel(); this.listenTo( this.model, "change", follow ); }, ... 34. ButtonView@follow ... follow: function() { this.model.set({ follow: true }); this.model.save() .done(function(data) { ... } 35. ButtonView@follow ... .done(function(data) { model = new FollowModel(data); Backbone.trigger( "u:follow", model ); Backbone.trigger( "u:followCount" ); this.following(); }); ... 36. Hereiswherethemagichappens! 37. FollowView var FollowView = Backbone.View.extend({ initialize: function(){ Backbone.on( 'u:follow', this.addToCollection, this ); }, addToCollection: function(model) { this.collection.add(model); } }); return FollowView; 38. ...andthemagicgoesonandon 39. That'sall,folks. e no esqueam do ; 40. gabriel.zigolis@gmail.com GabrielZigolis zigolis.com github.com/zigolis speakerdeck.com/zigolis slideshare.com/zigolis