My EnyoJS’s 18 Deadly Tips

Techniques, jutsu and more kungfus… Today I will be sharing  some collection of summarized developer tips I wrote down during my development days with EnyoJS.  I like to compile tutorials in a compact mode give it a brandish name e.g. Super Tips and then, convert into pdf so that, developers can recap and refer to after going through the practical ones.

So, I present to you – my top 18 extremely useful tips for EnyoJS development, (Also known as Enyo’s 18 Deadly Tips Jutsu or in Chinese, Enyo十八掌)!


EnyoJS Core files are located in enyo folder, as for onyx and other layout libraries are stored in lib folder. Essential to get enyo to work you need this two folders at least.

You can use the package loader method or manually link them up enyo/enyo.js and lib/package.js. Make sure enyo load first before other.

To learn more about enyo API visit the link here.


Always use this.$.<controlname> to access the kind’s properties and methods.  If for some reason, this method is failing and causing an error. It could only mean 4 things.

  • One of your create / rendered function, does not have this.inherited(arguments);. A very common mistake.
  • Make sure your controlname is case sensitive.
  • Make sure you really name the control …e.g. { name:”myControlName”, kind:“onyx.Button” } so, it’s this.$.myControlName.
  • You try to use this.$.myControlName, before the line this.inherited(arguments); (usually under create/rendered)  wont work.


If you want to use a control name as parameter, you may want to use this.$[“controlNameInString”] to eval the name.


Always try to use createComponent, rather than addControl. But, destroyClientControls first before creating.


To append a class, use addClass. To remove it use removeClass. To set a style, use setStyle. To append a style, use addStyle. To reset all classes in the kind, just use setClasses(“”)


If you really need to modify core library (rather than extending it) e.g. onyx’s Button.js, you can copy a version out from the lib folder to our source. Rename the kind name as your own. This is only used to temporary isolated fix on bugs.


Always use published method to get things done in a jiffy.


Remember there can only be one fit, calculated at a time. It is calculated and resized on create.

When the control are hidden during create, there’s a chance the control are not rendered fit:true correctly.

Thus, you might need to re-render. For those hidden and toggle-able type of control; best to use destroy and createComponent then render method.


To loop the child components of each kind, use this.$.controlName.controls[length]. These are stored in array.


When using repeater or list, don’t over CSS-style them with shadow, gradient on control within each item. These will affect performance in scrolling.


Use enyo agent e.g. enyo.platform to help detect platform and decide certain platform specific tweaks.


To include other js library e.g. taffy-min.js, just use the loader by modifying the source package.js. I usually, like to toss them inside the lib folder’s root and link them like the code below.



When bubbling event, you can try to append desired return object to the inEvent. It makes it easier for the parent handlers to access it in their inEvent parameter. See code below.

    //Assuming inSender is a button with someProperties carrying some value you want to pass to parent.
    this.bubble("onButtonPressed", {data:inSender.someProperties});


Try to use only bubble and waterfall instead of directly accessing method from parent. It makes the code more reusable and robust.


Always USE a base css kit or helper to help speed up theming and styling of widgets. For example, base css should always have classes like centerDiv, txtAlignCenter, resetElement etc. Things that, you have to keep using again and again and can be appended on top each other.

I happened to have one open sourced here. I’ve been using it and tested in all my enterprise projects. There’s a detail documentation on it too.


You should always have a centralized component for all ajax and web services call. As it’s easier to handle errors and connection problem. See sample here (inside lib folder known as Grappler.js)


Coding long JSON structure / Enyo kind, may sometimes lead to errors (e.g. forget commas somewhere etc). However, thanks to tools like and IDE based javascript linter (if you are familiar with SubLime Editor FBZhong JSLinter plugin) – tremendously helps a lot.


At the end of the project phase, always use the deploy tools to minify and unify all your enyo classes into one the build folder. Get the index to relinked the optimized files and you are all set and good to go. Make sure execute the batch or command file from outside the root. (For some reason 2.2 works that way). For example, on Windows, just go to the root folder of the project, where you can see the tools folder. Execute command line from root like code below. Thats it.


I hope this is useful to all the Enyo developers out there! Keep on enyo-ing! 😉




Leave a Reply

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