Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Why WebRunner Should Be On Your Radar.

Posted by Don Albrecht

What is WebRunner:

WebRunner is a simple XULRunner based browser that hosts web applications without the normal web browser user interface. WebRunner is based on a concept called Site Specific Browsers (SSB). An SSB is an application with an embedded browser designed to work exclusively with a single web application. It doesn’t have the menus, toolbars and accoutrement’s of a normal web browser. Some people have called it a “distraction free browser” because none of the typical browser chrome is used. An SSB also has a tighter integration with the OS and desktop than a typical web application running through a web browser. (From Wiki.Mozilla.Org )

What This Means For You

A webapp packaged with WebRunner looks and acts more like a native desktop application than a traditional web application. It provides a streamlined deployment environment and allows you to dramatically reduce the visual noise a browser provides.

Low Cost of Entry

At a bare minimum, a WebRunner app is simply a file that describes the url of your web application and a few basic settings. Your existing apps will port to the WebRunner environment without any changes at the server.

Added Functionality

Since a WebRunner app is executing in a known browser environment. Many additional capabilities are available. Using the XUL & XBL capabilities of firefox, Applications can take advantage of the OS native widget set. Firefox’s excellent native SVG support can be harnessed for powerful visuals & the relaxed security environment can allow for greater integration between the web application and client desktop.

Read More:

Milescript: Compiled, Strongly Typed Javascript

Posted by Don Albrecht

Milescript Logo

Milescript is really two things.

  1. A compiler that takes a strongly-typed variation of ECMA script and reduces it to cross-browser ECMAscript
  2. A CrossBrowser Utility Library (LibDom)

While I strongly applaud the effort to overcome the shortcomings of javascript with a higher level language / compiler system, I don’t find any immediate utility in the current incarnation of the software for a few reasons:

  • The compiler is cumbersome and doesn’t integrate with existing IDE technologies.
  • There is no debugger for the pre-compiled code.
  • IDE’s aren’t yet aware of the unique restrictions on the code which reduces their usefulness
  • LibDom isn’t as robust as existing javascript toolkits.

That said:  I really do admire a lot of what’s been accomplished with this software and hope that as more powerful tools are released in the future, it becomes an increasingly more valuable platform for robust AJAX development.

Check it out online here:

http://milescript.org/ 

Roll Your Own JS Framework: Is It Necessary?

Posted by Don Albrecht

Dustin Diaz recently posted about Rolling out your own javascript interface in his blog.

http://www.dustindiaz.com/roll-out-your-own-interface/ 

While his code is nice and clean and it does provide what he was hoping to achieve:

There are times when using a JavaScript library is called for. Building large web applications that use a wide array of utility functions that help aid in developing multi-tiered class systems, advanced UI components, complex event models, and heavy use of DOM scripting helpers. Yep. Those are all great.
However, there are other times when you don’t need all that. And often what we end up doing is just importing a few of our favorite functions as globals, and work off those. But what ends up happening in this case is that we lose the particular style that these libraries offer.

In essence, he’s offering a light weight solution to the fundamental issue persistent to all javascript development: (“javascript sucks”). His solution is to coble together a light weight version of prototype containing only what he needs.

My questions are three fold:

  1. Is rolling your own framework worth it? The new generation of code profilers for the various toolkits can dramatically decrease download size and focus on the functionality needed.
  2. Is there sufficient demand for a new ultra light weight toolkit to address these issues?
  3. Why not use full toolkits:  Many of them are small enough in compressed form not to make a noticeable difference in load times.

Get Ready for jQuery UI

Posted by Don Albrecht

The new jQuery UI will be landing on Sunday, September 16th. This will provide a powerful new set of widget tools to the jQuery toolkit.

jQuery UI Preview

What to Expect:

  • Draggables
  • Droppables
  • Resizables
  • Shadows
  • Sliders
  • Sortables
  • Tabs
  • Accordions
  • Selectables
  • Trees
  • Modals

Coverage and tutorials of the new features will be published next week. In the meantime, check out the latest jQuery 1.2

JQuery 1.2 Released

Posted by Don Albrecht

The JQuery Team just realesed JQuery 1.2.  A major new revision to the JQuery toolkit.  While there are many major revisions to the software.  Some features have been removed, many others added or updated.

Some Key revisions include improvements to the ability to use custom namespaces & queueing for animations.

Other New Features:

  • Selectors

    •  :has(selector)
    •  :header
    •  :animated
    • XPath Selector Plugin
  • Attributes
    • .val() Overhaul
  • Traversing
    • .map()
    • .prevAll() / .nextAll()
    • .slice()
    • .hasClass()
    • .andSelf()
    • .contents()
  • Manipulation
    • .wrapInner() / .wrapAll()
    • .replaceWith() / .replaceAll()
    • Event Cloning
  • CSS
    • .offset()
    • .height() / .width() for document and window
  • Ajax

    • Partial .load()
    • Cross-Domain getScript
    • JSONP
    • .serialize() Overhaul
    • Disable Caching
  • Effects
    • .stop()
    • %/em Animations
    • Color Animations
    • Relative Animations
    • Queue Control
    •  :animated
    • step: Function
  • Events
    • Namespaced Events
    • .triggerHandler()
  • Internals
    • Documentation Move
    • Expando Management

Find out more at jQuery.com

EXT JS

Posted by Don Albrecht

