MooTools

In 2005, developer Valerio Proietti launched Moo.fx, an add-on for the then market-leading JavaScript framework Prototype. Still not satisfied with Pro­to­type­'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 de­vel­op­ers and designers is involved in the de­vel­op­ment 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 col­lec­tion of JavaScript tools arranged in a modular structure for advanced and pro­fes­sion­al JavaScript de­vel­op­ers. Thanks to elegant and well-doc­u­ment­ed APIs and a strong object ori­en­ta­tion, the framework is char­ac­ter­ized by its flexible possible uses. It provides diverse functions and classes to assist de­vel­op­ers with pro­gram­ming and designing modern web projects and simplify the work process by a con­sid­er­able amount. Thanks to its modular structure, the framework is very easily ex­tend­able. In addition, the user can choose to integrate specific com­po­nents that are actually needed, which is why MooTools ap­pli­ca­tions are known for their high degree of clarity and com­pact­ness.

JavaScript is normally based on Prototype. MooTools, however, builds on a class-based in­her­i­tance system that serves as a basis for object-oriented pro­gram­ming and therefore for all com­po­nents contained in the framework. This system does not only mean easy ex­tendibil­i­ty, it also enables users to write reusable and flexible source code. With the help of pre­de­fined, mod­i­fi­able 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 com­po­nents can be expanded using MooTools JavaScript:

• Core: MooTools Core is the central element of the JavaScript framework upon which all com­po­nents are based. As well as the im­ple­men­ta­tion of the class concept, Core contains some general support functions.

• More: MooTools More is the framework’s official plug-in col­lec­tion. It includes diverse ex­ten­sions that stream­lines the de­vel­op­ment process and adds further features.

• Class: the Class component is the basic class needed to in­stan­ti­ate (generate) reusable class objects and modify existing classes.

• Element: One of the key com­po­nents that can be used to access or generate cross-browser-com­pat­i­ble 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 com­po­nents you need and download them in­di­vid­u­al­ly to create your compiled MooTools framework. For this purpose, a list of in­di­vid­ual modules are divided into the two major cat­e­gories: Core and More. It is also possible to download the complete basic package or all available ex­ten­sions. It’s also possible to download the complete basic package or all available ex­ten­sions.

The MooTools de­vel­op­ers provide a small taste of the in­di­vid­ual com­po­nents with the MooTools demos available on aryweb.nl. There you’ll find pre­sen­ta­tions of drag and drop functions, effects, and forms, as well as an in­tro­duc­tion to MooTools JavaScript, HTML, and CSS code lines.

In the mid-nineties, when dynamic elements were just beginning to enter web de­vel­op­ing projects, the source code’s location was in­creas­ing­ly translo­cat­ed to the client or browser. At first, it was all about Java applets until1995 when Brendan Eich developed the JavaScript pre­de­ces­sor Live­Script for the Netscape 2.0 web browser as an al­ter­na­tive to these ‘mini’ programs. The most no­tice­able dif­fer­ences was that JavaScript replaced classes with pro­to­types and that the pro­grammed lines of code were directly im­ple­ment­ed 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 com­pe­ti­tion to the Java applets. However, the real break­through came in 2005 with the in­tro­duc­tion of web 2.0 and the sub­se­quent de­vel­op­ment of web browsers and the DOM interface. All of a sudden, it was possible to load content in the back­ground using JavaScript that resulted in the first dynamic in­ter­faces emerging in the browser without plug-ins or the need to con­stant­ly com­mu­ni­cate with the web server. Several JavaScript libraries and frame­works have since emerged and as a result JavaScript has been the most widely used script languages for web de­vel­op­ment for the past decade. The average website has si­mul­ta­ne­ous­ly evolved into an in­creas­ing­ly complex and in­ter­ac­tive nexus of web ap­pli­ca­tions - this has made JavaScript and JavaScript frame­works such as MooTools even more important for pro­gram­ming new projects. The script language is also now widely used on the server side

Nowadays, tra­di­tion­al static websites have a hard time staying relevant; in­ter­ac­tive elements have long been a matter of course, so it is all the more important to engage with website visitors using in­no­v­a­tive and user-friendly concepts. Loading speed also plays an important role here. This is largely dependent on how often the web ap­pli­ca­tion accesses the server in order to process incoming browser requests. One kind of web project, which is becoming more popular for JavaScript frame­works such as MooTools, is a single-page ap­pli­ca­tion - 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.

Sto­ry­telling is a par­tic­u­lar­ly popular format as it allows users to present in­for­ma­tion in the form of a small story with the aid of the in­ter­ac­tive elements. In order to display a single-page ap­pli­ca­tion, the web server only needs to exchange a small amount of data; this ensures a generally high per­for­mance. Thanks to JavaScript being widely supported, MooTools ap­pli­ca­tions can be used seam­less­ly across platforms and browsers.

Using JavaScript as a pro­gram­ming language means that the Mootools framework is in good company. Many highly suc­cess­ful al­ter­na­tives, including AngularJS and Ember.js, show just how high the demand for JavaScript frame­works is. Supported by all common browsers, the scripting language is undis­put­ed web standard as it is well suited to building in­ter­ac­tive website com­po­nents. The language is essential for web de­vel­op­ers, even if they do not use a class-based in­her­i­tance system by default. MooTools solves this problem by massively sim­pli­fy­ing the pro­gram­ming of recurring elements.

For a website visitor, the focus on a client-side ex­e­cutable source code seems to be an advantage at first glance; JavaScript elements promise a high level of in­ter­ac­tiv­i­ty while main­tain­ing a very good page loading speed. However, there are problems and risks with MooTools ap­pli­ca­tions caused by the fact that the clients are re­spon­si­ble for the task of compiling code. This means resources are in par­tic­u­lar­ly high demand, po­ten­tial­ly leading to losses in per­for­mance or even a website crash in the case of low-per­form­ing clients and devices. These crashes par­tic­u­lar­ly affect users of mobile devices such as smart­phones and tablets; this amounts to a very sig­nif­i­cant pro­por­tion of internet users. In addition, the crashes often also lead to com­pli­ca­tions with device-specific com­po­nents such as touch screens or the com­par­a­tive­ly small screen size of man devices, which are sometimes not tested properly be­fore­hand, if at all.

Executing code always carries the risk of being accessed ex­ter­nal­ly (i.e. by using tracking or phishing methods), so users are par­tic­u­lar­ly vul­ner­a­ble when accessing web projects that use a large amount of client-side pro­gram­ming. Some internet users protect them­selves against this by using script blocking ex­ten­sions such as NoScript or JS Blocker, which prevents unau­tho­rized 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 ap­pli­ca­tion 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 cus­tomiz­able and reusable classes, following the example of Java and PHP. Using this framework enor­mous­ly improves the ef­fi­cien­cy of JavaScript pro­gram­ming. The strengths of the tool col­lec­tion are also high­light­ed here.

It’s possible to design entire ap­pli­ca­tion based on MooTools, although this is not nec­es­sar­i­ly suitable for every project. While effects, an­i­ma­tions, and AJAX com­po­nents are of course in­creas­ing­ly important in modern web de­vel­op­ment, when im­ple­ment­ing any project, the user ex­pe­ri­ence should always be the main priority. For this purpose, MooTools and JavaScript are generally excellent building blocks, but they should only be used in mod­er­a­tion, otherwise your web ap­pli­ca­tion runs the risk of quickly breaking the technical resources of the user clients.