Create a JavaScript Framework using Mootools – Part 5: Compress your Framework

Compress your Framework

Now that you have your Framework create in yourlibrary.js, you might want to save some space using a compressor. I will present two famous one that I used before. First step is to create a compressor folder.

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
–|-packager/
–|-compressor/
–|-yourlibrary.js

JsMin

git clone https://github.com/rgrove/jsmin-php

Go get the latest version of jsmin.php here: and copy it inside the compressor folder.

Open your build.php file and add the highlighted rows:

<?php
// include the packager library
require dirname(__FILE__) . '/packager/packager.php';

// include the compressor library
require dirname(__FILE__) . '/compressor/jsmin.php';

// List of Package needed
$packages = array('mootools-core', 'mootools-more', 'yourLibrary');

// Register all the packages needed to create your Framework
$pkg = new Packager($packages);

// List of Component needed for Core. These are just examples, you might need more
$core = array('Core/Core', 'Core/Array', 'Core/String');

// List of Component needed for More. These are just examples, you might need more
$more = array('More/Fx.Accordion', 'More/URI', 'More/Fx.Scroll');

// List of Component needed for More
$yourlibrary = array('yourLibrary/MyFirstClass', 'yourLibrary/MySecondClass');

// List of all Component needed
$components = array_merge($core, $more, $yourlibrary);

// Create the yourlibrary.js file
$pkg->write_from_components('yourlibrary.js', $components);

// create a compressed version of yourlibrary.js
file_put_contents('yourlibrary_compressed.js', JSMin::minify(file_get_contents('yourlibrary.js')));
?>

–Or–

YUI Compressor

Yahoo UI Compressor is an open source tool that supports the compression of both JavaScript and CSS files. In addition to removing comments and white-spaces, YUI Compressor obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

Go get the latest version here: https://github.com/yui/yuicompressor/blob/master/build/ and copy it inside the compressor folder.

Usage: java -jar yuicompressor-x.y.z.jar [options] [inputfile]

YUI Compressor doc

We are now done with this tutorials in 5 parts. I hope it was helpful. Any questions, comments let me know.

Create a JavaScript Framework using Mootools – Part 4: Use Packager

Use Packager

“Packager is a PHP 5.2+ library to concatenate libraries split in multiple files in a single file. It automatically calculates dependancies. Packager requires a yml header syntax in every file, and a package.yml manifest file, as seen on the MooTools project.”

Clone Packager using git command line:

git clone https://github.com/kamicane/packager.git

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
–|-packager/
—-|-packager (Command line file)
—-|-packager.php (Core Library)

Update your .yml file

Open your .yml file: YourFramework/yourLibrary/package.yml and insert the required properties:

name: yourLibrary
sources:
 - "Source/MyFirstClass.js"

Name is the “Package” name used by Packager to reference your files.
Sources is the list of Classes you want your Framework to reference.

Update MyFirstClass.js

You now know that in order for the packager to work you will need to add yml header syntax in every Classes you create. Open your file and add the header:

/*
---
name: MyFirstClass
description: The description is not required
requires: [Core/Element, More/URI, /MySecondClass]
provides: [MyFirstClass]
...
*/

var MyFirstClass = new Class({
	// Class constructor
	initialize : function()
	{

	}
});

Please note how to reference another class from another package. Core/Element will get the Element Class within the Core package. You can also reference your own package using yourLibrary/MySecondClass or /MySecondClass

Build your Framework

Everything is now setup for you to use packager. You have two choices, either use the command line or create a php file that will handle everything for you.

Using command line (Does not work on Windows)

  1. Register packages:
    $ packager/packager register mootools-core
    the packager Core has been registered
    
    $ packager/packager register mootools-more
    the packager More has been registered
    
    $ packager/packager register yourLibrary
    the packager yourLibrary has been registered
    
  2. Build yourlibrary.js:
    //  Includes all Classes from Core, More and yourLibrary
    $ packager/packager build Core/* More/* yourLibrary/* > yourlibrary.js
    
    // Includes only few Classes and their dependencies
    $ packager/packager build Core/Core More/Fx.Accordion yourLibrary/MyFirstClass > yourlibrary.js
    

You will find more information about how to use the command line in the packager repository.

Using php

Create a build.php file in the root of your framework and insert the following lines inside.

<?php
// include the packager library
require dirname(__FILE__) . '/packager/packager.php';

// List of Package needed
$packages = array('mootools-core', 'mootools-more', 'yourLibrary');

// Register all the packages needed to create your Framework
$pkg = new Packager($packages);

// List of Component needed for Core. These are just examples, you might need more
$core = array('Core/Core', 'Core/Array', 'Core/String');

// List of Component needed for More. These are just examples, you might need more
$more = array('More/Fx.Accordion', 'More/URI', 'More/Fx.Scroll');

// List of Component needed for More
$yourlibrary = array('yourLibrary/MyFirstClass', 'yourLibrary/MySecondClass');

// List of all Component needed
$components = array_merge($core, $more, $yourlibrary);

// Create the yourlibrary.js file
$pkg->write_from_components('yourlibrary.js', $components);
?>

Sources

Create a JavaScript Framework using Mootools – Part 3: Create your first Class

Create your first Class

Let’s create our first Class named MyFirstClass. For this example I will reuse a code from a previous post: Mootools Tutorial: Create a Class.

var MyFirstClass = new Class({
	// Class constructor
	initialize : function()
	{

	}
});

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
—-|- Source/
——|- MyFirstClass.js
—-|- package.yml (explained step 4)

Create a JavaScript Framework using Mootools – Part 2: Create your Package

Create your Package

Now it is time for you to create your own package.

  1. Create your library folder (yourLibrary/)
  2. Create a “Source” folder inside
  3. Create an empty package.yml file (explained Part 4)

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
—-|- Source/
—-|- package.yml (explained Part 4)

Create a JavaScript Framework using Mootools – Part 1: Clone Mootools Repositories

I always wanted to know how to create a JavaScript framework based on Mootools. I decided to create one during an internal contest in my company to show my peers how simple and how valuable it could be to our web internal projects.

I decided to divide this article into 5 parts:

Clone Mootools Repositories

Mootools Core Classes

Core contains useful classes such as Element(Control the DOM), Request(Ajax requests) or Fx(for special effects). The first thing you will need to do is create a folder for you framework (YourFramework/), get inside and clone Core using git command line:

cd YourFramework/
git clone https://github.com/mootools/mootools-core.git

Framework tree so far:

YourFramework/
–|-mootools-core/
—-|- Source/
—-|- package.yml (explained Part 4)

Mootools More Classes

More is more UI based and contains classes such as Accordion, Tip, URI or Spinner. Same thing as for Core, you will need to clone using git command line:

git clone https://github.com/mootools/mootools-more.git

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
—-|- Source/
—-|- package.yml (explained Part 4)