Name: ext Javascript Library
URL: http://extjs.com
Native Server Environment: None
Included Widgets: Grids, Layouts, Panels, Menus, Buttons, Form, Tree, ComboBox, Dialog, Tab Panel
Download Size: VariableOriginally developed as an add on library for the YUI toolkit, ext has emerged as a powerful and capable toolkit in its own right. Ext has a powerful focus on widgets and application construction similar to Dojo’s dijit system. It’s biggest strength, however, is the fact that it can float on top of just about any underlying AJAX library or stand on its own.

Some Highlights

  • Powerful animation & effect tools
  • Excellent editable grid widget
  • Compatible with several major AJAX libraries
    • YUI
    • Scriptaculous / Prototype
    • jQuery
  • Powerful Skinning System

Some Drawbacks

  • A bit of a learning curve
  • Demo’s & tutorials may not work due because they were coded for different underlying library
  • Depends on underlying library for many key functions, some features don’t work well with all libraries.
  • Focus on XML or JSON for some tasks & in documentation

What To Expect From An AJAX toolkit

Posted by Don Albrecht

There’s a myriad of AJAX frameworks out there to streamline the development of interactive sites. While methods of implementation vary and the functionality toolkits offer can vary dramatically. All toolkits fundamentally provide you with certain key features.
Basic Features

  • Simplified AJAX calls. All frameworks streamline the way in which you process POST and GET requests by abstracting away the cross browser descrepancies.
  • Improved DOM Access. All frameworks improve interactions with the DOM through performance benefits and improved API calls.
  • Object Orientation / Elements. All frameworks provide a level of object oriented abstraction to simplify and structure coding as well as some level of abstraction for DOM nodes.
  • JSON Support. Most if not all frameworks provide strong support for the JSON data interchange standard.

Advanced Features
There are also some advanced features common to most if not all frameworks.

  • Drag & Drop. Most frameworks provide tools for manipulating elements via drag & drop.
  • Animation. Many frameworks provide animation tools to enhance the interface. These can vary dramatically between toolkits in performance & available effects, however.
  • Event Handling. Since the default javascript event model can be slow and buggy at times. Most frameworks abstract away the default event system with a new slots & sockets approach.

Rico JavaScript Library

Posted by Don Albrecht
Name: Rico JavaScript Library
URL: http://openrico.org
Native Server Environment: None
Included Widgets: Accordion, Live Grid
Download Size: 22 KB (compressed)

Rico is a useful JavaScript Library built on the back of Prototype. Similar to Scriptaculous, the library provides a set of visual effects, Ajax tools, and Drag & Drop Support. Long thought Dead, the Rico project recently regained life & inertia with the addition of a new developer and Rico 2.0 Beta is on the horizon.

Unique to Rico is its concept of Behaviors as well as Livegrid. Rico behaviors are similar to dojo widgets in that they dynamically enhance existing html elements on a page with interactivity. The most popular Rico behavior is probably the accordion which provides an accordion pane similar to those offered in Adobe Flash, Flex & Open Lazlo.

Perhaps the most interesting of Rico’s features is the Livegrid. This is a powerful AJAX widget designed to be plumbed to a server side data source. The live grid replaces traditional paged data with a powerful sort tool & the ability to load data as needed by a scroll. This prevents the need to ever click on a “next page” allowing datasets greater than 1 thousand rows to appear as a single html page.

Some Highlights
  • Powerful animation & effect tools
  • Unique Live Grid Widget
  • Accordion Widget
  • Shape & Color tools
  • Concept of Abstracted Behaviors

Some Drawbacks

  • Requires Prototype
  • Development occurs in fits and starts
  • Limited advanced widgets
  • Lacking in API’s for data & date manipulation
  • Doesn’t always play well with other JS scripts on a page.

jQuery JavaScript Library

Posted by Don Albrecht
Name: jQuery JavaScript Library
URL: http://jquery.com
Native Server Environment: None
Included Widgets: None
Download Size: 22 KB (compressed)

jQuery is an extremely powerful way to access and manipulate the DOM. Fundamentally, jQuery is a query tool that encapsulates DOM elements & provides hooks for events, effects and many other useful things. It is this fast and simple way of querying a document for given nodes & manipulating the nodes that gives jQuery it’s power & name.

The fundamental drawback of jQuery is the long and rather convoluted syntax that can emerge as one tries to navigate more complex action and events. Also, although the library is excellent for accessing the DOM, The same syntax can be quite cumbersome when applied to AJAX requests.


Some Highlights
  • Tiny download size
  • Extremely Flexible
  • Powerful animation & effect tools
  • Unique and poweful manipulation & traversal of the DOM

Some Drawbacks

  • Command Strings can be long & difficult to debug
  • No Advanced widgets.
  • Lacking in API’s for date manipulation
  • Utilities class, while useful, doesn’t contain much.

Scriptaculous JavaScript Library

Posted by Don Albrecht
Name: Scriptaculous JavaScript Library
URL: http://www.script.aculo.us
Native Server Environment: Ruby
Included Widgets: Drag & Drop, Draggables, Droppables, Sortables, Slider, Autocompletion, In Place Editing
Download Size: 96 KB (uncompressed)

Scriptaculous
is a powerful extension to the prototype JS library. Prototype +
Scriptaculous provides a functionality set comparable to the other
major toolkits.

The clear focus of Scriptaculous is on visual
effects and low level functionality. It doesn’t support complex widgets
readily and can be cumbersome for complex data manipulation.


Some Highlights
  • Tiny download size
  • Highly flexible
  • Powerful animation & effect tools
  • Excellent Drag & Drop support
  • Excellent in-place editing

Some Drawbacks

  • Requires prototype
  • No Advanced widgets.
  • No Manipulation API’s or data types
  • Download isn’t compressed by default