enyo

…or how I learned to stop worrying and love JavaScript

without HTML.

Enyo

A JavaScript library originally built for WebOS.

The basics

A kind way to describe objects

Hello world

var example1 = enyo.create({content: 'Hello world'});

example1.renderInto(…);

…et voilà!

Object templates

  • enyo.kind builds kinds from templates
  • A template is a JavaScript object
  • Some properties are special
    • constructor
    • kind
    • name
    • etc.
  • New kinds are automatically registered in their namespaces
  • New kinds introduce more special properties

Let's define a kind

enyo.kind({
    name: 'wtf.Car',
    colour: 'red'
});

var example1 = new wtf.Car();
console.log(example1.colour + ' goes faster');

var example2 = new wtf.Car({colour: 'blue'});
console.log(example2.colour + ' is nice');

Extending an existing kind

enyo.kind({
    name: 'wtf.Extended',
    kind: enyo.Object
});

Default kind is enyo.Control.

Inheritance and constructors

enyo.kind({
    name: 'wtf.Shoop',
    constructor: function() {
        this.inherited(arguments);

        console.log('IMMA FIRIN MAH LAZOR!');
    }
});

var example = new wtf.Shoop();
IMMA FIRIN MAH LAZOR! ◑ ◔ /‾/ [ █▓▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒▒░▒▒░▒░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░ ░░ ░ \_\

Statics

enyo.kind({
    name: 'wtf.Static',
    subject: 'Every Zig',
    statics: {
        gentlemen: function() {
            return new this({subject: 'All your base'});
        }
    },
    whatHappen: function() {
        console.log(this.subject + ' are belong to us!');
    }
});

var example = wtf.Static.gentlemen();
example.whatHappen();

enyo.Object

Where the magic happens

enyo.Object

A base kind that introduces two useful mechanics:
accessors and logging.

Accessors

enyo.kind({
    name: 'wtf.Publisher',
    kind: enyo.Object,
    published: {
        price: "$3.50"
    },
    priceChanged: function(oldValue) {
        console.log('The new price is about ' + this.price);
    }
});

new wtf.Publisher().setPrice("tree fiddy");

Introduces getFoo, setFoo and fooChanged methods.

Logging

enyo.kind({
    name: 'wtf.Verbose',
    kind: enyo.Object,
    constructor: function() {
        this.inherited(arguments);
        this.log('OHAI');
        this.warn('OH NOES!');
        this.error('HOLY COW!!!');
    }
});

new wtf.Verbose();

Gracefully handles missing console interface.

enyo.Component

Introducing containers and ownership

enyo.Component

Acts as a container for other objects.

Adds events and handlers.

Containing components

enyo.kind({
    name: 'wtf.Dawg',
    kind: enyo.Component,
    components: [
        {
            name: 'child',
            kind: enyo.Component,
            text: 'We put a component in your component so you '
                + 'can contain while you contain'
        }
    ]
});

var example = new wtf.Dawg();
console.log(example.$.child.text);

The $ sub-namespace allows access to contained components.

Object's life cycle gets tricky

enyo.kind({
    name: 'wtf.Tricky',
    kind: enyo.Component,
    components: [
        {name: 'child'}
    ],
    create: function() {
        this.log('before sub-components are created…');
        this.inherited(arguments);
        this.log('…and after');
    },
    destroy: function() {
        this.inherited(arguments);
        // clean up remaining references so garbage collection works
    }
});

Use the destroy method to delete a component. It will clear the reference from object's owner if any.

Emitting events

enyo.kind({
    name: 'wtf.Employee',
    kind: enyo.Component,
    events: {
        'onPanic': ''
    },
    fire: function() {
        this.doPanic({reason: 'no work'});
    }
});

Introduces doFoo method and onFoo event.

Handling events

enyo.kind({
    name: 'wtf.Company',
    kind: enyo.Component,
    components: [
        {kind: wtf.Employee, name: 'john', firstName: 'John',
         onPanic: 'escortOut'}
    ],
    escortOut: function(employee, evt) {
        this.warn(employee.firstName + ' had to be escored out');
    }
});

var example = new wtf.Company();
example.$.john.fire();

enyo.Control

Making shit useful™

enyo.Control

Handles UI using DOM. Provides events and methods for common user actions.

It's also the default base for new kinds.

Generating structure

enyo.kind({
    name: 'wtf.Structured',
    kind: enyo.Control,
    tag: 'span',
    classes: 'example',
    content: 'howdy',
    style: "font-family: 'Comic Sans MS';"
});

console.log(new wtf.Structured().generateHtml());
<span style="font-family: 'Comic Sans MS';" class="example" id="structured">howdy</span>

Binding to DOM

enyo.kind({
    name: 'wtf.Greeter',
    kind: enyo.Control,
    components: [
        {content: 'Hello again'}
    ]
});

new wtf.Greeter().renderInto(document.getElementById('example2'));

…et voilà!

Unhandled exception

Just kidding!

Handling DOM events

enyo.kind({
    name: 'wtf.HelloApp',
    kind: enyo.Control,
    components: [
        {kind: enyo.Button, name: 'button', content: 'Hello',
         ontap: 'buttonClicked'}
    ],
    buttonClicked: function(btn, evt) {
        alert("Woo!");
    }
});

new wtf.HelloApp().renderInto(document.getElementById('example3'));

…and so:

Flyweights

Dealing with millions of objects

Flyweight

A control that is only instantiated once but bound to lots of records.

Saves memory

Allows building controls that only render records the user can actually see.

Your phone flyweights.

But what does it look like?

It doesn't.

Enyo provides the structure but not the widgets.

But wait!

Onyx

A real widget library for Enyo

Layout

Provides lists, fittables, panels, slidables and trees

G11n

An i18n/l10n library

Bootplate

Provides a template project with all of the above

MVC

Brings Backbone.js models and collections into play

Canvas

Support for the canvas element and primitives

Further reading

See Enyo website and its control gallery

The end

patrys@room-303.com