Step by step from jQuery to Backbone

The first one is to take logically unrelated operations and combine them into one giant blob via shared/global variables and god objects/methods. This is what commonly known as spaghetti code.

The second one it to take every piece of functionality and shatter it into tiny pieces, so no unit of code represents anything anymore. This can be done with endless callbacks or layers of abstraction, and it can be made worse by complex frameworks with a lot of "magic" taking place or a lot of boilerplate being required. I don't know any common name for this, but let's call it mush coding.

It looks like the post describes how to convert moderately readable spaghetti code into unreadable mush code. (I would claim that a person not familiar with JQuery could easily understand the initial code, while a person not keenly familiar with Backbone would be completely lost in the final version.)

If most of your methods are longer than 100 lines, something is probably wrong. If most of your methods are shorter than 3 lines, something is probably wrong as well.

This looks like one hell of a bastardization of MVC. It seems the view is really a controller+view, and the model does the sync in a way that requires coupling the view to the model to handle any sort of error.

Edit: I could be wrong here, but can someone show me how to fix the Backbone code to handle an error correctly? Error handling can be added to the jQuery code by adding 'error:function() { // do something simple },'

The payoff, however, is if more features or behaviors were in the pipeline (and when aren't they?). This really sets you up to gracefully manage more complexity by having sensical places to put more code, instead of writing a few more $(document).ready callbacks to ship something on time.

Backbone.js might not be the right tool for the contrived example, but I've come to expect a sacrifice of real-world applicability for smaller, digestible chunks. That the synthesis is up to you is ok, I think.

I would like to note though, that the justification for the increase in LOC count feels a little weak. I understand and agree with it, however before I really grokked what Backbone enabled I probably would have been a bit wary of that - it really just looks like extra work.

I would suggest a follow up, that traces adding some functionality or widget use through both the original code and the newly refactored code, to highlight the power of backbone and make it clear. (I'm suggesting this from the original author, because the post I just read was pretty well written and seeing the same style in the in-depth guide would be pretty nice :) ).

http://www.ofbrooklyn.com/2012/11/13/backbonification-migrat...

I am writing one myself - so would be interested to hear the good and bad points of this as much as the OP

Thinking that I could apply this logic to client side storage was fine until he proposed that persistance would be automatically handled by Backbone's ajax.

At that point, backbone gives you less flexibility for more code. No thanks.

My code would look more like:

    function postdata(url, data, callback) {
        $.ajax({
            url: '/status',
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function (received) { callback(received); }
        });
    }


    var statusform;

    (function(pub) {
        var status = ""

        pub.init = init;
        function init() {
            $('#new-status form').submit(function(e) {
                submitdata(); 
                e.preventDefault(); 
            });
        }

        function submitdata() {
            var data = {
                text: getfieldvalue("textarea")
            };

            if (!data.text) { return; }
            postdata("/status", data, function(received) {
                status = received.status;
                drawscreen();
            });
        }

        function getfieldvalue(fieldname) {
            return $('#new-status').find(fieldname).val();
        }

        function drawscreen() {
            if (status) {
                $('#statuses').append('<li>' + status + '</li>');
                $('#new-status').find('textarea').val('');
                status = "";
            }
        }
    }) (statusform);


    $(document).onload(statusform.init);