yui2 yui3
Download
Skip this Video
Download Presentation
从 YUI2 到 YUI3 看前端的演变

Loading in 2 Seconds...

play fullscreen
1 / 71

从 YUI2 到 YUI3 看前端的演变 - PowerPoint PPT Presentation


  • 143 Views
  • Uploaded on

从 YUI2 到 YUI3 看前端的演变. 张克军 http://hikejun.com http://twitter.com/kejunz. 张克军 (Kejun). 前端工程师 技术分享者(科技大使、 Evangelist ) 第二届 D2 的组织者 [email protected] http://hikejun.com http://twitter.com/kejunz YIM: listenpro GTalk: listenpro. 雅虎中国 UED 团队. http://www.flickr.com/photos/kejun/3440398351/.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 从 YUI2 到 YUI3 看前端的演变' - arnold


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
yui2 yui3

从YUI2到YUI3看前端的演变

张克军http://hikejun.com

http://twitter.com/kejunz

kejun
张克军 (Kejun)

前端工程师

技术分享者(科技大使、Evangelist)

第二届D2的组织者

[email protected]

http://hikejun.com

http://twitter.com/kejunz

YIM: listenpro

GTalk: listenpro

slide3

雅虎中国UED团队

http://www.flickr.com/photos/kejun/3440398351/

slide4

专职F2E = 0

表格布局

简单的DHTML

无组织、无纪律的开发

专职F2E = 2

DIV布局

支持GBS

Ajax/丰富的交互体验

建立规范

专职F2E > 12

团队协作开发

品质提升

专业化FDP

基于YUI开发

雅虎中国的前端发展

2005

2007

2008

slide5

facebook.com

ymail.com

yahoo.com

msn.com

slide6

163.com

qq.com

sohu.com

xiaonei.com

my.cn.yahoo.com

kaixin001.com

cn.yahoo.com

slide7

高级页面布局

RIA组件

(tabview, carousel, slideshow…)

高级UI效果

(圆角, 阴影, …)

当前前端开发面临的问题

数据处理(Ajax)

性能体验

(UPP, PLT, CPU消费, 内存占用…)

协作开发

slide8
前端的演变
  • YUI的演变
  • 开发流程演变
  • 角色的演变
slide9

YUI的演变

功能库 框架

slide10
YUI

Yahoo! User Interface Library

YUI是一个富客户端开发框架(不仅仅是Javascript框架)

YUI是开源的,免费的

YUI不仅限Yahoo! 使用,现已成为最流行的框架之一

http://www.flickr.com/photos/codepo8/2294380961/

slide11

YUI 2.x

2006/2/13 - YUI beta 12006/5/9 - YUI beta 22006/7/10 - YUI 0.112006/8/28 - YUI 0.11.32006/10/16 - YUI 0.11.42006/11/13 - YUI 0.12.02006/12/18 - YUI 0.12.1

2007/1/8 - YUI 0.12.22007/2/20 - YUI 2.2.02007/4/9 - YUI 2.2.12007/4/18 - YUI 2.2.22007/7/31 - YUI 2.3.02007/9/19 - YUI 2.3.12007/12/4 - YUI 2.4.02007/12/19 - YUI 2.4.1

2008/2/20 - YUI 2.5.02008/3/19 - YUI 2.5.12008/5/28 - YUI 2.5.22008/10/1 - YUI 2.6.02008/8/13 - YUI 3 PR12008/12/9 - YUI 3 PR2

2009/2/18 – YUI 2.7.0

YUI 3.x

YUI的演变过程

Y!表现平台

2005 2006 2007 2008 2009

参考链接:http://www.xtimeline.com/timeline/YUI-Timeline

yui 2 x

YUI 2.x

强大的功能库

slide13

维护

CSS Grids

提供超过1000种布局(详细, 介绍)

提供桌面软件风格的页面布局(详细)

Layout Manager

优化/测试

交互

模块(组件)

模板(布局)

slide14

维护

Button

Calendar

Color Picker

Menu

Carousel

Container (Module, Overlay, Panel, ToolTip, Dialog, SimpleDialog)

Paginator

Rich Text Editor

TabView

TreeView

AutoComplete

Slider

Charts

Image Cropper

DataTable

Uploader

RIA控件

优化/测试

交互

模块(组件)

模板(布局)

slide15

维护

基本开发元件(Utility)

DataSource

Browser History Manager

Connection Manager

JSON

Cookie

Element

Drag&Drop

