Warning: file_get_contents(/home/mprokes/public_html/mattprokes.com/wp-content/themes/kanata/images/submiit.gif): failed to open stream: No such file or directory in /var/www/wordpress/wp-content/themes/kanata/header.php on line 39

Archive for the ‘Design Pattern’ Category

Linked Lists In Closures

Author: mprokes

So you have been asked to create some sort of callback history, or maybe trace how you have got to a certain point and be able to “roll back” previous states of your application. I have recently discovered a very interesting use for closure callbacks that enables just the thing. Most people would freak out, but really this is just a design pattern based on linked objects in traditional languages (only more easy!).

So lets get on with the example.

var PresidentTracer = new (function(){
   var presidenttracer = this;
   var presidentCurrent;
   var presidentCallback;
   var presidentCallforward;
   presidenttracer.addPresident = function(presidentName){
      var current = presidentCurrent;
      var callback = presidentCallback;
      presidentCurrent = presidentName;

     //callback history
     presidentCallback = function(){
        presidentCurrent = current;
        presidentCallback = callback;
     };
   };
   presidenttracer.nextPresident = function(){
      var current = presidentCurrent;
      var callback = presidentCallback;
      var callforward = presidentCallforward;
      if(presidentCallforward!=null){
         presidentCallforward();
         presidentCallback = function(){
            presidentCurrent = current;
            presidentCallback = callback;
            presidentCallforward = callforward;
         }
      }
   };
   presidenttracer.previousPresident = function(){
      var current = presidentCurrent;
      var callback = presidentCallback;
      var callforward = presidentCallforward;
      if(presidentCallback!=null){
         presidentCallback();
         presidentCallforward = function(){
            presidentCurrent = current;
            presidentCallback = callback;
            presidentCallforward = callforward;
         }
      }
   };
   presidenttracer.currentPresident = function(){
      return presidentCurrent;
   };
})();

This is basically linked lists through closures… It can get even more interesting then this though, we could if we wanted to pass in a closure to get executed on each president switch as follows.

var PresidentTracer = new (function(){
   var presidenttracer = this;
   var presidentCurrent;
   var presidentCallback;
   var presidentCallforward;
   var switchCall;
   presidenttracer.addPresident = function(presidentName, callOnSwitch){
      var current = presidentCurrent;
      var callback = presidentCallback;
      var switcher = switchCall;
      presidentCurrent = presidentName;
      switchCall = callOnSwitch;
      callOnSwitch();
      //callback history
      presidentCallback = function(){
         switchCall = switcher;
         presidentCurrent = current;
         presidentCallback = callback;
      };
   };
   presidenttracer.nextPresident = function(){
      var current = presidentCurrent;
      var callback = presidentCallback;
      var callforward = presidentCallforward;
      var switcher = switchCall;
      if(presidentCallforward!=null){
         presidentCallforward();
         switchCall();
         presidentCallback = function(){
            presidentCurrent = current;
            presidentCallback = callback;
            presidentCallforward = callforward;
            switchCall = switcher;
         };
      }
   };
   presidenttracer.previousPresident = function(){
      var current = presidentCurrent;
      var callback = presidentCallback;
      var callforward = presidentCallforward;
      var switcher = switchCall;
      if(presidentCallback!=null){
         presidentCallback();
         switchCall();
         presidentCallforward = function(){
            presidentCurrent = current;
            presidentCallback = callback;
            presidentCallforward = callforward;
            switchCall = switcher;
         };
      }
   };
   presidenttracer.currentPresident = function(){
      return presidentCurrent;
   };
})();

so lets test it out!!!

PresidentTracer.addPresident('fruit',function(){alert('zoop');})
PresidentTracer.addPresident('whoAmI',function(){
   alert(PresidentTracer.currentPresident());
});

PresidentTracer.addPresident('neto',function(){alert('dynamic callbacks');})

PresidentTracer.currentPresident();

PresidentTracer.previousPresident();
PresidentTracer.nextPresident();
PresidentTracer.nextPresident();
PresidentTracer.previousPresident();
PresidentTracer.previousPresident();
It works! Long story short, this example shows off the dynamic nature of javascript as well as closures and callbacks. Many people have yet to understand the power of such language features, but if used correctly they can simplify programming, and give you syntactical expressiveness.

The author,
Matt Prokes
  • Reddit
  • StumbleUpon
  • Bebo
  • Yahoo Buzz
  • Delicious
  • Twitter
  • LiveJournal
  • Netlog
  • HelloTxt
  • Share/Bookmark

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

previous1next1The Professional Developer Series
Volume 2, Web Development

1.5 Web Development And The Future

Page: #29



So what are component based applications? A developer can think of a component as a small, portable, reuseable facet of an application. Component based applications are simply applications comprised of a set of small, protable, reusable webapplications which are leveraged for a particular purpose.

I have met many developers that are great at building webapplications, I have met not nearly as many that componentize their applications on a day-to-day basis. Next generation webapplications are already beginning to focus on delivering their platform out to developers (such as facebook apps, iphone apps, etc). Where can we find real world examples of a componentized application? I would point out that many facets of webapplications such as wordpress have facilities which have been turned into components. Infact through the magic of plugins, you may even add new components to your wordpress workspace.

Other examples of componentized webapplications include things like remote flash video players,

Oops this wasn’t supposed to go out yet. Stay tuned for the completion of the article, I thought this was set for saturday.

  • Reddit
  • StumbleUpon
  • Bebo
  • Yahoo Buzz
  • Delicious
  • Twitter
  • LiveJournal
  • Netlog
  • HelloTxt
  • Share/Bookmark

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

previous1next1The Professional Developer Series
Volume 2, Web Development

Chapter 1.4 Web Development Trends

Page: #23


The Model View Controller (MVC) pattern has been around for years, and now more then ever it is being applied to web applications. We will be discussing more about how to implement it in your webapplications later on, but for now we just need to familiarize ourselves with what it is all about. Originally MVC was based on research done by Xerox in 1979, but really microsoft made it popular during the 90′s, when at that time a rapid evolution of user interfaces was occuring and a architectural pattern was required for managing the new complexity desktop applications were presenting.

Lets fast forward to 2008, MVC is used more then ever, and even after 20 years of popularity it is still very relevent. While not all web applications have completly migrated to using MVC, it is a trend that is still evolving and emerging as web applications (like desktop applications) become more complexed and require an architecture to manage that complexity. As a result, projects which we develop in this book will also follow a model view controller methodology.

The thing that makes MVC so great is the natural seperation of functionality, it does this by splitting applications up into natural components which serve a specific purpose such as data access (Model), Execution, and Initialization (Controller), and Interface Code (Controller). These days MVC may actually be implemented on the server side to deliver data to a client, as well as on the client side. MVC is just one of many architectural patterns, and is often mixed with other patterns that we will talk about later in the book (part 2).

This book is not about design patterns, though we will be leveraging some. I would suggest though that you read up a bit on some traditional design patterns after completing this book so you can get an idea of how you might architect your own systems in a more straight-forward manner. What we will be using is design patterns that are highly relevent to todays’ webapplication systems. You will find nuggets of web architecture suggestions later in reading.

List of architectural patterns, application architecture (simlar to house architecture).
List of  design patterns, code architecture (or common patterns in code styles)

  • Reddit
  • StumbleUpon
  • Bebo
  • Yahoo Buzz
  • Delicious
  • Twitter
  • LiveJournal
  • Netlog
  • HelloTxt
  • Share/Bookmark