HP Enyo

3,659 views

Published on

Presentation on HP Enyo, a HTML5 framework for webOS and other platforms.

Presented at the London Ajax conference on July 2nd 2011

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

  • Be the first to like this

No Downloads
Views
Total views
3,659
On SlideShare
0
From Embeds
0
Number of Embeds
1,800
Actions
Shares
0
Downloads
87
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HP Enyo

    1. 1. HP EnyoShane O’SullivanwebOS, Dojo & Facebook hacker@chofter
    2. 2. The Next 45 MinutesWhat is it?Why is it cool?Show Me The Code!Building a UIThe IntertubesDemo
    3. 3. What Is EnyoHP’s new HTML5 frameworkReplaces Mojo, the original webOS developmentframeworkOut now on HP TouchPad, used to build all “native”apps
    4. 4. Why is Enyo Cool?
    5. 5. Cross PlatformDevelop in ChromeWebOS not required (mostly)Easily fake remote services with hardcoded dataiOS support coming
    6. 6. Fast. Very Fast. Pure JavaScript, no templates Highly memory efficient No references to nodes stored Flexible, class-leading infinite scrolling list
    7. 7. Easy to Extend & CustomiseKind of object orientedInheritance based, nice clear css rulesAll the source available Even the source to all HP’s TouchPad apps.
    8. 8. Really Rapid DevelopmentVery opinionated development model Like it or use something elseLeads to a very fast development processMany, many ready to use components come asstandard
    9. 9. Show Me Code Already!
    10. 10. HTML Is Always Simple<html> <head> <script src="enyo.js" type="text/javascript"> </script> </head> <body> <script type="text/javascript"> enyo.create({kind: "HelloWorld"}) .renderInto(document.body); </script> </body></html>
    11. 11. JS Is Less Simple
    12. 12. OK, so it’s still easyenyo.kind({ name: "HelloWorld", kind: enyo.Control, content: “Hello World!”});
    13. 13. Generates HTML<div>Hello World</div>
    14. 14. Let’s add some eventsenyo.kind({ ... clickHandler: function(event){ // Do something }});
    15. 15. Let’s add a child components: [ { kind: ‘Control’, content: ‘Click Me’, onclick: ‘childClicked’ } ], childClicked: function(){...
    16. 16. No manual event addingRefer to handler functions by a string nameEnyo attaches and removes event handlersReduces chances of memory leaksAuto-route event handling using convention basedfunction names clickHandler, dblclickHandler, touchstartHandler
    17. 17. Define Public Propertiespublished: { firstName: “”},firstNameChanged: function(old){ var n = this.getFirstName();}
    18. 18. Define Custom Eventsevents: { onSomething: “”},nameChanged: function(old){ this.doSomething(“Foo”);}
    19. 19. Easily invoke any event Defining an event creates a function “do” + event name Speeds development through adhering to naming conventions
    20. 20. Working with the Intertubes
    21. 21. Components not just for UIAdd any Enyo instance to components Not just UI elementsAjax requestsNative webOS servicesYour own services
    22. 22. Make An Ajax Callcomponents: [ { kind: ‘WebService’, name: ‘yahoo’, url: ‘http://....’, onSuccess: ‘handleData’ }]
    23. 23. Make An Ajax CallclickHandler: function() { this.$.yahoo.call();},handleData: function(sender, resp) { // Do something}
    24. 24. Any Caveats?Licensing not yet announcedNot yet fully proven to work cross platformNot optimized for a non-installed app. Too big, not possible to slice and dice
    25. 25. So what’s next?Sign up at developer.palm.com and download Enyo webOS 3.0 SDKDemos!
    26. 26. And finally.... the shameless plug Do you know JS, HTML5, Mobile Dev? Facebook is hiring! facebook.com/careers

    ×