Dojo wins

After working with Dojo for a while now I have come to the conclusion that Dojo is the best bet for open source enterprise development. To that end I have started a new project that is like Architect for ExtJS but for Dojo. To sign up for the closed beta go here.

Advertisements

Troubled

So I have taken a break from Qooxdoo and started comparing it to Dojo. I was a little concerned that, looking at the forum activity, it looks like Dojo has about 10x the amount of activity as Qooxdoo. They are both very capable frameworks but Dojo looks like the frontrunner for full featured javascript frameworks (like ExtJS).

On a side note Sencha announced that ExtJS and Sencha Touch are merging into a single product. Technically this is very good news for me but I would imagine that is the end of Sencha Touch being free. I guess I knew it had to end but I was hopeful.

Demos

The one area that ExtJS excels over Qooxdoo is their demos. Ext has a huge amount of demos of almost anything you could think of. As part of my learning process I am going to attempt to reproduce as many demos from the ExtJS Demo Page as possible. I will put them on our website here. There is only one there now, the Array Grid. Even though this is one of the first things I have done in Qooxdoo it looks pretty close to the ExtJS version. If anybody else has done this you can send the code to me and I will post it on our site. As alway, suggestions and improvements are encouraged as it will make us all better at Qooxdoo coding.

First bit of code

I really liked Sencha Architect. Not only did it make it easy to throw a UI together quickly it also help enforce best practices via MVC. Qooxdoo has no official Designer/Architect app. There have been some community based side projects but they seem mostly dead now. I may look into building something as I have some experience in builder type tools.

Anyway this leaves me on my own to figure out best practices for Qooxdoo. As far as I can tell there is no specific MVC process so you create apps like we used to in ExtJS. Basically I would create a screen by extending an Ext container then add the view and handlers in there. Of course we can at least separate the two in our code.

In Ext it would look like this…

Ext.define('Marketplace.LeadStats', {
extend:'Ext.Panel',
alias:'widget.LeadStats',
initComponent:function ()
{
}
});

In Qooxdoo it is…

qx.Class.define("Marketplace.LeadStats",
{
extend: qx.ui.container.Composite,
construct: function()
{
}
});

That part is pretty similar. Instantiating the new classes are exactly the same “new Marketplace.LeadStats();”.  In Qooxdoo you can create properties in your classes. They are very cool. A property is a variable but it has a lot more functionality. Here is what it looks like.

properties : {
myProperty : { init:10, check : "Number", event: "myPropertyChanged" }
}

init initializes the variable. check will validate that the variable is always a number. There are many types you can validate against. You can also be more specific.

properties : {
color: { init : "blue", check : [ "red", "blue", "orange" ] }
}

This will make sure the value must be one of the group “red”, “blue”, “orange”.

You can even create a validation function like this.

check : function(value) {
return !isNaN(value) && value >= 0 && value <= 100;
}

Properties can also handle events. 

properties : {
label : { event : "changeLabel" }
}

When the property changes it will throw a changeLabel event which could be handled like this.

obj.addListener("changeLabel", function(e) {
alert(e.getData());
});
You also get a set and get method automatically. For example setLabel() and getLabel() are automatically implied. If you don’t need all this functionality you are still free to create regular class variable.

Getting Started

There a four flavors of Qooxdoo. Website, Desktop, Mobile and Server. That sounds confusing. Website is non-GUI code similar to jQuery. Server looks like you would use it as part of a node.js deployment.  Mobile and Desktop are self explanatory. For now I am just looking at Desktop. The documentation on the website is pretty good as far as installation is concerned. To run Desktop you need to fulfill the SDK requirements. I am running on Windows 7 so I needed to grab Python. Use version 2.7 instead of 3.4. You can grab a Windows Installer file here. Don’t panic about Python. Once you run the installer it all just works. After that download the Desktop version from the download page. It’s just a zip file so I placed it right on C:\. To create your first app open the command line in the directory you want the app to go. In Windows 7 you can easily do this by opening the base directory. Hold down shift and right click in the directory. Select “Open command window here”. If you put the SDK at C:\ you then type in “C:\qooxdoo-4.0.1-sdk\tool\bin\create-application.py –name=myappname” and hit enter. This will create the directory “myappname”. If you look in there you will see a “source” directory, some json files and generate.py. Source is your development version of the code. If you look in there you see an index.html and some directories. Now you need to run the Generator to compile everything. In the command line type “cd myappname” and hit Enter. Then “generate.py source-all”. That’s it. Run index.html to see your first Qooxdoo app. To modify the code you start  in the Application.js file which is in myappname/source/class/myappname/. When you are ready to put your code in prduction you run “generate.py build”. A build directory will then be created.

Running it on a server.

At some point you will probably want to test your source version on a server to get live data. This was a little tricky. When the generator creates the source version it contains system file links back to C:\qooxdoo-4.0.1-sdk\. If you are running from a server at http://localhost/myappname/index.html all those links will break. The way I solved this problem for my Tomcat install was to put a copy of qooxdoo-4.0.1-sdk into my webapp folder. I then ran create-application.py from webapp and pointing to that version. For example “C:\Tomcat\webapps\mywebapp\webapp\qooxdoo-4.0.1-sdk\tool\bin\create-application.py –name=myappname”. When you are done testing and ready for production you just use the build files generated as everything gets compiled into the build version of the code.

That’s it for now. Next post I will write some code!

ExtJS vs Qooxdoo, the obvious differences

I have only been looking at Qooxdoo for about a week but I will give my first impressions of the differences between ExtJS and Qooxdoo.

The very first thing that confused me is the documentation. ExtJS documentation is pretty good. When I looked at Qooxdoo I didn’t realize that it shows just the Properties and Methods of the class you are looking at and not the ones of the inherited classes.  IMPORTANT NOTE: In the apiviewer screen if you click on the Includes button on the top right you can select “Inherited” from the dropdown. This will show all inherited Properties and Methods. Thanks to wittemann for pointing this out.

UPDATE: There are forums, which are an alternate view of the mailing lists, but they are somewhat hidden. They are at http://qooxdoo.org/forum. Thanks again to witteman for showing me this.

As far as the framework itself the first difference you will notice is the Qooxdoo Generator. It is similar to Sencha Cmd but for Qooxdoo it is required. You can’t just include a giant js file and run the code. I wonder if this has stopped some people from trying out Qooxdoo. Don’t panic though as it is quite easy to use. Basically you use it to create your original code base. Then you use it to compile either a source (debug) version or a build (production) version. Unless you create a brand new class you do not need to run the Generator again so it is not very intrusive.

That’s it for now. Learning new things can be a challenge but I am feeling pretty positive about Qooxdoo at the moment. If you are thinking about moving from ExtJS to Qooxdoo please leave a comment. If you have anything to share about your experience that would be even better.

Why move from ExtJS to Qooxdoo?

In 2007 I was tasked to build a web based application with a desktop-like interface. After searching for some time I narrowed the search to three javascript frameworks. ExtJS, Dojo and Qooxdoo. At that time Dojo was a collection of UI elements with no common look so I discounted it. Both ExtJS and Qooxdoo looked pretty good. The UI  of the widgets was consistent. They were both LGPL. I decided to use ExtJS because at the time there was a larger community and it had several developers. Qooxdoo looked like a one man show and the community was smaller. I have been using ExtJS ever since.

Some time ago ExtJS, now Sencha, changed their license from LGPL to GPL/Commercial. For me that meant I had to pay their licensing fee or stop using their code. At the time I believe the fee for a one person license without support was about $275. I was not happy about the change but I had a lot of time invested in learning the platform so I stuck with it.

Everything was going well until about a month ago when Sencha started to change their pricing policy. First they stopped selling  a license without support. This basically doubled the price of using the software. Within a week or two of that change they then decided that you could no longer buy a single user license but you now must buy a 5 person license regardless of whether you had 1 or 5 developers. This brought the price for a single developer to $3,225.

A closer look revealed that Sencha has hired a new CEO. It seems obvious this new pricing scheme is an attempt to pump up yearly revenues and numbers of “active” users in an attempt to make the company an acquisition target or prepare for a possible IPO. It seems that this is a very short term strategy as it will indeed force some users to pay up but in the long run alienating small developers will probably cost them.

So the reason for this blog is that I have decided to move to Qooxdoo. They have been working hard over the past years and their product looks like a real contender. Best of all it is still LGPL. I will be tracking my experience as I transition from ExtJS to Qooxdoo. Trying to highlight their differences to make the transition easier for people who decide to do the same thing.