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__

Comments

  1. Chase4Net IT SolutionsMay 17, 2018 at 12:51 AM

    Chase4Net IT Solutions
    Best Website Design company - PHP,JAVA,ANDROID App Development Company

    Chase4Net is a Software Company and having office at Chennai & bangalore . Our main focus areas are Web Development and Software Development.
    Chase4Net has been ranked as the No.1 for the web designing company in Chennai & Bangalore.

    How to start the Online Business ?

    To start the Business in online is very simple and more profitable. Today starting the Website designing Company is one of the more profitable business with less investment.

    We are having 8 years’ Experience in web design business , we will guide to start the software company quickly with less effort.

    Now a days all the business are moving towards online . Too start the company we need correct Business Model and that is Chase4Net . We will help you to setup the Website design Company at less cost . The website design company can offer the following Logo design, website design , webhosting , domain registration ,android app development .

    Even If you do not know how to develop website no worries !! Chase4Net will be there, always with you , we can help you on the business by developing a website a behalf of you.


    Our company products are Hotel booking website design |, Bus ticket booking website design | , shopping cart website design | , hospital website design |,
    bill software design |,job website design |,tickect booking website design | ,matrimoney website design |.

    By just becoming a reseller (or) By just taking franchise with Chase4Net, We will take you to the next level.

    Enter into partnership with us so that we can help you to setup your business including website design for your company, Email-Id creation, Web Hosting membership , Domain Reseller membership, Payment Gateway Integration, SMS Integration.
    Chase4Net ensures you to start the business from day one rather than making you run behind business plans.

    To be our franchise we charge as low as INR Rs 20000/- (or) $296

    To pay the franchise membership fee follow the link How to Pay Membership fee

    Chase4Net IT Solutions
    (+91) 9884925203 or 4464130523
    info@chase4net.com

    ReplyDelete
  2. Maruthi BaddiDecember 23, 2019 at 9:20 AM

    This comment has been removed by the author.

    ReplyDelete
  3. Maruthi BaddiDecember 23, 2019 at 9:44 AM

    Amazing post Thank for such a knowledgeable post, I am a newbie please also check my website about Civil engineering, Working hard and sharing more simplified topics, Thank u Brother ��
    https://www.civillearners.com/2019/11/types-of-rocks.html

    ReplyDelete
  4. Study PharmaApril 4, 2021 at 8:23 AM

    VBeayer Strain Theory
    Sasche Mohr Theory
    Pressure difference b/w two point
    Preservation of pharmaceutical products
    Materials for plant construction
    Flow of fluid
    Drug synergism and antagonism
    Thixotropy/ Measurement of Viscosity/ Instruments
    Pharmacodynamic-General introduction

    ReplyDelete
  5. Cognex TechnologyDecember 27, 2021 at 7:26 AM

    Thanks For Sharing The Information The Information Shared Is Very Valuable Please Keep Updating Us Time Just Went On Reading The article
    by cognex offers AWS Training in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Changing Dancer::Plugin::Ajax's content type

Dancer does lots of great things. It has a nice clean way to define routes to handle AJAX routes using the plugin Dancer::Plugin::Ajax . ajax routes are defined in a clear way: ajax '/stuff' => sub { # do work and return }; This plugin technique allows for clear way to separate between ajax and other types of actions for the same route. ajax '/stuff' => sub { # do ajax-y stuff here }; get '/stuff' => sub { # handle html response }; Unfortunately, the one negative with Dancer::Plugin::Ajax is that is assumes all responses will be XML. A quick fix is to manually set the content type in each ajax handler. ajax '/stuff' => sub { content_type('application/json'); # do work }; or add set it as a general option in your main before hook or in each prefix route handler like: package WebApp; hook before => sub { if ( request->is_ajax ) { content_type('application/json'); } }; ...
Read more

BootstrapX clickover

Birth The last few weeks, i've been pushing Bootstrap in various directions. Most of the time, its being hacking around Popovers. Our current design uses Popovers with forms. It provides a very nice balance between in page action and more subtle interruption to viewing the page than a modal. Over the last few weeks, I've found a few quirks with using Popover's trigger action of 'focus'. This works fine with forms but on Chrome and Safari 'focus' events are supported incompletely . In addition to that varied support we have a few other needs that inspired a new Bootstrap extension. BootstrapX - Clickover . Our requirements are: Click button/link/icon to toggle display of popover content Option to click 'away' from popover to close Ability to have 'popover' autoclose after some amount of time Option to have element inside of popover hide it I suspect, in the future, it will need to only auto close when user's mouse...
Read more

2 ways to get SQLite to put dates into columns

2 ways to get SQLite to put dates into a column. insert into mytable values( null, datetime('now') ); insert into mytable values( null, strftime('%s', 'now')); The first one inserts a row somewhat like this: 1|2009-03-10 18:47:46 The second inserts an unix timestamp: 2|1236711411 It might be best to use that unix timestamp with an integer column type for dates since SQLite doesn't support a datetime one. It makes comparisons and ordering much easier: select * from dt where lu > strftime('%s', '2009-03-10'); Output of: id|lu 6|1236643200 2|1236711411 3|1236711516 4|1236711518 5|1236711519 But the formatting is pretty ugly. :-/ Hey what about formatting it within the select with the SQLite datetime function: select id, datetime(lu, 'unixepoch') lu from dt order by lu; id|lu 6|2009-03-10 00:00:00 2|2009-03-10 18:56:51 3|2009-03-10 18:58:36 4|2009-03-10 18:58:38 5|2009-03-10 18:58:39 Better but having to add that to each select is kin...
Read more