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.

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

3. Jonathan Tsai
William Seo

7. Part 4.
Conclusion

8. Best Practices

9. Use, Create, Proliferate

10. Best Practices

11. Use YUI and Pure

12. Use YUI and Pure
+
Custom YUI Modules

13. Part 0.
Background

14. Talentral = Startup

15. Hacker + Hustler
- Micah Baldwin, Startup Mentor

16. Hacker + Hustler
(CTO) (CEO)

17. Hacker

18. Talentral = Lean Startup

19. Hackers!

20. Lean Startup = Underdogs

21. Mistakes are costly

22. Choose wisely

23. Plan Your Work
Work Your Plan

24. Plan Your Work
Choose a Solid Tech Stack

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

26. Amazon Web Services
MySQL + Redis
Django + Python
YUI

27. Work Your Plan
Apply it correctly

28. Best Practices

29. Use, Create, Proliferate

30. Part 1.
Using Best Practices

31. Amazon Web Services
MySQL + Redis
Django + Python
YUI

32. YUI = Best Practice?

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

35. Best Practice #1
Use YUI

36. Best Practice #2
Stay DRY

37. DRY:
DON’T REPEAT YOURSELF
http://en.wikipedia.org/wiki/Don%27t_repeat_yourself

38. NOT a Best Practice
Getting WET

39. WET:
WRITE EVERYTHING TWICE

40. WET:
WE ENJOY TYPING

41. Best Practice #3
OO-JS

42. OOP
Abstraction + Encapsulation

43. Part 2.
Creating Best Practices

44. Best Practices
1. Use YUI
2. Stay DRY
3. OO-JS

45. Best Practices
+
Time

46. Case Study
Backbone.js + Hulu

49. UH. OH.
YUI = Best Practice?

50. Caveat
Objects don’t define
themselves

51. Use, Create, Proliferate

52. Best Practices #1-3
Custom YUI Modules

53. Where do we begin…

55. Y.Node
var nodeB = f(nodeA);

56. Identify a pattern

57. At first we tried…

58. Repeated code everywhere

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

60. Y.namespace()

61. Best Practices #1-3
Custom YUI Modules

62. Example:
Background Fetcher

63. What we wanted:

64. What we wanted:
HTTP.GET + Render Content

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

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

67. Example:
Unescape

68. What we wanted:

69. What we wanted:
Edit HTML Content as Text

70. Node.getHTML()

71. 71

72. 72

73. Node.get('text')

74. 74

75. 75

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

77. Example:
UI Lock

78. What we wanted:

79. What we wanted:
Don’t stack API calls

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

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

82. Example:
Spotlight

83. What we wanted:

84. What we wanted:
Node-level modal effect

85. 85

86. Part 3.
Proliferating Best Practices

87. Coming Soon
https://github.com/talentral

88. Fav Tips & Tricks #1
<script id="..."
type="text/xtemplate">BLOB</script>

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

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

91. Fav Tips & Tricks #3
node.getAttribute('tlnt
:item-id’);

92. How did we ever survive
without…

94. 94

95. 95

96. 96

97. Part 4.
Conclusion

98. Best Practices

99. Use YUI and Pure
+
Custom YUI Modules

100. Use, Create, Proliferate

101. Special Thanks To
YUI Team & Contributors
#yui IRC folks

102. On the Interwebs
@jontsai
http://talentral.com

103. Q&A