Adding alternative JavaScript frameworks to your Joomla! system

Intro

  There a number of cool JavaScript frameworks and sometimes you get into situation when you want to use some nice features from them in your Joomla! system. The major JS frameworks that we will talk about are: jQuery, Prototype, Scriptaculous, Dojo and Yahoo UI. Each of these frameworks has its own positive moments. Let’s briefly have a look at them.

 

JavaScript Frameworks overview

  1. jQuery

  This framework is designed to change the way that you write JavaScript. Features:

  • DOM element selections
  • DOM traversal and modification, (including support for CSS 1-3 and basic XPath)
  • Events
  • CSS manipulation
  • Effects and animations
  • Ajax
  • Extensibility
  • Utilities - such as browser version and the each function.
  • JavaScript Plugins

More than this there is UI for jQuery.

  2. Prototype
  The framework makes it easy to use object-oriented concepts like classes and inheritance within Javascript. It also supports basic Ajax functionality such as web remoting. Features:

  • Easily deploy ajax applications: Besides simple requests, this module also deals in a smart way with JavaScript code returned from a server and provides helper classes for polling
  • DOM extending: adds many convenience methods to elements returned by the $() function: for instance, you can write $(’comments’).addClassName(’active’).show() to get the element with the ID ‘comments’, add a class name to it and show it (if it was previously hidden)
  • Utilizes JSON (JavaScript Object Notation): JSON is a light-weight and fast alternative to XML in Ajax requests

  3. Scriptaculous
  The framework is built on Prototype library to provide a JavaScript with comprehensive Ajax coverage and UI effects. Features:

  • Visual Effects (See One-Second Spotlight pattern)
  • Drag-And-Drop (See Drag-And-Drop pattern)
  • Unit-Testing (See System Test pattern)

  4. Dojo
  This JavaScript framework offers comprehensive widget and browser-server messaging support. Features:

  • Extensive deployment support: dependency-based packaging, compression of required libraries into a single download. (See On-Demand Javascript pattern).
  • Framework for creation of custom Javascript widgets.
  • Library of pre-built widgets.
  • Solid drag-and-drop, effects, and generic animation support
  • Browser-server messaging support - XMLHttpRequest and other mechanisms.
  • Event management. (See Distributed Events pattern).
  • Support for bookmarkability and manipulating URLs in the browser.
  • Solid set of tools for DOM manipulation, Animations, Ajax, Event and keyboard normalization, Internationalization (i18n) and Accessibility (a11y)

  5. Yahoo UI
  Set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. Features:

  • Animation: Create “cinematic effects” on your pages by animating the position, size, opacity or other characteristics of page elements. These effects can be used to reinforce the user’s understanding of changes happening on the page.
  • Browser History Manager: Developers of rich internet applications want bookmarks to target not just pages but page states and they want the browser’s back button to operate meaningfully within their application’s screens. Browser History Manager provides bookmarking and back button control in rich internet applications.
  • Connection Manager: This utility library helps manage XMLHttpRequest (commonly referred to as AJAX) transactions in a cross-browser fashion, including integrated support for form posts, error handling and callbacks. Connection Manager also supports file uploading.
  • DataSource Utility: DataSource provides an interface for retrieving data from arrays, XHR services, and custom functions with integrated caching and Connection Manager support.
  • Dom Collection:The DOM Utility is an umbrella object comprising a variety of convenience methods for common DOM-scripting tasks, including element positioning and CSS style management.
  • Drag & Drop: Create draggable objects that can be picked up and dropped elsewhere on the page. You write code for the “interesting moments” that are triggered at each stage of the interaction (such as when a dragged object crosses over a target); the utility handles all the housekeeping and keeps things working smoothly in all supported browsers.
  • Number of controls and examples available.


Adding JavaScript frameworks to Joomla!

  So, all these frameworks have enough features to work with. To add the framework to your Joomla! system you can modify the template. There are couple of ways to include appropriate JavaScript files. The first one is to download the script from the web and place it in your template folder. The second variant (it will work for jQuery, Prototype, Scriptaculous and dojo) is to use Google Ajax Libraries API. - a content distribution network and loading architecture for the most popular open source JavaScript libraries. This means that you using Ajax Libraries API use can get several benefits:

  • Caching can be done correctly, and once, by Google... and developers have to do nothing
  • Gzip works
  • Can serve minified versions
  • The files are hosted by Google which has a distributed CDN at various points around the world, so the files are "close" to the user
  • The servers are fast
  • By using the same URLs, if a critical mass of applications use the Google infrastructure, when someone comes to your application the file may already be loaded!
  • A subtle performance (and security) issue revolves around the headers that you send up and down. Since you are using a special domain (NOTE: not google.com!), no cookies or other verbose headers will be sent up, saving precious bytes.

Using Ajax Libraries API is easy and can speed up user-site interaction. To include the chosen JavaScript framework to your Joomla! system go to Extensions->Template Manager in the administration, select the template and click “Edit”, then click “Edit HTML”.
Before the closing “</head>” tag add the inclusion of appropriate JavaScript file. In case of using Google Ajax Libraries API this will be similar to the strings below: 

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1"); //load jQuery 
  google.load("prototype", "1.6"); //load Prototype
  google.load("scriptaculous", "1.8.1"); //load Scriptaculous
  google.load("dojo", "1.1.1"); // Load Dojo
</script>
In case of using local downloaded JavaScript file add the strings below (the example is for milkyway theme and jQuery file):
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/rhuk_milkyway/js/jquery.js">
</script>

That’s it! You can use the features from other JavaScript frameworks in your Joomla! But be careful since some of them are not compatible with each other. For example, Prototype and mootools don’t work correctly together (but there is a solution for this already;))

 

Joomla Tip of the day articles.

(c) 2008 ARI Soft. This article or quotations from it may be used only by ARI Soft approbation.