sofea - arquiteturas rest com backbone & html5 by gabriel zigolis

SOFEA Arquiteturas REST comBackbone e HTML5

Gabriel Zigolis / @zigolis

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@gmail.com

Gabriel Zigolis

zigolis.comgithub.com/zigolis

speakerdeck.com/zigolisslideshare.com/zigolis