Your SlideShare is downloading. ×
0
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Y hack-china-2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Y hack-china-2013

116

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
116
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 首先不免俗的,歡迎大家來參加Yahoo北研的Hack day
  • 接下來講的是一個比較輕鬆的section,了解YUI3
  • 那我先自我介紹一下,我叫吳旭智,大家可以叫我John,目前是在Yahoo Taiwan EC central mobile team裡擔任F2E的工作,目前已經生出來且還在線上的小孩包括手機版無名小站、Bottle、手機版拍賣,以及慾望牆。
  • 好!我們來介紹一下這一節的catalog,首先是yui淺談、yui3與jQuery的比較、YUI3對CSS的support、yui3的extension,以及community的部份。
  • Ok,那我們來進入第一個主題,什麼是yui?
  • Yui就是…. Yahoo! User Interfacelibrary ,他是一個開放的js與css的framework,那她主要是由一群yahoo的工程師來進行核心維護的工作。而且yui目前也不僅運用在client上,因為node.js的興起,Yahoo在以node.js為基礎的server端framework mojito上,也大量的使用了作為js核心的一個部分。
  • Transcript

    • 1. INTRODUCE YUI 3
    • 2. PRESENTER Name  John Wu  吳旭智 Title Job     Mobile Wretch Bottle Mobile Auctions UWW  EC CENTRAL MOBILE  F2E 3
    • 3. CATALOG  WHAT IS YUI?  YUI3 COMPARISON  CSS IN YUI3  YUI3 EXTENSION  COMMUNITY  Q&A 4
    • 4. WHAT IS YUI? 5
    • 5. 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
    • 6. 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
    • 7. YUI3 COMPARISON 8
    • 8. YUI3 COMPARISON Sample Hello World! 9
    • 9. 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
    • 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> 11
    • 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> 12
    • 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> 13
    • 13. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> 14
    • 14. 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
    • 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) { Y.one('a').on('click', function (E) { }); }); </script> 16
    • 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) { E.preventDefault(); alert('Hello World!'); }); }); </script> 17
    • 17. YUI3 COMPARISON Sample 2  Using a module B which needs to require another module A. 18
    • 18. 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
    • 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> 20
    • 20. 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
    • 21. 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
    • 22. YUI3 COMPARISON jQuery vs YUI 3 23
    • 23. CSS IN YUI3 24
    • 24. CSS IN YUI3 25
    • 25. CSS IN YUI3 Reset 26
    • 26. CSS IN YUI3 Reset + Font 27
    • 27. 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
    • 28. YUI3 EXTENSION 29
    • 29. YUI3 EXTENSION Javascript modules Utilities, Extensions Plugins Widgets Dynamic loaded 30
    • 30. 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
    • 31. YUI3 EXTENSION Plugin Add / remove feature Simple Configurable Y.one(‘#dragdiv’).plug(Y.Plugin.Drag); Y.all(‘.resize’).plug(Y.Plugin.Resize); 32
    • 32. YUI3 EXTENSION Plugin.Align Plugin.EditorLists Plugin.Shim Plugin.AutoComplete Plugin.EditorPara Plugin.SortScroll Plugin.Base Plugin.EditorParaBase Plugin.Tree.Lazy Plugin.Button Plugin.EditorParaIE Plugin.WidgetAnim Plugin.Cache Plugin.EditorTab plugin.NodeFocusManager Plugin.CalendarNavigator Plugin.ExecCommand plugin.NodeMenuNav Plugin.ConsoleFilters Plugin.Flick Plugin.CreateLinkBase Plugin.Host Plugin.DDConstrained Plugin.NodeFX Plugin.DDNodeScroll Plugin.Pjax Plugin.DDProxy Plugin.Resize Plugin.DDWindowScroll Plugin.ResizeConstrained Plugin.DataTableDataSource Plugin.ResizeProxy Plugin.Drag Plugin.ScrollInfo Plugin.Drop Plugin.ScrollViewList Plugin.EditorBR Plugin.ScrollViewPaginator Plugin.EditorBidi Plugin.ScrollViewScrollbars 33
    • 33. YUI3 EXTENSION Simple Plugin <script> YUI().use('plugin', function (Y) { }); </script> 34
    • 34. 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
    • 35. YUI3 EXTENSION Simple Plugin var container = Y.one("div.actions"); container.plug(AnchorPlugin); container.anchors.disable(); 36
    • 36. YUI3 EXTENSION Widgets             AutoComplete Button Calendar Charts DataTable Dial MenuNav Node Plugin Overlay Panel ScrollView Slider TabView
    • 37. YUI3 EXTENSION Widgets
    • 38. COMMUNITY 39
    • 39. COMMUNITY YUI Gallery 533 modules
    • 40. COMMUNITY Contribute Host on github Anyone can fork / request push
    • 41. COMMUNITY BOTTLE
    • 42. 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
    • 43. COMMUNITY Bottle  YUI().use(‘gallery-bottle’, function (Y) { Y.Bottle.init(true); });  Data-attribute
    • 44. COMMUNITY Bottle
    • 45. COMMUNITY Bottle
    • 46. COMMUNITY http://yuilibrary.com
    • 47. Q&A 48
    • 48. THANKS 49

    ×