Archive

ajax response types of facebook and google

I have been experimenting with JavaScript MVC/MVP concepts lately, and have been able to come up with some usable implementations. Still, what worries me is that this concept has not been fully tested in complex and large environments.

I was doing some digging under the hood to try to see what the big guys are doing, to get some ideas, but it seems that high concepts did not arrive at large companies. Most of google's apps are rendered through GWT so the javascript is an unreadable mess, and iframes are highly used as hidden content loaders. Facebook seems to be little further along (at least having some kind of javascript based framework, but the ajax loaded pages are wrapped in JSON together with their resource references. Here is an example:

for (;;); {
    "error": 0,
    "errorSummary": "",
    "errorDescription": "",
    "errorIsWarning": false,
    "silentError": 0,
    "payload": {... html here ..."
    },
    "css": ["dF4\/J", "ed0kq", "5SY+j"],
    "js": ["qVawz", "ae1v\/"],
    "bootloadable": {
        "async": ["bB44\/", "Jsc4C", "omvrb"],
        "dialog": ["bB44\/", "Jsc4C", "omvrb"],
        "dom-form": ["bB44\/", "Jsc4C", "omvrb"],
        "PhotoTheater": ["bB44\/", "Jsc4C", "c54L1", "92bDI", "omvrb"],
        "PhotoTag": [],
        "PhotoTagger": ["bB44\/", "Jsc4C", "omvrb", "HxkzS", "z2MT6"],
        "TagToken": ["bB44\/", "Jsc4C", "mgZyP", "z2MT6"],
        "TagTokenizer": ["bB44\/", "Jsc4C", "mgZyP", "z2MT6", "c54L1", "92bDI", "omvrb"],
        "Toggler": ["bB44\/", "Jsc4C", "SPe3z", "b34IU"],
        "hovercard-core": ["bB44\/", "Jsc4C", "ipCbG", "omvrb", "qVawz", "hipy9"]
    },
    "resource_map": {
        "dF4\/J": {
            "type": "css",
            "name": "css\/6qi927pt0gw0o4os.pkg.css",
            "permanent": 1,
            "src": "http:\/\/static.ak.fbcdn.net\/rsrc.php\/zX\/r\/l5RrdJG8V5a.css"
        }...
    }
}

This is pretty much the approach that I have been using in most of my apps so far, which is very scalable and fast, however the development using a compiled language (C#) makes is not as flexible, perhaps due to the lack of my backend skills :)

JavaScript MVC/MVP Frameworks

As I mentioned in my last post, I have been working on my JavaScript MVC/MVP framework lately. Just finished searching around and have not found anything close to what I have done. Most of the implementations I have seen were some complicated server-side code that referred to the MVC chart, but were far from being browser only MVC solution.

What I want to see is something to the level of ExtJs which is JavaScript only, platform independent JavaScript MVC framework, where in the row form, each restful URL (ideally hashed) results in loading 3 files (either separately, or in one JSON-nized request) model being pure JSON data representation, view which can be edited in .html file allowing for loops, if statements, and HTML helpers, and finally controller that allows for using jquery and its plugins. Such approach must be so straight forward, that anybody with basic knowledge of jquery should be able to implement it. No server side, platform dependent installation, no fancy UI frameworks.

I am pretty close to finishing up my code samples... so stay tuned in :)

UPDATE: Here is the JavaScript jQuery MVC framework that I just released.

javascript test driven development with qunit

I have been getting deep into TDD lately, and qUnit became the framework of my choice. This is how I decided: I went to John Resing's site and looked what he uses :) (actually wrote/co-wrote it).

Anyway, I love TDD now. It is a lot of work, and write a good test is harder that writing a good code, but it will make you much better developer who writes much better code.

I have written a simple loader which allows you to load qUnit from an external file, rather than having to have to include the HTML on the page, which is nice in combination with some client side or server side mechanism that will include your tests with dev - exclude in production.

(function ($) {

    //test case init

    var stringBuilder = function () {

        var s = [];
        return {
            // appends
            append: function (v) {
                if (v) {
                    s.push(v);
                }
            },
            // clears
            clear: function () {
                s.length = 1;
            },
            // converts to string
            toString: function () {
                return s.join("");
            }
        }
    };

    var sb = stringBuilder();
    sb.append("<div style=\"position:absolute; right:0%; width:350px;\">");
    sb.append("<h1 id=\"qunit-header\">QUnit Test Suite</h1>");
    sb.append("<h2 id=\"qunit-banner\"></h2>");
    sb.append("<div id=\"qunit-testrunner-toolbar\"></div>");
    sb.append("<h2 id=\"qunit-userAgent\"></h2>");
    sb.append("<ol id=\"qunit-tests\"></ol>");
    sb.append("<div id=\"qunit-fixture\">test markup</div>");
    sb.append("</div>");
    $("body").append(sb.toString());

})(jQuery);

Here is how I like to write my tests: despite of all of the methods being available as globals, this might be dangerous in a complex app, so I wrap the code in a closure, and use the namespaced methods which are available under the qunit namespace:

/*test 1*/
(function (T, $) {

    //get elements
    var doc = $(document);

    T.module("First Test");

    T.test("Toggle", function () {

        //how many tests are expected to pass:
        expect(2);

        T.equals("block", "block");

        T.equals("none", "none");

    });

})(QUnit, jQuery);

To get some ideas how to write tests, there are some great test cases written as examples on the bottom of the qunit page showing how jquery itself is being tested.

I have seen this quote somewhere recently: "Debugging sucks, TDD rocks!"