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

3,592
-1

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,592
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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.

×