The Return of the
Fat Client

The Goal:

Let's Code!

Sandboxing

(function (window, undefined) {
  var document = window.document,
      $ = jQuery = window.jQuery.noConflict(),
      _ = window._.noConflict(),
      Backbone = window.Backbone.noConflict();

    var root = {};

    // ...

    window.root = root;
} (this));
	

No-Conflict

(function (window, undefined) {
  var previousVersion = window.myPlugin;

  var myPlugin = {
    // ...

    noConflict: function() {
      window.myPlugin = previousVersion;

      return myPlugin;  
    }
  };

  window.myPlugin = myPlugin;
} (this));
	

CORS

CORS Explained

Cross-origin resource sharing is a web browser technology specification, which defines ways for a web server to allow its resources to be accessed by a web page from a different domain. Such access would otherwise be forbidden by the same origin policy.

wikipedia.org

Implementing CORS

Implementing CORS on a server is as simple as sending additional HTTP headers, for example:

	Access-Control-Allow-Origin: *
	Access-Control-Allow-Origin: http://example.com:8080 http://foo.example.com
	

easyXDM

easyXDM is a Javascript library that enables you as a developer to easily work around the limitation set in place by the Same Origin Policy, in turn making it easy to communicate and expose javascript API's across domain boundaries.

easyXDM.net

easyXDM Explained

Summary

• Have no dependencies to the HTML, inject what you need
• Package all your scripts into one file and minify it for production
• ...but keep it uncompressed during development for easier debugging
• Protect yourself by sandboxing your code
• ...and run all vendor scripts in noConflict-mode
• Be careful if you use js-plugins: Know what they do (and don't do)!
• Do not modify prototypes of JavaScript types
• Use only full urls when accessing stuff on your server
• Have AT MOST one global variable
• Do not change the style of generic HTML-elements such as body, p or div
• Consider prefixing all your HTML-element ids and/or classes
• ...or make your CSS selectors specific to your root element
• Be specific about which origins you allow when using CORS

Thanks for listening!

t: @thedersen

w: thedersen.com

m: thomas.pedersen@miles.no