RIA JsClasses Integrator: Optimizing JavaScript Development

The closer your site gets to the concept of Web2.0 , the more JavaScript code appears on your pages. Obviously, the developer has to spend more and more time integrating his server code in php / java / python ... with the client part in JavaScript .

A large amount of code requires some sort of systematization, for example, posting logically related parts of the code across different files, assigning file names to the controller / event / unit ... Surely many developers have their own solution to this problem.
On Habré, for example, the JS-code is divided into small blocks that are requested depending on the page. The code is written beautifully, commented out, there are indents. A small minus of this approach is a large number of blocks (about 25) on each page. At the beginning, I used a similar scheme, but now, nevertheless, I want to present a slightly different approach to the Habras community.

')

Accelerating Factors

I highlighted a few ideas that, in my opinion, make the JS code development process more efficient:

Using the JS framework. Many frameworks in addition to the finished rich functionality and plug-ins make the code more understandable for perception.
For example, JS code:
document .getElementById ('myElemrnt'). innerHTML = 'Test';

on MooTools looks much more aesthetic and compact:
$ ('myElemrnt'). set ('html', 'Test');
The framework can be any, I just got used to MooTools . This framework has a very powerful component - these are classes. Of course, this is not about full-fledged classes (they are not in JavaScript), but about the pseudo-class description using the Class object. The Class object implements inheritance (Extends) with access to the overridden methods of the inherited class, as well as multiple inheritance (Implements) of methods without access to the overridden methods. More details about classes can be found in the documentation for mootools classes .
Need a system in the naming of classes, as well as in the naming of the directories in which these classes are placed. “The rules of the game” are very important for team development. There is no point in inventing my system, in my opinion. I like the coding rules for the Zend Framework . It remains only to adapt them a bit for writing JS (instead of the .php extension, write .js). And, of course, to fulfill the condition - one class in one file. How will the problem of a large number of files be solved, I will write below.
Each class must be documented. I prefer the JsDoc standard. A prerequisite is the @requires tag in class comments, which are used to indicate dependencies between classes.
The resulting file must be one. It is assembled from classes whose code is located in different folders (outside the visibility of the web server), taking into account the dependencies and the sequence of classes during assembly.
The resulting file is rebuilt and the name is changed if changes were made to at least one of the classes (or dependent classes) requested by the “engine” of your site.
The resulting file is packed with the JSMin module, which increases the speed of return and does not affect the ease of development.
The resulting file is “compressed” using the gzip method, which allows browsers that support the gzip packaging technology to further increase the download speed.

PHP implementation

Since the “bare” ideas sound unconvincingly, I have embodied the above points in the PHP class RIA JsClasses Integrator . The class connects to your engine by adding a few lines to the php code and a single line to the template.

In the example, I wrote a pair of base classes for Ajax requests. In order to “feel” this class, you need to install it on your computer and try to make changes to the test class and see how the engine behaves. Data on the location of the class, modification time, and dependencies between classes are cached into a text file, but caching can easily be rewritten, for example, in memcached.

Configured quite simple.
In your "engine" write about the following lines:

require ( '../libs/JSMin.php' );
require ( '../libs/JsClasses.php' );

$ jsClasses = new JsClasses ();
$ jsClasses -> setClassesPath ( '../js' );
$ jsClasses -> setClassesCacheFile ( '../cache/jsClasses.cache' );
$ jsClasses -> make (array ( 'Ria_JsonRequest_Test' ));
$ classesResultJsFileName = $ jsClasses -> getJsFileName ();

In the header of the page template that forms the html-code we place a link to the packaged JavaScript created by our module:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8 "/>
<title> Simple JsClasses Integration on PHP Site Engine </ title>
<script type = "text / javascript" src = "js / mootools-1.2-core-nc.js"> </ script>
<script type = "text / javascript" src = " <? echo $ classesResultJsFileName?> "> </ script>
</ head>

To return the packed files to the browser in the directory with auto-compiled JS-files (by js / cache / by default), create .htaccess with the following content:

<FilesMatch "\ .js.gz $">
ForceType text / javascript
Header set Content-Encoding: gzip
</ FilesMatch>
<FilesMatch "\ .js $">
RewriteEngine On
RewriteCond% {HTTP_USER_AGENT}! ". * Safari. *"
RewriteCond% {HTTP: Accept-Encoding} gzip
RewriteCond% {REQUEST_FILENAME} .gz -f
RewriteRule (. *) \. Js $ $ 1 \ .js.gz [L]
ForceType text / javascript
</ FilesMatch>

RIA JsClasses Integrator: Optimizing JavaScript Development

Accelerating Factors

PHP implementation

Related Links

More articles: