Friday, July 26, 2013

Backbone JS lessons learned ... Ongoing

  1. Two major frameworks to consider, Chaplin and Marionette help give you guidelines when building applications in Backbone. After using both I like Marionette the most especially for the way it manages the screen with Regions and Layouts.
  2. When developing widgets in Backbone you will most likely want to the sync the Model when the view changes and the reverse when the model is updated. Think this through very carefully I have seen many bugs in this type of logic.
    1. One bug occurred when a developer built widgets that would get themselves into a circular event firing loop. He unknowingly did this by listening to the change event on the element, the issue arose because this same view listened to model change events. The model would be fetched and fire a change event which would update the view. Then the change event on the element would fire causing the model to update and so on ... Initially he solved this by checking if the value on the model was different than the value on the element. This got around the issue, but the issue could be avoided by not listening to change events on the element. Instead we should listen to user events on the element like onBlur, ...
  3. Decide early on how you are going to handle the loading part of the application, will widgets simply listen to change events and render when the data comes in, sort of having them pop up when available. Another approach is explicitly showing a loading sign while all the ajax calls are fetching models and collections.
  4. If you are going to need to relate your models and collections you will most likely pick between backbone relational and backbone associations. Be aware that if you pick backbone relational you will only be allow one model with the same id per type. In order to fix this you will likely have to call YourModelType.findOrCreate throughout your code instead of simply instantiating a new model. TODO I need to look into how backbone associations handles this problem.
  5. Routing across your application should also be well thought out. Are you going to need to programmatically navigate from one page of your application to another. Also think about your handling of where your javascript is deployed, will you need to know the context path in order to route properly?

1 comment: