5 ways to 15puzzles

5 ways to 15puzzles

To leverage my programming skills in client side and to concurrently  compare modern UI frameworks and most importantly “just for fun” i start to implement 15 puzzles game

in:
1 jQuery;
2 Ext-Js;
3 Yahoo UI;
4 GWT;
5 Flex.

I have almost no experience working with this  frameworks, so it can be useful to discover, how simple and quick to start with, each of them is.

So, what exactly i want to implement? Really, no much:

puzzle must be dragged, not moved by click.

That’s all. No server side :o ). I will use the same (only colors is different) css for all of them. Although, application is not complex it will check  selectors, DOM manipulating and drag-n-drop  capabilities of those frameworks.

On finish i will compare:
– starting time,
– amount and simplicity of code,
– availability of examples, documentation, demos etc.,
– integration with some available IDE.


………………………………………..
Two week-ends later

All implementations definitely not bugs free. It was not a goal to create production level software, but rather to make some starting point and to compare tools.

jQuery.


demo download *
view source code


jQuery — the best. API docs online coupled with examples. API itself is easy, natural, intuitive understandable and self described. Required javascript knowledge level to start with jQuery is very low. Starting time is very small. Highly recommended to all from novices to professionals. Only possible reason don’t to use it is probable lack of some widget/plugin that you need and can lucky found in ext-js or yui.

Ext-Js and YUI

YUI demo download * view source code

Ext – Js demo download * view source code

* jQuery, Ext-Js and YUI ways designed as Netbeans PHP projects. After downloading use “Import Project -> Netbeans project from zip” to import project to IDE.

Configure project properties to automatically copy  files to your apache server installation folder

I never used Netbeans for php projects with windows, but Netbeans has great tutorials about all and will be no problem,  i sure, to configure php project to copy files to proper place under apache server in windows too.

Ext-Js and YUI,  in my opinion, are in the same level if not the same. Ext-Js may be slightly better written, but YUI better documented. If i was required to choose between YUI and Ext-Js, YUI is better choice, because of better support, more demos and documentations. In other side, as you will see later YUI and Ext-Js are very similar, so YUI demos and examples sometimes can be useful for Ext-js writing.

Minimum size of required javascript files for such applications  for YUI is about 60 kB, for Ext-Js is 600 kB(!) (i use ext-all.js) and this is not so obvious how to decrease it. For jQuery is 240 kB.

jQuery and YUI completely free, but Ext-Js has two license  and, if used for commercial non open source applications, must be paid on per developer basis.

 

I wanted to place some code excerpts to compare but it was so lazy. Trust me or compare by yourself.  jQuery code is most short and understandable, the Ext-js and YUI code almost the same, except creating element in YUI, that is ugly.

The Ext-js and YUI implementations have the same bug, that can be reproduced if user quickly move mouse and mouseup event occurs  outside of container.

I used Netbeans for all above implementations and I repeat again and again  that Netbeans is the best IDE for javascript development.

Flex

demo download view source code

There is still a question if it worth to compare Flex and GWT with above javascript libraries, but until they can be used for the same purpose i think this question is redundant.
Flex pros: — look and feel, that quiet hard to implement with CSS (rounded corners, gradient backgrounds)
– all in one workbench, very comfortable to code, deploy and debug,
– editor design mode allowing simply drag and drop component to container.

contras: — some css features hard (not obvious) to implement — for example: inset/outset borders.
– start time for average web developer is much bigger (java background can  be very helpful, because actionscript syntax,  i think, is simply dwarfish java),
– drag and drop API much more complex and confusable,
– need additional efforts to add Google Adds to application page ,
– API very big and unfamiliar and intuitively not understandable,
– compiler error messages is not informative at all,
– lack of java community (hard to find demos/examples/tutorials) or may be i don’t understand them? ;) ,
– flex eclipse plugin for linux  doesn’t have design mode or doesn’t properly work,
– IDE is not free;

I used Flex Builder 3 as IDE and i  it was very comfortable to code, deploy and debug with some exceptions. For example class methods autocomplete window  contains  no information  what ancestor this method come from and no method description as well. I hope in Flash 4 it was improved.

Unlike jQuery Flex is very hard to start with. And after starting it is very confused. Flex implementation took me the most time from all, but i also like it more than others.


GWT

demo download view source code

Finally the code for real men. Script kids rest aside.
GWT is the one than does not have native support to drag-and-drop. There is some third party library present and may be it suitable for my needs, but i did not find exact example , so i implemented drag n drop by myself, using this  great but a little out of date tutorial. It work worse than others, but i sure that it not need much work to improve. Currently i don’t have time to enter in more details. Although, i had to write additional code, implementation time was very short. Even shortest than jQuery way. Java-java.
I am very comfortable with GWT at all, probably because of big java with some swing experience. In some bigger application lack of markup, probably,  will be more valuable.
I used GWT designer eclipse plugin from Instantiations and must to say that it almost so comfortable as Flex Builder if not more.

pros:  — code is pure java ,
– regular css for look and feel,
– all in one workbench comfortable to code, deploy, debug,
– comfortable and intuitive API,
– java community with all those smart guys, bored at home,
– editor design mode allowing simply drag and drop component to container,
– choice of components (using Ext-GWT or GWT-Ext) is richer than standard Flex palette, though may be not cover all covered by Flex components and vice versa.

contras:   — lack of markup,
– lack of native functionality (drag-n-drop);
– bigger amount of code compare to others (almost the same as Flex),
– bigger time to compile compare to Flex and to deploy compare to all others,

– very big time (supposing learning java included) to novice to start work with,
– GWT designer plugin allowing visual editing is not free, though much cheaper than Flex Builder.

Summary

jQuery is the best choice for such applications. Easy to start, best documented and simply the best.

Ext-Js and YUI may be possible alternative/extension to jQuery if your application need some widgets that present in Ext-Js/YUI and not in jQuery.

Flex now is de facto UI standard for java (and not only java) enterprise applications. Look at image below.

5 500 (1298 job offers with title like Flex developer/programmer and 5446 with Flex in description) job offers compare to 600 for gwt/extjs/yui and to 3000 for jQuery. Your experience in Flex surely will be paid.

Flex application very easy can be made to look great. Very recommended for novices as way to programming world as well as for java professionals which are bored from server side programming :o ).

GWT is intended for java programmers, that want to write web applications in traditional swing non-markup way. BTW, rumors are in the air, that in GWT 2.0 (current version 1.7) mark up will be present. In all cases, in tomorrow Google Wave driven world, anyone (any web developer i mean) will have no choice ;0).

Next chart is very self explained.

The next chart confirm previous. Possible to see that in case if tendency will not changed,  during next (2010) year, jQuery will beat Flex and will become the most popular UI framework over the world.

Usage recommendations.

If you are web developer with some basic knowledge of html, css, javascript — go jQuery, don’t think twice.

If your application is build around some ExtJs/YUI widget(s) go them. Possible with jQuery.

If you completely novice to programming — go Flex — you will get the same starting point with more experienced programmers. One year of experience in your resume must be enough.
If  your customer (your own things view) needs Flex — go it, but remember that it was your own decision.

If you are java programmer — use GWT.
If you think that Google Wave can change the Web (read the World) — learn java (its cool!) and then use GWT.

Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com