Enyo for JS Nerds - Austin JS Meetup, April 2012

  • 1,877 views
Uploaded on

Ben Combee's slides on the Enyo & Ony

Ben Combee's slides on the Enyo & Ony

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,877
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
28
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Enyo + Onyx for JS Nerds Ben Combee (@unwiredben) Austin JavaScript Meetup, April 2012Wednesday, April 18, 2012
  • 2. Wednesday, April 18, 2012
  • 3. We need 500 apps for the TouchPad, stat! (that was Enyo 1.0)Wednesday, April 18, 2012
  • 4. We want apps from devs that aren’t HTML+CSS experts. They need to run everywhere.Wednesday, April 18, 2012
  • 5. How?Wednesday, April 18, 2012
  • 6. Components. As seen in Visual Basic. They’re not sexy. They work.Wednesday, April 18, 2012
  • 7. iOS & Android Chrome & Safari Firefox & IE8+ Open webOS Windows 8Wednesday, April 18, 2012
  • 8. Open Source. Apache 2.0.Wednesday, April 18, 2012
  • 9. All source is on github.com/enyojsWednesday, April 18, 2012
  • 10. Enyo 2.0: The PartsWednesday, April 18, 2012
  • 11. boot - load all the sourceWednesday, April 18, 2012
  • 12. package.js: enyo.depends( “app.js”, “../css/app.css”, “$lib/onyx”);Wednesday, April 18, 2012
  • 13. kernel - OOP, there it isWednesday, April 18, 2012
  • 14. enyo.kind() is a constructor factoryWednesday, April 18, 2012
  • 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. enyo.Object provides property publishingWednesday, April 18, 2012
  • 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. var x = new UPC({ productID: “123456789X” }); x.setProductID(“5678900002”); pID = x.getProductID();Wednesday, April 18, 2012
  • 19. enyo.Component enables encapsulation and eventsWednesday, April 18, 2012
  • 20. enyo.kind({ name: “SithLord”, kind: “Jedi”, events: { onSpeak: “” }, scream: function(message) { doSpeak({ message: message, tone: “whiney” }); }) });Wednesday, April 18, 2012
  • 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. var toys = new SithLords; toys.$.DarthVader.setWeapon(lightsaber); toys.$.DarthVader.throw(toys.$.Palpatine); toys.$.DarthVader.scream(“NOOOOOOO!”);Wednesday, April 18, 2012
  • 23. enyo.UIComponent provides hooks for layout controlWednesday, April 18, 2012
  • 24. enyo.Signals is routing for app-level eventsWednesday, April 18, 2012
  • 25. lang.js - utilities log.js - logging job.js - setTimeout wrapper animation.js - math + reqFrame macroize.js - templatesWednesday, April 18, 2012
  • 26. dom - dealing with HTMLWednesday, April 18, 2012
  • 27. enyo.Control: a rendering engine for HTMLWednesday, April 18, 2012
  • 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. dispatcher.js: hooks all the standard DOM events into the Enyo schemeWednesday, April 18, 2012
  • 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. ajax - data-access through XHR & JSONPWednesday, April 18, 2012
  • 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. ui - building blocks for making themed widgetsWednesday, April 18, 2012
  • 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. touch - enyo.Scroller & touchscreen supportWednesday, April 18, 2012
  • 36. enyo.Scroller handles how to show 10 lbs of content in a 2lb boxWednesday, April 18, 2012
  • 37. ...and now, let’s introduce ONYXWednesday, April 18, 2012
  • 38. enyo is the core (think jQuery)Wednesday, April 18, 2012
  • 39. Onyx is our jQuery UIWednesday, April 18, 2012
  • 40. CSS themes + JS behavior + composite controlsWednesday, April 18, 2012
  • 41. Onyx Sampler - live views of all Onyx controls & sample codeWednesday, April 18, 2012
  • 42. Support and SamplesWednesday, April 18, 2012
  • 43. API Viewer - pulls inline documentation from live source tree enyojs.com/apiWednesday, April 18, 2012
  • 44. CryptoTweets - game using enyo & onyx & web services combee.net/cryptotweetsWednesday, April 18, 2012
  • 45. Community Gallery - enyo.js/galleryWednesday, April 18, 2012
  • 46. Community Forums - forums.enyojs.comWednesday, April 18, 2012
  • 47. Blog - blog.enyojs.comWednesday, April 18, 2012
  • 48. Twitter: @enyojsWednesday, April 18, 2012