Friday, November 7th, 2008

JX: Layout manager for jQuery

Category: jQuery

Santosh Rajan has created JX, which he calls a “Object Oriented Extension to jQuery”. With that description, I was expecting something like Dean’s Base library, but instead I found a layout manager for JavaScript with the following features:

  • Only 8K minified
  • True Objected Oriented jQuery Extension
  • Complex layouts by nesting Containers
  • Whole application configurable
  • ‘Custom event’ driven programming
  • Extendable via Objected Oriented Inheritance.

To see it at work, you can check out the Border Layout that you would use via:

javascript

  1. $(document).ready(function() {
  2.     var viewport = new JX.Viewport({
  3.         css: {padding: '0px', margin: '0px'},
  4.         items: [{
  5.             height: 50,
  6.             css: {backgroundColor: '#aaaaaa', padding: '20px'},
  7.             text: $('#north').text(),
  8.             fitWidth: true
  9.         },{
  10.             jxtype: 'columncontainer',
  11.             fitHeight: true,
  12.             items: [{
  13.                 text: $('#east').text(),
  14.                 width: 150,
  15.                 css: {backgroundColor: '#cccccc', padding: '20px'},
  16.                 fitHeight: true
  17.             },{
  18.                 text: $('#center').text(),
  19.                 fitWidth: true,
  20.                 css: {backgroundColor: '#eeeeee', padding: '20px', overflow: 'hidden'},
  21.                 fitHeight: true
  22.             },{
  23.                 text: $('#west').text(),
  24.                 width: 150,
  25.                 css: {backgroundColor: '#cccccc', padding: '20px'},
  26.                 fitHeight: true
  27.             }]
  28.         },{
  29.             height: 50,
  30.             css: {backgroundColor: '#aaaaaa', padding: '20px'},
  31.             text: $('#south').text(),
  32.             fitWidth: true
  33.         }]
  34.     });
  35. });

Posted by Dion Almaer at 9:03 am
62 Comments

++---
2.9 rating from 89 votes

62 Comments »

Comments feed TrackBack URI

@Nosredna
Hahahahahaha……!! ;)

Comment by ThomasHansen — November 8, 2008

@Thomas:
Here’s an example. In this case it has crashed my browser once already:
http://thenewobjective.com/temp/Ra-Crash.jpg
Notice the time’s as well for each event. User’s who don’t now better will click again and again waiting for a response. Responsiveness is key!
.
In regards to your treeview comparison. Re-read my above comment on YSlow again.
.
As for you’re window, I had to click 2 times to close it. I mistakenly expected it to close instead of ask the server how to close it
As for the code size…that’s more than it’s client side equivalent.
.
Keeping it in one language? JavaScript is one language.
.
If you use a JavaScript IDE (Aptana for example) and/or use the Strict warnings in FireFox you can see the errors as well.
.
As for the Business Logic, you’re confusing that with display logic.
.
Security? Security through obscurity maybe. IIS handles concurrency like a 100 year old man on sleeping pills. Forcing the server to handle client events along with everything else is begging for it to explode under scale. This also creates another level of detail to try and manage and debug WHEN something goes wrong, not if.
.
“since you don’t write JS code, there is nothing in your code to test against different browers, etc…”
Last I checked there are a hell of alot more going on in the browser than JS for cross-browser support
.
“XML is probably the definitely slowest thing you can ask a browser to do…
Why don’t you use JSON…?”
.
Because there is something in the world called XSL, and you can do magical things with it like give it to the client to cache and then across your website pass a single tag + textual content to the client to generate a full page not to mention JSON is not Search Engine Friendly. For example, view the source of my website that is currently under construction: http://thenewobjective.com/
.
In regards to your server being in Norway, that’s a poor excuse to a client. They don’t care if your server is on Mars, they want something that works the way they expect it to. Usability for a client trumps all. Even time to market and maintainability take a backseat to this principle. You make sure the client asks WHAT they’re paying for instead of WHY they’re paying you for it. For this very reason you don’t want display logic on a server. Let the server deal with file serving, user sessions and database logic. Leave the display logic to the browser to the application logic to the server.
.
I think this thread has been hijacked enough, so I’m done with it and apologize to Dion and Santosh.

