With the proliferation of increasingly unique mobile devices, the growing popularity of phones and tablets with high pixel density displays, and the variety of mobile operating systems (which include niche options such as Tizen and Firefox OS), the task of creating a cross-platform mobile solution can be expensive, daunting, and fraught with compromise. But it doesn’t have to be the case.

Unbeknownst to many developers, a mature, open source (Apache 2.0 License), object-oriented JavaScript framework designed for scaling applications for every imaginable screen resolution, density, and ratio exists. That framework is Enyo.

Originally conceived as a component of webOS 3.0, Enyo was used as the primary framework in which applications for that platform were written. After the HP TouchPad went out in a blaze of glory during the infamous fire sale that occurred 49 days after launch, Enyo was revised to be a platform-agnostic framework for use with all operating systems that have modern browsers. Now at version 2.2, Enyo is a mature platform that can be deployed as a website compatible with the latest versions of Chrome, Safari, and Firefox, and with Internet Explorer (IE) as far back as IE 8. It can also be packaged as an app for Android, iOS, Windows Phone and RT, BlackBerry 10, Firefox OS, and Tizen.

In addition to cross-compatibility, Enyo has substantial advantages under the hood. Foremost among these is the encapsulation model, which allows programmers to reuse and combine components within other components. Enyo was designed from the Don’t Repeat Yourself (DRY) principle of software development. An Enyo component incorporates the markup for the object, the lifecycle management, event handling, and logic internal to the object and an API for an object to be manipulated from other objects. With all of these attributes encapsulated into one component, you can create an instance of that component with one line of code.

The last line of code invokes the Enyo “kind” defined in the sample. (This sample was obtained from www.enyojs.com/about.)

enyo.kind({

name: "Hello",


kind: enyo.Control,


components: [


{name: "hello", content: "Hello From Enyo", ontap: "helloTap"},


{tag: "hr"}


],


helloTap: function() {


this.$.hello.addStyles("color: red");


}


});

new Hello().renderInto(document.body);

Another substantial benefit to Enyo is the Onyx UI components toolbox. With Onyx, you can create an instance of any standard UI feature, such as buttons, checkboxes, toolbars, progress bars, etc. with a trivial amount of code. States for objects in Onyx, such as hover, tapped, active, disabled, or active disabled are predefined, leaving you to write the logic for your program or website without being concerned about arranging elements in DOM and worrying about incompatibility between browsers. View the Onyx UI sampler. In comparison to the “Modern” UI present in Windows 8 and RT, Onyx feels substantially more versatile; it is not an encumbrance to use with a keyboard and mouse.

One feature of Enyo that is, to some extent, unparalleled in web development but is a necessity in compiled programs for iOS and Android is list scrolling. For example, searching for pictures in Flickr would generate thousands of results. Inserting all of those results into the DOM would create a massive memory footprint, and drastically slow down the browser if not simply overwhelm it altogether. Enyo is capable of inserting those objects into the DOM as a user scrolls, and removing items not in view, allowing for a smooth scrolling effect like one would find in Mail applications on iOS and Android. You can view an example of list scrolling in Enyo, and see the Enyo code for that example.

The team responsible for Enyo has also undertaken a related project called Ares, a browser-based IDE for developing applications in Enyo. Ares 2 can be used on a local machine or in the cloud for collaborative projects. Ares 2 is still in a rather early state, though the Enyo team is making great strides in a short amount of time, and it is a high priority on the Enyo project roadmap.

Getting started with Enyo is quite easy. A standard template with the Enyo core and common libraries called the Enyo Bootplate is available on GitHub. In addition to the Enyo Developer Guide,maintained by the developers of the project, O’Reilly Media offers Enyo: Up and Running as an eBook for $9.99 or in print for $14.99. For easy deployment, Enyo can be used with in accordance with Adobe PhoneGap to generate installable apps for all platforms supported by PhoneGap.

Keep your engineering skills up to date by signing up for TechRepublic’s free Software Engineer newsletter, delivered each Tuesday.