JS for Mobile: The Enyo Framework (jsconf.us 2011)
Upcoming SlideShare
Loading in...5
×
 

JS for Mobile: The Enyo Framework (jsconf.us 2011)

on

  • 4,190 views

Ben Combee's presentation from jsconf.us 2011 on the HP webOS Enyo framework

Ben Combee's presentation from jsconf.us 2011 on the HP webOS Enyo framework

Statistics

Views

Total Views
4,190
Views on SlideShare
3,924
Embed Views
266

Actions

Likes
2
Downloads
88
Comments
0

6 Embeds 266

http://lanyrd.com 260
https://lanyrd.com 2
http://twitter.com 1
http://walidtalibi.blogspot.com 1
http://www.slideshare.net 1
https://twimg0-a.akamaihd.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

JS for Mobile: The Enyo Framework (jsconf.us 2011) JS for Mobile: The Enyo Framework (jsconf.us 2011) Presentation Transcript

  • 1 © 2011 Hewlett-Packard Development Company, L.P.
  • Enyo: A JS Framework for Mobile DevicesBen CombeeSr. Developer Relations EngineerFrameworks Team, Palm GBU2 © 2011 Hewlett-Packard Development Company, L.P.
  • 3 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • 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)4 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • Enyo Begins with Ares5 © 2011 Hewlett-Packard Development Company, L.P.
  • Enyo Applications6 © 2011 Hewlett-Packard Development Company, L.P. 6
  • Anatomy of an Enyo App7 © 2011 Hewlett-Packard Development Company, L.P. 7
  • 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 application8 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • 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 }– “main” could direct to a different HTML file– Lots more options documented on developer.palm.com9 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • depends.jsenyo.depends( "HelloWorld.js", "HelloWorld.css", "app/");– Supports loading both individual JS and CSS files as well as pointing to directories that have their own depends.js file.– Strings support expansion of $enyo variable to refer to root of framework tree for loading extension modules or themes.10 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • index.html<!doctype html> <html><head> <title>enyo HelloWorld</title> <script src="../../../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 source11 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • app.jsenyo.kind({ name: "enyo.Canon.HelloWorld", kind: enyo.Control, content: "Hello World!"});– Very simple example, this app is just a <div> with “Hello, World!” as its content– Key idea is that your app is a enyo.kind and other code renders it into the page– First kind to be rendered has special powers with handling application- level events12 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • The Philosophy of Enyo13 © 2011 Hewlett-Packard Development Company, L.P.
  • Applications Are the Target14 © 2011 Hewlett-Packard Development Company, L.P.
  • Code Reuse Through Components http://www.flickr.com/photos/hugosimmelink/150652193415 © 2011 Hewlett-Packard Development Company, L.P.
  • 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– Implements a property system to allow setting object values on instantiation with setPROP/getPROP/PROPchanged methods– 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)16 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • Support Flexible Layouts HFlexBox VFlexBox Absolute Nested17 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • Favor Code Generation and Layout Tools http://www.geograph.org.uk/photo/7698018 © 2011 Hewlett-Packard Development Company, L.P.
  • 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},……19 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • Prefer JavaScript Over HTML{ “js” } > <html>20 © 2011 Hewlett-Packard Development Company, L.P.
  • JS Will Get Faster Quicker Than WebKit >21 © 2011 Hewlett-Packard Development Company, L.P.
  • Cache DOM in Local JavaScript Objects22 © 2011 Hewlett-Packard Development Company, L.P.
  • Support Device and Desktop23 © 2011 Hewlett-Packard Development Company, L.P.
  • 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 applications24 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • Enyo as a Platform25 © 2011 Hewlett-Packard Development Company, L.P. 25
  • The Enyo API enyo.ActivityButton enyo.AjaxContent enyo.AlphaDivider enyo.AnimatedImage enyo.Animator enyo.AppMenu enyo.AppMenuItem enyo.BasicCarousel enyo.BasicDrawer enyo.BasicInput enyo.BasicRichText enyo.BasicScroller enyo.BasicService enyo.BasicWebView enyo.Box enyo.Button enyo.ButtonHeader enyo.Carousel enyo.CarouselInternal enyo.CheckBox enyo.Component enyo.ConfirmPrompt enyo.Control enyo.CroppableImage enyo.CrossAppResult enyo.CrossAppUI enyo.CustomButton enyo.CustomListSelector enyo.Dashboard enyo.DatePicker enyo.DbList enyo.DbRepeaterList enyo.DbService enyo.DbService.Request enyo.Dialog enyo.DialogPrompt enyo.dispatcher enyo.Divider enyo.DividerDrawer enyo.dom enyo.DomNode enyo.DomNodeBuilder enyo.Drag enyo.DragScroller enyo.Drawer enyo.EditMenu enyo.FadeScroller enyo.FilePicker enyo.FlexLayout enyo.FloatingHeader enyo.Flyweight enyo.g11n.FmtStyles.prototype enyo.g11n.GeoLocator.prototype enyo.g11n.NameFmt.prototype enyo.g11n.PhoneFmt.prototype enyo.g11n.PhoneNumber.prototype enyo.g11n.TzFmt.prototype enyo.gesture enyo.GrabButton enyo.Grid enyo.Group enyo.GroupedToolButton enyo.HBox enyo.Header enyo.HelpMenu enyo.HFlexBox enyo.HFlexLayout enyo.HLayout enyo.HtmlContent enyo.Hybrid enyo.IconButton enyo.Iframe enyo.Image enyo.ImageView enyo.Input enyo.InputBox enyo.IntegerPicker enyo.Item enyo.json enyo.keyboard enyo.LabeledContainer enyo.LazyControl enyo.ListSelector enyo.ManagedDomBuilder enyo.Menu enyo.MenuCheckItem enyo.MenuItem enyo.MockService enyo.NotificationButton enyo.Object enyo.OrderedContainer enyo.PageHeader enyo.PalmService enyo.palmServices enyo.Pane enyo.PaneLayout enyo.PasswordInput enyo.Picker enyo.PickerButton enyo.PickerGroup enyo.Popup enyo.PopupList enyo.PopupSelect enyo.PrevNextBanner enyo.Progress enyo.ProgressBar enyo.ProgressBarItem enyo.ProgressButton enyo.ProgressSlider enyo.Pushable enyo.RadioButton enyo.RadioGroup enyo.RadioToolButton enyo.RadioToolButtonGroup enyo.Repeater enyo.Request enyo.RichText enyo.RoundedBox enyo.RoundedInput enyo.RowGroup enyo.RowItem enyo.Scrim enyo.ScrimmedConfirmPrompt enyo.Scroller enyo.ScrollFades enyo.ScrollingImage enyo.ScrollStrategy enyo.SearchInput enyo.Selection enyo.Service enyo.SizeableCanvas enyo.SizeableImage enyo.Slider enyo.SlidingPane enyo.SlidingView enyo.SnapScroller enyo.Sound enyo.Spacer enyo.Spinner enyo.SpinnerLarge enyo.Stateful enyo.string enyo.SwipeableItem enyo.SystemService enyo.TabButton enyo.TabGroup enyo.TempDbService enyo.TimePicker enyo.Toaster enyo.ToggleButton enyo.Toolbar enyo.ToolButton enyo.ToolButton2 enyo.ToolButtonGroup enyo.ToolInput enyo.transitions.Fade enyo.transitions.LeftRightFlyin enyo.transitions.Simple enyo.VBox enyo.VFlexBox enyo.VFlexLayout enyo.Video enyo.ViewImage enyo.VirtualCarousel enyo.VirtualList enyo.VirtualRepeater enyo.WebService enyo.WebView enyo.windows26 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • Big Groups of APIs– Language Extensions– OOP and Component System– DOM Management– Input Controls– Containers– Lists and Repeaters– Services– Globalization (G11N)– webOS Platform Support27 © 2011 Hewlett-Packard Development Company, L.P. Confidential
  • DEMOS28 © 2011 Hewlett-Packard Development Company, L.P.
  • 29 © 2011 Hewlett-Packard Development Company, L.P.
  • developer.palm.com pdc@palm.com30 © 2011 Hewlett-Packard Development Company, L.P.
  • 31 © 2011 Hewlett-Packard Development Company, L.P.