JavaScript on HP webOS: Enyo and Node.js
Download as PPTX, PDF3 likes4,097 views
This document discusses the technologies behind the HP webOS platform, including Enyo and Node.js. It provides an overview of Enyo, describing it as a framework for building web applications that targets developers and supports flexible layouts, device and desktop applications, and code reuse through components. It also discusses Node.js and how it is used as the runtime for webOS services, allowing applications to access system services and process data without blocking the user interface. The architecture of webOS applications is also summarized, including how the Enyo framework is used to build the user interface and 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}, ……Example of Application Structure](https://image.slidesharecdn.com/txjs2011presentation-110611191124-phpapp02/85/JavaScript-on-HP-webOS-Enyo-and-Node-js-21-320.jpg)
JavaScript on HP webOS: Enyo and Node.js
- 2. The JavaScriptBehind HP webOS:Enyo and Node.jsBen CombeeSr. Developer Relations EngineerFrameworks Team, Palm GBU
- 4. http://j.mp/winHPVeerSign up by noon to win a HP Veer phone
- 5. webOS Service BusJS ServiceCompiled App“Hybrid” AppWeb AppBuilt-in webOS ServicesNode.js Service RuntimeWeb App Runtime (WebKit + v8)Compiled App RuntimeActivity ManagerUI System ManagerLow-level OS Components (Linux)HP webOS Architecture
- 6. The Philosophy of Enyo
- 12. Code Reuse Through Componentshttp://www.flickr.com/photos/hugosimmelink/1506521934
- 13. Interoperate with GUI Tools like Ares
- 14. Prefer JavaScript Over HTML{ “js” }><html>
- 16. Support Device and Desktop
- 17. Anatomy of an Enyo App17
- 18. Anatomy of a Enyo Applicationappinfo.jsonStandard webOS application metadata, not needed for use in browserindex.htmlInitial page loaded by system manager, pulls in enyo framework and creates app objectdepends.jsLoaded by enyo.js, JS code to declare what other files are needed for your appapp.jsMain application objectapp.cssAny styles needed specifically for your application
- 19. appinfo.json{ "id": "com.palmdts.enyo.helloworld“, "version": "1.0.0", "vendor": "HP“, "type": "web“, "main": "index.html“, "title": "EnyoHelloWorld“, "icon": "icon.png“, "uiRevision": 2 }
- 20. 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.htmlKinds can own other objects in a complex hierarchy of controls and events
- 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}, ……Example of Application Structure
- 22. index.html<!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>Can add launch=“debug” to <script> tag to load all framework source
- 23. Kinds and InheritanceEach kind has a parent kindWhen overridding a method from parent, can callthis.inherited(arguments) to call parent’s implementationenyo.Object is base of the treeset/get/changed methods created for each propertyenyo.Component is base of all items that go into app treeComponents can own a nested collection of objectsComponents have a “$” hash of all owned objects by name, e.g.this.$.button.setEnabled(true)
- 24. Lots of APIsObject Oriented Programming & ComponentsDOM Utilities & User Interface GenerationButtons & Input ControlsDialogs, Popups, and ToastersLists and RepeatersWeb Services and DatabasesGlobalizationwebOS Platform Support
- 25. Support webOS Special FeaturesWrappers for Palm System ServicesSupport for talking to application-provided node.js servicesMocking of Palm services for desktop development/testingNotifications using dashboardMultiple card/window managementIFRAME-based cross-app launchingOBJECT-based hybrid applicationsWireless Printing support
- 27. Node.js and System Services
- 28. webOS Service BusJS ServiceCompiled App“Hybrid” AppWeb AppBuilt-in webOS ServicesNode.js Service RuntimeWeb App Runtime (WebKit + v8)Compiled App RuntimeActivity ManagerUI System ManagerLow-level OS Components (Linux)HP webOS Architecture
- 29. webOS as a Mobile Browser OSwebOS device is a combination browser, server, and cacheApps run in cards (think tabs in your desktop browser)Secret to effective multitasking!Apps can talk to system services, application services, or outside web serversLocal services use Palm system bus for instead of HTTP29
- 30. webOS Service BusOnly exposed on the devicePoint to point connectionsNamed services using palm:// URL formatJSON required for data transportSubscription support for getting status updatesBuilt-in security and application authenticationCan be used for both web and PDK applications30
- 31. 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 busesURL-based targets, JSON-based payloadsCan get one or many responsesluna-send is the services equivalent of “curl”31
- 32. Why Write a Service?Run code without showing a card user interfaceProcess lots of data without blocking the UIFull access to the USB file systemCache data from web services for use when offlineIntegration with HP Synergy system to extend contacts, calendar, email, messaging, and media sharing32
- 33. Implementing Your Own ServicesNode.js 0.2.3 used as service execution engineservices.json file maps service IDs to JavaScript constructorsServices can use node.js built-in methods or webOS-specific Foundation classesService calls use webOS Futures framework to manage request & responsesNo support for binary node.js extensions, but can run separate apps bundled with service using ChildProcess APIServices shut down when inactive to save power & memory33
- 36. http://j.mp/winHPVeerSign up by noon to win a HP Veer phone
Editor's Notes
- #3: 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.
- #4: 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.
- #5: 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.
- #6: 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
- #14: 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
- #16: 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
- #17: 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.
- #18: 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
- #36: 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.
- #37: 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.