By Zeno Rocha and Eduardo Lundgren
Let's say you need to create a highly scalable application right now. For DOM manipulation you can use jQuery or Mootols, but then you'll probably need another library for templating, such as Mustache or Handlebars, another for modular loading such as RequireJS or HeadJS, another for MVC structuring such as Backbone or Ember and another for UI components such as Bootstrap or jQueryUI. The problems that will arise from managing a vast array of libraries within one project is self-evident. For starters, who is going to maintain all of those different frameworks, different APIs and different releases when new versions come out?
Liferay faced this very problem. Their flagship product, the Liferay Portal, with 5 million downloads and over 500,000 deployments worldwide, really needed an easy-to-maintain UI architecture. The solution? To adopt YUI3 as a base upon which a superset of components was built. This superset of components is available as AlloyUI , an open-source project created by Eduardo Lundgren and Nate Cavanaugh back in 2009. Since then there have been more than 30,000 downloads, and it's more than production ready, with some pretty impressive companies using it, including Cisco, Sesame Street and Lufthansa.
The idea behind AlloyUI is to make things easier for developers. Let's say your boss comes to you today asking for a Carousel component in your application. You have two options: write everything from scratch,which will take a lot of time if you're not a front-end specialist, or pick an existing framework from the web. The second option seems to be a good plan, but soon you'll end up with a lot of different components with different architectures and APIs. But with AlloyUI, you have a third option. Just look at how easy it is to leverage AlloyUI in your code:
1. Create a simple markup on your JSP.
2. Import the AlloyUI seed file.
3. Create a Carousel based on the markup.
And here's the result:
As you can see, it's very simple to use and AlloyUI has more than 60 user interface components like this. Check out the full list of examples.
28 Jul 2013