Resize

Animation

StyleSheet

DOM

Event

Selector

YUI Loader

Get

Global Object

YAHOO.namespace,

YAHOO.lang,

YAHOO.env,

YAHOO.log

优化/测试

交互

模块(组件)

模板(布局)

slide16

维护

Logger Control

Profiler

Profiler Viewer

YUI Test Utility

YUI Compressor

优化/测试

交互

模块(组件)

模板(布局)

slide17

维护

YUI Doc

优化/测试

交互

模块(组件)

模板(布局)

yui2 x flickr

5. Carousel组件增强展示效果

DEMO: http://hikejun.com/sharing/[email protected]/example/flickr.carousel.html

YUI2.x 使用实例 - Flickr搜索
  • YUI Loader按需加载
  • Selector代替Dom
  • Get组件实现跨站请求
  • YQL (YAP提供的一个工具)

DEMO: http://hikejun.com/sharing/[email protected]/example/flickr.html

yui2 x
YUI2.x瞄准前端开发生命周期的每个环节,提供组件和工具。YUI2.x瞄准前端开发生命周期的每个环节,提供组件和工具。

结论1:

yui2 x1

开发元件(Utility)集

DataSource

Global Object

YAHOO.namespace,

YAHOO.lang,

YAHOO.env,

YAHOO.log

Browser History Manager

Connection Manager

JSON

Cookie

Get

Element

Drag&Drop

Resize

Animation

StyleSheet

DOM

Event

Selector

YUI Loader

YUI2.x是一个强大的、成熟的、稳定的功能库。

结论2:

http://www.flickr.com/photos/wwworks/2472232245/

slide21
开发跟设计的冲突点:开发试图用框架实现开发的一致性,而设计(产品)试图追求差异性和新的流行元素。开发跟设计的冲突点:开发试图用框架实现开发的一致性,而设计(产品)试图追求差异性和新的流行元素。
slide22

30 Essential Controls

Bill Scott, Theresa Neil

参考链接:http://designingwebinterfaces.com/essential_controls

slide23

前端工程师(Developer) 设计师(Designer)

通用组件库

模式(模板、开发模式)

框架、开发规范

Desgin Pattern

原型

设计规范(GuideLine)

yui 3 x

YUI 3.x

灵活的框架

yui 3 x1
YUI 3.x 追求的目标
  • Lighter更好的颗粒化模块/子模块强调代码重用: 通用的基类、插件和扩展的机制
  • Easier一致性的API Base, Selector, Widget, IO/Get/DataSource便利性 each, bind, nodelist, queue, chainability, general sugar
  • Faster有机会重新解决核心部分的性能问题
slide26

dom-base(4.9k)

dom-screen(4.6k)

dom-style(4.7k)

selector(6.0)k)

dom (21k)

node-base(6.0k)

node-screen(0.8k)

node-style(0.3k)

node-event-simulate(0.3k)

node(6.6k)

anim-base(4.4k)

anim-xy(0.4k)

anim-color(0.9k)

anim-curve(0.7k)

anim-easing(2.3k)

anim-scroll(0.5k)

anim-node-plugin(0.4k)

anim(8.4k)

widget-position(1.5k)

widget-position-ext(2.3k)

widget-stack(3.6k)

widget-stdmod(4.9k)

widget(8.6k)

dd-ddm-base(2.2k)

dd-ddm(1.4k)

dd-ddm-drop(3.4k)

dd-drag(8.1k)

dd-drop(4.4k)

dd-constrain(3.5k)

dd-plugin(0.4k)

dd-drop-plugin(0.4k)

dd(24.7k)

dd-proxy(1.7k)

io-base(3.5k)

io-xdr(0.8k)

io-form(1.1k)

io-upload-iframe(1.9k)

io-queue(0.8k)

io(6.1k)

json-parse(1.2k)

json-stringify(1.7k)

json(2.9k)

yuitest(22.0k)

yui(23.4k)

dom (21k)

event(22.4k)

yui-base(8.0k)

base(4.0k)

attribute(3.9k)

anim(8.4k)

console(8.0k)

classnamemanager(0.4k)

node(6.6k)

json(2.9k)

dd(24.7k)

io(6.1k)

widget(8.6k)

cookie(3.2k)

dump(0.8k)

oop(1.7k)

overlay(0.4k)

plugin(0.9k)

profiler(3.4k)

get(3.3k)

loader(12.2k)

node-menunav(11.5k)

queue(1.4k)

