Home arrow AJAX & Prototype arrow Page 2 - Google's Closure Compiler Service API: Additional Features

Formatting compiled code with the pretty_print option - AJAX

In this eighth and final part of a series that explains the various features of Google's Closure Compiler Service API, you'll learn about a few features that didn't fit neatly into the discussions in the previous parts.

TABLE OF CONTENTS:
  1. Google's Closure Compiler Service API: Additional Features
  2. Formatting compiled code with the pretty_print option
By: Alejandro Gervasio
Rating: starstarstarstarstar / 1
October 25, 2010

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Aside from the four arguments that you learned in previous tutorials, the Closure Compiler Service API accepts a few optional ones, which can be used for performing some useful additional tasks. That’s exactly the case with the “formatting” parameter, which is used for applying a specified format to compiled JavaScript code.

To show you a bit more extensively how to use this argument, below there is an example that assigns the value “pretty_print” to it. This process adds line breaks to the optimized code before it is sent to the client. Here it is:   

<?php

// example using formatting = pretty_print
try {
 
    // include the autoloader class
    require_once 'Autoloader.php';
    Autoloader::getInstance();

    // create an instance of the file handler class and read the specified JavaScript file
    $fileHandler = new FileHandler;
    $js = $fileHandler->read();
   
    // build the array of arguments that will be passed to the closure compiler API
    $data = array(
         'js_code' => $js,
         'compilation_level' => 'ADVANCED_OPTIMIZATIONS',
         'output_format' => 'text',
         'output_info' => 'compiled_code',
         'formatting' => 'pretty_print'
    );
   
    // create an instance of the ClosureCompilerHandler class
    $compilerHandler = new ClosureCompilerHandler($data);
    // query the closure compiler API and get the compiled JavaScript function
    $response = $compilerHandler->sendRequest();
    $compilerHandler->sendHeader('js');
    // print to screen the compiled JavaScript function
    echo $response;
    /*
    displays the following
   
    var a = document.createElement("div");
    a.setAttribute("id", "divid");
    a.setAttribute("class", "divclass");
    document.getElementsByTagName("body")[0].appendChild(a);
    */
}
catch (Exception $e) {
    echo $e->getMessage();
    exit();
}

If you were looking for an approach that will let you format your compiled JavaScript snippets to be printed or to preserve their readability, the “formatting” argument is definitely the option you want. As the above example shows, once this argument has been passed to the API, the optimized code is returned to the client in a “printer-friendly” format.

I’d like to stress that the functionality of this argument isn’t limited to adding line breaks to supplied JavaScript. It's possible to use it for including delimiting comments when compiling code fetched from multiple files. Therefore, in the final part of the tutorial I’m going to build another basic example, which will show how to include the mentioned delimiters in the JavaScript file used previously.

Go ahead and read the following section.

Building a final example: working with the “print_input_delimiter” option

As with other arguments of the API discussed in this series, it’s possible to assign different values to the “formatting” parameter discussed previously. You already saw how to generate readable compiled code via its “pretty_print” option, right? However, assigning the “print_input_delimiter” value to the argument will cause the compiler to include several delimiters in the code when it’s been gathered from multiple JavaScript files.

To understand the functionality of this option more clearly, I suggest you look at the following example. It adds a single delimiter to the compiled JavaScript code, since in this case it’s been retrieved from a unique source file:

<?php

// example using formatting = print_input_delimiter
try {
 
    // include the autoloader class
    require_once 'Autoloader.php';
    Autoloader::getInstance();

    // create an instance of the file handler class and read the specified JavaScript file
    $fileHandler = new FileHandler;
    $js = $fileHandler->read();
   
    // build the array of arguments that will be passed to the closure compiler API
    $data = array(
         'js_code' => $js,
         'compilation_level' => 'ADVANCED_OPTIMIZATIONS',
         'output_format' => 'text',
         'output_info' => 'compiled_code',
         'formatting' => 'print_input_delimiter'
    );
   
    // create an instance of the ClosureCompilerHandler class
    $compilerHandler = new ClosureCompilerHandler($data);
    // query the closure compiler API and get the compiled JavaScript function
    $response = $compilerHandler->sendRequest();
    $compilerHandler->sendHeader('js');
    // print to screen the compiled JavaScript function
    echo $response;
    /*
    displays the following
   
    // Input 0
    var a=document.createElement("div");a.setAttribute("id","divid");a.setAttribute("class","divclass");document.getElementsByTagName("body")[0].appendChild(a);
    */
}
catch (Exception $e) {
    echo $e->getMessage();
    exit();
}

As you can see from the previous snippet, the compiler has effectively added a comment with the string “// Input 0” at the beginning of the optimized code. This is due to a simple reason: only a single file has been passed to the API. However, if the output had been generated from several files, multiple comments would be added in the form of “// Input 0”, “// Input 1”, “// Input N”, which permits you to easily keep track of what portion of code belongs to a given file.

As I said before, the “formatting” argument is entirely optional and should be used only when it’s necessary to make the compiled code a bit more readable, either to be printed out or to meet other requirements.

And with this final example, we’ve come to the end of this tutorial. As always, feel free to tweak all of the code samples developed in this series. This process will let you arm yourself with more experience in using Google’s Closure Compiler Service API.    

Final thoughts

Everything has an end, and this series certainly isn’t the exception. But hopefully, the experience has been instructive and perhaps even fun, as you learned through some approachable examples how to optimize your JavaScript files using the powerful compiling service just released by Google.

Even though the concept is obvious, it’s worth recalling here, at least for the sake of completeness: no matter how efficiently you compile, minify and compress your JavaScript snippets, if you don’t cache them properly once they have been dispatched to the browser, the optimization will be of minimal help at best. So, make sure to implement an efficient caching mechanism before you start thinking about what type of web service you’re going to use with your client-side scripting files.  

See you in the next web development tutorial!



 
 
>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: