AJAX & Javascript

Wombat comes with heaps of features around JavaScript and AJAX. There is a JavaScript-class loader that allows dynamic include of JavaScript classes. Furthermore there is automatic JavaScript compression. Also the framework supports easy to use and non obstrusive use of AJAX for all content components.

Prototype is Bliss

Wombat's JavaScript tools are based on the famous Prototype Framework. Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Writing JavaScript code that works in Firefox, IE as well as Opera is quite difficult, well, it's a pain. Hence I decided to use the Prototype Framework. This framework extends basic JavaScript classes and objects and make JavaScript development a bliss.

Also I just like Prototype's design. There is plenty of comfy and usefull stuff and they did everything in a proper objective way. (Still, the JavaScript way of object oriented programming sometimes confuses me.)

Deliver JavaScript Files to the Browser

Of course you have to deliver JavaScript files to the browser, first. The traditional way to do this is to put all relevant files somewhere in the script e.g. js folder inside DOCROOT. Using the pseudo constant DOCROOT can help to get those pathes right, even if the current page is located in sub folder of DOCROOT.

<script type="text/javascript" src="/js/whateverfile.js"></script>

Well, this works well. Still Wombat provides an abtraction layer to deliver JavaScript files. Simply put your script file in resource/js/ and use SERVICE_JAVASCRIPT to actually send them to the browser.

<script type="text/javascript" src="/js//whateverfile.js"></script>

The abstraction layer is defined in class WBService_JavaScript. Basically it reads the JavaScript file and sends it content to the web browser. Also it sets proper HTTP header and manages caching features according the current Wombat settings. As mentioned above the files must be located in resource/js/. Still, it first sees whether the requested file exists in BASEDIR. Only if this file is not there, it tries to deliver the corresponding file from SYSTEMDIR. This makes it easy to keep files provided by Wombat up to date, allows you to override any Wombat JavaScript file with your custom code and still keep your custom JavaScript files separate.

Apropos separate. In order to minimice the number of HTTP requests per page view, Wombat is capable to deliver all required JavaScript files at once. You can swtich this feature with the parameter wb/html/js/include to bulk (the default) or separate

<?php
WBParam::set('wb/html/js/include', 'separate');
?>

<script type="text/javascript" src="/js//WB/prototype"></script>
<script type="text/javascript" src="/js//WB"></script>
<script type="text/javascript" src="/js//WB/Ajax"></script>
<script type="text/javascript" src="/js//WB/ContentArea"></script>

<?php
WBParam::set('wb/html/js/include', 'bulk');
?>

<script type="text/javascript" src="/js/?cs=c161a6cf1d22ab1d2874602cfb15ded9"></script>

As you can see, separate generates four script-tags (which results in four HTTP-requests). Using bulk creates just one script-tag and therefore just a single HTTP-request. The HTTP-response is just one big file that contains those four files. This helps to save HTTP-requests and therefore speeds up the overall performance.

Well, this trick only works if Wombat knows which JavaScript files are required. To do so, just call the JavaScript utility's class static function add to "include" another JavaScript file.

<?php
WBClass::load('WBHtml_JS');
WBHtml_JS::add('WB/prototype');
WBHtml_JS::add('WB');
WBHtml_JS::add('WB/Ajax');
WBHtml_JS::add('WB/ContentArea');
?>

Another performance feature is to compress, or minimize the JavaScript code before it is sent to the browser. This strips the comments and unnecessary white spaces. This usually saves around 40% of the original file size, thus saving lots of web traffic. (Still, you probably want to swtich on GZIP-compression, as well.) Again, the default value minimize of the wombat parameter wb/html/js/compress turns on this feature.

<?php
WBParam::set('wb/html/js/compress', 'minimize');
?>

The Bridge from PHP

As mentioned above, you can "include" JavaScript classes from PHP. This automatically generates the necessary HTML output and makes sure that each file gets included only once. There is class named WBHtml_JS which provides the static function add to inject JavaScript code.

<?php
WBClass::load('WBHtml_JS');
WBHtml_JS::add('WB/prototype');
WBHtml_JS::add('WB');
WBHtml_JS::add('WB/Ajax');
WBHtml_JS::add('WB/Ajax'); // duplicates are skipped
?>

Besides simple includes, there are some other areas where you can inject JavaScript: AREA_INCLUDE (the default), AREA_ONLOAD, AREA_CODE, and AREA_FOOT

<?php
WBClass::load('WBHtml_JS');
// simple include
WBHtml_JS::add('WB');
 
// call function on load
WBHtml_JS::add('WB.init();', WBHtml_JS::AREA_ONLOAD);
 
// place function after content
WBHtml_JS::add('alert("test me");', WBHtml_JS::AREA_FOOT);
?>

• WB Basic include
• Javascript delivery
• PHP JavaScript Utility
• Class Loader
• Ajax Updater