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

Transcript

1. SOFEA Arquiteturas REST com Backbone e HTML5 Gabriel Zigolis / @zigolis
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...
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
14. HTML5 é a n... Tá de brinqueichon uite me, cara?
15. HTML5 Rocks
16. W3C
17. Material em PT
18. Collection
21. Wooow... What's happened?
22. Magic?
23. WebSocket?
24. Fala para eles, Isabelle
25. Collection
28. Hands on
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