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

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