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)

3 awesome CSS Frameworks [UPDATED]

1. Bootstrap

Bootstrap is a CSS Framework created by ex-Twitter Engineers: @mdo and @fat. For me it is the best Open Source CSS Framework that you could find, it includes a 12 columns grid system, base CSS (For cross browser compatibility), HTML components and a lot of useful JavaScript.

Bootstrap is fully Responsive, Cross Browser compatible and have the biggest community (around 14000 fork) working to improve it. Some companies are even surfing on Bootstrap popularity such as bootswatch that creates Free customization for Bootstrap or jetstrap that helps you create usable mockups.

Grid System

Bootstrap is based on a width of 940 pixels(Depend on the @media queries you use: The screen size) with a 12 columns grid.

Here is the html if you want to create a three columns row.

<div class="container">
    <div class="row">
        <div class="span4">1/3</div>
        <div class="span4">1/3</div>
        <div class="span4">1/3</div>
    </div>
</div>

Base CSS

All the basic CSS stuff: Typography, Form, Button, Table etc. The purpose being to have the same style across different Browsers (IE, Chrome, Firefox, Safari etc.).

Components

  • Dropdowns: Toggleable, contextual menu for displaying lists of links.
  • Button groups
  • Button dropdowns
  • Navs: tabs, pills, and lists.
  • Navbar: Support for a project name and basic navigation.
  • Breadcrumbs: Helps you navigate through your website
  • Pagination
  • Labels and badges
  • Typography: Hero unit, Page header etc.
  • Thumbnails: Grids of images, videos, text, and more
  • Alerts: Styles for success, warning, and error messages.
  • Progress bars: For loading, redirecting, or action status
  • Media object: Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
  • Misc: Lightweight utility components.

JavaScript

All Bootstrap JS plugins require Jquery.

By using Bootstrap you have natively access to all those plugins:

  • Transitions: For simple transition effects.
  • Modal: Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
  • Dropdown: Add dropdown menus to nearly anything.
  • Scrollspy: Automatically updates menus based on scroll position.
  • Tab: Add quick, dynamic tab functionality to transition through panes of local content.
  • Tooltip: Basic tip.
  • Popover: Add small overlays of content.
  • Alert: Add dismiss functionality to all alert messages.
  • Button: Do more with buttons. Control button states or create groups of buttons
  • Collapse: Accordion
  • Carousel: Slideshow
  • Typeahead: Auto-completion
  • Affix: Add a fixed position to certain elements.
Button and Tooltip plugins conflict with JQuery UI Button and Tooltip plugins. Fortunately Bootstarp includes a no conflict mode that you can use like this $.fn.button.noConflict(); before using Jquery UI.

If you want to know more about Bootstrap you can read and share my PPT presentation: Introduction to Twitter’s Bootstrap PPT


2. Foundation

foundation

Foundation is one of the best CSS Framework out there. It includes more or less the same functionality as Bootstrap (Grid System, Typography, fully Responsive, Cross Browser compatible etc.) but is still less popular (8 times less Fork on GitHub).

Grid System

Foundation is based on a width of 1000 pixels(Depend on the @media queries you use: The screen size) with a 12 columns grid.

Here is the html if you want to create a three columns row.

<div class="row">
	<div class="four columns">.four.columns</div>
	<div class="four columns">.four.columns</div>
	<div class="four columns">.four.columns</div>
</div>

3. Blueprint

Blue print is the CSS framework that I used to create this template. It contains css files to create your page scaffolding, to handle typography and beautiful forms. It is base on a 950px width with 24 columns to fit all the modern computer screen.

http://www.blueprintcss.org/

Example

Here is the html if you want to create a three columns page.

<div class="container">
    <div class="span-7 colborder">Here's a box...</div>
    <div class="span-8 colborder">And another box...</div>
    <div class="span-7 last">This box...</div>
</div>

Result


Demo


If you want to go further, a complete comparison of those three CSS Frameworks is available here.

Mootools Tutorial: Create a Class

Step one: Create your HTML/CSS page.

You page must contain a place to instantiate your new class. It happens line 5.

<html>
<head>
<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass();
	});
</script>
<style type="text/css">
.odd, .even {
	display: block;
	height: 100px;
	width: 100px;
	float:left;
}
</style>
</head>
<body>
	<div id="container">
		<div class="odd"></div>
		<div class="even"></div>
		<div class="odd"></div>
		<div class="even"></div>
	</div>
</body>
</html>

Step two: Create your Mootools Class.

All you need is the initilize function (or constructor).

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

	}
});

Step three: Let’s add some colors.

In this step we will create a setElementsColor function. The purpose of it is just to give colors to elements in order to be able to see them.

var MyClass = new Class({
	// Class constructor
	initialize : function()
	{
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	}
});

Step four: Let’s set Options.

I want to add options to my Class. The proper way is to add an Object as you can see line 4.

<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass( {
			message:'this is a specific message'
		});
	});
</script>

To be able to use setOptions() function in your class you will need to implement the Mootools Options Class. Line 12 don’t forget to add a parameter that will get Options from the instance creation. Line 15 set the Options and overwrite options line 7,8 and 9.

var MyClass = new Class({

	// Implement Mootools Options Class
	Implements : [Options],
	
	// create options Object
	options : {
		message:'this is a default message'
	},

	// Class constructor
	initialize : function(options)
	{
		// Set the options
		this.setOptions(options);
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	}
});

Step five: Let’s Play with Options.

Now that options are setup, I want to use them. In this step we will create a function that returns the option “message”

var MyClass = new Class({

	// Implement Mootools Options Class
	Implements : [Options],
	
	// create options Object
	options : {
		message:'this is a default message'
	},

	// Class constructor
	initialize : function(options)
	{
		// Set the options
		this.setOptions(options);
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	},
	
	getMessage : function ()
	{
		// return the message
		return this.options.message;
	}
});

Now let’s use this new function.

<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass( {
			message:'this is a specific message'
		});
	});
	// Result: 'this is a specific message'
	alert(myClass.getMessage());
</script>

Download

mootools_create_class.zip

Sources