AlexAitken.net

It’s a fun thing to be at the fore­front of a lan­guage/tech­no­logy re­volu­tion. I’m al­ways a little amazed at how the JavaS­cript I began cod­ing ten years ago has turned in to one of the corner­stones of my ca­reer. MBAs and years on con­sensus build­ing are one thing, but it’s this lan­guage that truly brings my design work to life, from its pro­to­typ­ing stages to its full pro­duc­tion de­ploy­ment. And while I’ve forged deep­er and deep­er un­der its hood, JavaS­cript has im­plic­ated it­self fur­ther and fur­ther in mod­ern de­vel­op­ment prac­tices. JSConf 2011 brought most of the thought lead­ers re­spons­ible for this im­plic­a­tion to­geth­er for two days in Port­land, OR, in­duc­ted oth­ers in to the circle, and hummed throughout with young, fresh, en­ergy and ideas de­voted to the stand­ards lan­guage mak­ing today’s web hop. Notes on the sum­mit:

Dav­id Flanagan, @__DavidFlanagan
BLOB (Bin­ary Large OB­jects) APIs
Use case: file sys­tem, BLOB, DOM. User se­lects im­age from hard drive, runs it through the API, then sees im­age dis­played in a web page; All files are BLOBs but not all BLOBs are files; Get files the same way we al­ways have: with in­put tag (and on­change)… or with drag and drop; XHR2; new URL ob­ject; blob://; FileRead­er ob­ject can be used to ex­am­ine and ma­nip­u­late con­tents of BLOBs; Text files can now be read; readAs­Text, readAsAr­ray­Buf­fer, typed ar­rays, Ar­ray­Buf­fer­View; “en­di­an­ness”; Blob­Build­er; Web apps can im­ple­ment their own sand­boxed file sys­tems.

John Hann, @un­script­able and Bri­an Cava­lier, @bri­an­cava­lier
Mod­ules > Frame­works
Frame­work vs lib­rary vs mod­ule; Switch­ing cost of mov­ing from a lib­rary or frame­work like jQuery is HUGE; “cod­ing dys­ent­ary” – get yer shit outta my code; cod­ing uto­pia – stan­dalone, small, fast, in­ter­change­able, no glob­als; load­ers and namespa­cing; JavaS­cript stand­ard APIs/in­ter­faces – ecma, json…; html5/css3 – querySe­lect­or­All…; Com­monJS pro­posed stand­ards; AMD – Asyn­chron­ous Mod­ule Defin­i­tion; Mod­ules today – re­quire.js, curl.js, pinf, bd­load, mLAB; prom­ises; in­ver­sion con­trol.

Paul Ir­ish, @paul_irish
Chrome Dev Tools
Tab auto­com­ple­tion; click col­or box to it­er­ate through dif­fer­ent col­or format defin­i­tions; new groups by type AND re­vi­sion his­tory; …and free­form stylesheet edit­ing un­der re­sources; see con­sole api doc for all avail­able con­sole meth­ods; con­sole.dir = DOM view; ESA to hide/show con­sole on all tabs; $0; ‘copy’ in con­sole view => clip­board; ‘?’ in con­sole = help on key­board short­cuts; –re­mote-de­bug­ging = for ex­ample, de­bug­ging tab­let apps via desktop; right-click pretty print of mini­fied js.

Dave Balmer, @balmer
Jo, Light­weight Mo­bile Frame­work
Web is the SDK; He’s look­ing for code con­trib­ut­ors; See ‘JavaS­cript, The Good Parts’ ex­tend meth­od; lessc­ss, sass; css3 for an­im­a­tions and trans­form­a­tions to save the mo­bile JS en­gine (and give bet­ter res­ults); joapp.com; light­er weight than en­yo.

Fa­bi­an Jakobs, @fjakobs
Cloud9IDE

Bri­an Cava­lier
wire.js
In­ver­sion con­trol; “boot­strap­per”; As­pect Ori­ented Pro­gram­ming (AOP) – aug­ment­a­tion of ex­ist­ing com­pon­ents (wheth­er or not source code is avail­able/con­trol­lable); De­pend­en­cies – in­teg­ral, con­fig­ur­able, re­quired, op­tion­al; Com­ple­ments AMD by provid­ing fur­ther flex­ib­il­ity; Or­der­ing and prom­ises; Con­nect­ors.

Dav­id Kaneda, @Dav­idKaneda
Sen­cha Touch
“De­tails Mat­ter”; sass and com­pass.

