PureMVC port to Prototype JavaScript Framework

PureMVC port to Prototype JavaScript Framework

As to give an answer to Cliff Hall asking: "JavaScript Port Branches to Support ExtJS, MooTools, Objs... What's Next?" on a PureMVC blog post, I announced on Twitter last week that I had in idea to port PureMVC to Prototype.js as soon as possible.

As you may know, I made the first PureMVC port to JavaScript using a micro-architecture of mine called Objs. The goal of this project was to show that PureMVC could be used in JavaScript and to demonstrate with the PureMVC EmployeeAdmin demo that it even works great. Even if some people have been a little pessimistic in that it uses a micro-architecture instead of a well known JavaScript framework, I like to think that my goal was achieved as Justin Wilaby created a PureMVC for Mootols (for which I made the PureMVC Employee Admin demo too) and more recently Tony DeFusco the PureMVC for ExtJS.

I said it on my blog or on the PureMVC forums, I'm a partisan of having a PureMVC port for each mainframe JavaScript framework. One of the reason is that, as each JavaScript developer knows, we don't always have choice of the framework we can use on the product we are working for. This is why I decided to port PureMVC to Prototype which was the next mainstream JavaScript framework in which we need to port PureMVC.

Another thing I want to do for months was to add an agnostic JavaScript Unit Test suite to PureMVC for JavaScript. This is why I have not taken the time to make a demo for the Prototype port but preferred to add an Unit Test Suite.

I will port PureMVC Employee Admin or BoxSplash demo in a later blog post I assume that this part will be valuable for PureMVC developers only, but for the moment I prefer to describe which Unit Test framework I used and how I implemented it to test PureMVC.

Finding the good Unit Test framework

My first work was to find the appropriate Unit Test Framework.

Evidence

I first have explored Evidence, a promising project managed by Tobie Langel who also actively worked on the Prototype framework. It had many of the advantages I was looking for: agnostic, already heavily used to test the Prototype framework and even support tests in multiple browsers by launching them sequentially. The first problem is that it needs a Ruby and its Rake plugin install but mainly that it failed to launch any of the basic examples I asked it to run. An huge work has been made on this project and it seems really promising, but for the moment I preferred something simpler and much adapted to test the PureMVC framework core in itself.

YUI Test Standalone Library

After some searches, I finally chosen the YUI Test Standalone Library which has all the advantages we needed to test the PureMVC core and as a bonus found that it can be completed (but none need the other) with YUIcompressor which came with an Ant task for Eclipse to concatenate JavaScript classes files and optimize them for the web. All in all, this made me think that we need those two Yahoo Platform tools for the existing and next PureMVC JavaScript ports. The two are open-source so we aren't dependent of any endangering proprietary technology for our future works.

Implementing PureMVC Unit Tests

Not to reinvent the wheel and to gain some precious time I simply first had converted the existing PureMVC for ActionScript 3 Unit Tests to JavaScript using what I like to call the "brute force conversion".

Next I realized that JavaScript need some more security than ActionScript regarding call to superclass from within the pseudo Class constructor as each framework uses its own method to do this. Note for the record that I myself first have forgotten to call super from constructor several times. If you do this, unit tests pass except on in the ViewTestMediator6 when a call to this._facade is made, needing that Notifier superclass was called from constructor. I added so a test for constructor in each class inheriting from Notifier as this is the only class inherited in PureMVC framework.

I also added a Unit Test for the Notifier class that I found missing in PureMVC for ActionScript.

This gave us 49 Unit Tests validating each PureMVC JavaScript port.

Note that developers interested in porting PureMVC to a specific JavaScript framework will find useful than Tests classes themselves do not have to be rewritten for each port as they only use YUITest syntax but that subclasses and utilities have to.

Unit Test passing sceenshot

I personally think that adding the Unit Test suite to the existing ports is mandatory as my first tests revealed some errors in the existing ports. I even can take the time to do it for one port or the two if their respective owners do not have the time for it.

Actual error I found was Facade.removeProxy() which must return a proxy and doesn't on both ports.

Some other errors where related to types in documentation only. Also many methods return "undefined" when a strict null is awaited. This can be discussed, but I think this is a good habit to return a strict null when possible In JavaScript. Working TDD on this port prove me this was the best thing to do anyway.

Using YUICompressor

Using YUICompressor for each port and adding some documentation on how to use it seems also a good idea to me as most of the questions related to the PureMVC for JavaScript ports were "how to concatenate JavaScript pseudo-classes in one file". This is why I will explain how to do this.

For you to know I use Eclipse with Aptana as a plug-in to develop JavaScript, none of both are needed to use nor YUICompressor and YUITest as they can be used from command line, but as many JavaScript developers use Aptana I think not to hurt anyone in presenting them in this context.

My source for this work were a blog post by Sathya Prasad and this one by Onno.

1) First you need the two and YUICompressor and YUIAnt jars files. Note that YUIant is open-source too.

2) Next, simply copy the two jars in your project as follow :

How to use the Jars

3) Later you will need a build.xml file for Ant to work with the two jars:

 
<project name="YUICompression" basedir="..">
  <target name="default" description="Minifiy a set of files">
    <taskdef
      name="yuicompress"
      classname="com.yahoo.platform.yui.compressor.YUICompressTask"
    >
      <classpath>
      <pathelement 
        path="${basedir}/build/lib/yuicompressor-2.4.2.jar"
      />
      <pathelement
        path="${basedir}/build/lib/yuiant.jar"
      />
      </classpath>
    </taskdef>
 
      <delete>
        <fileset dir="${basedir}/bin/" includes="*.js"/>
      </delete>
 
      <concat
        destfile="${basedir}/bin/PureMVC_prototypejs_1_0.js"
        append="true"
      >
        <fileset dir="${basedir}/src" includes="**/*.js"/>
      </concat>
 
      <yuicompress
        charset="UTF-8"
        linebreak="80"
        warn="false"
        munge="no"
        preserveallsemicolons="true"
        preservestringlitterals="true"
        outputfolder="${basedir}/bin/"
        outputsuffix="-min"
      >
      <fileset dir="${basedir}/bin/">
        <include name="**/*.js"/>
      </fileset>
    </yuicompress>
  </target>
</project>
 

Running the build.xml file from the Eclipse contextual Run As > Ant Build menu should concatenate and optimize your code while creating an optimized and debug version of your work.

Note that in the Prototype framework, the concat section is a little different as it need to respect a class declaration order and so concatenate them in a precise order. You can see this by your own looking at the build.xml source in the PureMVC for Prototype framework.

Update (02/18/2011) : I finished the first PureMVC multicore port to JavaScript. I chosen to make it with Prototype, so I added the link to the Github repository in the following download section

Downloads

As usual Cliff Hall will probably create the branch for this new port as soon as he can. Thanks in advance to him for this.

2 thoughts on “PureMVC port to Prototype JavaScript Framework

  1. Pingback: Tweets that mention Tekool.net - PureMVC port to Prototype JavaScript Framework -- Topsy.com

  2. This afternoon I added some modifications to documentation, project structure and Unit Tests.

    I also committed the project to Github instead of Google code. URL of the project has been updated in the blog post to reflect this change

Leave a Reply

Your email address will not be published. Required fields are marked *

*

  Am Not Spammer

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>