Comment by TNO — November 8, 2008

@TNO
>>Here’s an example. In this case it has crashed my browser
What you have done there is to expand a TreeViewNode which have *500 CHILDREN*…
How can you expect anything else?
I even state the same myself in the sample?
Of COURSE it will be big…
Show me YOUR tree control with 500 nodes expanded, or *any* tree control expanded with 500 nodes. In fact just that it works at all with 500 nodes expanded is probably better than most other tree controls in this world. That sample is meant to demonstrate that “it mostly works” with 500 nodes shown at the same time. Of course it will be slow!
.
>>Notice the time’s as well for each event.
I already gave you an explanation for that. But you wouldn’t listen. Ra-Ajax is in a neutral test where all other conditions are the same (as in server is not “on the moon”) faster than anything you can test it against. Even to some extend jQuery pure client-side logic…
>>In regards to your treeview comparison. Re-read my above comment on YSlow again.
There are many points in my Tree test which does NOT have to do with jQuery, in fact also the very points you try to attack Ra-Ajax with (responsiveness) is objectively proven to be orders of magnitudes in Ra-Ajax’ advantage…
There is a point about “time to expand first node” in there…
.
>>As for the code size…that’s more than it’s client side equivalent.
Proof…?
.
>>Keeping it in one language? JavaScript is one language.
No, you have IE JS, FF JS, Safari JS, Opera JS, etc. And none of them are 100% compatible. That problem can only be 100% solved by not coding in it…
.
>>As for the Business Logic, you’re confusing that with display logic.
Errhh, no! Most people when confronted with JavaScript will stuff a lot of business logic into JS. Maybe you, when given enough time to implement and resources will not do that. But even seasoned developers with too little time on their hands will end up with tons of Business Logic in their JS code…
With Ra-Ajax that is not possible!
.
>>Security? Security through obscurity maybe. IIS handles concurrency
Who talked about IIS here…?
Sure my samples happens to run on IIS, Ra-Ajax can perfectly run on Apache if you want to…
.
>>Last I checked there are a hell of alot more going on in the browser than JS for cross-browser support
Yup, there’s also DOM. Also solved when you have a server-side finished widget. Some problems still remain like for instance CSS problems, and to some extent HTML. But they are way less problematic than with a JS library.
.
>>Because there is something in the world called XSL
You shouldn’t patronize people, I implemented an XML/XSLT reporting/exporting mechanism in 2003. The same year I held a session for 200 developers in Oslo about XSLT mechanics. I too like XSLT and functional programming languages, but that doesn’t kill the fact that the browser sucks when it comes to parsing it – not to mention it uses at least twice the bandwidth when sent across the wire from the server.
.
>>For example, view the source of my website
Cool :)
How does this work with cross browsers…?
Old browsers?
(Honest question, interested)
.
>>In regards to your server being in Norway, that’s a poor excuse to a client.
If you think that then you probably should read about TCP/IP and the basic mechanics of the internet. Focus on how many incoming cables are crossing the Atlantic ocean from Norway to US (or most other countries for that matter)
.
>>You make sure the client asks WHAT they’re paying for instead of WHY they’re paying you for it.
Paying? Who said something about paying? Ra-Ajax is *LGPL*…?
.
>>Let the server deal with file serving, user sessions and database logic. Leave the display logic to the browser to the application logic to the server.
You do realize that that word “display logic” does not really exist and is not a word in programming? You probably mean “business logic” or “UI logic”. Maybe “Controller” in MVC. Beside you’re saying this here yourself; “Let the server deal with file serving, user sessions and database logic.” – so where is the *business* logic then? My guess is that it’ll end up in JavaScript, and no, it is not better to have it in XSLT even though your solution seemed kind of cool ;)
.
>>I think this thread has been hijacked enough, so I’m done with it and apologize to Dion and Santosh.
Finally something we agree on ;)
I didn’t realize that you had “your own agenda” and (probably) “your own Ajax library” – though I think you will end up missing out if you have that approach to new technology. You say things which demonstrates that you have not taken the time to investigate others tools. While at the same time searching for samples to build your case and arguments upon. Instead of doing this you should maybe try to look at the technology and see if you can learn something instead of feeling threatened by it. Technology wars are for newbies and people who are afraid.
.
The way Ra-Ajax is built is by trying to harvest the best from everything. The JS OO model in the JS “core” is built from the lessons learned from Prototype, the DOM model for most widgets is built by looking at the DOM from ExtJS. The CSS is to a large extend fetched from YUI CSS, etc, etc, etc. You too would probably have a lot to learn from Ra-Ajax, but that means you need to open your eyes and try to look for good ideas instead of a base for your own (already concluded) arguments…
When we’re at “throwing dirt” BTW;
You do realize your one-page site spends longer time loading than my tree control page; http://ra-ajax.org/samples/Ajax-TreeView.aspx
Which I think is pretty amazing considering the difference in richness, UI and so on…

