Enyo 2 javascript framework

Enyo 2 has its roots in the framework developed to power the applications on HP’s TouchPad, an innovative device powered by webOS that embraced the web stack as its primary application environment. Over a thousand apps, including the stock applications that shipped with the TouchPad, were built using Enyo 1. Although Enyo was conceived from the start as platform-independent framework, Enyo 1 out of necessity targeted webOS and the TouchPad specifically.

In January 2012, along with open-sourcing Enyo under the Apache 2.0 license, we refocused our efforts on porting Enyo to work with all modern web environments, including iOS, Android, Safari, Firefox, Chrome, and IE8+. Enyo 2.0 exited beta and was released widely in July 2012, sporting a beautiful cross-platform UI toolkit, a layout library supporting multi-form factor application designs, and lots of other goodies you can use today to build first-class apps for the web or mobile with native look and feel.

In March 2013, the core Enyo team was acquired along with the entire webOS team by LG Electronics, and our cross-platform mission was extended even further, most notably to supporting Smart TV app development. In February 2014, the Enyo team open-sourced the Moonstone and Spotlight libraries, which provide a rich, modern toolkit for building beautiful large-screen app experiences.

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.

Preparing Your Development Environment

To write Enyo code, the only requirement is a text editor.

The best way to get started with Enyo is to grab an Enyo Bootplate project template. The Bootplate template provides a complete starter project containing the latest release of Enyo core and the most common libraries, and supports source control and cross-platform deployment out of the box. You can either clone bootplate using git, or else download a ZIP containing the template.

Another great way to get started is to use the Sampler 2 project template.

Layout is a UI infrastructure for Enyo applications; Onyx a desktop and mobile widget library for Enyo; Enio-ilib an Enyo wrapper for ilib globalization/internationalization library; Canvas an Enyo Canvas library; Spotlight is a package for Moonstone project; Moonstone is a UI library for TV user interfaces

The Enyo framework includes tools based on Node.js for minifying and deploying your applications. Node.js is a server-side JavaScript runtime (similar to the server-side interpreters for Perl, Python, Ruby, and other languages) used for running JavaScript scripts on a server. You can download Node.js from http://nodejs.org and put node.exe in Sampler root folder.

Open a Windows command prompt.

On the command line, navigate to root of your sampler folder.

Run the deploy.bat script:

.\tools\deploy.bat

When the build is complete, there will be two compressed JavaScript files and two compressed CSS files in a folder called build; app.js and app.css contain your application code, while enyo.js and enyo.css contain framework code.

The build folder and a set of complementary files (an index.html file that loads your app, any images or other resources used by the app, etc.) are then copied into the final deployment folder, called deploy.

Open the deployment folder, load index.html in a browser, and see!

Now your project is ready to deploy to various HTML5-ready targets.

During your development process, you may test your code using any modern Web browser. We strongly suggest that you access the application through an HTTP server. If you are not currently running a local Web server, you may find it convenient to install an Apache/MySQL/PHP software bundle.

Bootplate app template

While an Enyo application may be as simple as single HTML5 file, once we start making more sophisticated apps, there are numerous resources to manage, versions and dependencies to track, and debug switches to control. To facilitate a smooth workflow, the Enyo team has adopted a number of conventions regarding application structure. These are embodied in the Bootplate application template (available in both Moonstone and Onyx variants), which you are encouraged to base your own apps upon. They are also described in some detail below.

Enyo is designed so that plugin libraries, applications, and Enyo itself are all portable resources. The use of common folder conventions significantly simplifies the management of these resources.

The suggested folder structure for a plugin library looks like this:

<plugin> assets/ source/ package.js (readmes, licenses, nfos)

source contains JavaScript modules, stylesheets, or other raw (code) materials for the plugin.

assets typically contains images or other resources that the library will need in both production and development/debug environments. There may be as many of these folders as you like, and the folder name is not special--a project might have folders called images and json, for example. However, we suggest that you keep all such items in one folder called assets, so end users will know right away that this folder is necessary for final deployment.

package.js is a manifest listing the files in the library.

The <plugin> folder will often contain other items, such as readmes, licenses, or other miscellaneous files.

The suggested setup for applications is similar, but includes some additions:

The enyo folder contains a copy of the Enyo framework source. It's possible to reference enyo from a common location instead of embedding it in the application proper, but for ease of versioning and sealing, we recommend that you keep a copy of Enyo with your application.

The lib folder contains any plugins or other resources used by the project.

The build folder is the home for minified resources, which are JavaScript and CSS files that have been optimized to remove comments, whitespace, and other features not critical to functionality. In JavaScript files, syntax is sometimes changed (e.g., variable names may be shortened) to reduce file size.

The minified files are produced when the deploy script is run. This script reads configuration info from deploy.json and triggers a call to a separate minify script, which performs the actual optimization. (Note that it generally isn't necessary to call minify directly.)

After deploy is run successfully, the output in build consists of two JavaScript files (app.js, with your app code, and enyo.js, with the framework code) and two corresponding CSS files (app.css and enyo.css).

The tools folder houses two versions of the aforementioned deploy script, deploy.bat (for use on Windows) and deploy.sh (for Mac and Linux).

During development, you'll load the application directly from the source folder. (If you're using a Bootplate template, you'll do this by loading debug.html.) When you're ready to deploy the application, run the deploy script to create a version of the app with the code minified and non-essential files removed.