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:
-
-
$(document).ready(function() {
-
var viewport = new JX.Viewport({
-
css: {padding: '0px', margin: '0px'},
-
items: [{
-
height: 50,
-
css: {backgroundColor: '#aaaaaa', padding: '20px'},
-
text: $('#north').text(),
-
fitWidth: true
-
},{
-
jxtype: 'columncontainer',
-
fitHeight: true,
-
items: [{
-
text: $('#east').text(),
-
width: 150,
-
css: {backgroundColor: '#cccccc', padding: '20px'},
-
fitHeight: true
-
},{
-
text: $('#center').text(),
-
fitWidth: true,
-
css: {backgroundColor: '#eeeeee', padding: '20px', overflow: 'hidden'},
-
fitHeight: true
-
},{
-
text: $('#west').text(),
-
width: 150,
-
css: {backgroundColor: '#cccccc', padding: '20px'},
-
fitHeight: true
-
}]
-
},{
-
height: 50,
-
css: {backgroundColor: '#aaaaaa', padding: '20px'},
-
text: $('#south').text(),
-
fitWidth: true
-
}]
-
});
-
});
-
2.6 rating from 72 votes
no worky in IE6 ;-)
Cool. Not so good with JS off, though.
Am I the only one for who it doesn’t work at all on Opera?
Works in IE6, however I am aware that png images dont work in IE6.
Very cool. The syntax is almost identical to ExtJS, which will make it easy to jump into.
“Cool. Not so good with JS off, though.”
Duh? Cars don’t run so well without gas. Planes don’t fly so well without wings. No one would expect a JavaScript library to function well with JS turned off.
>>No one would expect a JavaScript library to function well with JS turned off.
.
No, but would someone expect a page layout system to degrade at least somewhat gracefully? I would.
.
I was running noscript and all I saw was a bunch of text. It didn’t even tell me that the site was expecting JS to be on.
.
I’ve found that all over the internet. I don’t mind turning JS on when it’s needed, but at least tell me it’s needed. Is a bit of NOSCRIPT so hard to provide?
Regarding noscript, i think some of you have missed the point. You can see practically all the content with noscript also. Its just that I havent had the time to format it well.
Wow… I just use CSS. Maybe this has a good application, I just don’t see it. Whatever happened to unobtrusive javascript and progressive enhancement. The example page is horrible without the script.
@santrajan,
.
Fair enough. But I think anyone looking to use such a tool is going to be thinking about fallbacks and ramifications.
.
I’m willing to look again when the CSS is reasonable.
Nosredna, this is a javascript library, fallback is up to the person using the library, here I am showing a javascript library meant for javascript programmers.
If you want to complain about sites not supporting JS, just turn it off and go to somewhere like nike.com I mean please. I understand that some people are required to turn off JS for their work, but I don’t think its an unreasonable assumption that people have it turned off. Most people don’t even know there is an option, let alone go in and turn it off.
I think people get way too worked up about always having a fallback available for every thing. FFS, I’ve heard people say you should write your JS so that, even if it’s written against a library, it would still work with another or no library. Well, why even use the library?
.
While not depending on JS is important for public-facing content, it is absolutely reasonable now to write applications that require JS (and even applications that require a set of browsers smaller than those you might support for public content). While this might not be suitable for a public-facing content-driven site, it’d be great to use for an application to make layout a lot easier where it otherwise may be extremely complex.
@gizmogwai: I see unstyled content in Opera (9.62) too.
I’ll agree with santrajan on who’s responsible for the fallback CSS. I mean, how can a js library know what your custom made HTML/CSS layout is supposed to look like when it isn’t even able to run in the first place?
But yeah, getting the library working in Opera sure would be nice.
I agree with eyelidlessness. The period of terror of javascript is long gone now. Except if you go on some not clean websites, nobody would bother to write an armful script.
I love css and all, but there is a HUGE hole when it comes to application style layouts. HTML/CSS has always been designed for documents first and foremost.
.
As is often the case in ajax, there IS a difference between ajaxified web pages and 30,000 line javascript applications. The rules just don’t always apply the same. Sometimes it’s ok to break without js.
.
However, I’m not entirely sure this (or anything that piggybacks on jquery) is really suited for 30,000 line javascript applications. jQuery has a beautiful api for progressive enhancement and sprinkling in extra js functionality. I would not want to use it in a large single-page web app.
.
For those knocking the progressive enhancement - as santrajan says, there’s nothing stopping that, he just didn’t provide a backup style. It’s still perfectly accessible, it’s just not pretty. It would be nice to demo how you could do it, though.
I would hope the people smart enough to turn off javascript would be smart enough to realize when to turn it back on….
In my opinion, if you make a website that requires JavaScript, it’s absolutely unforgivable to not let the user know. And it’s so easy to do…
.
http://www.w3schools.com/TAGS/tag_noscript.asp
and is it absolutely unforgivable too to not let the user know that we use strict XHTML?
interesting discussion. ultimately remember that the reason html evolved was because event driven programming and programmatic ui construction eventually gets too complex… (yes i’m aware its somewhat delcarative)
i think it’s great he’s created a base implementation for extending jquery to do this, but i’m sticking to what html and jquery is good for. progressive enhancement with existing html. you can get a lot done this way.
As far as javascript support goes, has anyone tried to use Facebook without Javascript? It doesn’t really work. Yes, Facebook will tell you that you can’t register without Javascript enabled, but it says nothing about using the site without Javascript. No notifications, features just don’t work.
Hmm, and there are how many Facebook users?
99% of the Internet has javascript enabled, so I don’t worry too much about it. Screen readers are another story, but unless the client requests that kind of accessibility, it’s up the screen reader to decide how to handle the page. From I understand, screen readers are highly configurable and should be able to handle javascript as well, at least the more modern ones.
>>99% of the Internet has javascript enabled
.
Where did that number come from?
95%…
http://www.w3schools.com/browsers/browsers_stats.asp
@Nosredna,
Telling user JS is required != Gracefully degradation
I’m sure you already know about that. But the point is more like: Don’t nitpick about minor stuff like noscript all day long, post after post.
“Don’t nitpick about minor stuff like noscript all day long, post after post.”
.
My point was that when I got to the page I was completely confused. It would be easy to clear that confusion up.
Did i misunderstand or see something else than others here…?
Isn’t this just a div/float/width thing…?
.
I love JS, but why one earth use JS for something like this…?
@ThomasHansen
This type of controls (e.g. Layout Manager) make much more sense when part of a fully featured library like Ext. Such controls/facilities are valuable when creating rich AJAX desktop look-alike apps (not just web pages). So this layout manager makes sense if created on top of a whole _unified_ framework with all necessary facilities for signaling (events), OO programing (inteligent inheritance), solid abstracted model, utilities , etc. Unfortunately, with JQuery, this type of infrastructure is not available (or at least not standardised as bits and pieces are available as third party plugins) and hence this layout manager on its own cannot accomplish much. As a result this type of controls (Layout Manager) are kind of out of place considering the mismatch between the target it is aimed at and the target projects JQuery is aimed at.
@vale
It already has all the features you mentioned. Signaling, intelligent inheritance, solid abstracted model. You have to see the examples, blog and tutorial and documentation to realise what this library is. I have used Ext and jQuery for more than a year now, and this library was developed exactly to brige the gap. I must admit these are early days and this is only the first cut version 0.3.
This library gives jQuery a whole new direction and will not have the large size of Ext.
This library is for those who want the lightweight and nimbleness of jQuery and yet have the object orientedness and structure of Ext.
Ofcource this library will not have all the features of Ext, this library is only 8k as of now and Ext is over 500k.
Fixed Problem in Opera. Works on all major browsers. IE6, IE7, Firefox, Safari, Chrome, Opera.
The same as this then, http://www.widgetplus.com/testbed79.htm
@Mikeal,
Not really JX is meant for javascript programmers who use it and extend it for their applications/pages.
@vale
Yes I get it when it’s resizable, draggable, docakable, comes with nice skins etc. But still there’s nothing stopping people from rendering HTML actually instead of re-arranging stuff with JavaScript…
.
Even the *treeview* in Ra-Ajax is purely rendered using HTML; http://ra-ajax.org/samples/Ajax-TreeView.aspx
Also all other controls are purely rendered using HTML, TabControl, Menu, Window etc…
.
The way most Ajax Libraries does this is by having something like;
[span id="xx"][/span]
And then they build an entire TreeView/TabControl/Menu/etc out of that span through JavaScript…
.
This I feel is a misuse of JavaScript since it is just as easy to do by rendering the HTML directly which has tons of advantages, among other things SEO, kind of works even if JS is shut down, etc, etc, etc…
I could probably give 1 gazillion advantages…
.
And to render the HTML directly is just as easy…
.
Click “View Source” in the link above and you’ll hopefully understand…
uh, is it me, or does this use tables for layout?
I guess what I am trying to say is that HTML is for content, CSS is for layout and JS is for *logic* - and trying to get one of those to work in another domain than originally intended is wrong and create all sort of weird problems…
.
Horror samples here are people adding up CSS classes through JS, building DOM through JS, or for that matter passes values as HTML etc…
.
Both jQuery, Dojo, ExtJS and “etc” are great libraries, but they all “sin” in these regards. ExtJS builds a TreeView from a single SPAN. Why not build the HTML and make events and such attach to existing DOM nodes…?
This would give search engine visibility, more responsive apps, higher level of accessibility etc…
.
Am I stupid, or are “everyone else wrong”…?
Thoughts…?
@ThomasHansen
Neither are you stupid nor are others wrong. You are right in the sense that you are talking about is in support of the original design and purpose of html, css and javascript.
However what has happened lately is that developers are faced with the challenge of porting/developing entire applications to run on a browser. And the original design purpose of html, css javascript does not help application development in any way.
However developers find ways to circumvent the limitations of the original design in creative ways.
@santrajan
Well, this is pretty obvious, and of course completely correct. Though why break the “original design” where we don’t *have* to…
If we HAVE to, sure, great, break it. If we DON’T have to then don’t break it…
.
Yet again, click “View Page Source” on this one;
http://ra-ajax.org/samples/Ajax-TreeView.aspx
This is almost the exact same DOM layout as the ExtJS Tree contro, though everything is HTML and vsibe for Google etc…
So if I can build a Tree control with HTML without resorting to node.appendChild, why can’t Ext LLC or any of the other JS libraries out there?
.
Is my approach wrong?
If so, why?
@ThomasHansen
The approach you are talking is the standard approach of building web sites, where behavior is added on top of an already available HTML/CSS structure. JQuery is excellent for this type of application. This has all the benefits you mention.
What I am talking about is building not a regular web site but a web app like e.g. administrative consoles, corporate intranet systems, web based billing apps etc. where a single page stays throughout the whole user session and content is updated through ajax/json requests. For these types of apps things tend to be kind of complicated :) and the approach you talk about is almost inapplicable. The only case where some of what you suggest is for the purpose of app initialization and then the logic takes full control of what is rendered/removed in the underlying html document.
@santrajan
I think, if you are enthusiastic enough :), you may lay the foundation of the equvalent of what Dijit is for Dojo :) but for JQuery. That would make sense. I wish you success. If what you offer is extensible enough and easy to customize, then people might commit to using your whole model and extend your library with their widgets.
@vale
Absolutely thats the way I want to see it grow, and thats why it is open sourced with both with MIT, and GPL, so other developers can take it any which way they like.
@vale
Just for the records, I am *also* talking about “apps”. ERP apps, CRM apps, or “whatever” apps…
Did you click on the link? Or did you just “assume” what it would show…?
.
There is absolutely nothing which contradicts building on existing infrastructure in the “app world”.
1) The amount of JS code (excluding the library code) needed to create that layout is more than the actual HTML code.
2) The layout margins and colors are set in the JS.
3) Not unobtrusive.
@Mikeal,
Not really JX is meant for javascript programmers who use it and extend it for their applications/pages.
–
Huh?
Thats exactly what this is, http://www.widgetplus.com/testbed79.htm
@ThomasHansen:
You’re approach is wrong because your replacing a client CPU cycle of a couple milliseconds to node.appendChild with 500+ milliseconds to destroy the page and recreate it, then send it back to the client to show a minor effect.
>>Horror samples here are people adding up CSS classes through JS, building DOM through JS, or for that matter passes values as HTML etc.
.
I build HTML all the time in JS. Sorry. :-)
@santrajan:
Truly a wierd comment.
@TNO
What do you mean “destroy the page”…?
Ra-Ajax is an Ajax Library, virtually with no “Partial Rendering” what so ever. Unless you know something I don’t know, your words doesn’t make any sense to me…
.
Have you checked to see how it actually is working with e.g. FireBug or did you just “assume” how it works…?
.
PS!
While you check it with FireBug, feel free to also check it with YSlow… ;)
You can start with this page; http://ra-ajax.org/samples/Ajax-TreeView.aspx
Which has almost the same DOM model as ExtJS, except the Ra-Ajax version is purely built using HTML and is 100% Search Engine visible, etc, etc, etc, etc, etc, etc…
(One of the “etcs” are the fact that Ra-Ajax uses less than 15KB of JavaScript while the ExtJS version uses orders of magnitudes more - in the hundreds of KB of JavaScript)
(Another “etc” is that the Ra-Ajax scores almost 90 in YSlow and loads in one hundred of the time)
+++++++++
.
Sorry, I don’t mean to bash ExtJS here, ExtJS is great and I think Ext LLC was the first ones who understood the importance of “bling” and beautiful skins “out of the box”. But some parts of their logic is flawed, among other things the heavy rely on building HTML through JavaScript instead of render it directly from the server…
@nosredna
You are a free man and are free to do your own choices, and you probably have many great arguments regarding your existing choices, but there does exist a lot of “counter arguments” too you know … ;)
@ThomasHansen:
You’re right that i spoke to soon, my assumption was that you’re using Partial Rendering. This doesn’t liberate it though. The problem is the fact that you’re mixing logic where it should be separated. Throwing 500k back and forth between the server and the client for every event is insanity.
.
Also you’re attempt to compare some server based approach to a client library at any size isn’t just off the mark, it’s completely non-comparable. How much code on the server do I have to use as a replacement? How much bandwidth am I wasting across my web application just to support display logic between my server and the clients? I don’t know and neither do you but I do know that bandwidth isn’t free.
.
If you want to make a fair comparison, take a tree control from all of the popular libraries and compare client code size, reaction time, and bandwidth required, not just some arbitrary comparison of homepages and differing components. Also, an attempt to use the YSlow score as a comparison is meaningless as its not designed to evaluate any server logic, nor can it handle any client applications I create using XML+XSL based approaches or JavaScript templating approaches.
.
Any server centric approach to web applications forces you into an event driven model, and a non-responsive one at that. I click a button or I hover on an element and I can expect a response in 200ms - 1 second or more as I sit and wait. I just told the browser to tell the server to tell the browser what to do with that event. Where is the sense in that?
.
If we want to build RIA’s to rival Desktop applications we’re going to want and need ideas and developments like Santosh Rajan’s, not coddle and push a server architecture that acts little more than an arm but pretends to be a head.
>>You are a free man and are free to do your own choices…
.
No, I’m married.
.
But anyway, there are always choices to be made. It’s good to know both (or all) sides. That’s why we’re gathered here at Ajaxian, I guess.
@TNO,
.
I’m disappointed that your blog is out of commission. Do you have a newsletter? :-)
I’ll be sure to let you know when I do something with it.
>>Throwing 500k back and forth between the server and the client for every event is insanity.
Huuh…???
Which samples did you see this on…?
None of the samples are in the nearby of that as far as I know…
.
>>How much code on the server do I have to use as a replacement?
*WAY* less…!
Look at e.g. this one;
http://ra-ajax.org/samples/Ajax-Window.aspx
Click the light gray “01010101″ button to see the code and you can actually see both the C# and the .ASPX syntax of that entire page…
Not only that but you get to keep your code in *one* language, you get a compiled language - meaning much of the bugs are caught by the compiler and you get to keep the business logic on the server which means way tighter security, way easier to Unit Test and way easier in all regards. But most importantly you get *zero* (or at least way closer to zero) cross-browser issues - since you don’t write JS code, there is nothing in your code to test against different browers, etc…
.
It probably uses some more bandwidth compared to the “perfect JS solution”, though the “perfect JS solution” doesn’t really exist - at least I have never seen it. 99.9% of all developers in all “practical solutions” will end up spending *more* bandwidth than what “average-Joe” would spend using Ra-Ajax…
Look at e.g. Facebook - 500KB of JavaScript…
You could do *everything* they do at Facebook without witing*one* line of JavaScript utilizing Ra-Ajax which would make the entire site have less than 25KB of JavaScript - and score 95 in YSlow - and load in less than one seconds, etc, etc, etc…
.
>>If you want to make a fair comparison, take a tree control from all of the popular libraries and compare client code size, reaction time, and bandwidth required…
Done it already ;)
http://ra-ajax.org/comparing-the-performance-of-the-different-ajax-treeview-controls-in-this-world.blog
.
>>any client applications I create using XML+XSL based approaches
Why don’t you use JSON…?
XML is probably the definitely slowest thing you can ask a browser to do…
Why don’t you use JSON…?
>>I click a button or I hover on an element and I can expect a response in 200ms - 1 second or more as I sit and wait.
Except for the “expand 500 TreeNodes treenode thing” in our samples, every single Ajax Request you can do takes about 40-60 milliseconds in our samples…
Though you might (unless you’re in Norway) get slower results than me due to our server being on “the other side of the world” and the sheer number of TCP/IP hops would seriously affect the “experienced performance”. (PS! We’re looking for “sponsors” that would like to sponsor us with a server in the US ;)
For me though between 40 and 60 milliseconds is the average for *every-single-Ajax-callback* in our samples…
.
>>If we want to build RIA’s to rival Desktop applications we’re going to want and need ideas and developments
When you build applications the single most important thing you can think of is Time2Market and maintainability. Speed is important and all that, but shaving 5-15 percent of the performance while at the same time multiplying the Time2Market with 10 and also making it virtually *impossible* to maintain and pass on to other developers is not the way to go…
@Nosredna
Hahahahahaha……!! ;)
@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.
@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…
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).
@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 :)
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.
>>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…
“as long as you don’t start doing Silverlight ”
.
lol, I promise to be unemployed first
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.
@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…
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
@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.