Comment by ThomasHansen — November 9, 2008

Thomas, I’d never heard of RA before today, so I took a look for a few minutes. It’s interesting, but I have some questions…

* Have you done any studies about how an application built with this library works when you have a significant (say 100) users concurrently using the application? If so, have you done studies on what the impact of a multi-node server environment is on it, good or bad?

* Does this library have the capability to have client-side event handling in place of the server-side? I’m thinking something along the lines of ASP.net where you can have that runat attribute for most things.

* Is there any sort of fallback mechanism in case of network failure? Likewise, is there any sort of throttling mechanism, along with a caching mechanism, to avoid requests that aren’t necessary? (this is kind of a loaded question because I noticed in Firebug that a request fired EVERY TIME I expanded a tree branch, even one I had already expanded… I would have expected some sort of caching to kick in).

As a general comment… I realize you aren’t redrawing the entire screen with each request, but I *do* see requests going out the door for nearly every UI event… clicking a menu, expanding a tree node, flipping between tabs, etc. That’s interesting to me because historically, and largely through intuition alone, most of us would say that’s a Very Bad Thing(tm). It won’t scale well, unless you throw servers at it (but that can be an exercise in diminishing returns), latency will impact your performance much more than variations in client-side CPU will in a typical JS app, and so on, and the sorts of arguments you’d expect to hear.

I’m curious if you’ve done any studies to prove otherwise, that’s why I asked that question. If you have, and can quantitatively show where this approach works well in volume, then you not only have made this library much more interesting, but you’ve also dispelled what would be a very large myth.

On the subject of JX… it’s clear that a lot of inspiration was taken from Ext JS, at least as far as API goes. This is a good thing in my mind because Ext JS has always struck me as one of the most logical and well-thought-out libraries available today. Bringing some of that to jQuery can’t be a bad thing (that’s not to imply there’s anything illogical or poorly thought-out in jQuery today, not at all, just saying that with even the best library there’s always room for improvement).

Comment by fzammetti — November 9, 2008

@fzammetti
Probably “off topic” but I’ll try to answer shortly. If you need more thorough details you can send me email to thomas@ra-ajax.org
.
>>Have you done any studies about how an application built with this library works when you have a significant (say 100) users concurrently using the application?
No, but I also am the original founder of Gaia which uses more server CPU than Ra-Ajax and NRK had 20,000 users logging onto the same server per minute or something and it worked OK after a couple of attempts. The Comet component I cannot guarantee anything about, and it probably scales badly (like all Comet does), but the other components would probably scale insanely – to the level of “normal ASP.NET controls”…
The server-side is “close to empty” in fact and *extremely* thin…!
.
>>Does this library have the capability to have client-side event handling in place of the server-side?
Yup :)
You can even mix in as much jQuery/prototype/mootools as you wish together with Ra. Though I suspect that in most places it won’t make much sense.
.
>>Is there any sort of fallback mechanism in case of network failure?
Nope, but it’s possible to create controls yourself (Ra-Ajax is extremely extensible) with such mechanisms…
An idea I have is a SEO friendly LinkButton e.g….
.
>>As a general comment…
It is possible to create controls which does NOT go towards the server “every time” – e.g. a Menu control which is purely client-side driven, etc. Though my experience is that they are mostly not needed, even though people *think* they are. But to create client-side logic controls which stays as much as possible on the client is just as easy as doing extension controls in jQuery (you could probably mix in existing jQuery components too for those scenarios)
.
>>…but you’ve also dispelled what would be a very large myth…
Hmm….
Interesting, *VERY* interesting ;)
.
JX…?
If you mean DOM structure, then you’re right, yes it was highly inspired from what I think is the “best” out there on the “bling scale” – ExtJS… ;)
(Credits to Jack ;)
Some things are NOT though, e.g. ExtJS uses HTML tables to create toolbars and menus which I seriously dislike…
Ra-Ajax looks at the XHTML (and other standards) as *holy*…!
.
Their [Ext] Window and TreeView controls though are “perfect in their DOM structure” the way I see it and Ra has an almost identical DOM structure on those widgets…
API though I would probably not compare towards ExtJS – though then again I don’t really know the ExtJS API, so it might be you’re right. If so that would be accidentally… ;)
.
Yet again, send me email if you’re interesting in elaborating conversation :)

