The Path of Ascension – EnyoJS

EnyoJS is a special HTML5 framework that originates from the Web OS. You’ll be asking yeah yeah we have alot of HTML5 already (jQueryMobile, KendoMobile, JQMobi and Sencha)

So why EnyoJS?

Here are some of the features I like about EnyoJS

  1. Everything is “almost” object oriented – Enyo Classes are called “Kind”, making everything you do modular and job can be distributed, performance tested and unit tested long before, actual integration of all pages are done. A lot of framework suffers performance problem (especially on droids) during the mid level of the project. It gets worst if you work in larger team then codes comes everywhere packed into one. By the time, it might be already too late.
  2. Enyo encourage, building custom components or sub-classing its own core component. The modular basic of enyo kind makes it extremely reusable and re-deployable in every project. And also as a workaround should a enyo’s own components should you encounter some weird bug. Nobody is perfect, sometimes bugs DO Happen, but when they happened at least is tackled in an isolated manner. (E.g. it’s just a popup component having that weird problem. – Just remark the component do a quarantine and tackle the bug)
  3. Each enyo component has same set of behaviour and can be override like a Java class. You then instance it into some html node, in the end they all become html5 codes with good and steady hardware acceleration ready in the css part. Enyo codes including the core components coded like class and not some minified open source libraries which you have no idea what or how to fix the bug. You can even modify Enyo core components to fix their bug if you want.
  4. The most important component of all html5 webapp, is the scroll strategy and how it handle list efficiently. By far, enyo’s scroll and list/repeater handling are one of the best I’ve seen. This is way far more better than using some libraries like iScroll all over the pages just for scrolling purposes later found yourself into rendering problem on other platform and have to find alternative open source plugin to try to fix the problem all over the pages.
  5. Not everything is perfect about Enyo. Like all other framework performance will suffer in some version of droid sometimes, if not careful even IOS and Windows Phone 8 . However, there’s always a manual workaround things. We are not bound to ready made widgets or components behaviour nor styling rules like jQueryMobile’s data-role, data-enhance all over the places etc.
  6. EnyoJS is JSON driven programming to code HTML, if you do not close a JSON string properly, the page returns an error and shows a white screen. Isn’t that great for unit testing on development as compared to some framework that uses pure html continues to load the pages. You may not think this is a big deal however, what you may not notice is that some day all it takes is your div tag was left “unclosed” . The page gets weirder over time as complexity of codes pilling up and if you use JS templates it gets replicated all over the places even worst.
  7. Also comes with a packager for it’s JS that will minify JS and deploy the app.
  8. Has it’s own theming style which allows you to even skin the core component (e.g. like Adobe Flex component skinning) using CSS LESS.
  9. Good community build up around experts from WebOS and cross platformers (these guys built a Web + OS not some small tiny jquerymobile app – come on).
  10. Seriously great for multi team big enterprise projects.

Now I’m gonna talk about some cons in Enyo

  1. EnyoJS is new and there aren’t many sexy themes out there to make them looked pretty when you compared with Sencha, Kendo and JQueryMobile. But, hey if you know css3 or optionally LESS well, skinning components is piece of cake man.
  2. You still face performance problem like lazy rendering, hardware acceleration flickers and android keyboard overlay. But, most of the problem can be handled in CSS level and using manual override. (e.g. To handle Android Webcore miss a drag problem HINT: use flick!)
  3. Enyo Package.js and it’s bootplate folders are very confusing and with documentation lying all over the places it’s not helping either. In fact, these was the reason why, I did not consider EnyoJS as an option until my company was kind enough to encourage me to use all my company time to cover my research and study.

Done reading, where to start???

  • For more information about how enyo scripts are written visit http://enyojs.com/about/ and a video introduction here
  • There’s a beginner tutorial coming up this month. Sorry to those I promised earlier, there’s just too much going on in my life. I simply do not have the time to do it YET. Doesn’t mean I wont.

 

To Quickly (skipping the bootplate and package concept) start using and learning enyoJS, I suggest downloading of the bootplate, then copy out the following to your project folder and forget the rest…

  1. Enyo folder (root) – you don’t modify these files. Entire enyo framework
  2. Lib folder (root) – you can open and see how controls and component are developed. Enyo component theme is inside lib folder don’t worry
  3. Construct your html file like below.
  4. Write your enyo.kind inside App.js, just test it by dragging file into browser like Safari.
<!DOCTYPE html>
<html>
<head>
	<title>My Enyo Test</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="css/your.css">
 
	<script src="enyo/enyo.js" type="text/javascript"></script>
	<!-- package loads every js classes files and it's css into memory so that, you only link package.js will do -->
	<script src="lib/layout/package.js" type="text/javascript"></script>
	<script src="lib/onyx/package.js" type="text/javascript"></script>
	<!-- Just load all your controls, components here like App.js, best to put those js in source folder as this is enyo development standard -->	
	<script src="source/App.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
	//Assuming App.js Enyo.kind's name is called App.
	new App().renderInto( document.body );
</script>
</body>
</html>