Staying DRY with YUI
-
Upload
jonathan-tsai -
Category
Technology
-
view
803 -
download
2
description
Transcript of Staying DRY with YUI
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
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