Ben Combee's slides on the Enyo & Ony

1. Enyo + Onyx
for JS Nerds
Ben Combee (@unwiredben)
Austin JavaScript Meetup, April 2012
Wednesday, 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 8
Wednesday, April 18, 2012

8. Open Source.
Apache 2.0.
Wednesday, April 18, 2012

9. All source is on
github.com/enyojs
Wednesday, April 18, 2012

10. Enyo 2.0: The Parts
Wednesday, April 18, 2012

11. boot - load all the
source
Wednesday, April 18, 2012

12. package.js:
enyo.depends(
“app.js”,
“../css/app.css”,
“$lib/onyx”);
Wednesday, April 18, 2012

13. kernel - OOP, there it is
Wednesday, April 18, 2012

14. enyo.kind() is a
constructor factory
Wednesday, 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 publishing
Wednesday, 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 events
Wednesday, 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 control
Wednesday, April 18, 2012

24. enyo.Signals is routing
for app-level events
Wednesday, April 18, 2012

25. lang.js - utilities
log.js - logging
job.js - setTimeout wrapper
animation.js - math + reqFrame
macroize.js - templates
Wednesday, April 18, 2012

26. dom - dealing with
HTML
Wednesday, April 18, 2012

27. enyo.Control:
a rendering engine for
HTML
Wednesday, 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 scheme
Wednesday, 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 & JSONP
Wednesday, 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 widgets
Wednesday, 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.js
Wednesday, April 18, 2012

35. touch - enyo.Scroller &
touchscreen support
Wednesday, April 18, 2012

36. enyo.Scroller handles
how to show 10 lbs of
content in a 2lb box
Wednesday, April 18, 2012

37. ...and now, let’s
introduce
ONYX
Wednesday, April 18, 2012

38. enyo is the core
(think jQuery)
Wednesday, April 18, 2012

39. Onyx is our jQuery UI
Wednesday, April 18, 2012

40. CSS themes +
JS behavior +
composite controls
Wednesday, April 18, 2012

41. Onyx Sampler - live
views of all Onyx
controls & sample code
Wednesday, April 18, 2012

42. Support and Samples
Wednesday, April 18, 2012

43. API Viewer - pulls inline
documentation from
live source tree
enyojs.com/api
Wednesday, April 18, 2012

44. CryptoTweets -
game using enyo &
onyx & web services
combee.net/cryptotweets
Wednesday, April 18, 2012

45. Community Gallery -
enyo.js/gallery
Wednesday, April 18, 2012

46. Community Forums -
forums.enyojs.com
Wednesday, April 18, 2012

47. Blog - blog.enyojs.com
Wednesday, April 18, 2012

48. Twitter: @enyojs
Wednesday, April 18, 2012