Y hack-china-2013
Download as PPTX, PDF0 likes296 views
This document introduces YUI 3, a JavaScript and CSS framework. It discusses what YUI is, compares YUI 3 to jQuery with code examples, covers CSS and extensions in YUI 3, and discusses the YUI community including the YUI Gallery and Bottle modules. The presenter is John Wu from EC CENTRAL MOBILE working on mobile projects using F2E.
Y hack-china-2013
- 3. PRESENTER Name John Wu 吳旭智 Title Job Mobile Wretch Bottle Mobile Auctions UWW EC CENTRAL MOBILE F2E 3
- 4. CATALOG WHAT IS YUI? YUI3 COMPARISON CSS IN YUI3 YUI3 EXTENSION COMMUNITY Q&A 4
- 6. YUI IS … Yahoo! User Interface open source JavaScript and CSS framework Core maintained by a team of Yahoo engineers Using on client and server side Try it http://yuilibrary.com/ 6
- 7. WHAT IS YUI? Why use YUI? Modular architecture Small, fast Handle X browsers for you May I use other frameworks? Yes … for small projects YUI help you more in a large project: modular design, i18n, sandbox, plugins… 7
- 9. YUI3 COMPARISON Sample Hello World! 9
- 10. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 10
- 11. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 11
- 12. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 12
- 13. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 13
- 14. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> 14
- 15. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> <script> YUI().use('node', 'event', function (Y) { }); </script> 15
- 16. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> <script> YUI().use('node', 'event', function (Y) { Y.one('a').on('click', function (E) { }); }); </script> 16
- 17. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> <script> YUI().use('node', 'event', function (Y) { Y.one('a').on('click', function (E) { E.preventDefault(); alert('Hello World!'); }); }); </script> 17
- 18. YUI3 COMPARISON Sample 2 Using a module B which needs to require another module A. 18
- 19. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script src="moduleBrequireA.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 19
- 20. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script src="moduleBrequireA.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 20
- 21. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script src="moduleA.js"></script> <script src="moduleBrequireA.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 21
- 22. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> <script> YUI().use('node', 'event', 'moduleBrequireA’, function (Y) { Y.all('a').on('click', function (E) { E.preventDefault(); alert('Hello World!'); }); }); </script> 22
- 23. YUI3 COMPARISON jQuery vs YUI 3 23
- 24. CSS IN YUI3 24
- 25. CSS IN YUI3 25
- 28. CSS IN YUI3 Reset Removes the browser-provided styling for HTML elements Fonts Provide cross-browser typographical normalization and control (Arial , 13px size , 16px line-height) Base Apply a basic cross-browser styling Grids Provide a simple system for laying out content 28
- 30. YUI3 EXTENSION Javascript modules Utilities, Extensions Plugins Widgets Dynamic loaded 30
- 31. YUI3 EXTENSION Dynamic loading yui-min.js CORE, Module System 20.3 K Dependency checking YUI().use() Browser specific Lazy loading Module Module Module Module 31
- 32. YUI3 EXTENSION Plugin Add / remove feature Simple Configurable Y.one(‘#dragdiv’).plug(Y.Plugin.Drag); Y.all(‘.resize’).plug(Y.Plugin.Resize); 32
- 34. YUI3 EXTENSION Simple Plugin <script> YUI().use('plugin', function (Y) { }); </script> 34
- 35. YUI3 EXTENSION Simple Plugin function AnchorPlugin(config) { this._node = config.host; } AnchorPlugin.NS = "anchors”; AnchorPlugin.prototype = { disable: function() { var node = this._node; var anchors = node.queryAll("a"); anchors.addClass("disabled"); anchors.setAttribute("disabled", true); } }; 35
- 36. YUI3 EXTENSION Simple Plugin var container = Y.one("div.actions"); container.plug(AnchorPlugin); container.anchors.disable(); 36
- 37. YUI3 EXTENSION Widgets AutoComplete Button Calendar Charts DataTable Dial MenuNav Node Plugin Overlay Panel ScrollView Slider TabView
- 39. COMMUNITY 39
- 41. COMMUNITY Contribute Host on github Anyone can fork / request push
- 42. COMMUNITY BOTTLE
- 43. COMMUNITY Bottle Carousel Widget Container Widget Device Utility Loader Widget Overlay Widget Page Widget PhotoGrid Widget PushPop Widget ShortCut Widget SlideTab Widget SyncScroll Widget UI Components (testing) View Widget
- 44. COMMUNITY Bottle YUI().use(‘gallery-bottle’, function (Y) { Y.Bottle.init(true); }); Data-attribute
- 45. COMMUNITY Bottle
- 46. COMMUNITY Bottle
- 48. Q&A 48
- 49. THANKS 49
Editor's Notes
- #2: 首先不免俗的，歡迎大家來參加Yahoo北研的Hack day
- #3: 接下來講的是一個比較輕鬆的section，了解YUI3
- #4: 那我先自我介紹一下，我叫吳旭智，大家可以叫我John，目前是在Yahoo Taiwan EC central mobile team裡擔任F2E的工作，目前已經生出來且還在線上的小孩包括手機版無名小站、Bottle、手機版拍賣，以及慾望牆。
- #5: 好！我們來介紹一下這一節的catalog，首先是yui淺談、yui3與jQuery的比較、YUI3對CSS的support、yui3的extension，以及community的部份。
- #6: Ok，那我們來進入第一個主題，什麼是yui？
- #7: Yui就是…. Yahoo! User Interfacelibrary ，他是一個開放的js與css的framework，那她主要是由一群yahoo的工程師來進行核心維護的工作。而且yui目前也不僅運用在client上，因為node.js的興起，Yahoo在以node.js為基礎的server端framework mojito上，也大量的使用了作為js核心的一個部分。