Enyo: Up and Running

Chapter 1. Light It Up

One of the best ways to get familiar with Enyo is to get a taste for what an Enyo app looks like. We’re going to do a little virtual time travel and fast-forward to a point just after you finish reading this book. We’re going to imagine you work for a software company that produces apps for customers.

A New Project

Your boss just came and told you that he needs a light implemented in JavaScript right away. He tells you that your company’s best client needs to be able to embed a light app on their web page and it must work cross-platform. Fortunately, you’ve just finished reading this book and are excited to use Enyo on a project.

You decide to make a nice yellow circle and draw that on the screen:

enyo.ready(function() {
    enyo.kind({
        name: 'Light',
        style: 'width: 50px; height: 50px; border-radius: 50%;' +
            'background: yellow;'
    });

    new enyo.Application({ name: 'app', view: 'Light' });
});

Tip

Try it out: jsFiddle.

With Enyo, you don’t (usually) have to worry about the HTML that makes up your app. Enyo creates it all for you. In this case, you’ve created a new kind (Enyo’s building blocks are called kinds, you recall) called Light and you used a little CSS magic you found on the Web to draw a circle without the use of images or the canvas.

While using Enyo’s Application component, you placed the new kind into the page’s body element, causing Enyo to create the HTML. You ...