SOFEA 
Arquiteturas REST com
Backbone e HTML5
Gabriel Zigolis / @zigolis
WTF is 
SOFEA 
?
S O F E A
Service Oriented Front End Architecture
SOFEA
“Proposes to remove all presentation
layer logic from the server to JavaScript
logic on the client.”
thinserverarchi...
Divisão de responsabilidades no desenvolvimento
Baixo acoplamento das camadas
Comunicação client/server através de verbos ...
REST
in peace
R E S T
“Software architectural style consisting of a
coordinated set of architectural constraints applied
components, con...
Características
Client‑Server
Stateless
Cache
HTTP verbs: GET, POST, PUT, DELETE...
Backbone
“Gives structure to web applications by providing
models, collections and views to consume API over
a RESTful JSO...
Características
Poderosa LIB JavaScript
Adaptável, baseada no padrão MV*
Moderninha, largamente usada em SPA
Magrinha, ape...
HTML5 é a n...
Tá de 
brinqueichon 
uite me,
cara?
HTML5 Rocks
W3C
Material em PT
Collection
Wooow...
What's happened?
Magic?
WebSocket?
Fala para eles, Isabelle
Collection
Hands on
JavaScript é terapia!
Mulinari, King of Xanxerê
ListView
FollowCollection
var FollowCollection = Backbone.Collection.extend({
url: '/api/following/',
model: FollowModel
});
return...
FollowModel
var FollowModel = Backbone.Model.extend({
urlRoot: function() {
return '/api/follow/'
}
});
return FollowModel;
FollowView
var FollowView = Backbone.View.extend({
initialize: function() {
this.collection = new FollowCollection();
this...
FollowView @followList
initialize: function() {
...
this.followList = new FollowListView({
'collection': this.collection,
...
FollowListView
var FollowListView = Backbone.View.extend({
template: _.template( $('#tmp‑list‑view').html() ),
initialize:...
FollowListView @render
...
render: function() {
this.$el.html(this.template({
'collection': this.collection,
'view': this
...
FollowButton
ButtonModel
var ButtonModel = Backbone.Model.extend({
"defaults": {
"follow": false
},
urlRoot: function() {
return '/api/...
ButtonView
var ButtonView = Backbone.View.extend({
el: '.follow‑section',
events: {
'click .follow' : 'follow'
},
...
});
...
ButtonView @initialize
...
initialize: function() {
this.model = new ButtonModel();
this.listenTo( this.model, "change", f...
ButtonView @follow
...
follow: function() {
this.model.set({ follow: true });
this.model.save()
.done(function(data) {
......
ButtonView @follow
...
.done(function(data) {
model = new FollowModel(data);
Backbone.trigger( "u:follow", model );
Backbo...
Here is where the magic happens!
FollowView
var FollowView = Backbone.View.extend({
initialize: function(){
Backbone.on( 'u:follow', this.addToCollection, ...
...and the magic goes on and on
That's all, folks.
e não esqueçam do ;
gabriel.zigolis@gmail.com
Gabriel Zigolis
zigolis.com
github.com/zigolis
speakerdeck.com/zigolis
slideshare.com/zigolis
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
Upcoming SlideShare
Loading in...5
×

SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis

973
-1

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
973
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis

  1. 1. SOFEA  Arquiteturas REST com Backbone e HTML5 Gabriel Zigolis / @zigolis
  2. 2. WTF is  SOFEA  ?
  3. 3. S O F E A Service Oriented Front End Architecture
  4. 4. SOFEA “Proposes to remove all presentation layer logic from the server to JavaScript logic on the client.” thinserverarchitecture.com
  5. 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. 6. REST in peace
  7. 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. 8. Características Client‑Server Stateless Cache HTTP verbs: GET, POST, PUT, DELETE...
  9. 9. Backbone “Gives structure to web applications by providing models, collections and views to consume API over a RESTful JSON interface.” backbonejs.org
  10. 10. Características Poderosa LIB JavaScript Adaptável, baseada no padrão MV* Moderninha, largamente usada em SPA Magrinha, apenas 6.5Kb
  11. 11. HTML5 é a n... Tá de  brinqueichon  uite me, cara?
  12. 12. HTML5 Rocks
  13. 13. W3C
  14. 14. Material em PT
  15. 15. Collection
  16. 16. Wooow... What's happened?
  17. 17. Magic?
  18. 18. WebSocket?
  19. 19. Fala para eles, Isabelle
  20. 20. Collection
  21. 21. Hands on
  22. 22. JavaScript é terapia! Mulinari, King of Xanxerê
  23. 23. ListView
  24. 24. FollowCollection var FollowCollection = Backbone.Collection.extend({ url: '/api/following/', model: FollowModel }); return FollowCollection;
  25. 25. FollowModel var FollowModel = Backbone.Model.extend({ urlRoot: function() { return '/api/follow/' } }); return FollowModel;
  26. 26. FollowView var FollowView = Backbone.View.extend({ initialize: function() { this.collection = new FollowCollection(); this.collection.fetch(); } ... }); return FollowView;
  27. 27. FollowView @followList initialize: function() { ... this.followList = new FollowListView({ 'collection': this.collection, 'el': this.$('.list‑view') }); }
  28. 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. 29. FollowListView @render ... render: function() { this.$el.html(this.template({ 'collection': this.collection, 'view': this })); }
  30. 30. FollowButton
  31. 31. ButtonModel var ButtonModel = Backbone.Model.extend({ "defaults": { "follow": false }, urlRoot: function() { return '/api/follow/' } }); return ButtonModel;
  32. 32. ButtonView var ButtonView = Backbone.View.extend({ el: '.follow‑section', events: { 'click .follow' : 'follow' }, ... }); return ButtonView;
  33. 33. ButtonView @initialize ... initialize: function() { this.model = new ButtonModel(); this.listenTo( this.model, "change", follow ); }, ...
  34. 34. ButtonView @follow ... follow: function() { this.model.set({ follow: true }); this.model.save() .done(function(data) { ... }
  35. 35. ButtonView @follow ... .done(function(data) { model = new FollowModel(data); Backbone.trigger( "u:follow", model ); Backbone.trigger( "u:followCount" ); this.following(); }); ...
  36. 36. Here is where the magic happens!
  37. 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. 38. ...and the magic goes on and on
  39. 39. That's all, folks. e não esqueçam do ;
  40. 40. gabriel.zigolis@gmail.com Gabriel Zigolis zigolis.com github.com/zigolis speakerdeck.com/zigolis slideshare.com/zigolis
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×