JavaScript Frameworks

There are many frameworks to make working with web pages (via JavaScript) easier. All of them work cross browser, do events (window load, element click etc) and basic manipulation (get element, modify css, hide/show/move), but some do more than others. Syntax often differs between them.

Choosing one to work with depends on what you want to do, and how much code you are willing to write yourself (sometimes it is more satisfying to figure out a solution to a problem yourself, rather than to rely on someone else's code). Like with any code, the more it does, the bigger the download for the client. So it may be best to go with the most minimal solution (no extra features you won't use).

Here is a basic overview of what is available (that I know of)

Prototype

http://prototype.conio.net/

There is a useful reference for this at Prototype Dissected. As you can see from it, Prototype has quite a lot of features.

Very widely used and quite a reasonably big file (approx 46kb). There are several other projects based on it.

  • Ruby On Rails - open source web development framework, based on the Ruby language.
  • script.aculo.us - a library (approx 100kb) for adding visual effects (animation, fade), drag and drop and more to your web pages.
  • Rico - an Ajax library (approx 90kb) built on Prototype. Behaviour - this uses CSS style selectors to attach events to elements in your page.
  • moo.fx - a lightweight (3kb / 6kb with extra effects) alternative to script.aculo.us. Also, as an option, you can use a cutdown version of Prototype (3kb)

jQuery

http://jquery.com/

A relative newcomer onto the scene. Very lightweight and easy to use. < 15kb compressed. Basic features include: DOM traversing and modification, iteration, events, style and effects. Plugins are easy to write and there is currently an Ajax one available. Example code (adds a line break after all labels, and adds a border around the associated element):

var break = document.createElement("br");
$(window).bind("load",function()
{
 $("label").after(break).each(htmlFor);
});
function htmlFor()
{
 $(this.htmlFor).css("border","1px solid #000");
}

Dojo

http://dojotoolkit.org/

Animation, Widgets, Events, Ajax and more. It includes a rich text editor widget, which just requires some extra html markup. However, to make best use of it, extra attributes need to be added, meaning that it will not validate. It can be applied to div's, but then there would be an issue if the client has JavaScript disabled, so it is better if textarea's are used instead. Other widgets include a DatePicker, TimePicker, Menu, ContextMenu and ToolBar. It has a package system which means you don't have to include extra markup (it is dynamically loaded). Better suited when you know the client has enough bandwidth (i.e. not on dial up). There are several build available:

  • AJAX
  • I/O (XmlHttp)
  • Event + I/O
  • Widgets
  • The "Kitchen Sink" (all packages)

There is a good Dojo tutorial available: Dojo Done Quick, which covers coverting your own code to use the Dojo events and widget systems.

Yahoo! User Interface Library

http://developer.yahoo.net/yui/

One of the most well known companies that are doing a free toolkit for working with JavaScript. Already outlined its features before: Yahoo! User Interface Library and Design Pattern Library

Atlas

http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx

Microsoft is working on Atlas, mainly targetted at ASP.NET developers, but hopefully will work with any server side solution. No download link that I can find, so at the moment, the Yahoo one is the most 'mainstream' (company known for other things) solution.

Conclusion

These should be seen as enhancements to your web page. You should still have a fallback to server side processing. Otherwise your site is not accessible. Get the basics done first, then work on the client to improve the experience and reduce hits to you web server.

Tags: , ,

Comments

Post a Comment

Popular posts from this blog

Select box manipulation with jQuery

If you read the jQuery mailing list , you may be aware that I have updated my plugins for working with select boxes . Summary of changes: addOption replaces any options with the same value (so think of it as an add/replace options plugin selectOptions selected options in addition to what was already selected, but there is now an option for it not to do this There are two new methods: copyOptions which is for copying options between select boxes ajaxAddOption allows you to add options via AJAX (i.e. could be used for create options dynamically from a server script)
Read more

iTextSharp: Generating a Basic PDF file (ASP.NET/C#)

iTextSharp is free library for .NET that allows you to create PDF documents. It can be used to dynamically create PDF's which can be streamed to the user. As there is no HTML being sent to the user, a WebHandler (ashx file) is a more appropriate way to generate your PDF than an aspx page. Download itextsharp-3.0.10-dll.zip (latest version as of 08 Feb 2006) and save the dll in the archive to your websites bin directory. Here is a basic sample of creating a PDF (more complex samples may follow in future posts). BasicPDF.ashx <%@ WebHandler Language="C#" Class="MyNamespace.BasicPDF" %> using System; using System.IO; using System.Web; using iTextSharp.text; using iTextSharp.text.pdf; namespace MyNamespace { public class BasicPDF: IHttpHandler { public bool IsReusable { get { return true; } } /// <summary> /// Font used for any hyperlinks added to the PDF /// </summary> private Font LinkFont { get ...
Read more

Popup Window Countdown (JavaScript)

This code opens a new popup window that contains a timer that counts down, then closes the window when it reaches 0. Will not work if user has a popup blocker blocking the page. <html> <head> <title>Popup Timer</title> <script language="JavaScript" type="text/JavaScript"> // popup window var var popup; // At what number shall the countdown counter start? CounterStart = 10; // This function CustomAction() can be modified to do // whatever you want done every second. function CustomAction() { popup.document.timer.timeleft.value = CounterStart; } // end of function CustomAction() // end of JavaScript customization function Decrement() { CounterStart--; CustomAction(); if(CounterStart <= 0) { popup.close(); alert('Timer reached 0'); } else { setTimeout('Decrement()',1000); } } function StartTheCounter() { openPopup(120,100); setTimeout('Decrement()',1000); } f...
Read more