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
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 ). 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
demo download * view source code
Ext-Js and YUI
* 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.
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.
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.
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,
– GWT designer plugin allowing visual editing is not free, though much cheaper than Flex Builder.
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 ).
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.
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.