SlideShare a Scribd company logo
1 of 37
The JavaScriptBehind HP webOS:Enyo and Node.js Ben Combee Sr. Developer Relations Engineer Frameworks Team, Palm GBU
http://j.mp/winHPVeer Sign up by noon to win a HP Veer phone
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
The Philosophy of Enyo
Target Application Developers
Enyo Applications 8
Enyo Applications 9
Enyo Applications 10
Enyo Applications 11
Code Reuse Through Components http://www.flickr.com/photos/hugosimmelink/1506521934
Interoperate with GUI Tools like Ares
Prefer JavaScript Over HTML { “js” }><html>
HFlexBox VFlexBox Absolute Nested Support Flexible Layouts
Support Device and Desktop
Anatomy of an Enyo App 17
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
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 }
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
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
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
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)
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
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
Node.js and System Services
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
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
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
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
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
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
Fortune Cookie Demo!
developer.hpwebos.compdc@palm.com
http://j.mp/winHPVeer Sign up by noon to win a HP Veer phone
JavaScript on HP webOS: Enyo and Node.js

More Related Content

What's hot

Building Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIRBuilding Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIRfunkatron
 
Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSAntonio Peric-Mazar
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGapMihai Corlan
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - MozillaRobert Nyman
 
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)Antonio Peric-Mazar
 
Modern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.jsModern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.jsJonas Bandi
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with FlexConFoo
 
Utiliser Webpack dans une application Symfony
Utiliser Webpack dans une application SymfonyUtiliser Webpack dans une application Symfony
Utiliser Webpack dans une application SymfonyAlain Hippolyte
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
 
Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Patrick Lauke
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browserSabin Buraga
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web DeveloperEdureka!
 
DEV-1430 IBM Connections Integration
DEV-1430 IBM Connections IntegrationDEV-1430 IBM Connections Integration
DEV-1430 IBM Connections IntegrationJesse Gallagher
 
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Alain Hippolyte
 
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet""BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet"Software Park Thailand
 
WebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and SmartphonesWebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and SmartphonesKyle McInnes
 
October OpenNTF Webinar - What we like about Domino/Notes 12, recommended new...
October OpenNTF Webinar - What we like about Domino/Notes 12, recommended new...October OpenNTF Webinar - What we like about Domino/Notes 12, recommended new...
October OpenNTF Webinar - What we like about Domino/Notes 12, recommended new...Howard Greenberg
 

What's hot (20)

Building Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIRBuilding Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIR
 
Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS
 
HTML5 WebWorks
HTML5 WebWorksHTML5 WebWorks
HTML5 WebWorks
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
 
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
 
Modern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.jsModern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.js
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with Flex
 
Utiliser Webpack dans une application Symfony
Utiliser Webpack dans une application SymfonyUtiliser Webpack dans une application Symfony
Utiliser Webpack dans une application Symfony
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 
Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Uni Tour Germany 11.2009
Uni Tour Germany 11.2009
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
 
REST easy with API Platform
REST easy with API PlatformREST easy with API Platform
REST easy with API Platform
 
DEV-1430 IBM Connections Integration
DEV-1430 IBM Connections IntegrationDEV-1430 IBM Connections Integration
DEV-1430 IBM Connections Integration
 
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
 
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet""BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
 
WebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and SmartphonesWebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and Smartphones
 
October OpenNTF Webinar - What we like about Domino/Notes 12, recommended new...
October OpenNTF Webinar - What we like about Domino/Notes 12, recommended new...October OpenNTF Webinar - What we like about Domino/Notes 12, recommended new...
October OpenNTF Webinar - What we like about Domino/Notes 12, recommended new...
 

Similar to JavaScript on HP webOS: Enyo and Node.js

Intro To Asp Net And Web Forms
Intro To Asp Net And Web FormsIntro To Asp Net And Web Forms
Intro To Asp Net And Web FormsSAMIR BHOGAYTA
 
How to develop asp web applications
How to develop asp web applicationsHow to develop asp web applications
How to develop asp web applicationsDeepankar Pathak
 
Developing an ASP.NET Web Application
Developing an ASP.NET Web ApplicationDeveloping an ASP.NET Web Application
Developing an ASP.NET Web ApplicationRishi Kothari
 
