CapitolJS: Enyo, Node.js, & the State of webOS

The JavaScript
Behind HP webOS:
Enyo and Node.js
Ben Combee,
API Czar & Developer Advocate
Frameworks Team, webOS Software Group


$99
16GB


$149
32GB


$250
eBay
L@@K!
LIMITED
EDITION


HP webOS Architecture

webOS Service Bus

JS Service
Web App “Hybrid” App Compiled App
Built-in
Node.js webOS
Service Services
Web App Runtime Compiled App
Runtime
(WebKit + v8) Runtime

UI System Manager Activity Manager

Low-level OS Components (Linux)


Why Should I Care?

“…webOS, the OS itself, is an incredibly efficient Web-oriented
operating system. But sitting on top of webOS is even more important,
and that’s the development environment called Enyo …. It is the
leading Web app development environment today. We can deploy
Web applications on webOS. We can deploy on top of Android, iOS, or
Windows. So what this gives the development community is a
common platform for which they can develop applications and deploy
them on the operating system of choice”
-- Shane Robison
Exec VP and Chief Strategy and Technology Officer, HP

(http://www.crn.com/news/applications-os/231601470/hp-committed-to-webos-as-enterprise-development-platform.htm)

9

Enyo Applications

10

Enyo Applications

11

Enyo Applications

12

Enyo Applications

13

Enyo Applications

14

Enyo Applications

15

Enyo Applications

16

Enyo Applications

17

Enyo Applications

18

Target Application Developers


Code Reuse Through Components

http://www.flickr.com/photos/hugosimmelink/1506521934

Prefer JavaScript Over HTML

{ “js” } > <html>


Support Flexible Layouts

HFlexBox VFlexBox Absolute Nested


Interoperate with GUI Tools like Ares


Anatomy of an Enyo App

24

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": "Enyo HelloWorld“,
"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


Example of Application Structure
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},
……


index.html
<!doctype html>
<html><head>
<title>enyo HelloWorld</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 call
this.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


We’re Still Hard at Work

– Improving webOS for TouchPad software updates
– Making Enyo work better on iOS and Android
– Supporting Enyo as great app environment for the desktop browser
– Building World-class developer tools with Ares 2

33

Node.js and System Services


HP webOS Architecture

webOS Service Bus

JS Service
Web App “Hybrid” App Compiled App
Built-in
Node.js webOS
Service Services
Web App Runtime Compiled App
Runtime
(WebKit + v8) Runtime

UI System Manager Activity Manager

Low-level OS Components (Linux)


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

37

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

38

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”

39

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 to provision contacts, calendar, email,
messaging, and media sharing

40

Implementing Your Own Services

– Node.js 0.2.3 used as service execution engine
– node 0.4.11 coming in next webOS update
– 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 a futures-based framework to manage request &
responses
– Services shut down when inactive to save power & memory

41

Fortune Cookie Demo!


developer.hpwebos.com

pdc@palm.com


@webOSzombie

MOAR TOUCHPADS BEING
MADE!!!!!!!!! WEBOS ZOMBIE IS
UNSTOPPABLE AAAHHH!!!

NOTHING SAYS "DEAD
PLATFORM" QUITE LIKE
PEOPLE LINING UP TO BUY IT


CapitolJS: Enyo, Node.js, & the State of webOS

More Related Content

What's hot

Similar to CapitolJS: Enyo, Node.js, & the State of webOS

Recently uploaded

CapitolJS: Enyo, Node.js, & the State of webOS