slider(8.6k)

substitute(0.9k)

event(22.4k)

yuitest(22.0k)

attribute(3.9k)

yui(23.3k)

yui-base(8.0k)

base(4.0k)

console(8.0k)

classnamemanager(0.4k)

cookie(3.2k)

dump(0.8k)

oop(1.7k)

overlay(0.4k)

plugin(0.9k)

profiler(3.4k)

get(3.3k)

loader(12.2k)

node-menunav(11.5k)

queue(1.4k)

slider(8.6k)

substitute(0.9k)

YUI 3 PR2 高度模块化

connection vs io
Connection vs. IO

出自:http://video.yahoo.com/watch/5044557/13406817

slide28

“点菜”方式

http://www.flickr.com/photos/zeping/281262028/

slide30

http://farm4.static.flickr.com/3465/3289407277_c8837454ca_o.pnghttp://farm4.static.flickr.com/3465/3289407277_c8837454ca_o.png

yui 3 x 1
开始用YUI 3.x (1)

<script src=“http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js”></script>

(23.4K)

<script>

//你的代码

</script>

yui 3 x 2

① Loader配置文件

② 模块列表

③ YUI实例

① ② ③

开始用YUI 3.x (2)

(function(){

//你的代码

})();

YUI(CONF).use(‘*’, function(Y){

//你的代码

});

yui 3 x 3
开始用YUI 3.x (3)

(function(){

var tip = document.createElement(“div”);

tip.className = “tip”;

tip.innerHTML = “欢迎学习YUI!”

document.body.appendChild(tip);

})();

YUI(CONF).use(‘node’, function(Y){

Y.get(“body”).appendChild(Y.Node.create(‘<div class=“tip”>欢迎学习YUI!</div>’));

});

Y.get(“body”).appendChild(Y.Node.create(‘<div class=“tip”>欢迎学习YUI!</div>’));

yui 3 x 4

如: 写入qq-lib.js (如果介意YUI2.x中的YAHOO)

开始用YUI 3.x (4)

var CONF = {

base: ‘/yui3/build/’,

combine: false,

charset: ‘utf-8’,

loadOptional: true,

modules:{

my_module: {

fullpath: “http://.....my_module-min.js”,

requires: [“node”,“base”]

}

}

}; var QQ = YUI(CONF);

……

