staying dry with yui
DESCRIPTION
Presented at YUI Conf 2013 Conference web site: http://yuilibrary.com/yuiconf/2013/schedule/#jonathan-tsai-and-william-seo This tech talk is about how a team of merely two engineers built all of Talentral, a complex, rich, feels-like-desktop webapp. Everyone knows about DRY, but how is it done in practice with YUI? This is our story about how using YUI + YUI Gallery enables us to focus on high-leverage tasks at a fast-paced startup when the temptations to write quick-and-dirty solutions surface at every corner. We'll walk through several examples of how we evaluated existing YUI modules (not just UI widgets, but also behaviors and patterns) and then decided to roll our own custom YUI modules (we've written 10, to date) in good OO-JS fashion to stay faithful to the YUI ecosystem (elegant, DRY, maintainable, community friendly) instead of succumbing to the FrankenJS approach that is so prevalent in today's JS landscape.TRANSCRIPT
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