Staying DRY with YUI
By Jonathan Tsai & William Seo
Jonathan Tsai

William Seo
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 Work
Work Your Plan
Plan Your Work
Choose a Solid Tech Stack
•
•
•
•
•
•

Open Source
Good community support
Modern
Comfort
Compatibility
Talent
Amazon Web Services
MySQL + Redis
Django + Python
YUI
Work Your Plan
Apply it correctly
Best Practices
Use, Create, Proliferate
Part 1.
Using Best Practices
Amazon Web Services
MySQL + Redis
Django + Python
YUI
YUI = Best Practice?
•
•
•
•
•
•

Open Source
Good community support
Modern
Comfort
Compatibility
Talent
Best Practice #1
Use YUI
Best Practice #2
Stay DRY
DRY:
DON’T REPEAT YOURSELF
http://en.wikipedia.org/wiki/Don%27t_repeat_yourself
NOT a Best Practice
Getting WET
WET:
WRITE EVERYTHING TWICE
WET:
WE ENJOY TYPING
Best Practice #3
OO-JS
OOP
Abstraction + Encapsulation
Part 2.
Creating Best Practices
Best Practices
1. Use YUI
2. Stay DRY
3. OO-JS
Best Practices
+
Time
Case Study
Backbone.js + Hulu
UH. OH.
YUI = Best Practice?
Caveat
Objects don’t define
themselves
Use, Create, Proliferate
Best Practices #1-3
Custom YUI Modules
Where do we begin…
Y.Node
var nodeB = f(nodeA);
Identify a pattern
At first we tried…
Repeated code everywhere
var _Y; // global Y
YUI().use(...,
function(Y) {
_Y = Y;
});
Y.namespace()
Best Practices #1-3
Custom 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] = transactionDa...
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 Soon
https://github.com/talentral
Fav Tips & Tricks #1
<script id="..."
type="text/xtemplate">BLOB</script>
Fav Tips & Tricks #2
Y.Template();
Y.Lang.sub();
Fav Tips & Tricks #3
<div
tlnt:item-type="skill"
tlnt:item-id="6547">
</div>
Fav Tips & Tricks #3
node.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 To
YUI Team & Contributors
#yui IRC folks
On the Interwebs
@jontsai
http://talentral.com
Q&A
Staying DRY with YUI
Staying DRY with YUI
Staying DRY with YUI
Staying DRY with YUI
Staying DRY with YUI
Staying DRY with YUI
Staying DRY with YUI
Staying DRY with YUI
Staying DRY with YUI
Upcoming SlideShare
Loading in …5
×

Staying DRY with YUI

