Creating EnyoJS apps with Yeoman

Posted Thursday, January 1st, 2015 

development

What is Enyo JS

Enyo JS is a framework for building native-quality HTML5 apps that run everywhere! It begun its life in HP webOS (my favorite system ever) and was released as an open source project in the aftermath of the fiasco.

What is known as Enyo 1.0 is tied closely to webOS (a.k.a. a webkit based system). The Enyo team decided that with the open source release they should rewrite Enyo from the scratch to be compatible with other systems thus Enyo 2.x was born.

The current release is Enyo JS 2.4.0 and it is a gorgeous release sporting bindings, mvc, components, and more.

I will write more about Enyo JS as soon as I can but lets try to give you readers a glimpse of what it is all about.

Enyo is about components. Its about building reusable/shareable code into self contained components that may contain other components. Your app is a collection of these components structured in a elegant way.

I could go on for hours on why Enyo is a very elegant system but let me just give you one reason: Enyo JS core libraries and components are built in Enyo JS so if you know how to use the framework you can debug it, also if you read the framework source code you become a better Enyo coder.

You can check A Tour of Enyo to get a quick look at its features

There is a quick tutorial available at github wiki for enyojs/enyo and its very easy to follow.

more

Setup

This is a quick article about using Yeoman to scaffold Enyo projects. Yeoman and its friend tools are all based on NodeJS and you should have it installed before proceeding. If you already have NodeJS, Yeoman, Bower, Grunt setup then you can skip to the Install Enyo Generator section.

Install nodejs

You can fetch and install NodeJS from its own page. There is a chance that the package manager for your own platform has it too. Just check to see if it is not a version from ages ago.

Install Yeoman

Yeoman is a web scaffolding tool for modern webapps. It helps you generate the skeleton of your app and depending on the generator you use it is able to help you with many common tasks such as generating models, views and more.

Yeoman is a node package and can be installed with NPM after you have Node JS installed. The command below will install Yeoman.

$ npm install -g yo

We will use Yeoman to scaffold Enyo projects based on the Enyo Bootplate.

Install Bower

Bower is a package manager for the web. It helps you manage dependencies such as installing and mantaining popular libraries like jQuery, underscore, backbone.

Bower is also a node package that can be installed with NPM just like Yeoman.

$ npm install -g bower

We’ll be able to use Bower to install libraries and components from the Enyo Community Gallery and from other internet accessible places such as GitHub.

Install grunt

Grunt JS is a task runner for JS projects. It helps you to run repetitive tasks such as minifying code, concatenating stuff, processins SASS and other files into their end product.

As with other npm based tools you can install it with:

$ npm install -g grunt-cli

We’ll use grunt to run a local server to test our Enyo project.

Install the generator-enyo package

You can think of a generator like a plug-in. By using different generators, you get to choose what type of application you wish to create, such as a Backbone application, Chrome/Firefox extension or a Firefox OS app.

We’ll install and use our Enyo Generator to scaffold Enyo Bootplate based apps.

To install the Enyo Generator package run:

$ npm install -g generator-enyo

Scaffolding your application

Generators operate in empty directories. Create one for your new project and run this commands:

$ mkdir my-cool-project
$ cd my-cool-project
$ yo enyo

The yo enyo line is the one that runs the generator. It builds a project based on the Enyo 2.4.0 bootplate* already including both theonyx and layout libraries**.

Adding libraries

The Enyo Community Gallery holds many reusable components made by the Enyo Community. Installing them usually involves downloading the code from Github (or similar service) and dropping it into a folder in the lib folder (a.k.a. $LIB).

This process can become really tedious after some projects. To solve this the Enyo generator sets Bower to install stuff inside that library folder by default. This way you can use Bower to install stuff from Gihub as seen in:

$ bower install webOS-ports/webos-lib

Just remember to add the newly installed lib to your package.js.

Running a local server

The gruntfile comes with the connect task already set up. You can use it to launch a local server pointed at the deploy folder or pointed to root folder.

$ grunt connect:debug

or

$ grunt connect:deploy

This makes testing your Enyo project much easier.