logo

An Alternative To Popups?

Whether you love or hate popups you have to accept they're no longer a valid design option. The age of the popup-blocker has rendered them useless. Although these tools are supposed to let legit popups through, I've seen and heard of occasions where they don't. An alternative is needed.

Well, in a time when DHTML is rife across the internet it seems only right that there's now a JavaScript class to create popup-style layers within the document/window itself. All hail the JavaScript Window class. {Examples}.

While I think they're really cool there's one thing that makes me think twice about using this class and that's the issue of size. The class is based on and requires Prototype.js. It also calls on Scriptaculous' Effects.js. All in this gives a combined weight of around 110KB and that doesn't include images and styles! Worth it?

Is it me or are there too many toolkits floating around at the moment? There's the prototype/scriptaculous combination, the Dojo toolkit, Yahoo! UI Library and the Google Web Toolkit. They're just the ones I can think of!

Which is best? I have no idea. Maybe Dojo now IBM have offered assistance? Anybody have a preference or know of a good rundown of the differences between them all? Apparently Prototype is a Porsche racing Dojo's Hummer.

Comments

    • avatar
    • Erwin
    • Thu 8 Jun 2006 06:55 AM

    For me it's Prototype if I don't need all the UI wizardry. I just love goodies in there which makes my life as a webdeveloper so much easier. Easy to embed in Domino too (just one scriptlibrary).

  1. Hi Jake.

    I use in my applications Dojo. What can I say is that dojo offer a very good approach to handle multiple content sources (with script support) in one page. Also I like in dojo is widgets. Creating your own widgets is relative simple. Here is a tutorial {Link} . What I dislike is problems with pages containing onLoad events or script which register onLoad event processor. If comparing with Prototype, Dojo is bigger but with current Internet connection I think is not a problem.

  2. Nice looking stuff, I'll agree. Especially the OS X Styling. A couple of thoughts:

    Base classes are awesome for reusability, but as you point out, size becomes an issue, especially when we are not compiling anything but delivering ALL of our source code library, even if not executing some of it. What I'm getting at is a lot of this really good JS development is being driven by minds that are comfortable with traditional compiled source delivery... so the size consideration is more of an annoyance than issue from the perspective of what you gain.

    However, there are a couple of options out there for compressed code delivery, namely code compression/obfuscation and gzip. These both have their draw backs though. Maybe an article on the subject is in order.

    My other thought was along the lines of which is best. With prototype and scriptaculous, you're talking about what might be first generation web 2.0 entries. Yahoo, Google, and Dojo built on the meme these two were popularizing (if not originating, as I know a lot of these guys have been in contact on this stuff for a while) and pushed the envelope further. So you see similar controls and control sets emerging like grid controls, accordian controls, sliders, screen effects, etc.

    It's almost like Atari vs Apple vs Amiga vs M$ back in the late 80's. Lots of similarity and overlap, but ultimately the question will be one of adoption rates.

    I like the efficiency of Yahoo tools so far. Haven't looked at googles yet.

  3. 110KB is a hefty overhead.

    But if you're using all these new fangled groovy webby bits then it should already be part of your suite of bits that get installed.

    If you are just using them for one little display box then there is definitely too much overhead.

    I think the reason that there are many toolkits is that this sort of technique is just making itself apparent, and many people are developing their own bits. I have a nice layered effect that I use when submitting a form that I know would take a while for the server to process. Can you say WebQuerySave? All it does is throw up a nicely formatted "please wait" in the centre of the screen on submit.

    It's all about usablity. These scripts give us great ways of enhancing the various applications we are developing. Some are good. Some are bad. Some are downright weird. Providing it doesn't break the function of the application when the user does silly things (reload, back etc.) then use whatever floats your boat.

    My boat currently floats on prototype.js.

    • avatar
    • Michael
    • Thu 8 Jun 2006 09:24 AM

    Cache is king! If it's a first-timer coming to your site, then they'll wait a bit and give the js time to load. After that, it's a matter of version control for the developer and caching for the browser client.

    Maybe there's a camp out there like that wants options similar to the HTML or Flash versions of a site. Do we need to add 'Ajax' to this list of options?

  4. Cash is King.

    Yes, I'd agree with that. (^_^)

  5. I prefer jQuery, which is a much smaller library (~10k) than Prototype or its siblings. It doesn't provide all of their functionality, but it does what I need. Of course, on this site we all know I'm a bit of a "size king" don't we? *snicker*

  6. Worse than size is that this new Window class uses an older version of Prototype.js (I think it is a modified version of 1.5.0), so forget about coexistence with existing Protoype apps.

    All in all, any of these frameworks is alot for any single effect or feature. It would be nice to see alot of these frameworks be broken down into smaller components so the developer only has to include what they need (Scriptaculous does this to some degree...)

  7. Jerry, if it's that easy, I opt for ATARI.js, of course. ;-)

    Seriously: William Beh ({Link} just linked to the excellent article "Serving JavaScript fast" ({Link} by Cal Handerson. He's dealing with almost all thinkable aspects of the problem of big JS libraries, especially the drawbacks of serving libraries in compressed form. More than just the regular "worth a read".

    While some approaches might not be applicable for domino (), some of his recommendations are.

  8. Moo.fx is a lightweight alternative to scriptaculous that also uses prototype as it's base.

    {Link}

  9. This is definitely the way to go. I have eliminated anywhere I used popups (infrequent though they were) in my apps and replaced them with "dialogs" similar to those shown in the example. This was something I did mainly for usability reasons, to prevent problems with focus of dialogs. Even using modal popups still wasn't very good from a functional standpoint. With DHTML, you can style the "popups" however you like, control their position with pixel-perfect precision, etc. Now as to which toolkit is best...well...I guess time will tell...

    • avatar
    • YiMing
    • Thu 8 Jun 2006 08:21 PM

    The way you handle your site will bring you the type you use on JS lib.

    If your app is in an intranet, the size is NOT a problem; if your app is on internet, you must consider the size of the JS lib, more time they waiting, more people leave your site.

    • avatar
    • Barry
    • Thu 8 Jun 2006 10:48 PM

    For a comparison between some of the more popular libraries, check out this presentation by Simon Willison {Link} , as well as a podcast by Dustin Diaz {Link}

  10. @hark

    AMIGA.js, please. :-)

    That second link you posted is exactly what I was hoping to find or write if absent. The Dojo Compressor looks great. Dean Edwards offers one as well though I've had a problem or two calling functions from external .js files that are compressed with it. Given the variability of support for gzip, script compression does seem the best answer for delivery size. The article also gets inte the much needed details on caching. GO READ!

    @ Barry

    Dustin is a freakin' genious.

  11. I've looked at the Dojo website and am interested in trying to add it to Lotus Notes, especially as IBM has given it some support. I am not having luck getting Notes to see all the files. What approach should I take to use Dojo with Domino (version 6.5)?

  12. With domino, you probably have to import each dojo file into, shared resources -> file. one at a time tho. the problem with the default dojo, is that theres a directory stucture, so you'll have to change the code for all the files to be in the same directory and make them import into shared resources -> files. Another solution would be to put the dojo files on a seperate server, but then you have to use cross-site scripting, using the xdomain iframe component, which i havent used yet.

    • avatar
    • Phani
    • Thu 28 Dec 2006 05:26 AM

    I am still digging Prototype ;)

    Like you all said, there are lot of libraries available out there.. I think every alternate week we are seeing a new library. How to know the one which is best suited is the major problem I am facing right now...Lot of confusion :(

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Thu 8 Jun 2006

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content