JavaScript on HP webOS: Enyo and Node.js

The JavaScriptBehind HP webOS:Enyo and Node.js
Ben Combee
Sr. Developer Relations Engineer
Frameworks Team, Palm GBU

http://j.mp/winHPVeer
Sign up by noon to win a HP Veer phone

webOS Service Bus
JS Service
Compiled App
“Hybrid” App
Web App
Built-in webOS Services
Node.js Service Runtime
Web App Runtime (WebKit + v8)
Compiled App Runtime
Activity Manager
UI System Manager
Low-level OS Components (Linux)
HP webOS Architecture

The Philosophy of Enyo

Target Application Developers

Enyo Applications
8

Enyo Applications
9

Enyo Applications
10

Enyo Applications
11

Code Reuse Through Components
http://www.flickr.com/photos/hugosimmelink/1506521934

Interoperate with GUI Tools like Ares

Prefer JavaScript Over HTML
{ “js” }><html>

HFlexBox
VFlexBox
Absolute
Nested
Support Flexible Layouts

Support Device and Desktop

Anatomy of an Enyo App
17

Anatomy of a Enyo Application
appinfo.json
Standard webOS application metadata, not needed for use in browser
index.html
Initial page loaded by system manager, pulls in enyo framework and creates app object
depends.js
Loaded by enyo.js, JS code to declare what other files are needed for your app
app.js
Main application object
app.css
Any styles needed specifically for your application

appinfo.json
{ "id": "com.palmdts.enyo.helloworld“, "version": "1.0.0", "vendor": "HP“, "type": "web“, "main": "index.html“, "title": "EnyoHelloWorld“, "icon": "icon.png“, "uiRevision": 2 }

app.js
enyo.kind({ name: "enyo.Canon.HelloWorld", kind: enyo.Control,content: "Hello World!"});
This declares a new constructor “HelloWorld”, defined as a property of the enyo.Canon object.
Your app is it’s own kind, and it gets rendered into your document body by script in your index.html
Kinds can own other objects in a complex hierarchy of controls and events

components: [ {kind: "AppMenu", components: [ {caption: "Show on One Page", onclick: "showOnePage"}]},{kind: "VFlexBox", width: "320px",style: "border-right: 1px solid gray;",components: [ {kind: "RadioGroup", style: "padding: 10px;",onChange: "radioGroupChange", components: [ {caption: "Packages", flex: 1},{caption: "Index", flex: 1} ]},{kind: "Pane", flex: 1, onclick: "tocClick",className: "selectable",domAttributes: {"enyo-pass-events": true},
……
Example of Application Structure

index.html
<!doctype html><html><head> <title>enyoHelloWorld</title> <script src=“../0.10/framework/enyo.js”></script></head><body> <script type="text/javascript"> new enyo.Canon.HelloWorld().renderInto(document.body); </script></body></html>
Can add launch=“debug” to <script> tag to load all framework source

Kinds and Inheritance
Each kind has a parent kind
When overridding a method from parent, can callthis.inherited(arguments) to call parent’s implementation
enyo.Object is base of the tree
set/get/changed methods created for each property
enyo.Component is base of all items that go into app tree
Components can own a nested collection of objects
Components have a “$” hash of all owned objects by name, e.g.this.$.button.setEnabled(true)

Lots of APIs
Object Oriented Programming & Components
DOM Utilities & User Interface Generation
Buttons & Input Controls
Dialogs, Popups, and Toasters
Lists and Repeaters
Web Services and Databases
Globalization
webOS Platform Support

Support webOS Special Features
Wrappers for Palm System Services
Support for talking to application-provided node.js services
Mocking of Palm services for desktop development/testing
Notifications using dashboard
Multiple card/window management
IFRAME-based cross-app launching
OBJECT-based hybrid applications
Wireless Printing support

Node.js and System Services

webOS Service Bus
JS Service
Compiled App
“Hybrid” App
Web App
Built-in webOS Services
Node.js Service Runtime
Web App Runtime (WebKit + v8)
Compiled App Runtime
Activity Manager
UI System Manager
Low-level OS Components (Linux)
HP webOS Architecture

webOS as a Mobile Browser OS
webOS device is a combination browser, server, and cache
Apps run in cards (think tabs in your desktop browser)
Secret to effective multitasking!
Apps can talk to system services, application services, or outside web servers
Local services use Palm system bus for instead of HTTP
29

webOS Service Bus
Only exposed on the device
Point to point connections
Named services using palm:// URL format
JSON required for data transport
Subscription support for getting status updates
Built-in security and application authentication
Can be used for both web and PDK applications
30

Example: Opening a URL
# luna-send -P -n 1 -a com.palmdts.launcher palm://com.palm.applicationManager/open '{"target":"http://2011.texasjavascript.com/"}'
{ "processId": "success", "returnValue": true }
Public and private buses
URL-based targets, JSON-based payloads
Can get one or many responses
luna-send is the services equivalent of “curl”
31

Why Write a Service?
Run code without showing a card user interface
Process lots of data without blocking the UI
Full access to the USB file system
Cache data from web services for use when offline
Integration with HP Synergy system to extend contacts, calendar, email, messaging, and media sharing
32

Implementing Your Own Services
Node.js 0.2.3 used as service execution engine
services.json file maps service IDs to JavaScript constructors
Services can use node.js built-in methods or webOS-specific Foundation classes
Service calls use webOS Futures framework to manage request & responses
No support for binary node.js extensions, but can run separate apps bundled with service using ChildProcess API
Services shut down when inactive to save power & memory
33

Fortune Cookie Demo!

developer.hpwebos.compdc@palm.com

http://j.mp/winHPVeer
Sign up by noon to win a HP Veer phone

http://ontwik.com	1397
http://lanyrd.com	519
http://enyowiki.com	82
http://localhost	59
http://vimeo.com	10
https://twimg0-a.akamaihd.net	3
http://us-w1.rockmelt.com	2
http://webcache.googleusercontent.com	2
http://paper.li	2
http://twitter.com	2
http://translate.googleusercontent.com	1
https://si0.twimg.com	1
https://twitter.com	1

JavaScript on HP webOS: Enyo and Node.js

by Ben Combee

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 2,081

Statistics

JavaScript on HP webOS: Enyo and Node.js Presentation Transcript