Introduction to Alfresco Surf Platform
Introduction to Alfresco Surf PlatformIntroduction to Alfresco Surf Platform
Introduction to Alfresco Surf PlatformAlfresco Software
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentRandy Connolly
 
Asp.net architecture
Asp.net architectureAsp.net architecture
Asp.net architectureIblesoft
 
A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …
A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …
A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …goodfriday
 
Internet Environment
Internet  EnvironmentInternet  Environment
Internet Environmentguest8fdbdd
 
Developing Chatbots with Google DialogFlow
Developing Chatbots with Google DialogFlowDeveloping Chatbots with Google DialogFlow
Developing Chatbots with Google DialogFlowEveristus Olumese
 
Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyElectron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyUlrich Krause
 
cross-platform-assets-based-front-end-architecture
cross-platform-assets-based-front-end-architecturecross-platform-assets-based-front-end-architecture
cross-platform-assets-based-front-end-architectureOleksandr Tserkovnyi
 
Web engineering 2(lect 2)
Web engineering 2(lect 2)Web engineering 2(lect 2)
Web engineering 2(lect 2)Roohul Amin
 
CIS 451: Introduction to ASP.NET
CIS 451: Introduction to ASP.NETCIS 451: Introduction to ASP.NET
CIS 451: Introduction to ASP.NETwebhostingguy
 
Build APIs With Kapow Mashup Server
Build APIs With Kapow Mashup ServerBuild APIs With Kapow Mashup Server
Build APIs With Kapow Mashup ServerAndreas Krohn
 
Flex In Portal Final
Flex In Portal   FinalFlex In Portal   Final
Flex In Portal FinalSunil Patil
 

Similar to JavaScript on HP webOS: Enyo and Node.js (20)

Intro To Asp Net And Web Forms
Intro To Asp Net And Web FormsIntro To Asp Net And Web Forms
Intro To Asp Net And Web Forms
 
Mashup Y! widget
Mashup Y! widgetMashup Y! widget
Mashup Y! widget
 
How to develop asp web applications
How to develop asp web applicationsHow to develop asp web applications
How to develop asp web applications
 
Developing an ASP.NET Web Application
Developing an ASP.NET Web ApplicationDeveloping an ASP.NET Web Application
Developing an ASP.NET Web Application
 
Introduction to Alfresco Surf Platform
Introduction to Alfresco Surf PlatformIntroduction to Alfresco Surf Platform
Introduction to Alfresco Surf Platform
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 
Asp.net architecture
Asp.net architectureAsp.net architecture
Asp.net architecture
 
A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …
A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …
A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …
 
Internet Environment
Internet  EnvironmentInternet  Environment
Internet Environment
 
php
phpphp
php
 
Developing Chatbots with Google DialogFlow
Developing Chatbots with Google DialogFlowDeveloping Chatbots with Google DialogFlow
Developing Chatbots with Google DialogFlow
 
OneTeam Media Server
OneTeam Media ServerOneTeam Media Server
OneTeam Media Server
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyElectron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easy
 
cross-platform-assets-based-front-end-architecture
cross-platform-assets-based-front-end-architecturecross-platform-assets-based-front-end-architecture
cross-platform-assets-based-front-end-architecture
 
Web engineering 2(lect 2)
Web engineering 2(lect 2)Web engineering 2(lect 2)
Web engineering 2(lect 2)
 
Silverlight Training
Silverlight TrainingSilverlight Training
Silverlight Training
 
CIS 451: Introduction to ASP.NET
CIS 451: Introduction to ASP.NETCIS 451: Introduction to ASP.NET
CIS 451: Introduction to ASP.NET
 
Build APIs With Kapow Mashup Server
Build APIs With Kapow Mashup ServerBuild APIs With Kapow Mashup Server
Build APIs With Kapow Mashup Server
 
Flex In Portal Final
Flex In Portal   FinalFlex In Portal   Final
Flex In Portal Final
 

Recently uploaded

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 

Recently uploaded (20)

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 

JavaScript on HP webOS: Enyo and Node.js

  • 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
  • 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
  • 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
  • 36. http://j.mp/winHPVeer Sign up by noon to win a HP Veer phone

Editor's Notes

  1. 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.
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. 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
  7. 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.
  8. 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
  9. 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.
  10. 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.