yui3 is sexy
Use yui3 Sexy Part
Most programming languagescontain good parts and bad parts. Idiscovered that I could be a betterprogrammer by using only t...
YUI3JavaScript  YUI                    miiiCasa
Seed and Loader
YUI().use()           CDN                                  Sexy                                       YUI().use() + pullin...
YUI Seed<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>                          YUI Wigets   ...
<!DOCTYPE html> <html> <meta charset=”utf-8”> <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> ...
YUI3<!DOCTYPE html><html><meta charset=”utf-8”><script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>...
YUI Dialhttp://josephj.com/training/hinet/yui-dial.html     YUI().use(“dial”)           modules     (new Y.Dial()).render(...
YUI 3 Loaderyui-min.js                      CSS   Sexy ?
OOP JavaScript Developer
• Attribute• Base         Attribute           Utility• Plugin       Base             Instance• Extension       Base       ...
http://josephj.com/entry.php?id=257
JavaScript                       set         attribute   Object
YUI  YUI
jQuery      $(“#foo”).content();      $(“#foo”).content(“blah blah”);      $(“#foo-link”).attr(“title”);      $(“#foo-link...
YUI Y.one(“#foo”).get(“innerHTML”); Y.one(“#foo”).setContent(“blah blah”); Y.one(“#foo-link”).getAttribute(“title”); Y.one...
http://hax.iteye.com/blog/850778
Scalability          Stacks
YUI   For scalable web applications, YUI   really excels.                                                       Principal ...
Yahoo!                      JavaScript         Semantic Accessibility WidgetCustomization Usability ProgressiveEnhancement...
• YUI Test             • YUI DataType  JavaScript• YUI Docs      JavaScript API• YUI Profiler• YUI Build             Buildi...
Progressive Enhancement       module
YUI Historyhttp://developer.yahoo.com/yui/3/historyHTML 5, Flash, Google Gear
YUI 2 Storagehttp://developer.yahoo.com/yui/storageHTML 5, SWF, Google Gear
Sematic & Standard
Thank Youhttp://developer.yahoo.com/yui/    josephj6802@gmail.com
Upcoming SlideShare
Loading in …5
×

yui3 is Sexy - 使用 YUI 3 的 Sexy Part !

9,258 views
9,143 views

Published on

還沒寫完的投影片,先丟出來。

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

No Downloads
Views
Total views
9,258
On SlideShare
0
From Embeds
0
Number of Embeds
1,415
Actions
Shares
0
Downloads
133
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

yui3 is Sexy - 使用 YUI 3 的 Sexy Part !

  1. 1. yui3 is sexy
  2. 2. Use yui3 Sexy Part
  3. 3. Most programming languagescontain good parts and bad parts. Idiscovered that I could be a betterprogrammer by using only the goodparts and avoiding the bad parts. Yahoo! JavaScript Architect Douglas Crockford http://www.yuiblog.com/blog/2008/05/05/crockford-inheritance/
  4. 4. YUI3JavaScript YUI miiiCasa
  5. 5. Seed and Loader
  6. 6. YUI().use() CDN Sexy YUI().use() + pulling code off of Yahoos CDN is damn sexy and should be promoted *VERY* heavily. The creator of jQueryJohn Resighttp://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
  7. 7. YUI Seed<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> YUI Wigets Dial<script>YUI().use(“dial”, function (Y) { (new Y.Dial()).render();});</script>
  8. 8. <!DOCTYPE html> <html> <meta charset=”utf-8”> <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> <script> YUI().use(“dial”, function (Y) { (new Y.Dial()).render(); }); </script> <body class=”yui3-skin-sam”></body> </html>Wow! JavaScript CSS? ?
  9. 9. YUI3<!DOCTYPE html><html><meta charset=”utf-8”><script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script><script>YUI().use(“dial”, function (Y) { (new Y.Dial()).render();});</script><body class=”yui3-skin-sam”></body></html>
  10. 10. YUI Dialhttp://josephj.com/training/hinet/yui-dial.html YUI().use(“dial”) modules (new Y.Dial()).render(<selector>); YUI 3 Dial
  11. 11. YUI 3 Loaderyui-min.js CSS Sexy ?
  12. 12. OOP JavaScript Developer
  13. 13. • Attribute• Base Attribute Utility• Plugin Base Instance• Extension Base Class• Widget Base Widget
  14. 14. http://josephj.com/entry.php?id=257
  15. 15. JavaScript set attribute Object
  16. 16. YUI YUI
  17. 17. jQuery $(“#foo”).content(); $(“#foo”).content(“blah blah”); $(“#foo-link”).attr(“title”); $(“#foo-link”).attr(“title”, “blah blah”); setget Native JavaScript Unit Test
  18. 18. YUI Y.one(“#foo”).get(“innerHTML”); Y.one(“#foo”).setContent(“blah blah”); Y.one(“#foo-link”).getAttribute(“title”); Y.one(“#foo-link”).setAttribute(“title”, “blah blah”); NativeJavaScript Douglas Crockford“YUI helps you learn JavaScript.” :)
  19. 19. http://hax.iteye.com/blog/850778
  20. 20. Scalability Stacks
  21. 21. YUI For scalable web applications, YUI really excels. Principal Front End Engineer, Yahoo! Nicholas Zakashttp://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/
  22. 22. Yahoo! JavaScript Semantic Accessibility WidgetCustomization Usability ProgressiveEnhancement Performance
  23. 23. • YUI Test • YUI DataType JavaScript• YUI Docs JavaScript API• YUI Profiler• YUI Build Building Blocks• YUI Compressor JS/CSS• YUI I18N
  24. 24. Progressive Enhancement module
  25. 25. YUI Historyhttp://developer.yahoo.com/yui/3/historyHTML 5, Flash, Google Gear
  26. 26. YUI 2 Storagehttp://developer.yahoo.com/yui/storageHTML 5, SWF, Google Gear
  27. 27. Sematic & Standard
  28. 28. Thank Youhttp://developer.yahoo.com/yui/ josephj6802@gmail.com

×