JavaScript on HP webOS: Enyo and Node.js

14,161 views

Published on

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

No Downloads
Views
Total views
14,161
On SlideShare
0
From Embeds
0
Number of Embeds
2,157
Actions
Shares
0
Downloads
207
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 1.2 Ghz for TouchPad and 1.4 Ghz for Pre3 Pre 3’s unified shaders can render 4 full precision vec4 floating point MADDs for either vertex or fragment operations per clock, plus 4 full precision scalar operations per clock, and that TouchPad has 2x the shader performance and 2x the texl performance of Pre3.
  • We have a lot of new hardware coming upWith the next few devices, we will have a variety of resolutions and aspect ratios (800x480, 1024x768, 320x400). We will also support different texture compression formats and opengl extensions.
  • Developers can use Enyo to create compelling, fantastic tablet applications that can be leveraged across multiple mobile platforms, and the largest software platform of all – the web.Thank you, and now Jason will wrap things up.
  • Launched in June 2009 with Palm Pre and Mojo frameworkMojo was completed quickly and optimized around the 320x480 screen with hardware keyboardMojo 2 effort started coincident with webOS 2.0Some rewrite, but mainly focused on performance
  • With HP purchase, we had time to re-evaluate framework landscapeTeam led by Matt McNulty worked on Ares development toolOriginal engineers were Scott Miles, Steve Orvell, and Frankie FuWrapped Mojo in a version of the Opus.js framework to make it compatible with web-based interface builderOpus was inspired by DojoEnyo grew out of need to make Ares code faster, more flexible
  • HFlexBox – lay out my child widgets horizontally, using CSS3 Flexbox[Click} VFlexBox – lay out my child widgets vertically[Click] Absolute – lay out my child widgets using absolute positioningMostly as a safety net for developers just in case – in practice rarely used for same reasons as on web – inflexible[Click] These can be nested and combined to achieve advanced layouts, which allow for tablet- and phone-friendly user interfaces from the same code base!Panels – like the email app that I first showed at the webOS Dev Day in Novmber, panels adjust automatically to fit various screen sizes, adjusting to a single-panel view which can be swiped or cross-faded on smaller screens, from a multi-panel view on large screens NEXT: FLEXIBLE SIZING
  • 1.2 Ghz for TouchPad and 1.4 Ghz for Pre3 Pre 3’s unified shaders can render 4 full precision vec4 floating point MADDs for either vertex or fragment operations per clock, plus 4 full precision scalar operations per clock, and that TouchPad has 2x the shader performance and 2x the texl performance of Pre3.
  • Launched in June 2009 with Palm Pre and Mojo frameworkMojo was completed quickly and optimized around the 320x480 screen with hardware keyboardMojo 2 effort started coincident with webOS 2.0Some rewrite, but mainly focused on performance
  • Developers can use Enyo to create compelling, fantastic tablet applications that can be leveraged across multiple mobile platforms, and the largest software platform of all – the web.Thank you, and now Jason will wrap things up.
  • Developers can use Enyo to create compelling, fantastic tablet applications that can be leveraged across multiple mobile platforms, and the largest software platform of all – the web.Thank you, and now Jason will wrap things up.
  • 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 />

    ×