ezjscore: eZ Publish JavaScript and Ajax framework

ezjscore features

The main features of ezjscore are as follows:

• Javascript / CSS file dependency handling, to enable developers to define files to load per code block. This supports loading only those JavaScript and CSS files that are needed for a particular page.
• Packs JavaScript files and CSS files into single JavaScript or CSS files and minifies the result. This improves performance by reducing the number and sizes of requests.
• A framework to communicate between client and server using the YUI and jQuery libraries; with a bit of extra code, any JavaScript library can be supported. This includes wrappers for the respective JavaScript IO calls, and a server-side router framework for the Ajax requests.
• Functions (and template operators) to encode eZ Publish nodes and variables to JSON and XML.

Note that this article is current as of ezjscore 1.0.1. To get the most out of this article, you should have at least some basic knowledge about eZ Publish templates, configuration files, and its permission system.

What is Ajax?

Ajax (asynchronous JavaScript and XML) means different things to different people. Many people think of animations and rich interfaces when they think about Ajax, but this is traditionally and more properly termed: DHTML (Dynamic HTML). Today, DHTML involves unobtrusive, cross browser and ECMAScript compliant Javascript / DOM code.

DHTML only tells a small part of the Ajax concept. For the purpose of this article, we will refer to Ajax as follows:
“With Ajax web applications can retrieve data from the server asynchronously in the background without interfering with the display and behaviour of the existing page.” [source: wikipedia.org]

And while "XML" is part of the "Ajax" acronym, much Ajax code uses JSON as its data interchange format, so it might also have been called Ajaj – asynchronous JavaScript and JSON!

Some key uses of Ajax include: client-server applications which minimize page-reloads to improve user experience; enabling richer user experience in the context of heavily cached content; and mashing up web services to enable greater user functionalities.

Why not something like xajax?

Today, the client part of Ajax is far more than RPCs (Remote Produce Calls) to the server to insert pre-generated HTML into a document. It can include XML transformation using XSLT, JavaScript animation including drag and drop, dynamic canvas, scripted SVG, custom DOM code, geolocation, web/locale storage, web workers or others of the many emerging client-based technologies.

The point is, the browser is being called upon to do ever more. Most Ajax applications strive to achieve clear client-serve separation, where the client has the role of the presenter and the server more or less only does authentication and data retrieval. Although a complete separation is difficult to achieve, hard-coupling your client-side code with your server code is going to limit you sooner or later.

In contrast to the xajax PHP library, ezjscore has a loosely coupled approach to keep client-side code and server-side code clearly separated. This enables you to use any kind of JavaScript / Ajax library. Only a few lines of optional glue code is needed to make the coupling transparent to the developer. ezjscore includes this glue layer for both YUI 3.0 and jQuery.

So pick your JavaScript library, check the examples and API documentation, and you should be able to start using ezjscore in no time!

Introduction to the ezjscore packer

The ezjscore packer minifies and merges several JavaScript or stylesheet files into one file. For stylesheets it also changes relative URLs (background or @import) before it stores the result in the public cache folder (var/<site_name>/cache/public), leaving it to the web server to serve the file and take care of HTTP cache handling. On second run, the packer will only regenerate the cache if some of the source files have been modified after the cache file was created. The benefits of this include smaller files to reduce download size, and reduced HTTP connections done by the browser to download files or check whether a file has changed. This especially benefits complex websites that use lots of large JavaScript and stylesheet files.

Currently, for eZ Publish versions between 4.0 and 4.2, the packed files stored in the public cache folder are not cleared by the automated clearing tools (for example, ezcache.php). They must be manually removed from the file system. This will be fixed in future versions.