Enyo for JS Nerds - Austin JS Meetup, April 2012

Enyo + Onyxfor JS NerdsBen Combee (@unwiredben)

Austin JavaScript Meetup, April 2012

Wednesday, April 18, 2012

We need 500 apps for the TouchPad, stat!

(that was Enyo 1.0)

We want apps from devs that aren’t

HTML+CSS experts.They need to run

everywhere.

Components.As seen in Visual Basic.

They’re not sexy.They work.

iOS & AndroidChrome & SafariFirefox & IE8+Open webOSWindows 8

Open Source.Apache 2.0.

All source is on github.com/enyojs

Enyo 2.0: The Parts

boot - load all the source

package.js:

enyo.depends( “app.js”, “../css/app.css”, “$lib/onyx”);

kernel - OOP, there it is

enyo.kind() is a constructor factory

enyo.kind({ name: “tv.NewGirl”, kind: “TelevisionShow”, show: function() { this.inherited(arguments); system.play(“ng001.mp4”); }});var ng = new NewGirl();

enyo.Object provides property publishing

enyo.kind({ name: “UPC”, kind: enyo.Object, published: { productID: “0000000000” }, create: function() { this. productIDChanged(); }, productIDChanged: function(oldValue) { this.barcode = generate(this.productID); }});

var x = new UPC({ productID: “123456789X”});

x.setProductID(“5678900002”);pID = x.getProductID();

enyo.Component enables encapsulation

and events

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

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); }});

var toys = new SithLords;

toys.$.DarthVader.setWeapon(lightsaber);toys.$.DarthVader.throw(toys.$.Palpatine);toys.$.DarthVader.scream(“NOOOOOOO!”);

enyo.UIComponent provides hooks for

layout control

enyo.Signals is routing for app-level events

lang.js - utilitieslog.js - logging

job.js - setTimeout wrapperanimation.js - math + reqFrame

macroize.js - templates

dom - dealing with HTML

enyo.Control:a rendering engine for

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);

dispatcher.js:hooks all the standard DOM events into the

Enyo scheme

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);

ajax - data-access through XHR & JSONP

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();

ui - building blocks for making themed widgets

Button.jsCheckbox.js

Image.jsInput.js

Repeater.jsRichText.js

Select.js

BaseLayout.jsDragAvatar.js

Group.jsGroupItem.jsSelection.js

ToolDecorator.js

touch - enyo.Scroller & touchscreen support

enyo.Scroller handles how to show 10 lbs of content in a 2lb box

...and now, let’s introduceONYX

enyo is the core(think jQuery)

Onyx is our jQuery UI

CSS themes +JS behavior +

composite controls

Onyx Sampler - live views of all Onyx

controls & sample code

Support and Samples

API Viewer - pulls inline documentation from

live source treeenyojs.com/api

CryptoTweets -game using enyo &

onyx & web servicescombee.net/cryptotweets

Community Gallery - enyo.js/gallery

Community Forums - forums.enyojs.com

Blog - blog.enyojs.com

Twitter: @enyojs

Enyo for JS Nerds - Austin JS Meetup, April 2012

Technology

Sports for Nerds, Geeks & Hipsters

Getting To Know Enyo

Htm5 Apps with Enyo

Triumph of the nerds culture

NERDs Storyboard

Guia Nerds de Legendagem Legendastv

Pitch - Nerds

Creativity Sucks & Innovations for Nerds!!

Keynote nerds PROMO

Web Makeovers Powered by Nerds

agencia Nerds

The Nerds By Homa Moshari. Hi-Tech Entrepreneurs The Nerds The computer “Nerds” who changed the world instead of following conventional careers are widely

Shopping For Nerds (Minnebar 2013)

Ä ¯ » ¾ · À ³ Å · Â ¶ ¯ © ½ º Â Á ² · Ä · ² ³ ² ° Ç Å ...Nerds Against Humanity Nerds Against Humanity Nerds Against Humanity Nerds Against Humanity Nerds

SMCC Nerds

Tribos Urbanas - Os Nerds

The Nerds Revista

House Of Nerds Presentation

JS for Mobile: The Enyo Framework (jsconf.us 2011)

Piadas Nerds