Posts Tagged ‘Javascript’

Event messaging between JavaScript objects.

June 12, 2010

Simplest implementation:

function NewMessageBus() {
    return {
        when: function(name, fn) {
            this.fire[name] = fn;
        },
        fire: {}
    };
}

var msgBus = NewMessageBus();

Usage of this requires two things:

Creating the event

var presenter = (function() {
    msgBus.when('getContent', function() {
        model.load(view.content);
    });
}());

Note that the presenter is state-less.

Firing the event

var view = {
    getContent: function() {
        msgBus.fire.getContent();
    },
    content(htmlData) {
        $('#contentContainer').html(htmlData);
    }
}

var model = {
    load: function(cb) {
        $.ajax({
            type:       'GET',
            url:        'myContent.php',
            dataType:   'json',
            data:       {/* some parameters */},
            success:    function(data) {
                // some preprocessing of data
                cb(data.html);
                // some post processing of data
        });
    }
}

Usage

view.getContent();

That’s it pretty simple.

The view/model does not have any references to each other.

Advertisements

RU A Developer Using Firefox?

March 27, 2010

XRefresh

This program is for you!

I want you image

It does an automatic refresh of the pages that are being served by your development work. Whenever you save it will automatically do a refresh on the the web page.

How it works, is it has two programs. One is an add-on to Firefox. The other is an application you run from your desktop.

The application on the desktop monitors your development work directories. If any saves are done on the files in those directories, it will let the add-on for Firefox know to do a refresh on any pages for those directories.

Scenario:

Joe Sofwarer TDDs his code using qunit.

  1. So he writes a test (RED).
  2. Ctl-s.
  3. Loads up the unit-test page in Firefox.
  4. Gets his results.
  5. Writes code to make his (RED) test a (GREEN) test.
  6. Ctl-s.
  7. Goes to Firefox.
  8. Refresh button pressed.
  9. Reruns unit-test page.
  10. All is (GREEN).

Ten steps required for development.

Add XRefresh

  1. So he writes a test (RED).
  2. Ctl-s.
  3. Loads up the unit-test page in Firefox.
  4. Gets his results.
  5. Writes code to make his (RED) test a (GREEN) test.
  6. Ctl-s.
  7. All is (GREEN).

Seven steps required for development.

Faster feedback. Now there is more time to design and write code.

Or even blog about saving some time.

Recommend you check out there page, XRefresh.

Ugly Developing!

Is it jQuery’s fault it has leaky abstractions?

March 25, 2010

Yes and no.


No its not their fault it has a leaky abstraction.

An example of jQuery not being responsible is here:

    $('#content').css('border');

This is due to several things. One is that different browsers give different result. Two, a border actually consists of four sides (top, bottom, left, and right), and lastly each border side has three properties (style, width, and color). WOW, just looking at a border really includes TWELVE pieces of information.

The only responsibility I see that the implementation .css should return undefined instead of just returning whatever the browser implementation returns. It should force you to select for a very specific border side and property (opinionated software):

    $('#content').css("border-left-style")

Yes it is their fault it has a leaky abstraction.

An example:

    $('#content').addClass('outline');

That’s perfectly good semantics for adding classes to a selector. I say you’re right, but where it breaks down is if you need to add more than one class to a selector. you end up with this:

    $('#content').addClass('outline');
    $('#content').addClass('left_position');
    $('#content').addClass('reset_left');

or you could do this:

    $('#content').addClass('outline').addClass('left_position').addClass('reset_left');

Yawner, everybody understands method chaining. But isn’t one of the powerful tools of jQuery, is the iteration function .each. Shouldn’t we have something like this:

    $('#content').addClasses('outline left_position reset_left');

Let jQuery parse the string into an array of classes and apply it to selector.

And here is how you extend jQuery:

    jQuery.fn.addClasses = function(cssClasses) { 
        // function logic for adding
        // individual classes to selector
    }  
    $('#content').addClasses('outline left_position reset_left');

See: Adding Functions to jQuery


But hey they are only at revision 1.4.2

And those leaky abstractions can be overcome with some extension or changes in behavior. Overall even with the leaky abstractions jQuery is very powerful and useful. I recommend it for everybody.

JS_RUnit Reformulated

November 17, 2009

js_runit is now a standalone JavaScript testing framework. So if your into a minimalist JavaScript testing experience, this tool is for you. Two files to download. The html file and the JavaScript file. Included with this is an example of Passive View with unit tests.

To really appreciate this see the passive view example.

The unit tests for the above example can be found here.

Happy unit testing.

JavaScript Test First Presentation Patterns Part 1

October 17, 2009

Why Presentation Patterns?

Presentation patterns can give separation, between display elements and logic performed on the elements, reducing accidental complexity. Mixing display elements with logic leads to a pattern called Big Ball of Mud. This pattern is very common, because as more time goes by you end up adding more and more mud to the code base. Now you may say Oh, but the code I write isn’t complex and the more JavaScript I add the longer it takes to load my pages’. I would argue that the minute you hit CTL-S on your code, it has the potential for complexity in the future. Maintenance is the key ingredient that adds complexity. Code bases can spend more time in maintenance; bug-fixes and new features. As more bug-fixes and features are added to the code-base, more complex the code becomes. By using separation between display elements and logic, accidental complexity is decreased.

The future of web design is to use even more scripting in web pages. The visual presentations that JavaScript offers is too good a thing to pass up. It isn’t the 80s any more. It is the 21st century. Dynamic pages are here to stay.

Load speed can be ameliorated to a certain certain point by compressing the JavaScript file that gets served to the web browser. Compression consists of removing whitespace (spaces and carriage returns), and replacing variable names and functions names with minimal sized tokens.

Why Test First?

I’m an ordinary programmer. I can’t dream up this wonderful and beautiful super kick-ass application. I can’t keep of track of 400,000 states the application is in, when executing. I just can’t. Test First helps me handle all the above deficiencies that I have as a programmer.

There are some advantages for following the TDD way. One, it creates a regression test for your code base. Two, it allows you to refactor your code safely. Three, it drives the code base to a good design.

One thing, I personally think is very important, is it helps you to write in a more functional style. In JavaScript you have first-class functions. These functions (named or anonymous) can be assigned to variables and passed around. This can be a powerful abstraction tool.

The unit testing framework I use is called js_runit. My web development right now is done from Ruby on Rails.

What Are Some of the Presentation Patterns?

Humble Dialog/Passive View
MVC
MVP
Presenter First

 

Please feel free to disagree with some of opinions. Debate is good.

Javascript Complexity

October 14, 2009

Javascript is a language used in web development. I would argue that it is Object Oriented (OO). And due to this the principles guiding development in an OO language apply.

When developing software, at its basic level, you have three responsibilities that need to be managed.

  1. Input: consist of user actions.
  2. Output: change to the web browser.
  3. Logic: any piece of code where a decision is made.

To manage this complexity, you should be Unit Testing if not testing-first.

A simple Javascript unit testing framework used for Rails.

 

js_runit