Enyo for JS Nerds - Austin JS Meetup, April 2012

2,149
-1

Published on

Ben Combee's slides on the Enyo & Ony

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

  • Be the first to like this

No Downloads
Views
Total Views
2,149
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Enyo for JS Nerds - Austin JS Meetup, April 2012

  1. 1. Enyo + Onyx for JS Nerds Ben Combee (@unwiredben) Austin JavaScript Meetup, April 2012Wednesday, April 18, 2012
  2. 2. Wednesday, April 18, 2012
  3. 3. We need 500 apps for the TouchPad, stat! (that was Enyo 1.0)Wednesday, April 18, 2012
  4. 4. We want apps from devs that aren’t HTML+CSS experts. They need to run everywhere.Wednesday, April 18, 2012
  5. 5. How?Wednesday, April 18, 2012
  6. 6. Components. As seen in Visual Basic. They’re not sexy. They work.Wednesday, April 18, 2012
  7. 7. iOS & Android Chrome & Safari Firefox & IE8+ Open webOS Windows 8Wednesday, April 18, 2012
  8. 8. Open Source. Apache 2.0.Wednesday, April 18, 2012
  9. 9. All source is on github.com/enyojsWednesday, April 18, 2012
  10. 10. Enyo 2.0: The PartsWednesday, April 18, 2012
  11. 11. boot - load all the sourceWednesday, April 18, 2012
  12. 12. package.js: enyo.depends( “app.js”, “../css/app.css”, “$lib/onyx”);Wednesday, April 18, 2012
  13. 13. kernel - OOP, there it isWednesday, April 18, 2012
  14. 14. enyo.kind() is a constructor factoryWednesday, April 18, 2012
  15. 15. enyo.kind({ name: “tv.NewGirl”, kind: “TelevisionShow”, show: function() { this.inherited(arguments); system.play(“ng001.mp4”); } }); var ng = new NewGirl();Wednesday, April 18, 2012
  16. 16. enyo.Object provides property publishingWednesday, April 18, 2012
  17. 17. enyo.kind({ name: “UPC”, kind: enyo.Object, published: { productID: “0000000000” }, create: function() { this. productIDChanged(); }, productIDChanged: function(oldValue) { this.barcode = generate(this.productID); } });Wednesday, April 18, 2012
  18. 18. var x = new UPC({ productID: “123456789X” }); x.setProductID(“5678900002”); pID = x.getProductID();Wednesday, April 18, 2012
  19. 19. enyo.Component enables encapsulation and eventsWednesday, April 18, 2012
  20. 20. enyo.kind({ name: “SithLord”, kind: “Jedi”, events: { onSpeak: “” }, scream: function(message) { doSpeak({ message: message, tone: “whiney” }); }) });Wednesday, April 18, 2012
  21. 21. enyo.kind({ name: “SithLords”, components: [ { kind: SithLord, name: “DarthVader”, onSpeak: “listenToToys” }, { kind: SithLord, name: “Palpatine” }, { kind: SithLord, name: “DarthSidious” } ], listenToToys: function(inSender, inEvent) { alert(inEvent.mesage); } });Wednesday, April 18, 2012
  22. 22. var toys = new SithLords; toys.$.DarthVader.setWeapon(lightsaber); toys.$.DarthVader.throw(toys.$.Palpatine); toys.$.DarthVader.scream(“NOOOOOOO!”);Wednesday, April 18, 2012
  23. 23. enyo.UIComponent provides hooks for layout controlWednesday, April 18, 2012
  24. 24. enyo.Signals is routing for app-level eventsWednesday, April 18, 2012
  25. 25. lang.js - utilities log.js - logging job.js - setTimeout wrapper animation.js - math + reqFrame macroize.js - templatesWednesday, April 18, 2012
  26. 26. dom - dealing with HTMLWednesday, April 18, 2012
  27. 27. enyo.Control: a rendering engine for HTMLWednesday, April 18, 2012
  28. 28. enyo.kind({ name: “BumperSticker”, kind: enyo.Control, tag: “div”, content: “Keep Austin Weird!”, style: “color: blue; font-size: 96pt” }); var bs = new BumperSticker(); bs.renderInto(document.body);Wednesday, April 18, 2012
  29. 29. dispatcher.js: hooks all the standard DOM events into the Enyo schemeWednesday, April 18, 2012
  30. 30. enyo.kind({ name: “BumperSticker”, content: “Keep Austin Weird!”, style: “color: blue; font-size: 96pt”, tap: function() { alert(“someone bumped me!”); } }); var bs = new BumperSticker(); bs.renderInto(document.body);Wednesday, April 18, 2012
  31. 31. ajax - data-access through XHR & JSONPWednesday, April 18, 2012
  32. 32. function apiOK(inAsync, inValue) { alert( “success: “ + inValue ); } function apiFAIL(inAsync, inError) { alert( “FAIL: “ + inError ); } var a = new enyo.Ajax({ url: “http://example.org/api” }).response(apiOK).error(apiFAIL).go();Wednesday, April 18, 2012
  33. 33. ui - building blocks for making themed widgetsWednesday, April 18, 2012
  34. 34. Button.js BaseLayout.js Checkbox.js DragAvatar.js Image.js Group.js Input.js GroupItem.js Repeater.js Selection.js RichText.js ToolDecorator.js Select.jsWednesday, April 18, 2012
  35. 35. touch - enyo.Scroller & touchscreen supportWednesday, April 18, 2012
  36. 36. enyo.Scroller handles how to show 10 lbs of content in a 2lb boxWednesday, April 18, 2012
  37. 37. ...and now, let’s introduce ONYXWednesday, April 18, 2012
  38. 38. enyo is the core (think jQuery)Wednesday, April 18, 2012
  39. 39. Onyx is our jQuery UIWednesday, April 18, 2012
  40. 40. CSS themes + JS behavior + composite controlsWednesday, April 18, 2012
  41. 41. Onyx Sampler - live views of all Onyx controls & sample codeWednesday, April 18, 2012
  42. 42. Support and SamplesWednesday, April 18, 2012
  43. 43. API Viewer - pulls inline documentation from live source tree enyojs.com/apiWednesday, April 18, 2012
  44. 44. CryptoTweets - game using enyo & onyx & web services combee.net/cryptotweetsWednesday, April 18, 2012
  45. 45. Community Gallery - enyo.js/galleryWednesday, April 18, 2012
  46. 46. Community Forums - forums.enyojs.comWednesday, April 18, 2012
  47. 47. Blog - blog.enyojs.comWednesday, April 18, 2012
  48. 48. Twitter: @enyojsWednesday, April 18, 2012

×