QQ.namespace(\'example.demo1\');

QQ.namespace(\'example.demo2\');

QQ.namespace(\'example.demo3\');

……

QQ.use(‘node’, ‘my_module’, QQ.example.demo1.init);

QQ.use(‘node’, ‘base’, ‘anim’, QQ.example.demo2.init);

QQ.use(‘node’, ‘io’, ‘slider’, QQ.example.demo3.init);

slide35
YUI3的组件框架

Widget组件框架

基本组件框架

提供属性管理机制

slide36
YUI3的组件框架
  • YUI 3所有的类都从这个类派生
  • 提供自定义事件和属性管理机制
  • “init”和”destroy”生命周期管理
  • 提供插件/扩展管理

基本组件框架。提供属性管理和事件机制

slide37

function MyClass(){

MyClass.superclass

.constructor.apply(this, arguments);

}

Y.mix(MyClass, {

NAME: “myclass”,

ATTRS: { attrA: {

//属性attrA的定义

}

}

});

Y.extend(MyClass, Y.Base, {

//定义原型链上的属性或方法

});

……

Y.extend(MyClass, Y.Base, {

doSomething: function(){

this.fire(‘after_dosomething’);

}

});

Var o = new MyClass({attrA: 100});

o.on(‘after_dosomething’, function(){

……

});

o.after(‘after_dosomething’, function(){

……

});

YUI3的组件框架

基本组件框架。提供属性管理和事件机制

slide38
YUI3的组件框架
  • 1. 继承自Base
  • 2. 包括通用的属性和方法
  • boundingBox, contentBox
  • width, height
  • visible, disable, hasFocus
  • strings
  • show(), hide(), focus(), blur(), enable(), disable()
  • 3. Widget渲染周期的管理
  • 4. 为Widget开发建立一套通用的模式

基本组件框架。提供属性管理和事件机制

slide39
YUI3的组件框架

function MyPlugin(config) {

this._owner = config.owner;

}

MyPlugin.NAME = \'myplugin\';

MyPlugin.NS = \'mp\';

MyPlugin.prototype = {

doSomething: function() { alert(\'hello world\'); }

};

var myNode = Y.get(\'#demo\');

myNode.plug(MyPlugin);

myNode.mp.doSomething();

向结点或Widget添加功能。

如,Y.get(‘#target’).plug(MyPlugin)

slide41

YUI 3的框架

YUI 2的Widget

其他框架(jQuery)

http://www.flickr.com/photos/[email protected]/478704495/

yui team
来自YUI Team的介绍

Satyen Desai

http://video.yahoo.com/watch/5044557/13406817

Dav Glasshttp://www.slideshare.net/davglass/yui-3

Eric Miraglia & Matt Sweeney

http://video.yahoo.com/watch/3711767/10207432

slide50

开发流程的演变

单兵作战 集团军作战

http://www.boston.com/bigpicture/

slide51

编 码

自 测

布 署

slide52

签出/更新(SVN)

编 码

自 测

布 署

打标签/提交(SVN)

slide53

签出/更新(SVN)

编 码

检 验

自 测

布 署

打标签/提交(SVN)

slide54

签出/更新(SVN)

编 码

检 验

自 测

压缩/优化

布 署

打标签/提交(SVN)

slide55

YAHOO.CN.Fp.personalAssitant.js

YAHOO.CN.Fp.skin.js

YAHOO.CN.Fp.search.js

YAHOO.CN.Fp.topList.js

YAHOO.CN.Fp.ScrollMessage.js

CSS_Layout.css

CSS_Module.css

CSS_Mod_Category.css

CSS_Mod_PersonalAssistant.css

......

fplib-min.js

fp-min.css

签出/更新(SVN)

编 码

检 验

整 合

自 测

压缩/优化

布 署

打标签/提交(SVN)

slide56

签出/更新(SVN)

编 码

检 验

整 合

自 测

压缩/优化

文 档

布 署

打标签/提交(SVN)

slide57

签出/更新(SVN)

编 码

检 验

整 合

自 测

压缩/优化

文 档

布 署

打标签/提交(SVN)

TortoiseSVN, Subvision, Git...

DW, Aptana, GVim, EditPlus, Emacs, ......

JSLint, W3C HTML Validator, CSS Tidy…

YUI Combiner, Cat, Copy.....

YUI Test, FireUnit, JSUnit, ......

YUI Compressor, Smush.it, …

YUI Doc, JSDoc

SCP/FTP, Rsync, Image Uploader......

slide60

实现前端开发的“自动化”

借签传统软件开发经验MakeFile, Ant, Bat, Javascript, …

slide61

布署

编译

实现前端开发的“自动化”

编码

slide62

http://ant.apache.org

FDP

Windows: http://hikejun.com/download/fdp-ant-beta-1.0.0.msi

其它: http://hikejun.com/download/fdp-ant-beta-1.0.0.zip

  • 跨平台。PC/Mac
  • 内置功能丰富
  • 扩展方便
  • 易学易用

相关链接:http://blog.360.yahoo.com/blog-sOW1QOA9crUyOdXFxOeK4xc-?cq=1&tag=ant

slide63

第一步:确认是否装过Java运行时和JDK第二步:安装FDP第三步:修改基本属性文件<HOME>/build.files/build.properties第四步:修改build.xml文件<property file=“<指定绝对路径>build.properties” />第五步:复制build.xml到工作目录下

如果是新创建,目录跟项目名保持一致!第六步:修改build.xml中的相关参数第七步:使用ant用于开发环节(默认执行fdp.development) ant fdp.init初始化工作目录ant fdp.gendoc用于生成文档ant fdp.release用于发布ant all执行全部任务

slide64

指定基本参数文件(绝对路径!)

项目名称(小写!)将会做为svn目录名

JS/CSS合并后文件名

作者名

版本号

将会出现在svn目录中

SVN库根目录

图片上传目录

slide66

角色的演变

网页制作 前端工程师

slide67

前端工程师不仅是工程的实施者,也是产品的创新者。前端工程师不仅是工程的实施者,也是产品的创新者。

slide68

专业性 价值

框架

交互

工程实施

产品创新

流程

规范

易用

QA

维护

表现

效率

应用

slide70

My Professional Life Graph

薪酬

心情

yahoo! cn

1pai

times-interactive

asiaec

2002 2003 2004 2005 2006 2007 2008 2009

灵感来自:http://www.flickr.com/photos/juhansonin/2212629625/sizes/l/

slide71

谢 谢 !

http://hikejun.com

http://twitter.com/kejunz

YIM:[email protected]

ad