Friday, March 25, 2011

Event Pooling in Javascript

(...)Managing Complexity in the UI

As everyone knows, the more dependencies you have in a system, the harder maintaining that system is. Javascript is no exception- and orchestrating actions across complex user interfaces can be a nightmare if not done properly.



Luckily, there’s a great pattern for orchestrating complex interaction in a disconnected way. No, it’s not the Observer pattern. It’s a take on the Observer pattern called Event Pooling which is a piece of cake with jQuery’s bind and trigger functions. For the get to the code folks, here’s an example of using jQuery’s bind and trigger for event pooling.

(...)
http://www.michaelhamrah.com/blog/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/

Thursday, March 24, 2011

Routing in Javascript

(...)route.js is the smallest, easiest way to create stateful navigation based on unique ... route.js doesn't impose any other libraries or formats, handlers are ...
(...)route.js




Indeed, it' is a very nice piece of work
Here is a little example

<!DOCTYPE>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/route.js" type="text/javascript"></script>
    <script>

        var nbrLoadedPages = 0;
        var pageNames = [];

        var staticPages = { "accueil": "Pages/accueil.htm",
                            "gestion": "Pages/gestion.htm",
                            "admin": "Pages/admin.htm"
                          };     
        var pages = {}


        displayPage = function (p) {
            var np = p.param
            if (pages[np]) {
                $("#page").html(pages[p.param]);
                return false;
            }          
        }


        setupRoutes = function () {
            route('#/page/:param').bind(displayPage);            
        }

        setupRouting = function () {
            setupRoutes();
            hashObject = {};
            hashObject._hashchange_last = '';
            hashObject._onhashchange = function () {
                if (hashObject._hashchange_last != location.hash) {
                    hashObject._hashchange_last = location.hash;
                    route(location.hash).run();
                }
            }
            setInterval(function () { hashObject._onhashchange(); }, 50);
        }

        
        initPages = function () {
            for (var key in staticPages) {
                if (staticPages.hasOwnProperty(key)) {
                    pages[key] = null;
                } 
            }
        }

        loadPages = function () {
            $.each(pages, function (k) {
                $.get(staticPages[k], (function (r) { pages[k] = r; nbrLoadedPages += 1; }));
            });
            checkLoading = setInterval(checkIfLoaded, 50);
        }

        checkIfLoaded = function () {
            if (nbrLoadedPages < staticPages.length) {
                // Waiting...
            }
            else {
                $("#main").css("display", "block");
                clearInterval(checkLoading);
                setupRouting();
            }
        }


        $(document).ready(function () {
            initPages();
            loadPages();
        });
    </script>
</head>
<body>
    <div id="log">
    </div>
    <div id="main" style="display: none">
        <center>
            <div>
                <h1>
                    <a href="#/page/accueil">Accueil</a> 
                    <a href="#/page/gestion">Gestion</a> 
                    <a href="#/page/admin">Administration</a>                       
                </h1>
            </div>
        </center>
        <div id="page" />
    </div>
</body>
</html>

Monday, March 21, 2011

corMVC: An jQuery-based MVC Framework

(...)corMVC stands for “client-only-required” Model-View-Controller and that means it does not depend on specific server-side technology. In case you want to demo something, it would be perfect if everything can be done on client side. Of course, you can save changes or load data from server (via Model) as the general illustration below(...)

http://javascriptly.com/2009/12/coremvc-an-jquery-based-mvc-framework/

Sunday, March 6, 2011

Convert Form Elements to JavaScript Object Literals with jQuery formParams Plugin

See how easy it is to retrieve data form a form element

http://jupiterjs.com/news/creating-a-javascriptmvc-slider#news/convert-form-elements-to-javascript-object-literals-with-jquery-formparams-plugin

Ajax Fixtures Plugin for jQuery

When devolopping web client applications, il can be tedious to rely on server to get the data in response to a javascript request.
This plugin allows to send customs responses by overriding '$.ajax'.

'abolutely indispensable'

http://jupiterjs.com/news/creating-a-javascriptmvc-slider#news/ajax-fixtures-plugin-for-jquery

JavaScript MVC jQuery

We all know JQuery an how effective it is.
But it also true that building a maintenable, testable and extensible application using JQuery only can become a mess.
The plugin MVC developped by David Pirek allows to easily create decoupled applications.
Of course the are other great frameworks, but i have to say this one i very amazing compared to it's size

http://www.davidpirek.com/blog/javascript-mvc-jquery-based-framework-is-here

Test it