Enyo for JS Nerds - Austin JS Meetup, April 2012

Enyo + Onyx for JS Nerds Ben Combee (@unwiredben) Austin JavaScript Meetup, April 2012Wednesday, April 18, 2012

Wednesday, April 18, 2012

We need 500 apps for the TouchPad, stat! (that was Enyo 1.0)Wednesday, April 18, 2012

We want apps from devs that aren’t HTML+CSS experts. They need to run everywhere.Wednesday, April 18, 2012

How?Wednesday, April 18, 2012

Components. As seen in Visual Basic. They’re not sexy. They work.Wednesday, April 18, 2012

iOS & Android Chrome & Safari Firefox & IE8+ Open webOS Windows 8Wednesday, April 18, 2012

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/onyx”);Wednesday, April 18, 2012

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() { this.inherited(arguments); system.play(“ng001.mp4”); } }); var ng = new NewGirl();Wednesday, April 18, 2012

enyo.Object provides property publishingWednesday, April 18, 2012

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

var x = new UPC({ productID: “123456789X” }); x.setProductID(“5678900002”); pID = x.getProductID();Wednesday, April 18, 2012

enyo.Component enables encapsulation and eventsWednesday, April 18, 2012

enyo.kind({ name: “SithLord”, kind: “Jedi”, events: { onSpeak: “” }, scream: function(message) { doSpeak({ message: message, tone: “whiney” }); }) });Wednesday, April 18, 2012

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

var toys = new SithLords; toys.$.DarthVader.setWeapon(lightsaber); toys.$.DarthVader.throw(toys.$.Palpatine); toys.$.DarthVader.scream(“NOOOOOOO!”);Wednesday, April 18, 2012

enyo.UIComponent provides hooks for layout controlWednesday, April 18, 2012

enyo.Signals is routing for app-level eventsWednesday, April 18, 2012

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

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”, content: “Keep Austin Weird!”, style: “color: blue; font-size: 96pt” }); var bs = new BumperSticker(); bs.renderInto(document.body);Wednesday, April 18, 2012

dispatcher.js: hooks all the standard DOM events into the Enyo schemeWednesday, April 18, 2012

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

ajax - data-access through XHR & JSONPWednesday, April 18, 2012

ui - building blocks for making themed widgetsWednesday, April 18, 2012

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

touch - enyo.Scroller & touchscreen supportWednesday, April 18, 2012

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

...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, 2012

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 enyojs.com/apiWednesday, April 18, 2012

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

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

http://lanyrd.com	2
https://twimg0-a.akamaihd.net	1
https://si0.twimg.com	1
http://us-w1.rockmelt.com	1

Enyo for JS Nerds - Austin JS Meetup, April 2012

by Ben Combee

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 5

Statistics

Enyo for JS Nerds - Austin JS Meetup, April 2012 Presentation Transcript