Tuesday, September 24, 2013

Toying around with backbone.js

Toying around with Backbone.js

At $work, we've been using more and more backbone.js to create a more responsive front end experience and help the dev team manage the code.

I like backbone.js and find that its it is very helpful to seperate data and code on the client. But I've found that it challenges me to think in different ways.

I find it helpful to create an app so I did :)

Introducing Brewers Radio Finder

Over the years, i've often driven between Milwaukee and St. Paul, MN. While on the drive, there are areas of the state where finding the close Brewer's radio station is tough and figuring out which station is the closest to you is difficult when looking at the map from Brewers Radio network. Am I currently closer to Reedsburg or Portage?

The app is pretty simple, you can type in or give it your current location and it will show the 3 closest Brewers radio stations to you. 

You can check it out at http://radiofinder.leecarmichael.com/

If anyone is interested I'd be willing to make the code public on github. I didn't do it by default since I had to do some geocoding and storage of the station locations and i'm not sure if i can share that (even though its public). And i haven't dropped a license in there (not sure which one to do).

The app is only a few parts:
  • backbonejs + bootstrap front end 
  • Perl Dancer backend (serving JSON to front end and some initial templates)
  • MySQL Database
  • Use of Google's geocoding library/service (for initial coding of stations) and GIS::Distance
Using Dancer with backbone is very slick. The Dancer json (de)serialization setup is very elegant. Basically set it in the config and you can return data structures in 'ajax' routes and it does its (de)serialization magic. Pretty nice way to hide that complexity.

As a full start from scratch project in backbonejs that didn't involve todo items. It was a good learning experience. I ran into some mental issues using templates w/ widgets that didn't have a model but otherwise it went pretty well. I had some trouble with routes that opened and closed widgets ('about' dialog was a bit of a fight and still isn't perfect). And I still haven't got my mind around using a view and route with something that didn't have a model (the search inputs). I felt like making it a model was a bit of extra cruft that didn't add value (but i bet it might be helpful as the app grew). There are areas, that i'll revisit when i get some time.

A few future things that I'm working on:
  • Displaying current location and stations on a map (this is pretty close)
  • Fixing a few display issues with the responsive layout on smaller screens
  • More unit tests for "live" dev instance
That's all for now.

__END__

No comments:

Post a Comment