Backbone.js for a

multi-page app

@drivy

Drivy


  • 172 CoffeeScript/JS files (14 w/ 100+ lines)
  • 6 developers
  • 10 000+ commits
  • Ruby 74% VS CoffeeScript/JS 12%



Namespacing

Multiple projects



  • Internal Bootstrap (nothing to do w/ Twitter)
  • Backoffice
  • Shared (Mobile + Drivy)
  • Mobile
  • Drivy

window.Drivy = {
  Views: {
    Booking: {
      Steps: {}
    },
    Cars: {},
    Search: {},
    Cms: {},
    Dashboard: {
      Rentals: {},
      Calendars: {},
      Cars: {},
      Payments: {}    },    ...  }
}





  • Related to the namespace server side

  • Easy to find and add views 

  • Allows for deep nesting
    Drivy.Views.Dashboard.Cars.Show 

  • Don't need to define namespace on top of each file
Drivy.Views.Cars.Show = (function() {
  function Show() {
    new Shared.Views.Facebook.Share();
    new Shared.Views.Twitter.Share();

    new Bootstrap.Components.Maps.Map();
    new Bootstrap.Components.CarCalendar();
    new Bootstrap.Components.Tabs();

    new Drivy.Views.Cars.Slideshow();
  }  return Show;
})();

Drivy.Views.Search.Show = (function() {
  function Show() {
    new Shared.Views.Facebook.Login();

    var search = new Drivy.Models.Search();

    new Drivy.Views.Search.Form({
      model: search
    });
    new Drivy.Views.Search.Results({
      model: search
    });
    new Drivy.Views.Search.Map({
      model: search
    });  }  return Show;
})();



View auto loading




Rails
Dashboard::Cars#show

Body data-action
dashboard-cars-show

Backbone View
new Drivy.Views.Dashboard.Cars.Show()

Where the magic happens


Bootstrap.Utils.parseNamespace = function(id) {
  return _.compact(_(id.split('-')).map(function(word) {
    return _.classify(word);
  })).join('.');
};
// Bootstrap.Utils.parseNamespace("dashboard-cars-show")
// > "Dashboard.Cars.Show"
// Called in layout only once
Drivy.loadView = function() {
  var action, viewNamespace, loadedView;
  action = $('body').data('action');
  if (!action) return;
  viewNamespace = Bootstrap.Utils.parseNamespace(action);
  loadedView = Bootstrap.Utils.findDeepKey(Drivy.Views,
                                           viewNamespace);
  if (loadedView) {
    new loadedView();
  }
}

You said Ajax ?


Drivy.Events.on("popin_ajax_content_added", function() {
  var id = $(".mfp-content .popin").attr("id");
  var namespace = Bootstrap.Utils.parseNamespace(id);
  var popinView = Bootstrap.Utils.findDeepKey(Drivy.Views,                   
                                              namespace);
  if (popinView) {
    new popinView();
  }
})



CoffeeScript

Classes


class Drivy.Views.Cars.Show extends Backbone.View
  initialize: ->
    # Do something awesome  

Inheritance


class Bootstrap.Models.RentalDates extends Backbone.Model
  defaults:
    startDate: new Date()
    endDate: new Date()

class Drivy.Models.RentalParameters extends          Bootstrap.Models.RentalDates
  defaults:
    distance: 200
    
class Drivy.Models.Search extends Drivy.Models.RentalParameters
  toJSON: ->
    return _.pick(this.attributes, "startDate",
                  "endDate", "distance")





Valentin Rabanelly, 
Lead Front Dev @drivy
@vrabanelly
valentin@drivy.com


       
    On recrute un dev front !                        

    Backbone.JS for multi-page app

    By vjrabanelly

    Backbone.JS for multi-page app

    • 2,212