Introduction to AlloyUI

This article is a legacy article. It applies to previous versions of the Liferay product. While the article is no longer maintained, the information may still be applicable.

This article provides you with three things:

  1. A basic description of AlloyUI
  2. Outlines some of the benefits of using Alloy, and
  3. Gives a background of the AlloyUI (and YUI) project


What is AlloyUI?

AlloyUI is an open-source, front-end framework built on top of Yahoo! User Interface Library (YUI) It leverages all of YUI's modules and adds even more cutting edge components and features to help build terrific UIs.

  • AlloyUI 2.0 incorporates Twitter Bootstrap's look & feel and use its HTML/CSS powerful capabilities.
  • With AlloyUI you can create modern UI components that provide a consistent look & feel across Liferay Portal.
  • AlloyUI is also server-agnostic, which means that you can use it with any technology.


Why AlloyUI?

Given the popularity of jQuery, a common question is, Why did Liferay chose to build on YUI?

While Liferay Portal 5.0.x used jQuery (our UI Team even contributed to its core) Liferay decided to look for a more scalable, robust application as the portal continued to grow.

Please note that jQuery, or any other JavaScript library, may still be used in Liferay Portal, but AlloyUI is strongly recommended, as it is integrated throughout the portal. If a different application is used, pages may load slower as AlloyUI will still need to load in addition to this library.


What is YUI?

The Yahoo! User Interface Library (YUI) is an open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting.

YUI has ceased development, but AlloyUI is here to stay and will continue to be developed, regardless of the direction that YUI takes. Nate Cavanaugh recently announced the plans for AUI development, which include a change back to JQuery and a backwards compatible version for Liferay 7.x


Why YUI?

AlloyUI was built on YUI for several reasons.

  • YUI facilitates building high quality production-level widgets quickly.
  • YUI has an elegant architecture that is very flexible and easy to extend.
  • It lends itself for using in small scale as well as large scale projects.

Project Structure


File                | Description
:------------------ | :-------------------------------------------------------------
``demos`` | Contains basic examples of the AlloyUI modules.
``build`` | Contains AlloyUI and YUI generated files, once build task has been run. However, this directory is unnecessary for versioning, so it is ignored (.gitignore).
``src`` | Contains the source code of the AlloyUI modules.
``tasks``  | Contains the source code of the Grunt tasks.
``.alloy.json``   | Specifies all dependencies and some configurations.
``.editorconfig``   | Specifies the coding style for different editors/IDEs
``.jsbeautifyrc``   | Specifies the coding format rules for JSBeautify.
``.jshintrc``       | Specifies the linting configurations for JSHint.
``.yeti.json``      | Specifies the testing configurations for Yeti.
```` | Defines the contributing information for the project.
````      | Defines the license agreement for AlloyUI.
````       | Explains the AlloyUI project.
``package.json``    | Lists all NodeJS dependencies.

For more information visit:

Who is behind AlloyUI?

AlloyUI was created in 2009 by:

  • Eduardo Lundgren (Brazil)
  • Nate Cavanaugh (USA)

Today, there are even more contributors. They include:

  • Iliyan Peychev (Spain)
  • Bruno Basto (Brazil)
  • Zeno Rocha (Brazil)


Was this article helpful?
0 out of 0 found this helpful