y hack-china-2013
DESCRIPTION
TRANSCRIPT
![Page 1: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/1.jpg)
![Page 2: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/2.jpg)
INTRODUCE YUI 3
![Page 3: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/3.jpg)
3
PRESENTER
Name John Wu 吳旭智
Title EC CENTRAL MOBILE F2E
Job Mobile Wretch Bottle Mobile Auctions UWW
![Page 4: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/4.jpg)
4
CATALOG
WHAT IS YUI?
YUI3 COMPARISON
CSS IN YUI3
YUI3 EXTENSION
COMMUNITY
Q&A
![Page 5: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/5.jpg)
5
WHAT IS YUI?
![Page 6: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/6.jpg)
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/
![Page 7: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/7.jpg)
7
WHAT IS YUI?
Why use YUI?Modular architectureSmall, fastHandle X browsers for you
May I use other frameworks?Yes … for small projectsYUI help you more in a large project: modular design,
i18n, sandbox, plugins…
![Page 8: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/8.jpg)
8
YUI3 COMPARISON
![Page 9: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/9.jpg)
9
YUI3 COMPARISON
Sample Hello World!
![Page 10: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/10.jpg)
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>
![Page 11: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/11.jpg)
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>
![Page 12: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/12.jpg)
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>
![Page 13: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/13.jpg)
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>
![Page 14: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/14.jpg)
14
YUI3 COMPARISON
YUI 3 code
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
![Page 15: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/15.jpg)
15
YUI3 COMPARISON
YUI 3 code
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script><script>YUI().use('node', 'event', function (Y) {});</script>
![Page 16: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/16.jpg)
16
YUI3 COMPARISON
YUI 3 code
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script><script>YUI().use('node', 'event', function (Y) {
Y.one('a').on('click', function (E) {});
});</script>
![Page 17: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/17.jpg)
17
YUI3 COMPARISON
YUI 3 code
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script><script>YUI().use('node', 'event', function (Y) {
Y.one('a').on('click', function (E) { E.preventDefault(); alert('Hello World!');});
});</script>
![Page 18: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/18.jpg)
18
YUI3 COMPARISON
Sample 2
Using a module B which needs to require another module A.
![Page 19: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/19.jpg)
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>
![Page 20: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/20.jpg)
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>
![Page 21: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/21.jpg)
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>
![Page 22: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/22.jpg)
22
YUI3 COMPARISON
YUI 3 code
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script><script>YUI().use('node', 'event', 'moduleBrequireA’, function (Y) {
Y.all('a').on('click', function (E) { E.preventDefault(); alert('Hello World!');});
});</script>
![Page 23: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/23.jpg)
23
YUI3 COMPARISON
jQuery vs YUI 3
![Page 24: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/24.jpg)
24
CSS IN YUI3
![Page 25: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/25.jpg)
25
CSS IN YUI3
![Page 26: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/26.jpg)
26
CSS IN YUI3Reset
![Page 27: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/27.jpg)
27
CSS IN YUI3Reset
+
Font
![Page 28: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/28.jpg)
28
CSS IN YUI3
ResetRemoves the browser-provided styling for HTML
elementsFonts
Provide cross-browser typographical normalization and control (Arial , 13px size , 16px line-height)
BaseApply a basic cross-browser styling
GridsProvide a simple system for laying out content
![Page 29: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/29.jpg)
29
YUI3 EXTENSION
![Page 30: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/30.jpg)
30
YUI3 EXTENSION
Javascript modulesUtilities, ExtensionsPluginsWidgets
Dynamic loaded
![Page 31: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/31.jpg)
31
YUI3 EXTENSION
yui-min.jsCORE,
Module System20.3 K
YUI().use()
Dynamic loading
Dependencychecking
Browserspecific
Module Module Module Module
Lazyloading
![Page 32: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/32.jpg)
32
YUI3 EXTENSION
PluginAdd / remove featureSimpleConfigurableY.one(‘#dragdiv’).plug(Y.Plugin.Drag);Y.all(‘.resize’).plug(Y.Plugin.Resize);
![Page 33: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/33.jpg)
33
YUI3 EXTENSIONPlugin.Align
Plugin.AutoComplete
Plugin.Base
Plugin.Button
Plugin.Cache
Plugin.CalendarNavigator
Plugin.ConsoleFilters
Plugin.CreateLinkBase
Plugin.DDConstrained
Plugin.DDNodeScroll
Plugin.DDProxy
Plugin.DDWindowScroll
Plugin.DataTableDataSource
Plugin.Drag
Plugin.Drop
Plugin.EditorBR
Plugin.EditorBidi
Plugin.EditorLists
Plugin.EditorPara
Plugin.EditorParaBase
Plugin.EditorParaIE
Plugin.EditorTab
Plugin.ExecCommand
Plugin.Flick
Plugin.Host
Plugin.NodeFX
Plugin.Pjax
Plugin.Resize
Plugin.ResizeConstrained
Plugin.ResizeProxy
Plugin.ScrollInfo
Plugin.ScrollViewList
Plugin.ScrollViewPaginator
Plugin.ScrollViewScrollbars
Plugin.Shim
Plugin.SortScroll
Plugin.Tree.Lazy
Plugin.WidgetAnim
plugin.NodeFocusManager
plugin.NodeMenuNav
![Page 34: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/34.jpg)
34
YUI3 EXTENSION
Simple Plugin
<script>
YUI().use('plugin', function (Y) {
});
</script>
![Page 35: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/35.jpg)
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);
}
};
![Page 36: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/36.jpg)
36
YUI3 EXTENSION
Simple Plugin
var container = Y.one("div.actions");
container.plug(AnchorPlugin);
container.anchors.disable();
![Page 37: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/37.jpg)
YUI3 EXTENSION
Widgets
AutoComplete Button Calendar Charts DataTable Dial MenuNav Node Plugin Overlay Panel ScrollView Slider TabView
![Page 38: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/38.jpg)
YUI3 EXTENSION
Widgets
![Page 39: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/39.jpg)
39
COMMUNITY
![Page 40: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/40.jpg)
COMMUNITY
YUI Gallery533 modules
![Page 41: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/41.jpg)
COMMUNITY
ContributeHost on githubAnyone can fork / request push
![Page 42: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/42.jpg)
COMMUNITY
BOTTLE
![Page 43: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/43.jpg)
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
![Page 44: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/44.jpg)
COMMUNITY
Bottle YUI().use(‘gallery-bottle’, function (Y) {
Y.Bottle.init(true);
});
Data-attribute
![Page 45: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/45.jpg)
COMMUNITY
Bottle
![Page 46: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/46.jpg)
COMMUNITY
Bottle
![Page 47: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/47.jpg)
COMMUNITY
http://yuilibrary.com
![Page 48: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/48.jpg)
48
Q&A
![Page 49: Y hack-china-2013](https://reader033.vdocuments.mx/reader033/viewer/2022051818/5495438fb47959a1708b46e1/html5/thumbnails/49.jpg)
49
THANKS