Y hack-china-2013

INTRODUCE YUI 3

3

PRESENTER

Name John Wu 吳旭智

Title EC CENTRAL MOBILE F2E

Job Mobile Wretch Bottle Mobile Auctions UWW

4

CATALOG

WHAT IS YUI?

YUI3 COMPARISON

CSS IN YUI3

YUI3 EXTENSION

COMMUNITY

Q&A

5

WHAT IS YUI?

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/

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…

8

YUI3 COMPARISON

9

YUI3 COMPARISON

Sample Hello World!

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

YUI3 COMPARISON

jQuery code


<script>





});

});

</script>

12

YUI3 COMPARISON

jQuery code


<script>





});

});

</script>

13

YUI3 COMPARISON

jQuery code


<script>





});

});

</script>

14

YUI3 COMPARISON

YUI 3 code

<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>

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>

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>

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>

18

YUI3 COMPARISON

Sample 2

Using a module B which needs to require another module A.

19

YUI3 COMPARISON

jQuery code


<script src="moduleBrequireA.js"></script>

<script>





});

});

</script>

20

YUI3 COMPARISON

jQuery code



<script>





});

});

</script>

21

YUI3 COMPARISON

jQuery code


<script src="moduleA.js"></script>


<script>





});

});

</script>

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>

23

YUI3 COMPARISON

jQuery vs YUI 3

24

CSS IN YUI3

25

CSS IN YUI3

26

CSS IN YUI3Reset

27

CSS IN YUI3Reset

+

Font

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

29

YUI3 EXTENSION

30

YUI3 EXTENSION

Javascript modulesUtilities, ExtensionsPluginsWidgets

Dynamic loaded

http://yuilibrary.com/yui/docs/guides/

31

YUI3 EXTENSION

yui-min.jsCORE,

Module System20.3 K

YUI().use()

Dynamic loading

Dependencychecking

Browserspecific

Module Module Module Module

Lazyloading

32

YUI3 EXTENSION

PluginAdd / remove featureSimpleConfigurableY.one(‘#dragdiv’).plug(Y.Plugin.Drag);Y.all(‘.resize’).plug(Y.Plugin.Resize);

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

34

YUI3 EXTENSION

Simple Plugin

<script>

YUI().use('plugin', function (Y) {

});

</script>

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);

}

};

36

YUI3 EXTENSION

Simple Plugin

var container = Y.one("div.actions");

container.plug(AnchorPlugin);

container.anchors.disable();

YUI3 EXTENSION

Widgets

AutoComplete Button Calendar Charts DataTable Dial MenuNav Node Plugin Overlay Panel ScrollView Slider TabView

YUI3 EXTENSION

Widgets

39

COMMUNITY

COMMUNITY

YUI Gallery533 modules

COMMUNITY

ContributeHost on githubAnyone can fork / request push

COMMUNITY

BOTTLE

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

COMMUNITY

Bottle YUI().use(‘gallery-bottle’, function (Y) {

Y.Bottle.init(true);

});

Data-attribute

COMMUNITY

Bottle

COMMUNITY

http://yuilibrary.com

48

Q&A

49

THANKS

Y hack-china-2013

Technology

Transcript of Y hack-china-2013