1,022 views
948 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,022
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Meet the Talentral Engineering team… All two of us. We took a huge risk in coming to the conference today, because if both of us died in a car accident together, our company would essentially fail.
  • Talentral is a career management platform which allows you to create a digital online portfolio of your work accomplishments
  • Create, manage, and share multiple profiles
  • Inline feels-like-desktop WYSIWYG editor. No page reloads.
  • It’s good to start with the end… The main takeaways from our talk
  • We hereby decree…
  • The two essential components to a successful startup
  • Yours truly
  • As you have already seen…
  • Double hackers all the way!
  • Everything is stacked against us
  • A wrong or bad decision could mean the end… So we can’t afford to make mistakes
  • Make decisions carefully
  • A good formula for success
  • … is one of the most critical decisions at the beginning of a startup. Once you’ve chosen a technology stack to start with, you’re pretty much married to it.
  • The next part of your success depends on…
  • It’s good to always find out what the best practices are
  • We postulate/declare that YUI is a bestpratice
  • Good community support. Is that even a question? YUI community is AWESOME! This is the thing that comes to mind when I think about the best open-source projects on the planet.Choosing YUI for your frontend is a no-brainer; it’s like having a team of 20 elite frontend engineers on YOUR team. We’ve asked countless questions on #yui IRC channel and have gotten amazing help. Thank you, you know who you are.Modern? You bet. Yahoo! uses it. Develops it, maintains it… (Industrial Strength--Image/screenshot)Extensibility...
  • DRY, also known as “Don’t Repeat Yourself,” is a software engineering principle that encourages writing clean, robust code.
  • DRY, also known as “Don’t Repeat Yourself,” is a software engineering principle that encourages writing clean, robust code.
  • DRY, also known as “Don’t Repeat Yourself,” is a software engineering principle that encourages writing clean, robust code.
  • Oooooooooh. JavaScript. Just kidding. Object-oriented JavaScript
  • Oooooooooh. JavaScript. Just kidding. Object-oriented JavaScript
  • Oooooooooh. JavaScript. Just kidding. Object-oriented JavaScript
  • Is it still our champion?
  • For us, whenever we found ourselves importing a common set of YUI modules across several JS files (node, event, io)
  • Can’t hurt a guy for trying…
  • Affected by JS load order
  • Allowed us to expose functions to other JS files. But order-dependent.Functional programming, not object-oriented; still leads to a lot of repeated codeWasn’t taking advantage of YUI loader (which allows dynamic loading of JS source files and downloading scripts in parallel)
  • We need to be able to do it multiple times with the most freshest content.We also have to consider what if it fails to load.
  • Render anywhereClient-side cache w/ timeoutFailed API call handler + automatic retry w/ exponential backoff
  • Node.getHTML()
  • Node.get(‘text’)
  • Don’t stack API calls from repeated UI triggers.Wait for the first API call to complete
  • If a lock is successfully acquired, perform a Y.io() callAlso gives user visual feedback (btn.addClass(‘ui-locked’))IO complete/failure handler can then release lock as appropriate
  • By using a function factory design pattern, we provide convenience wrappers for unlocking UI widgets without having to change the original callback functions.
  • North, South, East, West Curtains/veils. With automatically calculated offsets from X/Y coords
  • Doing some final cleanup of our modules (3 categories of modules: Everyone, Some People, Just Us)
  • Stash content that you don’t want to be rendered in a content type not-recognized by the browser. You can still retrieve the node by ID and then getHTML()
  • Stash content that you don’t want to be rendered in a content type not-recognized by the browser. You can still
  • Use the following together. Very tasty.
  • North, South, East, West Curtains/veils. With automatically calculated offsets from X/Y coords
  • North, South, East, West Curtains/veils. With automatically calculated offsets from X/Y coords
  • North, South, East, West Curtains/veils. With automatically calculated offsets from X/Y coords
  • It’s good to start with the end… The main takeaways from our talk
  • We hereby decree…
  • We love you!
  • We love you!
  • Staying DRY with YUI

    1. 1. Staying DRY with YUI By Jonathan Tsai & William Seo
    2. 2. Jonathan Tsai William Seo
    3. 3. Part 4. Conclusion
    4. 4. Best Practices
    5. 5. Use, Create, Proliferate
    6. 6. Best Practices
    7. 7. Use YUI and Pure
    8. 8. Use YUI and Pure + Custom YUI Modules
    9. 9. Part 0. Background
    10. 10. Talentral = Startup
    11. 11. Hacker + Hustler - Micah Baldwin, Startup Mentor
    12. 12. Hacker + Hustler (CTO) (CEO)
    13. 13. Hacker
    14. 14. Talentral = Lean Startup
    15. 15. Hackers!
    16. 16. Lean Startup = Underdogs
    17. 17. Mistakes are costly
    18. 18. Choose wisely
    19. 19. Plan Your Work Work Your Plan
    20. 20. Plan Your Work Choose a Solid Tech Stack
    21. 21. • • • • • • Open Source Good community support Modern Comfort Compatibility Talent
    22. 22. Amazon Web Services MySQL + Redis Django + Python YUI
    23. 23. Work Your Plan Apply it correctly
    24. 24. Best Practices
    25. 25. Use, Create, Proliferate
    26. 26. Part 1. Using Best Practices
    27. 27. Amazon Web Services MySQL + Redis Django + Python YUI
    28. 28. YUI = Best Practice?
    29. 29. • • • • • • Open Source Good community support Modern Comfort Compatibility Talent
    30. 30. Best Practice #1 Use YUI
    31. 31. Best Practice #2 Stay DRY
    32. 32. DRY: DON’T REPEAT YOURSELF http://en.wikipedia.org/wiki/Don%27t_repeat_yourself
    33. 33. NOT a Best Practice Getting WET
    34. 34. WET: WRITE EVERYTHING TWICE
    35. 35. WET: WE ENJOY TYPING
    36. 36. Best Practice #3 OO-JS
    37. 37. OOP Abstraction + Encapsulation
    38. 38. Part 2. Creating Best Practices
    39. 39. Best Practices 1. Use YUI 2. Stay DRY 3. OO-JS
    40. 40. Best Practices + Time
    41. 41. Case Study Backbone.js + Hulu
    42. 42. UH. OH. YUI = Best Practice?
    43. 43. Caveat Objects don’t define themselves
    44. 44. Use, Create, Proliferate
    45. 45. Best Practices #1-3 Custom YUI Modules
    46. 46. Where do we begin…
    47. 47. Y.Node var nodeB = f(nodeA);
    48. 48. Identify a pattern
    49. 49. At first we tried…
    50. 50. Repeated code everywhere
    51. 51. var _Y; // global Y YUI().use(..., function(Y) { _Y = Y; });
    52. 52. Y.namespace()
    53. 53. Best Practices #1-3 Custom YUI Modules
    54. 54. Example: Background Fetcher
    55. 55. What we wanted:
    56. 56. What we wanted: HTTP.GET + Render Content
    57. 57. var cfg = {on:{complete:..., failure: ...}}; var request = Y.io(uri,cfg); IO_TRANSACTION_DATA[request. id] = transactionData; ...
    58. 58. Y.BackgroundFetcher. backgroundFetch(uri, type, parent, callbacks);
    59. 59. Example: Unescape
    60. 60. What we wanted:
    61. 61. What we wanted: Edit HTML Content as Text
    62. 62. Node.getHTML()
    63. 63. 71
    64. 64. 72
    65. 65. Node.get('text')
    66. 66. 74
    67. 67. 75
    68. 68. var unescaped = Y.Unescape.htmlUnescape (node.getHTML());
    69. 69. Example: UI Lock
    70. 70. What we wanted:
    71. 71. What we wanted: Don’t stack API calls
    72. 72. function handleBtnClicked(e) { var btn = this; var lock = Y.UILock.lock(btn); if (lock) {...} lock.release(); }
    73. 73. Y.io(uri, { on: { complete: Y.UILock.ioUnlock(lock, callback) } });
    74. 74. Example: Spotlight
    75. 75. What we wanted:
    76. 76. What we wanted: Node-level modal effect
    77. 77. 85
    78. 78. Part 3. Proliferating Best Practices
    79. 79. Coming Soon https://github.com/talentral
    80. 80. Fav Tips & Tricks #1 <script id="..." type="text/xtemplate">BLOB</script>
    81. 81. Fav Tips & Tricks #2 Y.Template(); Y.Lang.sub();
    82. 82. Fav Tips & Tricks #3 <div tlnt:item-type="skill" tlnt:item-id="6547"> </div>
    83. 83. Fav Tips & Tricks #3 node.getAttribute('tlnt :item-id’);
    84. 84. How did we ever survive without…
    85. 85. 94
    86. 86. 95
    87. 87. 96
    88. 88. Part 4. Conclusion
    89. 89. Best Practices
    90. 90. Use YUI and Pure + Custom YUI Modules
    91. 91. Use, Create, Proliferate
    92. 92. Special Thanks To YUI Team & Contributors #yui IRC folks
    93. 93. On the Interwebs @jontsai http://talentral.com
    94. 94. Q&A

    ×