If you remember my post about the performance degradation of using external javascripts like Google Analytics, UserVoice or Intercom (All Those Services).

It seems I was not crazy after all because I found out CloudFlare and their optimizer service. In relation with their CDN and proxying, it allows to optimize your external resources without changing your app, code or provider.

I’ll give it a try.

I created a simple one file project to help people structure their Backbone.js application. I called it module and you can find the source on Github here https://github.com/juggy/backbone-module

Backbone Module is a simple and elegant solution to load your in browser javascript dependencies. It leverages Backbone eventing and Underscore to bring even more goodness.

First of all, it is not a script loader like require.js or a bunch of other libraries. I believe you are better off loading a single monolitic file in the browser and have it cached instead of loading them all by yourself (and doing the browser’s job of optimizing the load).

You might say: “Excuse me mister, but, if I may object, a dependency loader is useless in a monolitic file” and to that I will answer “You are right, if you want to bang your head against the wall everytime you want to refactor something”.

The truth is that you do not develop a web app in a single javascript file. You create multiple files (each with it’s own scope), you assemble them and upload them to a CDN somewhere in the sky next to the moon. I use Jammit to do so in development.

When you do that and do not think about anything, you will end up with loading exceptions in the browser. Oh! that file should load before this one, let’s change the config. Oh! now it is this one. Back and forth and back and forth. No rapid development.

The solution I use is simple. You wrap each file in a Backbone.module call and reference them using that same Backbone.module call.

((mod)->
  #... my app code here
  mod.start = ->
    console.log "starting"
(Backbone.module("app")))

# ...
Backbone.module("app").start()

This is fine when you do not have any dependencies between your modules. When you have dependencies, you should use the define call:

Backbone.module("core/models").define 
  property: "Quote"
  depends: {"core/models" : "EventedModel"}
, (mod)->
  mod.Quote = mod.EventedModel.extend
    initialize: ->
     #...

So that reads: for the “core/models” modules define a property called “Quote” that will depend on the property “EventedModel” of the “core/model” module. You can also define multiple depedencies from multiple modules. That is pretty all there is to it.

My Backbone applications are usually built like that:

• core
  • index.coffee (the main “core” module which references all sub module like “models”)
  • helpers
  • models
  • routers
  • views
  • templates
• project
  • index.coffee
  • routers
  • models
  • …
• quote
  • index.coffee
  • routers
  • models
  • …
• invoice
  • index.coffee
  • routers
  • models
  • …

My index.coffee looks like this

((core)->

  _.extend core,
    views : core.module("core/views")
    models : core.module("core/models")
    helpers: core.module("core/helpers")
    routers: core.module("core/routers")

)(Backbone.module("core"))

Enjoy!

You have a cool startup idea. You want to enhance other people’s web application or web site with metrics gathering, analytics, realtime data, two ways communication, chat, blinking or mustaches on cats. Who knows.

You build your startup and application. You do what everyone else is doing since (I believe) Google Analytics: they configure your application and get a code snippet. They install this snippet on their homepage, web app, whatever. Life is good. 

Problem is that you are not alone doing this. At Porkepic we happen to love using KISSmetrics, Google Analytics, Intercom and UserVoice. Four services that we use daily. Four services that each load a script. Four services with each a different loading mechanism: from the simple javascript include to the deferred loading multiline script. Two of those services generate DOM elements and load images, CSS.

We load tons of crap with those snippets. Javascripts, DOM, images, CSS. Some even include a complete jQuery version (!). Your browser have to load, parse, execute all of those files on each page load. (Some does a good job, but most do not even minimize their files.)

Not mentioning you have to maintain those scripts and includes within your code base.

This is a pain.

I am imagining a central service that would let you standardize these services behavior for your web app. You log into the service. You configure the different files you want to load, you configure if you are already using jQuery or JSON or anything like this on your web app already and you configure the loading mechanism you want to have.  Once that is done, the service goes and fetch all scripts, sanitize them (checks for duplicate scripts like jQuery), minimifies them and send them to a CDN to be served up to your app when needed. 

All the config happens in the service. After the initial setup on your application, there would be nothing else to do. 

What would be even more useful is that all those vendors standardize their practice to use such service and provide piece by piece code loading. So if you want to load the code to have a helpdesk widget to let your customer enter support message but do not want to load the code for the chat widget you could. 

Yeah. I am dreaming.

Here is one simple code snippet in Coffeescript to revert easily from the last saved version in Backbone.js models:

Do not forget you have to call Skepic.EventedModel.prototype.initialize if you override initialize in your own model.

I stumbled upon this problem this week. There are many blog posts on how to do this in Rails 2, but not many for Rails 3 and most are broken in some ways. So I dug a little and found a nice solution.

First of all, Rails 3 is broken down into distinct modules that enables developer to pick and chose features and assemble them into something new. This is mostly what is happening with the new mailers. They include the features from a normal ActionController but in a different context. When you read the code of the mailers you will see that it includes a bunch of AbstractController modules. The same modules are also found in ActionController::Base. These are the basic building blocks to render templates in rails. 

So this is how I created this OfflineTemplate class that allows you to render anything offline, in a rake task or in a cron job. You can render a partial, a string, XML, json or a page including its layout. 

Comments on the implementation are welcome!