Overview About
Download Samples Documentation Community FAQ
License
Enyo is an open source object-oriented JavaScript framework emphasizing encapsulation and modularity. Enyo contains everything you need to create a fast, scalable mobile or web application:
At the heart of Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.
Each piece of an Enyo application is a Component, and Components are constructed out of other Components.
For example, it’s easy to combine an <input> tag and a
<label> tag into a LabeledInput Component, which
you can use (and reuse) as one atomic piece. But that’s just the beginning.
Larger pieces of functionality — a color picker, a fancy report generator,
or an entire painting application — can also be packaged as reusable components.
Use the Enyo encapsulation model to divide and conquer large projects. No particular piece of an application need be especially complex. Because combining Components is central to Enyo’s design, it’s natural to factor complex code into smaller pieces. And because Enyo is modular, all these pieces tend to be reusable — within one project, across your projects, or even by other Enyo developers, if you choose.
This is all part of our strategy to allow developers to focus on creativity and Avoid Repeating Themselves.
But enough talk. Here is an Enyo Hello World:
<!doctype html>
<html>
<head>
<title>Enyo</title>
<script src="/img/spacer.gif">
This example loads an enyo.js build from enyo-2.0b/. If you downloaded
the SDK you have a versioned build file. If you pulled from GitHub, you can either
make your own build using a minify script in enyo/source/minify (requires
Node), or you can load directly from the source (enyo/source/enyo.js).
Loading from source is also called ‘debug loading’ because the modules
are loaded as individual files, which is easier for debugging, but much less efficient.
The base enyo.Control works much like an HTML tag. You can assign classes
and attributes and give it a style. E.g.
new enyo.Control({content: "Hello From Enyo", classes: "foo",
style: "color: red", attributes: {tabIndex: 0}}).write();
produces
<div style="color: red;" tabIndex="0">Hello From Enyo</div>
Now, the good part comes when you combine more than one Control, e.g.
new enyo.Control({
components: [
{content: "Hello From Enyo"},
{tag: "hr"}
]
}).write();
This Control now encapsulates two Controls into one scope (we can encapsulate any
type of Component, that’s why the property is called components.
Controls are one kind of Component.) The outer Control is responsible for the encapsulated
components: it manages their lifecycle, listens to their messages, and maintains
references to them. For example:
new enyo.Control({
components: [
{name: "hello", content: "Hello From Enyo", ontap: "helloTap"},
{tag: "hr"}
],
helloTap: function() {
this.$.hello.addStyles("color: red");
}
}).write();
Here we’ve given one of the components a name (‘hello’) and told
it to send a ‘helloTap’ message when it’s tapped (tap is basically
the same as the DOM click event, but it works in both mouse and touch environments).
The $ property is a hash that references all the sub-components (we don’t
store these references directly on this to avoid name conflicts). Btw,
notice there is no add/remove machinery to listen to this event, that’s all
taken care of.
The main point is that ‘hello’ and the ‘hr’, their references
and behavior, are completely contained inside the outer control. Now, to re-use
this, we need to make it a prototype.
Enyo contains a constructor/prototype-generator that we call enyo.kind. Constructors
that enyo.kind produces are called kinds. Kinds are not magic, they are
just regular old JavaScript constructors. However, kinds simplify our lives (and
our syntax) by allowing us to avoid repeating the same boilerplate code each time
we create a prototype (DRY). We can convert the Control above to a kind like so:
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");
}
});
// make two, they're small
new Hello().write();
new Hello().write();
The code above creates a new kind called “Hello” derived from enyo.Control.
It contains some components and some behavior. I can create as many “Hello”
objects as I want, each instance is independent, and the user of a “Hello”
doesn’t need to know anything about its internals.
This ability to define encapsulated objects and behavior (Components) and to re-use
those encapsulations as prototypes (kinds) is
money.
Roadmap
We have big plans for Enyo, and we’ll be working actively and openly on them.
You can keep your eye on GitHub to see what’s
up on a minute-by-minute basis.
If you just want the latest stable releases of the Enyo core and add-ons, you’ll
always find them here on the Enyo site. We expect to release updates and new goodies
on a regular basis.
We’ll also keep this space updated with a view of what’s coming next
at any given point in time. As of now, the immediate roadmap includes:
March 2012: An Enyo-2-compatible version of the Enyo UI layer originally built for Enyo 1. Whereas the Enyo core is completely cross-browser, this UI layer utilizes some WebKit-specific features and therefore targets desktop and mobile WebKit environments.
April 2012: Ares 2. Ares (for the uninitiated) is a full-featured IDE with a drag-and-drop UI editor that runs entirely in the browser. Ares 2 will be a major update, adding support for Enyo 2, significant interface improvements and a slew of new features.
Two versions of Enyo are currently available:
Enyo 2, released in January 2012, takes Enyo beyond webOS. It doesn’t yet include a UI package, but features a tight, cross-platform core that will serve as the foundation for future Enyo development, supporting libraries and add-ons of all kinds.
Enyo 1 was released in 2011 and used to build the apps for the HP TouchPad. It featured a set of beautiful, responsive UI widgets, but was dependent on WebKit, optimized specifically for TouchPad, and originally licensed only for use on webOS.
To see Enyo in action, check out the Enyo samples. These apps live in the Enyo GitHub repositories and are included in the downloadable Enyo releases, but you can also play with them on the Enyo site.
Enyo Playground
Flickr Search
YouTube Search
Canvas Sample
StyleMatters (Enyo 1.0, requires WebKit-based browser)
Pirate Pig (a canvas game)
The following documentation is currently available:
Tutorial
API Reference
Creating Components
Creating Controls
An Enyo developer guide is coming soon.
Follow the official @EnyoJS twitter account
Follow the entire Enyo team
Want to get involved with Enyo? There’s a lot you can do:
Try it out!
Give us your feedback:
Come talk to us in the Enyo forums.
Report bugs and request features in the Enyo issue tracker on GitHub.
Support your fellow Enyo developers:
Answer questions in the forums.
Spread the word — talk to your developer friends, show off your Enyo creations, and tweet and blog about Enyo as the spirit moves you.
Build and share your own Enyo add-ons.
We’re also open to code contributions to Enyo itself. To be honest, we’re not sure how much participation to expect, or how often we’ll end up accepting contributions. Our approach is to start simply, communicate openly, and see how things go. Here are few notes on contributing code:
If you have an idea for a fix or feature you’d like to contribute, we strongly encourage you to float it for discussion in the Enyo forums first, particularly if it will involve a lot of work to implement.
We’ll consider anything, but it’s safe to say that smaller changes are more likely to be accepted than larger ones, and that contributions to the “outer rings” of Enyo are more likely to be accepted than things that affect the Enyo core.
From a purely logistical point of view, if you have a fix or feature you’d like to contribute, you should fork the Enyo source on GitHub and submit a pull request.
Is there some other way you’d like to contribute to Enyo? Just head to the forums and let us know…
Enyo is an object-oriented JavaScript application framework emphasizing modularity and encapsulation.
Why yes, it was. Enyo 1 was the framework underlying the applications on HP’s TouchPad, with hundreds of apps including the stock applications built using Enyo.
Enyo 2, released in January 2012, is the next step in the evolution of Enyo.
Although Enyo was conceived from the start as platform-independent framework, Enyo 1 out of necessity targeted webOS and the TouchPad specifically. While it’s possible to make an Enyo 1 app run on certain other platforms, it’s harder than it needs to be and the list of compatible platforms is rather short.
For Enyo 2, we’ve focused on creating a rock-solid core that includes Enyo’s fundamental building blocks and works in any modern browser, desktop or mobile.
Enyo 2 doesn’t yet include things like the UI widgets from the TouchPad, or wrappers for functionality specific to webOS (or any other platform). But stay tuned — Enyo 2 will soon be able to do everything Enyo 1 did, and much more.
Don’t worry, Enyo 1 is officially open source now as well under the same Apache 2.0 license as Enyo 2, which essentially means that you’re free to take your Enyo 1 app and put it wherever you’d like, including your server or the friendly neighborhood app market of your choice.
While you’re free to stay on Enyo 1 as long as you like (you can download it or get the source from GitHub), we’ll be focusing our efforts on Enyo 2 going forward, and we encourage you to join us as soon as Enyo 2 has the capabilities your app requires (which won’t be long).
We wanted to open-source Enyo as soon as possible, but in a way that reflected our vision for Enyo as a truly cross-platform framework. With this goal in mind, we decided to cleanly separate the core bits of Enyo into a cross-platform package and release that first, then follow up quickly with an updated UI toolkit and additional features over the next few months.
It is the very next thing we are working on, and we hope to have it out in about a month. We’ll update you with regular builds as work progresses, now that Enyo is an open source project.
Not very much. We took the opportunity to clean up and improve some details, but the core concepts are unchanged. If you are familiar with Enyo 1, you’ll be right at home using Enyo 2.
No, Enyo’s purpose in life is to make it easier for you to build and maintain HTML5 applications of any size and complexity, whether you’re targeting phones, tablets, PCs, or other form factors. Over time, you can expect to see Enyo add-ons that are specialized for various purposes, but the Enyo core will remain broadly applicable.
Yes. Enyo is in no way specialized for packaged apps and can be used in a hosted web app just like any other JavaScript library.
Yes. In the case of iOS, Android and other mobile platforms, you’ll need to wrap your Enyo app in a native “shell.” The easiest way to do that is to use PhoneGap, which also gives your app access to various native capabilities on each platform.
Enyo is released under the Apache 2.0 license.
The simplest way is to download the latest release directly from the Enyo site. You can also get the Enyo source on GitHub.
Visit the Enyo forums to get support from the Enyo team and your fellow Enyo developers.
Enyo 2 works on any platform with a modern web runtime. Enyo 1 requires WebKit.