There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.

In this session, Shay will cover some best practices and performance tips for writing the highest quality HTML and CSS possible. Writing code is the easy part, finding a practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice.

July 31, 2013HTML5HTML5, Quote Shay Howeadmin One comment so far July 31, 2013Backbone.jsBackbone.jsadmin

I’m teaching myself to use Backbone because after having done quite a lot of JavaScript in work lately, it has become obvious to me that I need a framework.

Because Backbone allows you to clearly and modularly organize your JavaScript into highly reusable views, models, etc., it tends to foster more elegant solutions.

Backbone’s structure is both clear and flexible, avoiding rigid guidelines, while at the same time providing sensible places for each part of your application to live. Combine this with the beautiful event system that ties it all together and a straightforward way to deal with the DOM on a per view level, and you’ve got a JavaScript dream come true.

Event-driven communication

It’s easy to create small and slick web applications with frameworks like jQuery. When a project grows, however, the jQuery declarations and callbacks get more and more complex and are distributed all over the place. The code becomes more and more cluttered and hard to read.

Backbone.js alleviates this by providing an event-driven communication between views and models (and other elements which we ignore for now for the sake of simplicity). You can attach event listeners to any attribute of a model, which gives you very nuanced control over what you change in the view.

The backbone.js events build on top of regular DOM events, which makes the mechanism very versatile and extensible. With one line of code, for example, you can introduce a publish/subscribe pattern to backbone that ties all of your views together (this is described in full detail in an excellent blogpost by Derick Bailey: http://lostechies.com/derickbail…)

Syncing with a back-end

The models in Backbone.js can be easily tied to a back-end. Out-of-the box the framework provides excellent support for RESTful APIs in that models can map to a RESTful endpoint. If the API is designed correctly, backbone is already configured to access these directly for read, write, and delete operations (via GET, POST, and DELETE).

If a backend other than a RESTful API is used, backbone.js is still flexible enough to accommodate for that.

Maintainability by following conventions

Conventions are a great way to introduce a common coding style without the need of coming up with an extensive set of coding standards. The secret sauce here is laziness. The more you stick to (the few) backbone conventions the less you have to code, and in turn the more standardized and readable the code becomes.

Here is a quick Hello World example

(function($){

¶

ListView class: Our main app view.
        

  var ListView = Backbone.View.extend({
    el: $('body'), // attaches `this.el` to an existing element.

¶

initialize(): Automatically called upon instantiation. Where you make all types of bindings, excluding UI events, such as clicks, etc.
        

    initialize: function(){
      _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods

       this.render(); // not all views are self-rendering. This one is.
    },

¶

render(): Function in charge of rendering the entire view in this.el. Needs to be manually called by the user.
        

    render: function(){
      $(this.el).append("
  • hello world
");
    }
  });

¶

listView instance: Instantiate main app view.
        

  var listView = new ListView();
})(jQuery);

July 31, 2013Backbone.jsBackbone.js, Free Backbone.js Resourcesadmin

Backbone.js

Backbone.js is known for its excellent documentation. I would suggest going through their examples first. The tutorials range from beginner to intermediate. The ToDo application is easy enough to understand and I believe and excellent resource to help you grasp backbone.js.

Besides the official documentation I recommend you check out this screencast from Joey http://joeybeninghove.com/2011/0…
Another resource for beginners would be the tutorials found here: http://backbonetutorials.com/

I don’t think that one book or tutorial would be enough to learn Backbone.js. Here’s a list of all the resources I used to learn it:

Official Documentation

The Backbone.js and Underscore.js docs are extremely well written and organized. I like to keep them open in a tab when developing.

Collections of Tips, Techniques, etc.

eBooks

Blog Posts

Other Collections of Resources