Comment by ThomasHansen — November 9, 2008

We’re apparently not speaking the same English here…
.
“Of COURSE it will be big…
Show me YOUR tree control with 500 nodes expanded, or *any* tree control expanded with 500 nodes. In fact just that it works at all with 500 nodes expanded is probably better than most other tree controls in this world. That sample is meant to demonstrate that “it mostly works” with 500 nodes shown at the same time. Of course it will be slow!”
.
Here’s a 3 minute Proof of concept I just threw together of one that isn’t slow and has the potential of being a lot smaller and generic under heavier scrutiny. http://thenewobjective.com/temp/TreeView/TreeView.html
.
Of course if you need to populate the nodes from the server, its not hard to just call a webservice or grab some other file with ajax asynchronously and populate the item with “Loading…” in the meantime so you don’t block the display. It doesn’t have to be slow, and even if it does, you don’t have to freeze the page while you fiddle around for your response.
.
In regards to the YSlow comment, I was referring to you using a testing tool for comparison that wasn’t designed for this type of test. Put them all on fair ground and I’ll praise you for it.
.
“No, you have IE JS, FF JS, Safari JS, Opera JS, etc. And none of them are 100% compatible. That problem can only be 100% solved by not coding in it…”
.
I could make the argument against the different versions of .NET and the underlying runtime. Not to mention you have to learn at least 2 languages if you use it (VB and C#) depending on your project and who you are working for. At least with JavaScript and the DOM finding an answer to your problem or a reference is IMO alot easier then .NET
Plus you can’t 100% avoid JavaScript even if you want to if you desire something beyond a vanilla page.
.
it doesn’t matter if it was called Monkey Logic. The point is that events and DOM manipulation should remain on the client because that’s where it located. There is no reason on earth to tell the browser to tell the server to tell the browser what to do. Things aren’t as simple as exchanging data between a Database and a User Interface (which is the fundamental definition of Business Logic). Here on the web “User Interface” is not a singular entity like it is on a Desktop Application. These aren’t suped up 3270 terminals we’re building here.
.
“But they are way less problematic than with a JS library.”
I’m sure there are more than plenty who disagree. Just read the comments on the CSS category of this very website for example. Plus the very “problematic” Ajax Libraries you mention do a damn good job of normalizing the DOM I would think.
.
concurrency:
Its not just IIS, Apache suffers as well, hence the need to not put more on there than need be if you plan to scale:
http://www.sics.se/~joe/apachevsyaws.html

.
XML+XSL:
An argument from authority is worthless. Plus your claim that the browser is slow parsing it requires some evidence. I’ve just recently completed a large project involving the entirety of the King James Bible in and have been able to perform transformations in under 5 seconds (a 30 megabyte file). Believe it or not, Internet Explorer’s MSXML COM object is even faster since its progressive and internally caches with repeat transformations.
.
JSON is not the end all be all. There is no standardized schema and a number of cases where it doesn’t measure up especially in regards to structure representation, until a future version of it solves these problems there will still be cases where XML is sent over a wire.
.
“How does this work with cross browsers…?”
.
This method has been tested to work as far back as IE 5.5. There is also a way to determine the engine transforming the document using system-property(‘xsl:vendor’) which can be used as a reliable method of browser sniffing if need be. (For example FireFox uses Transformiix).
.
“If you think that then you probably should read about TCP/IP and the basic mechanics of the internet.”
I’ll be sure to tell that to my next customer when they ask me why their website is non-responsive….
.
“Paying? Who said something about paying? Ra-Ajax is *LGPL*”
I’m referring to customers who are paying for you to develop an application for them.
.
Your next to last paragraph:
I honestly don’t see anyone threatened by Ra-Ajax….. Nor do I use any of the mainstream Ajax Libraries.
You’re approach of insulting these libraries based on skewed results is questionable. How can you of sound mind sit there and say over and over again across Ajaxian threads: “I love JS” and then in the same post look for a reason to not use it even when its the best tool for the job like this very post?
.
“Technology wars are for newbies and people who are afraid.”
Then why bother with Ra-Ajax? (Rhetorical question of course)
.
Last paragraph:
I don’t have any issue with your efforts or your goal, but without a doubt I disagree with the approach of pretending the browser does not exist. This isn’t just setting people up for failure, but I believe it will be a significant failure once they have to approach one of the numerous problems that cannot be solved by a server centric approach.
.
You’re attempted insult to my homepage:
Because of the approach I used, I guarantee that the entire website will be more efficient than most you’ve seen of similar richness. Your first visit just cached the rules for generating the pages. So all you will download in future requests is the textual content and little more. (The homepage is 367 bytes). Your browser is now the preprocessor, and not the server which means less bandwidth for me to waste and a faster response for you across the entire domain.

Comment by TNO — November 9, 2008

>>There is no reason on earth to tell the browser to tell the server to tell the browser what to do
.
This is where you’re wrong, because that is not what you’re doing…
What would be a better phrase would be something like this;
“You tell the server that some event has occurred which in turn queries your business layer what the client shall do as a response”…
.
I think I’ll give in here since this is beginning to be purely off topic and anyway we’ll have to “agree on that we disagree”. Your solution is great for a lot of problems, so is mine. Some of those overlap and should use both solutions, some don’t.
You’re (obviously) skilled and as long as you don’t start doing Silverlight we’ll probably agree on the goals ;)
.
The means we’ll just have to conclude with that we disagree on…
That doesn’t make any of us wrong though…

