WTF is SOFEA
?
S O F E AService Oriented Front End Architecture
SOFEA“Proposes to remove all presentation
layer logic from the server to JavaScriptlogic on the client.”
thinserverarchitecture.com
Divisão de responsabilidades no desenvolvimentoBaixo acoplamento das camadasComunicação client/server através de verbos HTTPO client requisita o que e quando
O que nós ganhamos com isso?
RESTin peace
R E S T“Software architectural style consisting of a
coordinated set of architectural constraints appliedcomponents, conectors and data elements, within
a distributed hypermedia system.”
Roy Thomas Fielding
CaracterísticasClient‑ServerStatelessCacheHTTP verbs: GET, POST, PUT, DELETE...
Backbone“Gives structure to web applications by providing
models, collections and views to consume API overa RESTful JSON interface.”
backbonejs.org
CaracterísticasPoderosa LIB JavaScriptAdaptável, baseada no padrão MV*Moderninha, largamente usada em SPAMagrinha, apenas 6.5Kb
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
FollowCollectionvar FollowCollection = Backbone.Collection.extend({ url: '/api/following/', model: FollowModel});return FollowCollection;
FollowModelvar FollowModel = Backbone.Model.extend({ urlRoot: function() { return '/api/follow/' }});return FollowModel;
FollowViewvar FollowView = Backbone.View.extend({ initialize: function() { this.collection = new FollowCollection(); this.collection.fetch(); } ...});return FollowView;
FollowView @followListinitialize: function() { ... this.followList = new FollowListView({ 'collection': this.collection, 'el': this.$('.list‑view') });}
FollowListViewvar FollowListView = Backbone.View.extend({ template: _.template( $('#tmp‑list‑view').html() ),
initialize: function() { this.listenTo( this.collection, 'sync remove add', this.render ); }, ...});return FollowListView;
FollowListView @render...render: function() { this.$el.html(this.template({ 'collection': this.collection, 'view': this }));}
FollowButton
ButtonModelvar ButtonModel = Backbone.Model.extend({ "defaults": { "follow": false }, urlRoot: function() { return '/api/follow/' }});return ButtonModel;
ButtonViewvar ButtonView = Backbone.View.extend({ el: '.follow‑section', events: { 'click .follow' : 'follow' }, ...});return ButtonView;
ButtonView @initialize...initialize: function() { this.model = new ButtonModel(); this.listenTo( this.model, "change", follow );},...
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 ); Backbone.trigger( "u:followCount" );
this.following();});...
Here is where the magic happens!
FollowViewvar FollowView = Backbone.View.extend({ initialize: function(){ Backbone.on( 'u:follow', this.addToCollection, this ); }, addToCollection: function(model) { this.collection.add(model); }});return FollowView;
...and the magic goes on and on
That's all, folks.
e não esqueçam do ;
Gabriel Zigolis
zigolis.comgithub.com/zigolis
speakerdeck.com/zigolisslideshare.com/zigolis
Recommended
