 My dad uses the same joke this is going higher. Can you guys hear me? Is that okay? cool, okay So I'm at This is a talk about how we came into a backbone at pitchfork So we're about to redesign the site right now before I start you guys all kind of familiar with what we are no, okay online music magazine and First off, this is who I am my name is Matt and VP of product over at pitchfork I was their first full-time developer now managing a team of four including myself And so we build pitchfork, which is the most influential music magazine on the internet the only place that matters So we were founded in 95 in 99 our founder moved to Chicago Really in true blogger style actually moved out of his parents basement And moved to the big city pitchfork was kind of started on the premise of getting free music tickets and Being able to get backstage and meet his like mid 90s rock and roll heroes It worked and around the year 2000 really started like hiring writers gating traction our president joined it now We've got a film site a fashion site Two festivals one in Chicago one in Paris We've got a magazine called the pitchfork review. It's quarterly now. We've got a weekly app We've got a bunch of other stuff going on so safe to say that it has grown Pretty wildly in the last 15 almost 20 years now So I've been there for about five and a half six years It's it's been pretty wild to see it go from kind of a really broken Drupal site that I inherited that had like ruby Objects serialized into the database and a Drupal module that deserialized them The site went down like honestly every 20 minutes and the yeah, it's pretty rough And so we totally rebuilt it with the stack So the the first rebuild of it took it to Django It was more about like normalizing the database and just keeping the website online And then it went to having like nicer tools for the editorial team who had never really had publishing tools before They were just kind of given like that Drupal style Tiny emcee editor in the middle of a page After that we started to really build out the dev team and with that came The ability to do a little bit more interactivity with the website. So when we got to the point where we wanted to Really move things along We moved to jQuery, which you know everyone else eventually does And then we kind of found backbone, which is pretty amazing the site's built with Django and Varner sits in between And this is kind of the story of how we came to meet Backbone and where we went with it and why it's so like deeply integrated into our stack. It is a little intimidating to have The right at the author of backbone is kind of like surrounded by no one Slowly eating breakfast in front of me, but that's cool. That's cool so In the beginning pitchwork was not terrifically interactive we still take a lot of shit for not having comments and stuff like that That's kind of the interaction. We were super slow to get to but when I say not interactive I mean like you couldn't do anything you could search and that was it We also had this review where you could enter your own score for in rainbows totally clowning radio head They were devastated Yeah, so We started this redesign. I was talking about and After the dust settled what we really wanted to do was build a site that we wanted for ourselves The cool thing about pitchwork is everyone there like in the end really just listens to music all the time Really loves it kind of contrary to popular opinion Really really do like love music not all of it, but a lot of it And so we started this kind of like weird trip down the road of figuring out like as readers What do we really want out of the site? What can we improve that we have right now and how can that like parlay into bigger better things? So some of the features that we started to build were a site-wide audio player Which was our first big like foray into backbone. I think that's still on the backbone like Use cases page looking right at you. Yeah, sweet. Okay And then the next step was to kind of take that and like put it around the site so that Anywhere that we like linked to an mp3 or even talked about it We could have that as like, you know perfect context and then moved on to having What we call advance which is Our album pre-release platform so bands a week before the release a week before we stick our score on it And either make or break their career We'll trust us with their albums. They sent us artwork, which is always like super cool This one is from Hercules in love of hair, which is a one of the better Animations that they sent I'll show a little more than a bit Yeah, so I mean this this is one of the more like fully fledged Entire apps. This is probably as close as we've had on pitchwork.com to like a single page application But really like everything here in the UI from the like slideshow I'll show you later to the tracks module to the navigations. I'll just backbone views Yeah, there's a Plain there you go Yeah And we did things like live search That was pretty cool. And then we moved on to pretty cool stuff like cover stories So I don't know if you guys saw this we did a we did an interview with Richard E James from Apex twin God doesn't really give to be interviewed. So that was a lot of fun It was really focused on the idea of the hive mind I think he was probably about 10 years too late to kind of getting back on the internet or being social again So most of the world had moved on but he was pretty fixated on that and so what we did for him was a big like six-part interview and the animation here is The heat map so everyone that was reading it and like hovering over the navigation Would have their mouse tracked through no JSF that was pumping this back in through a web socket And then we use webGL for the heat map. It's pretty cool But again, this is just a backbone view the whole thing was just a collection of backbone views and that really like simplified everything and That's really the point of this kind of talk is that backbone when we found it immediately gave us the structure and support and even some Like stability that we really needed and in some cases didn't know that we need We found that like the simplicity of everything involved as well as how lightweight it was really just Dropped in perfectly into what we were looking for And that drop in philosophical compatibility is is so like rare and often like a good Excuse me a good predictor of like success to come. So it was love at first sight So backbone really crept into everything and here's how that happened So I like to call this the progressive enhancement at the website So like I said the first thing is that we had this audio player and that was that was like What sold us on backbone that was also a big like, you know gateway drug into building a more interactive components for the site After that we realized that we needed to really like have virtual page loads at a time the term pjax did not really exist So I guess it's pjax because what we're doing is loading the page Extracting part of the DOM and then updating our DOM with it what we're doing for the whole page And we started with the cover stories, which I talked about and again those are more organizationally structured by backbone Instead of you know using such Deeper components like collections and models, but at the end of the day it is still just a backbone And then it really did spread to everything So first off I wanted to give an example of the site wide audio player Like I said a couple times now that's the biggest so I figured it would kind of do a quick and deep dive into that In the beginning we had a widget from Yahoo who has the same shade of purple. I think that I'm using Yahoo used to be great for cranking out like tiny widgets that were totally need-based I think every like music blog on the internet use this because you could just drop in a line of code And you had an mp3 player it would look for any anchor tag that linked to an mp3 file and suddenly like it had everything It would preload the id3 data from the mp3 and it looked really nice But you know as all things do it died doubly so at Yahoo Sucks, but uh yeah, so so we got like an email from their dev team saying like hey Just so you know this is going away It was very nice of them to reach out and it definitely gave us a head start So we started building our own library called tuning fork And that was based on sound manager too and as we started going You know they started look a little messy and then we realized like well, you know Maybe we could just backbone this up a little bit So Here are the requirements we had I should preface by saying that at the time That we started this one of our competitors a website and a print magazine called spin did a press release five paragraphs talking about this brand new site audio player that they were going to be building and We were kind of looking at this from like oh alright So I think in our own heads we created this like little arms race against them over like an audio player Which is one of those things with enough distance. You really look back. I like all those that was fun but at the time it seemed like really serious and so Like we put all of our engineering heads together and and came up with the player So we we kind of sketched out like this We needed to have tracks playable from every source Because the biggest thing that I went accomplished this was getting rid of every like iframe embed that was being sent To our team and we were getting them from like every angle Everyone had their own style of embed and he would load the page and it would just take like fucking forever pardon my French To load and it would you know things would be jumping up and down and nothing was an iframe They're all on object tags, and it was just a disaster So I wanted to do away with that for performance reasons And then we wanted to also just encapsulate everything and have it like running through a streamlined UI So we needed to support several different backends YouTube we used to support until they sent us a very polite letter followed by a very mean cease and desist letter My advice is don't ever try and play anything Without showing the video for it They're not cool with it Yeah, so so we also need pluggable You know playback engines we want to use HTML5 audio whenever possible that only works for like mp3 is over HTTP Which is cool because it worked with SoundCloud, but not Bandcamp and work with some of our stuff But other times you know like universal music sends us an mp3 that we can't offer for download Which means we have to stream over RTMP Which is cool because then you have to get on a call with people from Universal and try to explain What RTMP is and and really all they want here is it can't be downloaded easily But they like read somewhere that it can it's not it's not worth anyone's time Yeah, so yeah, I mean we also want to play with support and Playback should be able to be started from anywhere And I'm sure if you guys are looking at this you can probably figure out that like it translates really easily into backbone And so instead of inventing our own systems for this we just thought like well hell, you know It's it's kind of like it's kind of a view library, right? But why don't we just use backbone for this? So a track Backbone model playlist a collection of models who knew The play controls which is kind of like the the headless controller We just use a backbone view for that it didn't have to be a view But as you'll see one of the themes that we have here is that we just use backbone views for classes They're so lightweight that you know, we just don't even care And then the UI itself classic backbone view use case So track to kind of justify each one of these So track has attributes an ID and artist name title and a playback source Which is like it's SoundCloud API URL or it's bandcamp URL or some RTMP URL And then it has what just like on the model the ability to resolve itself So that means calling the SoundCloud API that means calling the bandcamp API that means figuring out what the streaming Server is for RTMP, etc. Etc. And that's really it To me it sounded like a perfect use case for model model perfectly encapsulated everything kind of bent the rules But you know, no harm no foul Playlist again total classic collection, right? So you stick your models into it and it gets the here's the pun cursory Next previous That's for you Get it Yeah, so it can move back and forth and look and the playlist and that's really it because that's all you really have to do in a playlist Good use case for a collection Well, the controller is the Chrome less intermediary between the UI and tracks in the playlist is responsible for queuing controlling signaling playback Backboned out events pretty rad And in this case we used a view because it was kind of classy That's to the UI Thing you click it's pretty cool So the UI just sends more actions to the controller And then it listens to updates from the controller saying like all right you hit pause I'm gonna tell you to pause now show you know respond to the pause event turn the play button Or turn the pause button into play to tell the user that has been paused and they need to restart actions again That's really it that's that's the sum of the player The UI was manifest in three different ways. All of these are UIs that talk to the controller and the controller Responds and sends messages back to other things that listen So on a page you have you know at any given time all three of these if you go to our homepage And you click the if you can see my mouse up here I have my mouse over the soft moon, which is highlighted with the orange play button if you were to play that then In the center our little hood will show that it's playing and you get the progress report And if you open the collapsible player, you will also see a more A robust play back interface all happening and that's all just channeling through really like a vanilla backbone setup But the advantage to us is that it was super simple to write and we got a lot of functionality out of the box however The site white player huge success time on site skyrocketed I mean like double tripled for a while depending on what we were doing anytime we posted a metal mp3 huge I Don't know what it is man like yeah, and it's not just black metal by the way It's all metal like the floor is eight and the ceiling is like the upper stratosphere There's only like two to get two people reviewing it to I don't get it but uh Okay, so huge success except that the first thing we heard back was the first thing we expected When you click a link playback stops and all the email said I didn't want playback to stop I just wanted to click this link and we thought well that that was obvious so huge bummer and we decided to do with it that and The first response, you know was okay. We'll just add push state However, this was a while ago push state still you know, it's a good choice now back then no not at all It was a little dicey and you at the time we were considering dropping support for older IUs we still try and support IE 9 to some degree, but we're going to drop that and redesign back then IE 8 was the like contentious choice We thought about throwing hashes into the mix Illinois has not legalized hash changes yet but Seriously though Yes, like social networks and SEO just totally totally bombed on it So we tried it for a little bit and just stripped it back out and then we had that glorious Also, probably hash inspired idea. Let's just run the site through an iframe Yeah Don't run your site through an iframe So we actually re-engineered the site which was not a terrible amount of work To run entirely out of an iframe and all the page changes and and actions were just proxied up to like window top And there was a like a headless controller up there Clever as it may have been it was definitely not the right thing to do and we got we got some mileage out of it until one day Ignoring that the complexity gone up. We pushed a CSS change and chrome completely freaked out and the site for about five minutes When you went to pitchwork.com for any page stroke violently I mean like you could be sitting in broad daylight and the light would like you could see the light splashing on then off of your face And I mean people were like super chill about it on Twitter. I gotta say so like While two of us were looking into what went wrong One was kind of looking at Twitter like yeah. Yeah, people are definitely seeing this, huh? Yeah, I mean somebody's like wow, I don't know if they're doing this great. It's much better Thanks So we ran very apologetically back to backbone and implemented a route When I say a route, I mean we have exactly one route and is that It's that it's that P-Jack style page loading I was talking about before where we just render everything on the server side as if we didn't have routing And then take the take the html extract what we want and thrown at the dumb And the cool thing about that is we did not have to worry about anything like Switching ads between pages calling refresh there reporting any false page views Really anything like that. We got a bit of a speedup because we also used just a simple page cache Which like a super low TTL kind of based on how we saw people moving back and forth in the site You'll never guess this but the page in the page cache is a model the page cache itself It's a collection. Yeah, it's pretty red Yeah, and so we found that actually like split up the site a little bit And and and just to really like Wrap it off. We gave it the name Audubon and we gave it an off-ramp So that if we had pages that we didn't want to transfer with the virtual page load Specifically if we were taking you from like a page where you're listening to music to a page Where you don't want to be listening to music like pitch work advance or to our TV section You know we could block the average will page you and just send you like with a real page refresh that stopped audio playback and then you know if something goes on on the fritz between page use or you're going to a page that just doesn't exist anymore The the the router will actually kind of like try it a couple of times before giving up and then giving you like a nice like Kind of like a little more decisive than that message saying that it just couldn't be loaded Yeah, like I was saying the router just intercepts the link click checks the off-ramp checks the page cache and then when it does load the page it fires the load event and that's important Let's get this one because analytics are important And when you just replace the DOM you don't retrigger any of the like script tags that are loaded on like actual page load, right? so what we needed to do is make sure that that load event fired and When we grab that then we simply recall all of the analytics again. That just lives in a backbone view. Thanks to backbone events We're just you know shoveling this stuff all around Again very easy. There are other load events that we have for custom ad integrations that need to do this I don't know if you guys ever work with advertising, but we're an advertising supported site and Like ad serving is the least civilized corner of like internet technology and so there are a ton of like you edge cases for that and Really like for virtual pages like this. You just need to be ready for anything that load event really lets us hook into anything we want So now we have a great player and under an uninterrupted playback as readers move through the site We have seamless virtual page loading with accurate history management. We don't we don't mess with the back button No analytics dropouts, which is just probably more important to everyone else At the company than keeping the site up And we have a very fast site and what's more is None of the code that we wrote here stretches the imagination So this is great for onboarding new people if we get an intern they can come in if they've never used backbone before They look at it they go read the docs and they say like oh, yeah, that makes sense And that's like the most beautiful, you know, thank it's a lot less oversight. We need to give new people It's a lot less like you know, when we revisit something some of this cause like four years old, you know, we come back to we don't tell we were thinking But we know that it was sensible and we know that you know It only takes a couple minutes to reread it and we're exactly where we were before so the low complexity leads to high productivity and Backbone has since spread to cover just about any clickable module on the site probably powered by a backbone view We have an async ad loading infrastructure like I said the civility of loading ads highly questionable A lot of the time you will not get from your ad server any indication that ad is going to load Also, people use ad blockers shame on all of you It's not a fun game Trying to catch up with that But yeah, so so when an ad is like possibly going to load we need to make sure that the space is reserved And when we would you have a design that's like harshly grid it out like our current site is you want to have some like kind of backfill ready Just having kind of like another headless controller listening for ad loads Got us a really long way to reserving space on the page But also calling any space that would have been occupied by an ad that also required like padding or decoration to separate it from the Content so ad doesn't load goodbye, you know, you're gone for that container ad does load You have your reserve space. It's okay. It creates a little bounciness on the page It could definitely be improved, but it works pretty well and then our cover stories as well as long form Which is a story builder. I was I was going to talk about long form It's a little a little nascent right now, but if anyone's interested in talking about that later, definitely hit me up The gist is that we've we're moving away from a kind of a traditional CMS where you just have a form and Into something with like more atomic blocks of content But I do want to talk about cover stories because those are always fun So our cover stories were in effort by Devon designed to kind of like reciprocate the love the editorial puts into their content There are a lot of features that you know deserve like some attention. Not all content is created equal and Especially right now where we're seeing like beautiful designs made easy for anyone to use We wanted to do something a little more special to kind of call it out So the implementation of this each cover story really like when you when you just look at the code It's a set of panels and each panel kind of heads its own responsibility Sometimes those panels are like parallaxing sometimes their video, but really like they only care about themselves We didn't have to use backbone for this the the attraction to backbone was one We knew it too. It was like so light that it just wasn't even like a performance concern And three like the the organization again totally compatible with how we wanted to align things So it's it. I mean it just felt right Like I said section views pretty selfish. They only care about themselves and they only like work when they have to No one here's like that though. I'm sure So like I said, these are light is what it is I've got a couple videos, but I also preloaded the pages So I thought it might be cool to just show you guys kind of some of these things Okay, so resizing that totally changed it, but that's cool All right, so What we're looking at here is a streaming Streaming music kind of like a state of the Union We're trying to reload this just because it looks like the new dimensions and chrome are not compatible Anyway, I'll go to this one How to dress well as an artist are you guys familiar with him? It's out of Chicago. Yes, okay He does kind of like a somber fractured R&B thing very very emotional So we what So we did interview with him he kind of talked about his life a little bit about his life with his brother I guess it's a little troubled He kind of talks about how he doesn't like talking about it It's good interview, but so the approach for this is that you know this landing page is a backbone view It only cares about itself So as we start scrolling we get another one that brings in the text and the video background here That's kind of changing. I guess it's not static It's part of that view so this view only cares about the text and then handling the changing the video based on its height as we scroll So now we're gonna come to this it's another backbone view that only cares about swapping this stuff out So again, it's looking at its height. It's figuring out. What do I need to do to render this? How do I need to blur it and this theme kind of plays on throughout the entire piece? This is one of the more simple ones. I think One more beautiful ones though, but I hope you can kind of see quickly How we were able to go panel by panel and just kind of assign responsibilities and set it off on its own We didn't need to worry about it after that See, isn't it inspirational? It's cool So I'll show you this one. So I think this is still loading. So this is our conversation with a vex twin The premise of this is that for for those of you who have not seen his new album cover or are familiar with him he Has made a visual career out of just like ripping his face apart for his album covers And it's like kind of the visual identity he's done So for this one it was like a close-up of his eyes and then a close-up of his like nose and then a big close-up of his mouth and so we did we have a backbone view here that just interacts with the camera and uses oh So submit it and it chops it up But uh Yeah, you got a kick out of that. That was cool So the interview itself and then we come back to this heat map Which is showing the like real-time mouse data of anyone else looking at this right now So if somebody is looking at anonymous tips, they're probably clicking into it. I'm gonna click onto that one That's just another like view being popped into into the stack as you scroll through we have something here We just use some backbone models to load in from a back-end API That spits out other people's faces So like when you when you go to there and you hit submit it It actually does take your picture and shuffle it off to the back end And then we bring it back out and show different people around the interview so but then you also see yourself from time to time So if I were to reload this it would get somebody else's picture. I think if I go another section, we'll probably load it That's a sliver But anyway Yeah, so again like in this case It's not so much about using like backbone for the sake of using backbone It's just that like it really helped us organize this stuff super like co-gently and That's really important when you have a ton of functionality So this doesn't look like it wants to load yet. Anyway, I'll show you the UI part to this Maybe not That's a bummer Okay, well the streaming story is cool because this is actually like a real Application style interface you as you navigate through the story you get this, you know streaming music service esk Player UI you have a menu over here, and then you can flip from light to dark There's a lot of like it just great canvas animations on this. It's a shame. That's not loading Should not have let it resize Anyway, yeah, so I hope that kind of illustrates, you know getting a lot out of a little with that I do have an animation of it though, so here's here's what it would look like So this is as you're scrolling down the page Everything kind of comes together again panel by panel we can separate this one person can work on you know That streaming view and their own view and then pull it together somebody else can be working on this It really helps us like break the components apart Another nice thing is that because it's so simple it really stays out of our way a lot of the complexity in this is in the sg animation and Really like you don't want to have to worry about something interfering with the DOM or Trying to like take control or or bend your will to its organizational principles So I'm gonna let this play out for a second So these are different UI components you can skip around the story and that's that and so that's really the story Backbone fitter needs out of the box conception physically It has been love at first line of code And gives us the first-class functionality we needed without you know introducing any Weird, I don't know problems. She's really nice It's cool. I hope you enjoyed this or got something out of it if you want to say hey, I'm around if you don't that's cool, too Yeah, enjoy the rest of your conference