Comment by ThomasHansen — November 9, 2008

“as long as you don’t start doing Silverlight ”
.
lol, I promise to be unemployed first

Comment by TNO — November 9, 2008

Every time someone brings Silverlight up, I wonder if Microsoft has a VS Express that supports it yet. Do they? I wouldn’t mind trying it out, just to see what it’s all about. But I don’t want to buy the full VS, because I wouldn’t use it for anything else besides dabbling with Silverlight.

Comment by Nosredna — November 9, 2008

@Nosredna
You should probably expect something like that coming out soon, if it hasn’t already since Silverlight is MSFT’s main Lock-In strategy in the future. So they probably have great incentives in getting it out for free to as many as possible…

Comment by ThomasHansen — November 10, 2008

Next You would turn off CSS (because you simply not like pictures) and say what the hell is that, the page looks ugly, not well formatted or so…

Wake up man, people need fun and care if Javascript provides this and help you enhance your site than use it.

If you are targeting (expecting) people who are refusing Javascript prepare your site for it, at least provide a site to accept complaints about it. Feedback rules the World!!!

-cs-
Sanyi

Comment by CarstepHUN — November 10, 2008

@Nosredna: Yes they do:

http://www.microsoft.com/express/

You then need to install the Silverlight Tools:

http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

Note that you MUST have the SP1 versions of the Express editions installed… I found this out the hard way (not *too* hard: just had to install the SP1 versions over the originals).

This is in no way, shape or form an endoursement of Silverlight by the way… but if you’re interested in trying it out (as I was earlier today) then you in fact can do so for free with what most people say are good development tools in Visual Studio.

Comment by fzammetti — November 10, 2008

Leave a comment

You must be logged in to post a comment.