SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis

on

  • 298 views

The Developers Conference 2014

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

Statistics

Views

Total Views
298
Views on SlideShare
296
Embed Views
2

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis Presentation Transcript

  • 1. SOFEA  Arquiteturas REST com Backbone e HTML5 Gabriel Zigolis / @zigolis
  • 2. WTF is  SOFEA  ?
  • 3. S O F E A 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. 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?
  • 6. REST in peace
  • 7. 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
  • 8. Características Client‑Server 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. Características Poderosa LIB JavaScript Adaptável, baseada no padrão MV* Moderninha, largamente usada em SPA Magrinha, apenas 6.5Kb
  • 11. HTML5 é a n... Tá de  brinqueichon  uite me, cara?
  • 12. HTML5 Rocks
  • 13. W3C
  • 14. Material em PT
  • 15. Collection
  • 16. Wooow... What's happened?
  • 17. Magic?
  • 18. WebSocket?
  • 19. Fala para eles, Isabelle
  • 20. Collection
  • 21. Hands on
  • 22. JavaScript é terapia! 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.$('.list‑view') }); }
  • 28. 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;
  • 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: '.follow‑section', 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. Here is where the magic happens!
  • 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. ...and the magic goes on and on
  • 39. That's all, folks. e não esqueçam do ;
  • 40. gabriel.zigolis@gmail.com Gabriel Zigolis zigolis.com github.com/zigolis speakerdeck.com/zigolis slideshare.com/zigolis