Bor­is Bokowski, @bokowski
Or­i­on Dev En­vir­on­ment
Use the web it­self as a plat­form for tool ag­greg­a­tion; js­beau­ti­fer.org, etc; ec­lipse.org/or­i­on

Ant­on Kovalyo, @ant­onkovalyo
Code Qual­ity Tools
Gofmt, pylint…; Lin­ters and doc tools (MDC, Bet­ter JS); JSH­int, a po­liter fork of JSLint;

Gaurav Seth, Mi­cros­fot
Chakra JS En­gine
Bet­ter use of dual cores for JS pro­cessing/com­pil­ing; See IE9 dev guide; ecmascript.org – ecmascripttest262; IE10 now avail­able.

Test­ing
Fun­cUnit; qunit;

Ray Mor­gan, @rayc­mor­gan
App vs Web
Zap­pos; App = nat­ive, web = html5; “Nat­ive apps aren’t that hard to write”; “Nat­ive Apps are easy to get per­form­ant”; “Should mo­bile web really be try­ing to emu­late nat­ive apps..?”; Be­ware broken ex­pect­a­tions; An­droid vs iphone vs Win­dows; back to ba­sics – se­mant­ic html; pro­gress­ive en­hance­ment – test on the older tech­no­lo­gies; Us­ab­il­ity and sim­pli­city; Flickr does it right and cap­tures what the web is about; Hash­bang (and Google’s spec on); keep the web the web; flex box.

Dave Her­man, @little­cal­culist
Mod­ules for JS.Next
Lib­rar­ies are a lan­guage’s lifeblood; NPM; JavaS­cript ba­sic­ally hands you a chunk of clay and leaves it up to you; Mod­ule pat­tern – (func­tion(glob­al){…glob­al.var=var={};}(win­dow)); Com­monJS on serv­er side is tak­ing off; for(i=0;…) = WRONG b/c of the leaked glob­al; un­der­score.js; I/O; Next.Js lets you de­clare re­quires and pull them without block­ing the main thread; har­mony.js, next.js…; ev­al is NOT evil (though ir­re­spons­ible/un­educated use of it may be); cof­fescript, scheme, ex­amples of de­clar­at­ively ex­tend­ing html with oth­er lan­guages.

Toby Ho, @air­portyh
Tutti, Mul­tiple Browser JS Test­ing

Adam Bald­win, @adam_baldwin
Se­cur­ity in Web Apps
CORS head­ers now al­low for cross-do­main script­ing and this can screw you if you’re work­ing with hash bang nav tech­niques; evilpack­et.net; OWASP/ES­API en­coder; out­put en­cod­ing != val­id­a­tion; FF has new con­tent se­cur­ity policy.

Dan Webb, @dan­wrong
Design­ing Non-Shit JS APIs
jQuery today is pretty much the de­facto stand­ard be­cause, even though it’s cobbled to­geth­er un­der the hood; its in­ter­face is amaz­ing; A good API = pre­dict­ab­il­ity, sim­pli­city, flex­ib­il­ity; Don’t buck lan­guage con­ven­tions or stand­ards.

Thomas Fuchs, @thomas­fuchs
Zepto Mo­bile Frame­work
All ma­jor JS frame­works we know/use today came out be­fore phones had real browsers, so in de­vel­op­ing for a single plat­form (es­sen­tially, what mo­bile is today with Web­kit) get rid of the x-browser bloat/poly­fills; pro­pri­et­ary fea­tures can be killer – WK’s doc­u­ment.querySe­lect­or­All, for ex­ample, re­places a huge JS foot­print and is faster; nat­ive JSON sup­port; ar­ray it­er­a­tion gets rid of loops FTW; Some func­tion­al­ity (win­dow.res­ize, for ex­ample) is not mean­ing­ful/rel­ev­ant in the mo­bile con­text; SO, don’t down­load a whold bunch of code that isn’t needed (though let’s have a fall­back plan for if code is run on a non-WK browser) – Zepto provides easy mech­an­ism for re­pla­cing it­self with jQuery, for ex­ample; querySe­lect­or­All re­turns a node list that Fuchs turns in­to an ar­racy with slice.call; ajax, events, css, poly­fills, mod­u­lar, and web­kit only; base­camp mo­bile = zepto and back­bone; Small is beau­ti­ful, easi­er to un­der­stand, and comes with less bugs; mus­tache.js, lawn­chair.js, back­bone.js; mi­crojs.com.

ajax, conferences, frameworks, JavaScript, mobile, modules, performance, UX