enyo for js nerds - austin js meetup, april 2012
DESCRIPTION
Ben Combee's slides on the Enyo & OnyTRANSCRIPT
![Page 1: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/1.jpg)
Enyo + Onyxfor JS NerdsBen Combee (@unwiredben)
Austin JavaScript Meetup, April 2012
Wednesday, April 18, 2012
![Page 2: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/2.jpg)
Wednesday, April 18, 2012
![Page 3: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/3.jpg)
We need 500 apps for the TouchPad, stat!
(that was Enyo 1.0)
Wednesday, April 18, 2012
![Page 4: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/4.jpg)
We want apps from devs that aren’t
HTML+CSS experts.They need to run
everywhere.
Wednesday, April 18, 2012
![Page 5: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/5.jpg)
How?
Wednesday, April 18, 2012
![Page 6: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/6.jpg)
Components.As seen in Visual Basic.
They’re not sexy.They work.
Wednesday, April 18, 2012
![Page 7: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/7.jpg)
iOS & AndroidChrome & SafariFirefox & IE8+Open webOSWindows 8
Wednesday, April 18, 2012
![Page 8: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/8.jpg)
Open Source.Apache 2.0.
Wednesday, April 18, 2012
![Page 9: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/9.jpg)
All source is on github.com/enyojs
Wednesday, April 18, 2012
![Page 10: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/10.jpg)
Enyo 2.0: The Parts
Wednesday, April 18, 2012
![Page 11: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/11.jpg)
boot - load all the source
Wednesday, April 18, 2012
![Page 12: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/12.jpg)
package.js:
enyo.depends( “app.js”, “../css/app.css”, “$lib/onyx”);
Wednesday, April 18, 2012
![Page 13: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/13.jpg)
kernel - OOP, there it is
Wednesday, April 18, 2012
![Page 14: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/14.jpg)
enyo.kind() is a constructor factory
Wednesday, April 18, 2012
![Page 15: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/15.jpg)
enyo.kind({ name: “tv.NewGirl”, kind: “TelevisionShow”, show: function() { this.inherited(arguments); system.play(“ng001.mp4”); }});var ng = new NewGirl();
Wednesday, April 18, 2012
![Page 16: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/16.jpg)
enyo.Object provides property publishing
Wednesday, April 18, 2012
![Page 17: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/17.jpg)
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
![Page 18: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/18.jpg)
var x = new UPC({ productID: “123456789X”});
x.setProductID(“5678900002”);pID = x.getProductID();
Wednesday, April 18, 2012
![Page 19: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/19.jpg)
enyo.Component enables encapsulation
and events
Wednesday, April 18, 2012
![Page 20: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/20.jpg)
enyo.kind({ name: “SithLord”, kind: “Jedi”, events: { onSpeak: “” }, scream: function(message) { doSpeak({ message: message, tone: “whiney” }); })});
Wednesday, April 18, 2012
![Page 21: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/21.jpg)
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
![Page 22: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/22.jpg)
var toys = new SithLords;
toys.$.DarthVader.setWeapon(lightsaber);toys.$.DarthVader.throw(toys.$.Palpatine);toys.$.DarthVader.scream(“NOOOOOOO!”);
Wednesday, April 18, 2012
![Page 23: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/23.jpg)
enyo.UIComponent provides hooks for
layout control
Wednesday, April 18, 2012
![Page 24: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/24.jpg)
enyo.Signals is routing for app-level events
Wednesday, April 18, 2012
![Page 25: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/25.jpg)
lang.js - utilitieslog.js - logging
job.js - setTimeout wrapperanimation.js - math + reqFrame
macroize.js - templates
Wednesday, April 18, 2012
![Page 26: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/26.jpg)
dom - dealing with HTML
Wednesday, April 18, 2012
![Page 27: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/27.jpg)
enyo.Control:a rendering engine for
HTML
Wednesday, April 18, 2012
![Page 28: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/28.jpg)
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
![Page 29: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/29.jpg)
dispatcher.js:hooks all the standard DOM events into the
Enyo scheme
Wednesday, April 18, 2012
![Page 30: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/30.jpg)
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
![Page 31: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/31.jpg)
ajax - data-access through XHR & JSONP
Wednesday, April 18, 2012
![Page 32: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/32.jpg)
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
![Page 33: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/33.jpg)
ui - building blocks for making themed widgets
Wednesday, April 18, 2012
![Page 34: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/34.jpg)
Button.jsCheckbox.js
Image.jsInput.js
Repeater.jsRichText.js
Select.js
BaseLayout.jsDragAvatar.js
Group.jsGroupItem.jsSelection.js
ToolDecorator.js
Wednesday, April 18, 2012
![Page 35: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/35.jpg)
touch - enyo.Scroller & touchscreen support
Wednesday, April 18, 2012
![Page 36: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/36.jpg)
enyo.Scroller handles how to show 10 lbs of content in a 2lb box
Wednesday, April 18, 2012
![Page 37: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/37.jpg)
...and now, let’s introduceONYX
Wednesday, April 18, 2012
![Page 38: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/38.jpg)
enyo is the core(think jQuery)
Wednesday, April 18, 2012
![Page 39: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/39.jpg)
Onyx is our jQuery UI
Wednesday, April 18, 2012
![Page 40: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/40.jpg)
CSS themes +JS behavior +
composite controls
Wednesday, April 18, 2012
![Page 41: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/41.jpg)
Onyx Sampler - live views of all Onyx
controls & sample code
Wednesday, April 18, 2012
![Page 42: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/42.jpg)
Support and Samples
Wednesday, April 18, 2012
![Page 43: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/43.jpg)
API Viewer - pulls inline documentation from
live source treeenyojs.com/api
Wednesday, April 18, 2012
![Page 44: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/44.jpg)
CryptoTweets -game using enyo &
onyx & web servicescombee.net/cryptotweets
Wednesday, April 18, 2012
![Page 45: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/45.jpg)
Community Gallery - enyo.js/gallery
Wednesday, April 18, 2012
![Page 46: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/46.jpg)
Community Forums - forums.enyojs.com
Wednesday, April 18, 2012
![Page 47: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/47.jpg)
Blog - blog.enyojs.com
Wednesday, April 18, 2012
![Page 48: Enyo for JS Nerds - Austin JS Meetup, April 2012](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5553b2f5b4c905d9448b4bdc/html5/thumbnails/48.jpg)
Twitter: @enyojs
Wednesday, April 18, 2012