HP Enyo

HP Enyo
Shane O’Sullivan
webOS, Dojo & Facebook hacker
@chofter

The Next 45 Minutes

What is it?
Why is it cool?
Show Me The Code!
Building a UI
The Intertubes
Demo

What Is Enyo
HP’s new HTML5 framework

Replaces Mojo, the original webOS development
framework

Out now on HP TouchPad, used to build all “native”
apps

Cross Platform

Develop in Chrome
WebOS not required (mostly)
Easily fake remote services with hardcoded data
iOS support coming

Fast. Very Fast.

Pure JavaScript, no templates

Highly memory efficient
No references to nodes stored

Flexible, class-leading infinite scrolling list

Easy to Extend & Customise

Kind of object oriented

Inheritance based, nice clear css rules

All the source available
Even the source to all HP’s TouchPad apps.

Really Rapid Development

Very opinionated development model
Like it or use something else
Leads to a very fast development process
Many, many ready to use components come as
standard

HTML Is Always Simple
<html>
<head>
<script src="enyo.js" type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
enyo.create({kind: "HelloWorld"})
.renderInto(document.body);
</script>
</body>
</html>

OK, so it’s still easy

enyo.kind({
name: "HelloWorld",
kind: enyo.Control,
content: “Hello World!”
});

Generates HTML

<div>Hello World</div>

Let’s add some events
enyo.kind({
...
clickHandler: function(event){
// Do something
}
});

Let’s add a child
components: [
{
kind: ‘Control’,
content: ‘Click Me’,
onclick: ‘childClicked’
}
],
childClicked: function(){...

No manual event adding

Refer to handler functions by a string name
Enyo attaches and removes event handlers
Reduces chances of memory leaks
Auto-route event handling using convention based
function names
clickHandler, dblclickHandler, touchstartHandler

Define Public Properties
published: {
firstName: “”
},

firstNameChanged: function(old){
var n = this.getFirstName();
}

Define Custom Events
events: {
onSomething: “”
},

nameChanged: function(old){
this.doSomething(“Foo”);
}

Easily invoke any event

Defining an event creates a function
“do” + event name
Speeds development through adhering to naming
conventions

Components not just for UI

Add any Enyo instance to components
Not just UI elements
Ajax requests
Native webOS services
Your own services

Make An Ajax Call
components: [
{
kind: ‘WebService’,
name: ‘yahoo’,
url: ‘http://....’,
onSuccess: ‘handleData’
}
]

Make An Ajax Call
clickHandler: function() {
this.$.yahoo.call();
},

handleData:
function(sender, resp) {
// Do something
}

Any Caveats?

Licensing not yet announced
Not yet fully proven to work cross platform
Not optimized for a non-installed app.
Too big, not possible to slice and dice

So what’s next?

Sign up at developer.palm.com and download
Enyo
webOS 3.0 SDK
Demos!

And finally.... the shameless plug

Do you know JS, HTML5, Mobile Dev?

Facebook is hiring!

facebook.com/careers

HP Enyo

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HP Enyo

Similar to HP Enyo (20)

Recently uploaded

Recently uploaded (20)

HP Enyo

Editor's Notes