MooTools: the compact JavaScript framework

In 2005, developer Valerio Proietti launched Moo.fx, an add-on for the then market-leading JavaScript framework Prototype. Still not satisfied with Prototype's range of options, however, he decided to develop his own framework (version 0.87), which was finally released in December 2006 under the free MIT license and the name MooTools (My Object Oriented Tools). Today, a team of more than 20 developers and designers is involved in the development of the framework that is used in around 3.3% of all web projects (as of October 2016) according to a study by w3techs.com, making jQuery and Bootstrap among the most popular JavaScript tools in the world.

The MooTools framework is a compact collection of JavaScript tools arranged in a modular structure for advanced and professional JavaScript developers. Thanks to elegant and well-documented APIs and a strong object orientation, the framework is characterized by its flexible possible uses. It provides diverse functions and classes to assist developers with programming and designing modern web projects and simplify the work process by a considerable amount. Thanks to its modular structure, the framework is very easily extendable. In addition, the user can choose to integrate specific components that are actually needed, which is why MooTools applications are known for their high degree of clarity and compactness.

JavaScript is normally based on Prototype. MooTools, however, builds on a class-based inheritance system that serves as a basis for object-oriented programming and therefore for all components contained in the framework. This system does not only mean easy extendibility, it also enables users to write reusable and flexible source code. With the help of predefined, modifiable classes, you can also implement similar objects (plug-ins, HTML elements, Ajax requests, etc.) that all help you to save time. Among others, the following components can be expanded using MooTools JavaScript:

• Core: MooTools Core is the central element of the JavaScript framework upon which all components are based. As well as the implementation of the class concept, Core contains some general support functions.

• More: MooTools More is the framework’s official plug-in collection. It includes diverse extensions that streamlines the development process and adds further features.

• Class: the Class component is the basic class needed to instantiate (generate) reusable class objects and modify existing classes.

• Element: One of the key components that can be used to access or generate cross-browser-compatible HTML element objects. Contains the dollar functions, $ and $$.

• Fx: an effect module that serves as the basis for animating elements and therefore for scrolling, sliding and other effects.

• JSON: a module for coding and decoding character strings in the JSON format (JavaScript Object Notation).

Of course, some modules build on each other, so for example, the Fx.CSS module requires you to install the related Fx module as well. In general, however, you can select the components you need and download them individually to create your compiledMooTools framework. For this purpose, a list of individual modules are divided into the two major categories: Core and More. It is also possible to download the complete basic package or all available extensions. It’s also possible to download the complete basic package or all available extensions.

The MooTools developers provide a small taste of the individual components with the MooTools demos available on aryweb.nl. There you’ll find presentations of drag and drop functions, effects, and forms, as well as an introduction to MooTools JavaScript, HTML, and CSS code lines.

In the mid-nineties, when dynamic elements were just beginning to enter web developing projects, the source code’s location was increasingly translocated to the client or browser. At first, it was all about Java applets until1995 when Brendan Eich developed the JavaScript predecessor LiveScript for the Netscape 2.0 web browser as an alternative to these ‘mini’ programs. The most noticeable differences was that JavaScript replaced classes with prototypes and that the programmed lines of code were directly implemented into the actual HTML source code, rather than separated - a situation that has not changed to this day.

The primary purpose of JavaScript as a browser scripting language was to create competition to the Java applets. However, the real breakthrough came in 2005 with the introduction of web 2.0 and the subsequent development of web browsers and the DOM interface. All of a sudden, it was possible to load content in the background using JavaScript that resulted in the first dynamic interfaces emerging in the browser without plug-ins or the need to constantly communicate with the web server. Several JavaScript libraries and frameworks have since emerged and as a result JavaScript has been the most widely used script languages for web development for the past decade. The average website has simultaneously evolved into an increasingly complex and interactive nexus of web applications - this has made JavaScript and JavaScript frameworks such as MooTools even more important for programming new projects. The script language is also now widely used on the server side

Nowadays, traditional static websites have a hard time staying relevant; interactive elements have long been a matter of course, so it is all the more important to engage with website visitors using innovative and user-friendly concepts. Loading speed also plays an important role here. This is largely dependent on how often the web application accesses the server in order to process incoming browser requests. One kind of web project, which is becoming more popular for JavaScript frameworks such as MooTools, is a single-page application - also known as onepager. This is a website made from a single HTML document that can display all of the content on a single page. In lieu of subpages, these websites have sections and events that the visitor can access or activate by scrolling or by clicking on buttons.

Storytelling is a particularly popular format as it allows users to present information in the form of a small story with the aid of the interactive elements. In order to display a single-page application, the web server only needs to exchange a small amount of data; this ensures a generally high performance. Thanks to JavaScript being widely supported, MooTools applications can be used seamlessly across platforms and browsers.

Using JavaScript as a programming language means that the Mootools framework is in good company. Many highly successful alternatives, including AngularJS and Ember.js, show just how high the demand for JavaScript frameworks is. Supported by all common browsers, the scripting language is undisputed web standard as it is well suited to building interactive website components. The language is essential for web developers, even if they do not use a class-based inheritance system by default. MooTools solves this problem by massively simplifying the programming of recurring elements.

For a website visitor, the focus on a client-side executable source code seems to be an advantage at first glance; JavaScript elements promise a high level of interactivity while maintaining a very good page loading speed. However, there are problems and risks with MooTools applications caused by the fact that the clients are responsible for the task of compiling code. This means resources are in particularly high demand, potentially leading to losses in performance or even a website crash in the case of low-performing clients and devices. These crashes particularly affect users of mobile devices such as smartphones and tablets; this amounts to a very significant proportion of internet users. In addition, the crashes often also lead to complications with device-specific components such as touch screens or the comparatively small screen size of man devices, which are sometimes not tested properly beforehand, if at all.

Executing code always carries the risk of being accessed externally (i.e. by using tracking or phishing methods), so users are particularly vulnerable when accessing web projects that use a large amount of client-side programming. Some internet users protect themselves against this by using script blocking extensions such as NoScript or JS Blocker, which prevents unauthorized websites (any site that is not manually added to the whitelist) from running JavaScript and other scripts. It’s therefore important to pay close attention to the security measures of your MooTools web application in order to generate the users’ trust and appeal to your target audience.

MooTools builds on JavaScript‘s object-oriented approach and extends the popular web scripting language to include customizable and reusable classes, following the example of Java and PHP. Using this framework enormously improves the efficiency of JavaScript programming. The strengths of the tool collection are also highlighted here.

It’s possible to design entire application based on MooTools, although this is not necessarily suitable for every project. While effects, animations, and AJAX components are of course increasingly important in modern web development, when implementing any project, the user experience should always be the main priority. For this purpose, MooTools and JavaScript are generally excellent building blocks, but they should only be used in moderation, otherwise your web application runs the risk of quickly breaking the technical resources of the user clients.