Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Staying DRY with YUI

1,337 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
  • Be the first to comment

  • Be the first to like this

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

×