Best practices and tips on building rich web clients in Rails, Backbone and XMPP, as we do it at Kicksend..
BuildingRich Client Apps@derrickko
View Slide
Hi!@derrickko
Web Trends
User experience.
Real time.
Multiple clients.
DerbyMeteorFirebaseEmber.jsSpine.jsThe Market
What we use
RailsBackbone.jsXMPPCoffeescript
TemplateViewRouterModelViewControllerControllerModel-ishBackbone Rails
Performant.Mature.
HTML5 SSEPusherXMPPOptions.
A productive hybrid.
Let’s start.
A list.
GET /lists/1{id: 1,name: “Friends”,members: {{name: “Pavel”...}}}
Best practicesstill apply.
Thin controllers
RESTful routes.
Have a presentation layer.Tip
Don’t use to_json.
It’s like HTML in models.
JbuilderRABL
http://kicksend.com/#/lists/1/edit
model = new KS.Models.List(id: 1)model.fetch() # GET api/lists/1model.save() # PUT api/lists/1model.destroy() # DELETE api/lists/1
What’s a collection?
lists = new KS.Collections.List()lists.fetch() # GET api/lists/lists.create() # POST api/lists/
Keep views atomic.Tip
Load interfaces progressively.Tip
GET api/lists/1 - 200 OK
GET api/lists/1/members - 200 OKGET api/lists/possible_members - 200 OK
Best practicesPresentation layerRecap
Subclass BackboneAtomic viewsProgressive renderingRecap
Main Container
Use a view manager.Tip
https://gist.github.com/2991554
Performance.
GET api/deliveries
100ms response time.
Cache aggressively.Tip
Action caching.
https://gist.github.com/2990581
View caching.
Cached
PhotoPhotoSenderSenderAction cachedView cachedGET api/deliveriesDelivery
PhotoPhotoSenderSenderDeliverybelongs_to :delivery,:touch => true
Perceivedperformance.
Assume success.Tip
Be greedy.Tip
1. GET /api/lists/2 list.fetch()
2. GET /api/lists/ KS.lists.fetch()
Keep data in sync.Tip
1. GET /api/lists/22. GET /api/listsLocalGlobal
Server performancePerceived performanceRecap
eJabberd
eJabberdStrophe.jsBackbone
eJabberdStrophe.jsBackboneBOSH
Pre-auth BOSH streams.Tip
eJabberdRails RubyBOSH auth
BackboneeJabberdRails RubyBOSH authHTTP
eJabberdBackbone Strophe.jsHTTPRails RubyBOSH authBOSH
github.com/skyfallsin/ruby_bosh
Use a real time handler.Tip
strophe.jsxml2jsonToolbox
Pre-auth BOSH streamsReal time handlerRecap
Moving forward.
Slimmed down server.
and CDNs
require.js
Don’t overengineer.
Thanks!@derrickko