JavaScript on HP webOS: Enyo and Node.js
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

JavaScript on HP webOS: Enyo and Node.js

on

  • 14,212 views

 

Statistics

Views

Total Views
14,212
Views on SlideShare
12,064
Embed Views
2,148

Actions

Likes
3
Downloads
199
Comments
0

13 Embeds 2,148

http://ontwik.com 1460
http://lanyrd.com 522
http://enyowiki.com 82
http://localhost 59
http://vimeo.com 10
https://twimg0-a.akamaihd.net 3
http://us-w1.rockmelt.com 2
http://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 2
http://paper.li 2
http://twitter.com 2
https://si0.twimg.com 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 1.
  • 2. The JavaScriptBehind HP webOS:Enyo and Node.js
    Ben Combee
    Sr. Developer Relations Engineer
    Frameworks Team, Palm GBU
  • 3.
  • 4. http://j.mp/winHPVeer
    Sign up by noon to win a HP Veer phone
  • 5. webOS Service Bus
    JS Service
    Compiled App
    “Hybrid” App
    Web App
    Built-in webOS Services
    Node.js Service Runtime
    Web App Runtime (WebKit + v8)
    Compiled App Runtime
    Activity Manager
    UI System Manager
    Low-level OS Components (Linux)
    HP webOS Architecture
  • 6. The Philosophy of Enyo
  • 7. Target Application Developers
  • 8. Enyo Applications
    8
  • 9. Enyo Applications
    9
  • 10. Enyo Applications
    10
  • 11. Enyo Applications
    11
  • 12. Code Reuse Through Components
    http://www.flickr.com/photos/hugosimmelink/1506521934
  • 13. Interoperate with GUI Tools like Ares
  • 14. Prefer JavaScript Over HTML
    { “js” }><html>
  • 15. HFlexBox
    VFlexBox
    Absolute
    Nested
    Support Flexible Layouts
  • 16. Support Device and Desktop
  • 17. Anatomy of an Enyo App
    17
  • 18. 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 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.js
    enyo.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 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 Inheritance
    Each kind has a parent kind
    When overridding a method from parent, can callthis.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)
  • 24. 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 Support
  • 25. Support webOS Special Features
    Wrappers for Palm System Services
    Support for talking to application-provided node.js services
    Mocking of Palm services for desktop development/testing
    Notifications using dashboard
    Multiple card/window management
    IFRAME-based cross-app launching
    OBJECT-based hybrid applications
    Wireless Printing support
  • 26.
  • 27. Node.js and System Services
  • 28. webOS Service Bus
    JS Service
    Compiled App
    “Hybrid” App
    Web App
    Built-in webOS Services
    Node.js Service Runtime
    Web App Runtime (WebKit + v8)
    Compiled App Runtime
    Activity Manager
    UI System Manager
    Low-level OS Components (Linux)
    HP webOS Architecture
  • 29. 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 HTTP
    29
  • 30. 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 applications
    30
  • 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 buses
    URL-based targets, JSON-based payloads
    Can get one or many responses
    luna-send is the services equivalent of “curl”
    31
  • 32. 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 system to extend contacts, calendar, email, messaging, and media sharing
    32
  • 33. Implementing Your Own Services
    Node.js 0.2.3 used as service execution engine
    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 webOS Futures framework to manage request & responses
    No support for binary node.js extensions, but can run separate apps bundled with service using ChildProcess API
    Services shut down when inactive to save power & memory
    33
  • 34. Fortune Cookie Demo!
  • 35. developer.hpwebos.compdc@palm.com
  • 36. http://j.mp/winHPVeer
    Sign up by noon to win a HP Veer phone