EnyoJS Tutorial #1 – Getting Started

This tutorial is geared for those already know the basic fundamentals of EnyoJS and the for enyoJS version 2.2+. If you are new to EnyoJS, I suggest follow through my previous post here (you must have fundamentals of how layout and onyx libraries works before trying this tutorials). Okay, let’s begin with downloading the bootplate. – Here.

Always start the project by copying the content of the bootplate to a new project folder. Before we start, I’m going to stress out this important jargon.

In EnyoJS, deploy/package simply means linking up the all the js and css files, minify them and placing them into a final build folder.

Thus, the reason for the whole bootplate folder system is to support the deploy process at the end of the project lifecycle.

Getting started tutorial covers the a typical project lifecycle with enyoJS and how the deploy/packaging system works. Take a look at the diagram below.

 

Diagram above shows a typical EnyoJS bootplate folder. Look confusing right? No worries, just follow my instruction rule from point to point.

  1. Assets folder – All resources like images, icons, banners, fonts and already minified css frameworks are stored inside assets. Stuff here are copied over folder to folder when deployed. Files here are mainly not going through the process. Normally, in all my projets, I use a blueprint like css for all my project and an app specific css. I placed them inside css folder within assets, and img is where my images are stored.
  2. Source folder – is where all your app specific js files are stored. If your project is huge, try to use subfolder like component and control (all within source) so that, they are managed seperately instead of placing everything into source folder.
  3. Lib/yourlib folder – If you have some of your own generic reusable components or controls you want to use, best placed it into lib folder. Only if you have, you can also place them in source if you like. It is optional.
  4. You shouldn’t modifying the root’s package.js. Don’t mess with files within enyo and lib folder, those are core libraries. Root’s package.js SHOULD ALWAYS points to source.
  5. You may delete some other files other than your index.html and package.js in the root to clear things up. Leave package.js alone.
  6. API folder is not essential unless you want to view api available in EnyoJS or compile your JSDoc you classes like JavaDoc.
  7. Build folder is also not essential but, it contains the minified version of enyojs and it’s css. (excluding onyx and layout). You can change your index.html and point to it instead of enyo/enyo.js for convinient sake. This is because, at the end of the project lifecycle, all files including your source files are lumped into a few js files stored inside deploy folder – technically, you will need to modify your index.html again to reflect those changes.
After reading through and understanding these rules, we move on to understanding the whole packaging system. See diagram below now (click for a larger version)

Package.js files are seen all over folders and the root package.js always “depends” on source folder as reference point.

Package.js exist for two reasons,

  • To help developers link up multiple files/subfolders e.g. like java import and load them during development.
  • To instruct the builder to traverse folders within and grab files to deploy as well as minify-packed together.

enyo.depends (“source”) simply means find and load all files mentioned in source/package.js to memory. Take a look at the diagram above to see more how these package and loader works. Let’s say you want to have a folder within source called control, you need to have the package.js saying enyo.depends(“control”); as one of it’s links

I’m ready to begin, where to start?
Just write the main App.js and save it into source folder. Sample code on how the App.js should look like.
enyo.kind({
	name: "App",
	kind: "FittableRows",
	classes: "enyo-fit enyo-unselectable",
 
	// FittableRows means all components are rendered vertically each other
	// enyo-fit and enyo-unselectable is the fefault enyo css must have for an enyo app,
        // enyo-fit the app container is using 100% width and 100% height. They are basically your viewport code
        // enyo-unselectable, stops users from being able to focus on divs and other non input/textarea
        // e.g. copy text popup in Android and IOS.
	components: [
		{
			content:"Hello World",
			fit:true
		}
	]
	// Components is where you write your app view.
	// In Enyo fit:true means calculate and fill up the rest of the width and height.
});

This is the index.html should look like using package.js to load App.js inside source. You only need to link with once source, the root’s source.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script type="text/javascript" src="enyo/enyo.js"></script><script type="text/javascript" src="package.js"></script>
<script type="text/javascript">
// <![CDATA[
	var MyApp = new App();
	MyApp.renderInto(document.body);
// ]]>
</script>

For this sample, the only file inside source folder is App.js, so, we will have a package.js linked to App.js along with other supporting enyo and onyx essential libraries. We do this so that, when the root’s package.js traverse into source, it will query for the next package.js to load into memory.

enyo.depends(
	"$lib/layout",
	"$lib/onyx",
	"App.js"
);

Once done just run the index.html. (make sure you turn off security to allow the app to run as local file) Remember to include more js files as you develop them, always link the up using source’s package.js. Hope this tutorial helps in setting up the environment right for enyo development. Next tutorial will focus more on writing reusable controls, and how to linked pages up.

FYI for those interested in running chrome in windows, just duplicate a desktop chrome link, right click select properties modify the link that have exe to one below.

Win64: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –disable-web-security -–allow-file-access-from-files
Win32: C:\Program Files\Google\Chrome\Application\chrome.exe” –disable-web-security -–allow-file-access-from-files

 

Comments

comments

One thought on “EnyoJS Tutorial #1 – Getting Started

Leave a Reply

Your email address will not be published. Required fields are marked *