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.
The JavaScriptBehind HP webOS:Enyo and Node.js<br />Ben Combee<br />Sr. Developer Relations Engineer<br />Frameworks Team,...
http://j.mp/winHPVeer<br />Sign up by noon to win a HP Veer phone<br />
webOS Service Bus<br />JS Service<br />Compiled App<br />“Hybrid” App<br />Web App<br />Built-in webOS Services<br />Node....
The Philosophy of Enyo<br />
Target Application Developers<br />
Enyo Applications<br />8<br />
Enyo Applications<br />9<br />
Enyo Applications<br />10<br />
Enyo Applications<br />11<br />
Code Reuse Through Components<br />http://www.flickr.com/photos/hugosimmelink/1506521934<br />
Interoperate with GUI Tools like Ares<br />
Prefer JavaScript Over HTML<br />{ “js” }><html><br />
HFlexBox<br />VFlexBox<br />Absolute<br />Nested<br />Support Flexible Layouts<br />
Support Device and Desktop<br />
Anatomy of an Enyo App<br />17<br />
Anatomy of a Enyo Application<br />appinfo.json<br />Standard webOS application metadata, not needed for use in browser<br...
appinfo.json<br />{ "id": "com.palmdts.enyo.helloworld“,  "version": "1.0.0",  "vendor": "HP“,  "type": "web“,  "main": "i...
app.js<br />enyo.kind({  name: "enyo.Canon.HelloWorld",  kind: enyo.Control,content: "Hello World!"});<br />This declares ...
components: [  {kind: "AppMenu", components: [    {caption: "Show on One Page", onclick: "showOnePage"}]},{kind: "VFlexBox...
index.html<br /><!doctype html><html><head>  <title>enyoHelloWorld</title>  <script src=“../0.10/framework/enyo.js”></scri...
Kinds and Inheritance<br />Each kind has a parent kind<br />When overridding a method from parent, can callthis.inherited(...
Lots of APIs<br />Object Oriented Programming & Components<br />DOM Utilities & User Interface Generation<br />Buttons & I...
Support webOS Special Features<br />Wrappers for Palm System Services<br />Support for talking to application-provided nod...
Node.js and System Services<br />
webOS Service Bus<br />JS Service<br />Compiled App<br />“Hybrid” App<br />Web App<br />Built-in webOS Services<br />Node....
webOS as a Mobile Browser OS<br />webOS device is a combination browser, server, and cache<br />Apps run in cards (think t...
webOS Service Bus<br />Only exposed on the device<br />Point to point connections<br />Named services using palm:// URL fo...
Example: Opening a URL<br /># luna-send -P -n 1 -a com.palmdts.launcher palm://com.palm.applicationManager/open '{"target"...
Why Write a Service?<br />Run code without showing a card user interface<br />Process lots of data without blocking the UI...
Implementing Your Own Services<br />Node.js 0.2.3 used as service execution engine<br />services.json file maps service ID...
Fortune Cookie Demo!<br />
developer.hpwebos.compdc@palm.com<br />
http://j.mp/winHPVeer<br />Sign up by noon to win a HP Veer phone<br />
JavaScript on HP webOS: Enyo and Node.js
Upcoming SlideShare
Loading in …5
×

JavaScript on HP webOS: Enyo and Node.js

14,405 views

Published on

Published in: Technology
  • Be the first to comment

JavaScript on HP webOS: Enyo and Node.js

  1. 1.
  2. 2. The JavaScriptBehind HP webOS:Enyo and Node.js<br />Ben Combee<br />Sr. Developer Relations Engineer<br />Frameworks Team, Palm GBU<br />
  3. 3.
  4. 4. http://j.mp/winHPVeer<br />Sign up by noon to win a HP Veer phone<br />
  5. 5. webOS Service Bus<br />JS Service<br />Compiled App<br />“Hybrid” App<br />Web App<br />Built-in webOS Services<br />Node.js Service Runtime<br />Web App Runtime (WebKit + v8)<br />Compiled App Runtime<br />Activity Manager<br />UI System Manager<br />Low-level OS Components (Linux)<br />HP webOS Architecture<br />
  6. 6. The Philosophy of Enyo<br />
  7. 7. Target Application Developers<br />
  8. 8. Enyo Applications<br />8<br />
  9. 9. Enyo Applications<br />9<br />
  10. 10. Enyo Applications<br />10<br />
  11. 11. Enyo Applications<br />11<br />
  12. 12. Code Reuse Through Components<br />http://www.flickr.com/photos/hugosimmelink/1506521934<br />
  13. 13. Interoperate with GUI Tools like Ares<br />
  14. 14. Prefer JavaScript Over HTML<br />{ “js” }><html><br />
  15. 15. HFlexBox<br />VFlexBox<br />Absolute<br />Nested<br />Support Flexible Layouts<br />
  16. 16. Support Device and Desktop<br />
  17. 17. Anatomy of an Enyo App<br />17<br />
  18. 18. Anatomy of a Enyo Application<br />appinfo.json<br />Standard webOS application metadata, not needed for use in browser<br />index.html<br />Initial page loaded by system manager, pulls in enyo framework and creates app object<br />depends.js<br />Loaded by enyo.js, JS code to declare what other files are needed for your app<br />app.js<br />Main application object<br />app.css<br />Any styles needed specifically for your application<br />
  19. 19. appinfo.json<br />{ "id": "com.palmdts.enyo.helloworld“, "version": "1.0.0", "vendor": "HP“, "type": "web“, "main": "index.html“, "title": "EnyoHelloWorld“, "icon": "icon.png“, "uiRevision": 2 }<br />
  20. 20. app.js<br />enyo.kind({ name: "enyo.Canon.HelloWorld", kind: enyo.Control,content: "Hello World!"});<br />This declares a new constructor “HelloWorld”, defined as a property of the enyo.Canon object.<br />Your app is it’s own kind, and it gets rendered into your document body by script in your index.html<br />Kinds can own other objects in a complex hierarchy of controls and events<br />
  21. 21. 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}, <br />……<br />Example of Application Structure<br />
  22. 22. index.html<br /><!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><br />Can add launch=“debug” to <script> tag to load all framework source<br />
  23. 23. Kinds and Inheritance<br />Each kind has a parent kind<br />When overridding a method from parent, can callthis.inherited(arguments) to call parent’s implementation<br />enyo.Object is base of the tree<br />set/get/changed methods created for each property<br />enyo.Component is base of all items that go into app tree<br />Components can own a nested collection of objects<br />Components have a “$” hash of all owned objects by name, e.g.this.$.button.setEnabled(true)<br />
  24. 24. Lots of APIs<br />Object Oriented Programming & Components<br />DOM Utilities & User Interface Generation<br />Buttons & Input Controls<br />Dialogs, Popups, and Toasters<br />Lists and Repeaters<br />Web Services and Databases<br />Globalization<br />webOS Platform Support<br />
  25. 25. Support webOS Special Features<br />Wrappers for Palm System Services<br />Support for talking to application-provided node.js services<br />Mocking of Palm services for desktop development/testing<br />Notifications using dashboard<br />Multiple card/window management<br />IFRAME-based cross-app launching<br />OBJECT-based hybrid applications<br />Wireless Printing support<br />
  26. 26.
  27. 27. Node.js and System Services<br />
  28. 28. webOS Service Bus<br />JS Service<br />Compiled App<br />“Hybrid” App<br />Web App<br />Built-in webOS Services<br />Node.js Service Runtime<br />Web App Runtime (WebKit + v8)<br />Compiled App Runtime<br />Activity Manager<br />UI System Manager<br />Low-level OS Components (Linux)<br />HP webOS Architecture<br />
  29. 29. webOS as a Mobile Browser OS<br />webOS device is a combination browser, server, and cache<br />Apps run in cards (think tabs in your desktop browser)<br />Secret to effective multitasking!<br />Apps can talk to system services, application services, or outside web servers<br />Local services use Palm system bus for instead of HTTP<br />29<br />
  30. 30. webOS Service Bus<br />Only exposed on the device<br />Point to point connections<br />Named services using palm:// URL format<br />JSON required for data transport<br />Subscription support for getting status updates<br />Built-in security and application authentication<br />Can be used for both web and PDK applications<br />30<br />
  31. 31. Example: Opening a URL<br /># luna-send -P -n 1 -a com.palmdts.launcher palm://com.palm.applicationManager/open '{"target":"http://2011.texasjavascript.com/"}'<br />{ "processId": "success", "returnValue": true }<br />Public and private buses<br />URL-based targets, JSON-based payloads<br />Can get one or many responses<br />luna-send is the services equivalent of “curl”<br />31<br />
  32. 32. Why Write a Service?<br />Run code without showing a card user interface<br />Process lots of data without blocking the UI<br />Full access to the USB file system<br />Cache data from web services for use when offline<br />Integration with HP Synergy system to extend contacts, calendar, email, messaging, and media sharing<br />32<br />
  33. 33. Implementing Your Own Services<br />Node.js 0.2.3 used as service execution engine<br />services.json file maps service IDs to JavaScript constructors<br />Services can use node.js built-in methods or webOS-specific Foundation classes<br />Service calls use webOS Futures framework to manage request & responses<br />No support for binary node.js extensions, but can run separate apps bundled with service using ChildProcess API<br />Services shut down when inactive to save power & memory<br />33<br />
  34. 34. Fortune Cookie Demo!<br />
  35. 35. developer.hpwebos.compdc@palm.com<br />
  36. 36. http://j.mp/winHPVeer<br />Sign up by noon to win a HP Veer phone<br />

×