Staying DRY with YUIBy Jonathan Tsai & William Seo

William SeoJonathan Tsai

Part 4.Conclusion

Best Practices

Use, Create, Proliferate

Best Practices

Use YUI and Pure

Use YUI and Pure+

Custom YUI Modules

Part 0. Background

Talentral = Startup

Hacker + Hustler

- Micah Baldwin, Startup Mentor

Hacker + Hustler (CTO) (CEO)

Hacker

Talentral = Lean Startup

Hackers!

Lean Startup = Underdogs

Mistakes are costly

Choose wisely

Plan Your WorkWork Your Plan

Plan Your WorkChoose a Solid Tech

Stack

• Open Source• Good community support• Modern• Comfort• Compatibility• Talent

Amazon Web ServicesMySQL + Redis

Django + PythonYUI

Work Your PlanApply it correctly

Best Practices

Use, Create, Proliferate

Part 1.Using Best Practices

Amazon Web ServicesMySQL + Redis

Django + PythonYUI

YUI = Best Practice?

• Open Source• Good community support• Modern• Comfort• Compatibility• Talent

Best Practice #1Use YUI

Best Practice #2Stay DRY

DRY:DON’T REPEAT YOURSELF

http://en.wikipedia.org/wiki/Don%27t_repeat_yourself

NOT a Best PracticeGetting WET

WET:WRITE EVERYTHING

TWICE

WET:WE ENJOY TYPING

Best Practice #3OO-JS

OOPAbstraction + Encapsulation

Part 2.Creating Best Practices

Best Practices1. Use YUI2. Stay DRY3. OO-JS

Best Practices+

Time

Case StudyBackbone.js + Hulu

UH. OH.YUI = Best Practice?

CaveatObjects don’t define

themselves

Use, Create, Proliferate

Best Practices #1-3Custom YUI Modules

Where do we begin…

Y.Nodevar nodeB = f(nodeA);

Identify a pattern

At first we tried…

Repeated code everywhere

var _Y; // global YYUI().use(..., function(Y) { _Y = Y;});

Y.namespace()

Best Practices #1-3Custom YUI Modules

Example:Background Fetcher

What we wanted:

What we wanted:HTTP.GET + Render

Content

var cfg = {on:{complete:..., failure: ...}};var request = Y.io(uri,cfg);IO_TRANSACTION_DATA[request.id] = transactionData;...

Y.BackgroundFetcher.backgroundFetch(uri, type, parent, callbacks);

Example:Unescape

What we wanted:

What we wanted:Edit HTML Content as Text

Node.getHTML()

71

72

Node.get('text')

74

75

var unescaped = Y.Unescape.htmlUnescape(node.getHTML());

Example:UI Lock

What we wanted:

What we wanted:Don’t stack API calls

function handleBtnClicked(e) { var btn = this; var lock = Y.UILock.lock(btn); if (lock) {...} lock.release();}

Y.io(uri, { on: { complete: Y.UILock.ioUnlock(lock, callback) }});

Example:Spotlight

What we wanted:

What we wanted:Node-level modal effect

85

Part 3.Proliferating Best

Practices

Coming Soonhttps://github.com/

talentral

Fav Tips & Tricks #1<script id="..." type="text/x-template">BLOB</script>

Fav Tips & Tricks #2Y.Template();Y.Lang.sub();

Fav Tips & Tricks #3<div tlnt:item-type="skill" tlnt:item-id="6547"></div>

Fav Tips & Tricks #3node.getAttribute('tlnt

:item-id’);

How did we ever survive without…

94

95

96

Part 4.Conclusion

Best Practices

Use YUI and Pure+

Custom YUI Modules

Use, Create, Proliferate

Special Thanks ToYUI Team & Contributors

#yui IRC folks

On the Interwebs@jontsai

http://talentral.com

Q&A