Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Staying DRY with YUI

1 339 vues

Publié le

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.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×