Intro
I’ve been meaning to play around with backbone.js for a while, trying to piece together what can make a sensible framework for frontend code. There seem to be a few out there, another I’ve wanted to try is sproutcore. The truth is, I’m a backend coder, a database guy, a systems engineer… but I love all aspects of coding, and although I’m quite terrible at design and CSS, I’ve been getting more into Javascript lately. Its quite a nice language for server side development with node – small, simple, server based apps that work well with websockets. I’ve written a little bit about that in the past. Everything is moving to the web, and its nice to have a modern and easy to use interface to place in front of your tools.
The app is a simple playlist. You can search for songs, get a list of potential matches, and add the song to your playlist. You can cycle back and forth through the songs, pause them, and delete them from the list. Thats about it!
If you want to cut to the code you can find it here on github.
Some Assumptions
Part of the goals for this project were to get out of my comfort zone and learn something new. So I decided to make it a frontend only app. All HTML/Javascript and no backend services. Well, none that I write, it does some interaction with other services or it would be pretty boring. If you end up checking the project out, you’ll find the markup could use some help (patches welcome!). But the goal was just to get something functional. This isn’t the way I’d go about things if I were building an app to start a company with, its just a fun hack.
I didn’t know backbone at all, and it seems hard to find good examples that are more than “heres a text box on a page”. One of the better ones out there that is well documented is the todo list app. It turns out this app fit rather nicely with my idea of a playlist, so I decided to start off with that codebase and modify it from there. It also uses the handy LocalStorage driver, which implements an HTML5 specification for storing structured data on the client side.
I also needed a simple way to query songs, and since the Rdio API is Oauth based, which can get complicated (and probably more so in javascript taking security into account) I found a nice API from echonest that turns out to have a lot of nice functionality thats easy to use. This is what I’m using to query for the songs.
I am using the Rdio playback API to actually play the songs from the Rdio service, and that part is based largely on their hello web playback example. Their API does allow you to build playlists in their service, which is probably the more correct way to do this since you’d be able to access them in their web UI, but since that adds complexity thats not used in this version.
The App
So check out playlister, let me know what you think. There’s a lot of room for improvement, especially with the markup and how some of the pieces fit together. All of the backbone code is in one file and that should be remedied. It could also be made to sync to a backend instead of localstorage and save the playlist into Rdio, and things like that. When you download it, just plug in your API keys into the js/token.js and you’re pretty much ready to go.
