this presentation I kept trying to doodle the backbone logo. I was having a really hard time drawing it, until I noticed that it looked like two overlapping triangles...
are looking for a place to stay with people that have space to spare. This is the place that I’m staying at right now with my 2 co-workers Dave & Spike. This is our host Kate. She’s probably the nicest Host I’ve ever met. She has a million maps, knows all the cool places to eat and drink in the neighborhood, and has offered to take us grocery shopping at least 3 times.
Servers Load Balancing Hadoop Machines Storage Database Metrics Managed Memcache We’re big fans of AWS and use most of their services. If you’re interested in finding out what happens when Amazon goes down, check out a blog post by Tobi Knaup: http:// nerds.airbnb.com/when-the-cloud-gets-dark-how-amazons-outage-a
Graphite Framework Version Control Search Data Warehouse Key/Value Store Database CS Language CS Framework Stylesheets Aggregates Metrics Store+Renders Metrics We’re a Rails shop. Built with MySql. We’re using Redis to power feeds and an internal tool we call Trebuchet for launching features at subsets of users without deploying. At the moment, Github says our code base is 2.2% CoffeeScript. Which is kind of neat. I only expect that number to grow. It’s not a requirement to write in CoffeeScript, most folks just like trying out. and then a lot of our newest features have been built with Backbone, which brings me to why I’m here today.
So then Joebot starts to pitch me on the idea mobile and dive into the numbers and tells me that 10% of our current traffic is coming from mobile devices.
out people love to share links to cool places they find or places they booked. And friends would click through. This is scary when you start to think that one only get one shot at a first user experience.
surprising that of all the people that were visiting the mobile optimized site, almost 90% of them would rather scroll to the bottom of the page, click on “View Full Site” and deal with the whole pinch/zoom/click mess of using our full site on a tiny screen.
things on a scale when I start a project, to kind of see where things lie. And basically with current Mobile Web site the bar was set very low, which was nice, because it felt like we just have to do better than khaki and blue links. At the same time, we love our iphone app and we should be striving to make a product as good or better than that.
(Front-ender) At this point, Joebot says, I wouldn’t being doing it alone. And he brings over Andrew, who’s our mobile lead and was finishing up work on our internal API and Dave, another front ender.
you have it done by New Years? and he asks us if we could have it done by New Years. Historically, New Years is one of the biggest days of the year for Airbnb. With New Years only 6-weeks away, Joebot was looking ahead knowing that there would be a spike in traffic on new years from people sharing out where they are staying and just talking about Airbnb in general. So he asked, could be done in 6-weeks? And, you know, being the pessimistic engineers that we are, we responded
and imagine Backbone 0.5.3 instead of 0.9.2. I zipped through the docs in one go. Scrolled back to the top and clicked download and told Andrew we were going to be using Backbone.
my first backbone project. Feeling ambitious, I proposed using CoffeeScript. I just sent Andrew a gchat message with a link to the coffeescript homepage and he replied “looks fun”. So we were going to build it with CoffeeScript as well. You’re probably wondering, why would you use two tools you’ve never used before when you have a crazy deadline for project you’ve never done before. The best way I can explain it is that we didn’t know better. I figured building this mobile site was going to be like jumping off a cliff and trying to build wings on the way down. Might as well try to learn something new while we were doing it. It ended up being less stressful because it was more exciting to be learning something new.
take breaks and sketch out what this thing was going to look like. Which was super easy to do because we were separating out the data and the views. Avoiding the jquery spaghetti doom.
turned out to be awesome to have Dave join back 3-weeks later because after 3- weeks of sprinting, I was fairly burnt out. Luckily Dave just came back from vacation, so he was ready to hit the ground running. So that was back in January. Since January we’ve been using Backbone in a lot of the latest products we’ve launched.
“alpha” mode, it’s called Communities. it’s like messageboards 2.0 where folks post threads and other people can comment on the threads, you can thank comments/threads
of trouble with keeping the state of your search when you used the back button. We ended up solving this problem using a Backbone Router and Backbone History. So after each change to the state on /search, the app serializes every parameter and pushes the new state using Backbone.History.
Models: {}, Collections: {}, Views: { Playlists: {} }, Routers: {}, Apps: {} }; We went a simplest namespace possible. We thought that at some point we would want to share models/collections and weren’t sure if views were going to get shared anywhere. So we went with a simple global object that everything would live under. That way if we had multiple Backbone apps, we wouldn’t run into a name collision.
{}, routers: {}, apps: {} }; Namespace mirrors folder structure This also has the nice benefit of mirroring our folder structure, which makes things easier to find.
iterate:prev events - Works when resorted because it using indexOf - Can decorate models for easy model.next() model.prev() LINKED_BASE Turn collections into linked lists / evented enumerable lists
a 'page' event - Should throw a 'page:next' 'page:prev' event but doesn't now, as it isn’t in the use case - Has extra properties for page and offset that are passed with fetch PAGINATED_BASE Linked_Base collections suited for infinite scrolling / pagination
just to clean up stuff and move it out of initialize - Template class variable for rendering JST[@template] convention - classifyAttributes = whitelist of model attributes that you add as classes on the el if they are true VIEW_BASE
reservations, messages, etc. - When model save fails, there is a global fail function that uses the AppViews.flash() method to display the error message ala a flash message in rails MODELS
JST['error'] - Google analytics _trackPageview via the 'route' event - Trailing slash in URL www.airbnb.com/communities/:id/ won’t match https://github.com/documentcloud/backbone/issues/848#issuecomment-3449934 ROUTER
or model - Use local storage if no in memory object is present - Idea is to paint something right away - Meanwhile async fetch the data from the server - Do a deep comparison of the returned json with our most recent version in memory / localstorage (we do this via an overidden sync method) - If changes, replace and re-render CACHING
care - locale / currency changes for example -- when locale changes, ajax fetch new set of translations a json object, replace our phrases and fire an event that re-renders the current view -- all subsequent views will have the new translations GLOBAL STATE MODEL
lilobase
whs
dnskimo
fumiyakume
ikumatadokoro
myamashii
yotuba088
syucream
amaotone
lukle
s_uryu
youkan2002
matthewcrist
eitanlees
moore
lemiorhan
roundedbygravity
maltzj
denniskardys
holman
malarkey
chrislema
mza
![- Static view: look for /:name in JST[name] or use](https://files.speakerdeck.com/presentations/4fc901d9af6a020022016d94/slide_65.jpg){kind=link}
