Enyo
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:
Built from the ground-up for mobile first - Enyo powers webOS, and was designed from the beginning to be fast and work great on mobile devices
Now available for desktop and cross-browser development - Enyo 2.0 now runs across mobile environments and desktop browsers including Chrome, Firefox, and Internet Explorer
Highly customizable and extensible - Enyo core can be expanded with modules, UI widgets, and more
Lightweight and fast - Enyo 2.0 core is about 13KB gzipped, and built for fast application rendering and performance
Simple, self-contained, and easy to digest - Build increasingly complex functionality starting with simple, reusable components
Built to scale - Enyo was created on the principles needed to build vast, complex mobile and web applications
Open Source - Enyo is available under the Apache License, Version 2.0.
About Enyo
Core Concepts
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 tag and a
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.
A Quick Tour
But enough talk. Here is an Enyo Hello World:
1
2
3
4
5
6
7
8
9
10
11
12
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.
1
2
new enyo.Control({content: "Hello From Enyo", classes: "foo",
style: "color: red", attributes: {tabIndex: 0}).write();
produces
1
Hello From Enyo
Now, the good part comes when you combine more than one Control, e.g.
1
2
3
4
5
6
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:
1
2
3
4
5
6
7
8
9
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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.
Download
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.
Samples
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)
Documentation
The following documentation is currently available:
Tutorial
API Reference
Creating Components
Creating Controls
An Enyo developer guide is coming soon.
Community
Forums
Forums
Contribute
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…
Frequently Asked Questions
What is this?
Enyo is an object-oriented JavaScript application framework emphasizing modularity and encapsulation.
Oh yeah, Enyo — wasn’t that the framework on the TouchPad?
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.
What’s the difference between Enyo 1 and Enyo 2?
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.
Hey, my app was built in Enyo 1. What about me?
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).
Why are you just releasing the core of Enyo 2?
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.
When are the UI widgets coming to Enyo 2?
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.
How much has the Enyo core changed between Enyo 1 and Enyo 2?
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.
Is Enyo just for mobile?
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.
Can I use Enyo to build hosted web apps?
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.
Can I use Enyo to build packaged apps for iOS? Android? Chrome?
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.
What license is Enyo released under?
Enyo is released under the Apache 2.0 license.
How do I download Enyo?
The simplest way is to download the latest release directly from the Enyo site. You can also get the Enyo source on GitHub.
How do I get support?
Visit the Enyo forums to get support from the Enyo team and your fellow Enyo developers.
What platforms does Enyo work on?
Enyo 2 works on any platform with a modern web runtime. Enyo 1 requires WebKit.
License
Enyo is available under the Apache License, Version 2.0.
Posts
No comments: