Enyo + Onyx                              for JS Nerds                              Ben Combee (@unwiredben)               ...
Wednesday, April 18, 2012
We need 500 apps for                      the TouchPad, stat!                            (that was Enyo 1.0)Wednesday, Apr...
We want apps from                              devs that aren’t                            HTML+CSS experts.              ...
How?Wednesday, April 18, 2012
Components.                    As seen in Visual Basic.                      They’re not sexy.                         The...
iOS & Android                            Chrome & Safari                             Firefox & IE8+                       ...
Open Source.                             Apache 2.0.Wednesday, April 18, 2012
All source is on                            github.com/enyojsWednesday, April 18, 2012
Enyo 2.0: The PartsWednesday, April 18, 2012
boot - load all the                                 sourceWednesday, April 18, 2012
package.js:                enyo.depends(                 “app.js”,                 “../css/app.css”,                 “$lib...
kernel - OOP, there it isWednesday, April 18, 2012
enyo.kind() is a                            constructor factoryWednesday, April 18, 2012
enyo.kind({                 name: “tv.NewGirl”,                 kind: “TelevisionShow”,                	 show: function() ...
enyo.Object provides                         property publishingWednesday, April 18, 2012
enyo.kind({                 name: “UPC”,                	 kind: enyo.Object,                 published: { productID: “0000...
var x = new UPC({                 productID: “123456789X”                });                x.setProductID(“5678900002”); ...
enyo.Component                       enables encapsulation                            and eventsWednesday, April 18, 2012
enyo.kind({                 name: “SithLord”,                 kind: “Jedi”,                 events: { onSpeak: “” },      ...
enyo.kind({                 name: “SithLords”,                	 components: [                  { kind: SithLord, name: “Da...
var toys = new SithLords;                toys.$.DarthVader.setWeapon(lightsaber);                toys.$.DarthVader.throw(t...
enyo.UIComponent                            provides hooks for                              layout controlWednesday, April...
enyo.Signals is routing                       for app-level eventsWednesday, April 18, 2012
lang.js - utilities                                log.js - logging                       job.js - setTimeout wrapper     ...
dom - dealing with                                 HTMLWednesday, April 18, 2012
enyo.Control:                      a rendering engine for                             HTMLWednesday, April 18, 2012
enyo.kind({                  name: “BumperSticker”,                  kind: enyo.Control,                  tag: “div”,     ...
dispatcher.js:                     hooks all the standard                     DOM events into the                        E...
enyo.kind({                 name: “BumperSticker”,                 content: “Keep Austin Weird!”,                 style: “...
ajax - data-access                  through XHR & JSONPWednesday, April 18, 2012
function apiOK(inAsync, inValue) {                 alert( “success: “ + inValue ); }                function apiFAIL(inAsy...
ui - building blocks for                 making themed widgetsWednesday, April 18, 2012
Button.js      BaseLayout.js                            Checkbox.js    DragAvatar.js                             Image.js ...
touch - enyo.Scroller &                    touchscreen supportWednesday, April 18, 2012
enyo.Scroller handles                     how to show 10 lbs of                      content in a 2lb boxWednesday, April ...
...and now, let’s                                introduce                                  ONYXWednesday, April 18, 2012
enyo is the core                             (think jQuery)Wednesday, April 18, 2012
Onyx is our jQuery UIWednesday, April 18, 2012
CSS themes +                              JS behavior +                            composite controlsWednesday, April 18, ...
Onyx Sampler - live                    views of all Onyx                 controls & sample codeWednesday, April 18, 2012
Support and SamplesWednesday, April 18, 2012
API Viewer - pulls inline                  documentation from                     live source tree                      en...
CryptoTweets -                             game using enyo &                            onyx & web services               ...
Community Gallery -                          enyo.js/galleryWednesday, April 18, 2012
Community Forums -                        forums.enyojs.comWednesday, April 18, 2012
Blog - blog.enyojs.comWednesday, April 18, 2012
Twitter: @enyojsWednesday, April 18, 2012
Upcoming SlideShare
Loading in...5
×

Enyo for JS Nerds - Austin JS Meetup, April 2012

2,037

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,037
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×