Mais conteúdo relacionado
Semelhante a CapitolJS: Enyo, Node.js, & the State of webOS (20)
CapitolJS: Enyo, Node.js, & the State of webOS
- 1. 1 © 2011 Hewlett-Packard Development Company, L.P.
- 2. The JavaScript
Behind HP webOS:
Enyo and Node.js
Ben Combee,
API Czar & Developer Advocate
Frameworks Team, webOS Software Group
2 © 2011 Hewlett-Packard Development Company, L.P.
- 3. $99
16GB
3 © 2011 Hewlett-Packard Development Company, L.P.
- 4. $149
32GB
4 © 2011 Hewlett-Packard Development Company, L.P.
- 5. $250
eBay
L@@K!
LIMITED
EDITION
5 © 2011 Hewlett-Packard Development Company, L.P.
- 6. 6 © 2011 Hewlett-Packard Development Company, L.P.
- 7. 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)
7 © 2011 Hewlett-Packard Development Company, L.P.
- 8. 8 © 2011 Hewlett-Packard Development Company, L.P.
- 9. 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 © 2011 Hewlett-Packard Development Company, L.P.
9
- 20. Code Reuse Through Components
http://www.flickr.com/photos/hugosimmelink/1506521934
20 © 2011 Hewlett-Packard Development Company, L.P.
- 24. Anatomy of an Enyo App
24 © 2011 Hewlett-Packard Development Company, L.P.
24
- 25. 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
25 © 2011 Hewlett-Packard Development Company, L.P.
- 27. 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
27 © 2011 Hewlett-Packard Development Company, L.P.
- 28. 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},
……
28 © 2011 Hewlett-Packard Development Company, L.P.
- 29. 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
29 © 2011 Hewlett-Packard Development Company, L.P.
- 30. 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)
30 © 2011 Hewlett-Packard Development Company, L.P.
- 31. 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
31 © 2011 Hewlett-Packard Development Company, L.P.
- 32. 32 © 2011 Hewlett-Packard Development Company, L.P.
- 33. 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 © 2011 Hewlett-Packard Development Company, L.P.
33
- 34. 34 © 2011 Hewlett-Packard Development Company, L.P.
- 36. 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)
36 © 2011 Hewlett-Packard Development Company, L.P.
- 37. 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 © 2011 Hewlett-Packard Development Company, L.P.
37
- 38. 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 © 2011 Hewlett-Packard Development Company, L.P.
38
- 39. 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 © 2011 Hewlett-Packard Development Company, L.P.
39
- 40. 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 © 2011 Hewlett-Packard Development Company, L.P.
40
- 41. 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 © 2011 Hewlett-Packard Development Company, L.P.
41
- 44. @webOSzombie
MOAR TOUCHPADS BEING
MADE!!!!!!!!! WEBOS ZOMBIE IS
UNSTOPPABLE AAAHHH!!!
NOTHING SAYS "DEAD
PLATFORM" QUITE LIKE
PEOPLE LINING UP TO BUY IT
44 © 2011 Hewlett-Packard Development Company, L.P.
- 45. 45 © 2011 Hewlett-Packard Development Company, L.P.