Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1   © 2011 Hewlett-Packard Development Company, L.P.
The JavaScript                                       Behind HP webOS:                                        Enyo and Node...
$99                                                       16GB3   © 2011 Hewlett-Packard Development Company, L.P.
$149                                                       32GB4   © 2011 Hewlett-Packard Development Company, L.P.
$250                                                       eBay                                                       L@@K...
6   © 2011 Hewlett-Packard Development Company, L.P.
HP webOS Architecture                                                             webOS Service Bus                       ...
8   © 2011 Hewlett-Packard Development Company, L.P.
Why Should I Care?“…webOS, the OS itself, is an incredibly efficient Web-oriented  operating system. But sitting on top of...
Enyo Applications10   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Enyo Applications11   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Enyo Applications12   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Enyo Applications13   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Enyo Applications14   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Enyo Applications15   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Enyo Applications16   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Enyo Applications17   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Enyo Applications18   © 2011 Hewlett-Packard Development Company, L.P.                                                    ...
Target Application Developers19   © 2011 Hewlett-Packard Development Company, L.P.
Code Reuse Through Components                                                        http://www.flickr.com/photos/hugosimm...
Prefer JavaScript Over HTML{ “js” } > <html>21   © 2011 Hewlett-Packard Development Company, L.P.
Support Flexible Layouts     HFlexBox                                           VFlexBox   Absolute   Nested22   © 2011 He...
Interoperate with GUI Tools like Ares23   © 2011 Hewlett-Packard Development Company, L.P.
Anatomy of an Enyo App24   © 2011 Hewlett-Packard Development Company, L.P.                                               ...
Anatomy of a Enyo Application– appinfo.json     •   Standard webOS application metadata, not needed for use in browser– in...
appinfo.json{ "id": "com.palmdts.enyo.helloworld“,   "version": "1.0.0",   "vendor": "HP“,   "type": "web“,   "main": "ind...
app.jsenyo.kind({   name: "enyo.Canon.HelloWorld",   kind: enyo.Control,   content: "Hello World!"});– This declares a new...
Example of Application Structurecomponents: [  {kind: "AppMenu", components: [    {caption: "Show on One Page", onclick: "...
index.html<!doctype html> <html><head>   <title>enyo HelloWorld</title>   <script src=“../0.10/framework/enyo.js”></script...
Kinds and Inheritance– Each kind has a parent kind– When overridding a method from parent, can call  this.inherited(argume...
Lots of APIs– Object Oriented Programming & Components– DOM Utilities & User Interface Generation– Buttons & Input Control...
32   © 2011 Hewlett-Packard Development Company, L.P.
We’re Still Hard at Work– Improving webOS for TouchPad software updates– Making Enyo work better on iOS and Android– Suppo...
34   © 2011 Hewlett-Packard Development Company, L.P.
Node.js and System Services35   © 2011 Hewlett-Packard Development Company, L.P.
HP webOS Architecture                                                              webOS Service Bus                      ...
webOS as a Mobile Browser OS– webOS device is a combination browser, server, and cache– Apps run in cards (think tabs in y...
webOS Service Bus– Only exposed on the device– Point to point connections– Named services using palm:// URL format– JSON r...
Example: Opening a URL# luna-send -P -n 1 -a com.palmdts.launcher  palm://com.palm.applicationManager/open  {"target":"htt...
Why Write a Service?– Run code without showing a card user interface– Process lots of data without blocking the UI– Full a...
Implementing Your Own Services– Node.js 0.2.3 used as service execution engine– node 0.4.11 coming in next webOS update– s...
Fortune Cookie Demo!42   © 2011 Hewlett-Packard Development Company, L.P.
developer.hpwebos.com                                            pdc@palm.com43   © 2011 Hewlett-Packard Development Compa...
@webOSzombie                                                        MOAR TOUCHPADS BEING                                  ...
45   © 2011 Hewlett-Packard Development Company, L.P.
Upcoming SlideShare
Loading in …5
×

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

4,065 views

Published on

Ben Combee presents on the current state of webOS from the 2011 CapitolJS conference in Washington, DC

Published in: Technology, Business
  • Be the first to comment

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

  1. 1. 1 © 2011 Hewlett-Packard Development Company, L.P.
  2. 2. The JavaScript Behind HP webOS: Enyo and Node.jsBen Combee,API Czar & Developer AdvocateFrameworks Team, webOS Software Group2 © 2011 Hewlett-Packard Development Company, L.P.
  3. 3. $99 16GB3 © 2011 Hewlett-Packard Development Company, L.P.
  4. 4. $149 32GB4 © 2011 Hewlett-Packard Development Company, L.P.
  5. 5. $250 eBay L@@K! LIMITED EDITION5 © 2011 Hewlett-Packard Development Company, L.P.
  6. 6. 6 © 2011 Hewlett-Packard Development Company, L.P.
  7. 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. 8 © 2011 Hewlett-Packard Development Company, L.P.
  9. 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
  10. 10. Enyo Applications10 © 2011 Hewlett-Packard Development Company, L.P. 10
  11. 11. Enyo Applications11 © 2011 Hewlett-Packard Development Company, L.P. 11
  12. 12. Enyo Applications12 © 2011 Hewlett-Packard Development Company, L.P. 12
  13. 13. Enyo Applications13 © 2011 Hewlett-Packard Development Company, L.P. 13
  14. 14. Enyo Applications14 © 2011 Hewlett-Packard Development Company, L.P. 14
  15. 15. Enyo Applications15 © 2011 Hewlett-Packard Development Company, L.P. 15
  16. 16. Enyo Applications16 © 2011 Hewlett-Packard Development Company, L.P. 16
  17. 17. Enyo Applications17 © 2011 Hewlett-Packard Development Company, L.P. 17
  18. 18. Enyo Applications18 © 2011 Hewlett-Packard Development Company, L.P. 18
  19. 19. Target Application Developers19 © 2011 Hewlett-Packard Development Company, L.P.
  20. 20. Code Reuse Through Components http://www.flickr.com/photos/hugosimmelink/150652193420 © 2011 Hewlett-Packard Development Company, L.P.
  21. 21. Prefer JavaScript Over HTML{ “js” } > <html>21 © 2011 Hewlett-Packard Development Company, L.P.
  22. 22. Support Flexible Layouts HFlexBox VFlexBox Absolute Nested22 © 2011 Hewlett-Packard Development Company, L.P.
  23. 23. Interoperate with GUI Tools like Ares23 © 2011 Hewlett-Packard Development Company, L.P.
  24. 24. Anatomy of an Enyo App24 © 2011 Hewlett-Packard Development Company, L.P. 24
  25. 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 application25 © 2011 Hewlett-Packard Development Company, L.P.
  26. 26. 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 }26 © 2011 Hewlett-Packard Development Company, L.P.
  27. 27. app.jsenyo.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 events27 © 2011 Hewlett-Packard Development Company, L.P.
  28. 28. Example of Application Structurecomponents: [ {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. 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 source29 © 2011 Hewlett-Packard Development Company, L.P.
  30. 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. 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 Support31 © 2011 Hewlett-Packard Development Company, L.P.
  32. 32. 32 © 2011 Hewlett-Packard Development Company, L.P.
  33. 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 233 © 2011 Hewlett-Packard Development Company, L.P. 33
  34. 34. 34 © 2011 Hewlett-Packard Development Company, L.P.
  35. 35. Node.js and System Services35 © 2011 Hewlett-Packard Development Company, L.P.
  36. 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. 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 HTTP37 © 2011 Hewlett-Packard Development Company, L.P. 37
  38. 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 applications38 © 2011 Hewlett-Packard Development Company, L.P. 38
  39. 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. 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 sharing40 © 2011 Hewlett-Packard Development Company, L.P. 40
  41. 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 & memory41 © 2011 Hewlett-Packard Development Company, L.P. 41
  42. 42. Fortune Cookie Demo!42 © 2011 Hewlett-Packard Development Company, L.P.
  43. 43. developer.hpwebos.com pdc@palm.com43 © 2011 Hewlett-Packard Development Company, L.P.
  44. 44. @webOSzombie MOAR TOUCHPADS BEING MADE!!!!!!!!! WEBOS ZOMBIE IS UNSTOPPABLE AAAHHH!!! NOTHING SAYS "DEAD PLATFORM" QUITE LIKE PEOPLE LINING UP TO BUY IT44 © 2011 Hewlett-Packard Development Company, L.P.
  45. 45. 45 © 2011 Hewlett-Packard Development Company, L.P.

×