Yui2 yui3
This presentation is the property of its rightful owner.
Sponsored Links
1 / 71

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


  • 92 Views
  • Uploaded on
  • Presentation posted in: General

从 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/.

Download Presentation

从 YUI2 到 YUI3 看前端的演变

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


Yui2 yui3

雅虎中国UED团队

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


Yui2 yui3

专职F2E = 0

表格布局

简单的DHTML

无组织、无纪律的开发

专职F2E = 2

DIV布局

支持GBS

Ajax/丰富的交互体验

建立规范

专职F2E > 12

团队协作开发

品质提升

专业化FDP

基于YUI开发

雅虎中国的前端发展

2005

2007

2008


Yui2 yui3

facebook.com

ymail.com

yahoo.com

msn.com


Yui2 yui3

163.com

qq.com

sohu.com

xiaonei.com

my.cn.yahoo.com

kaixin001.com

cn.yahoo.com


Yui2 yui3

高级页面布局

RIA组件

(tabview, carousel, slideshow…)

高级UI效果

(圆角, 阴影, …)

当前前端开发面临的问题

数据处理(Ajax)

性能体验

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

协作开发


Yui2 yui3

前端的演变

  • YUI的演变

  • 开发流程演变

  • 角色的演变


Yui2 yui3

YUI的演变

功能库 框架


Yui2 yui3

YUI

Yahoo! User Interface Library

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

YUI是开源的,免费的

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

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


Yui2 yui3

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

强大的功能库


Yui2 yui3

维护

CSS Grids

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

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

Layout Manager

优化/测试

交互

模块(组件)

模板(布局)


Yui2 yui3

维护

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控件

优化/测试

交互

模块(组件)

模板(布局)


Yui2 yui3

维护

基本开发元件(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

优化/测试

交互

模块(组件)

模板(布局)


Yui2 yui3

维护

Logger Control

Profiler

Profiler Viewer

YUI Test Utility

YUI Compressor

优化/测试

交互

模块(组件)

模板(布局)


Yui2 yui3

维护

YUI Doc

优化/测试

交互

模块(组件)

模板(布局)


Yui2 x flickr

5. Carousel组件增强展示效果

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

YUI2.x使用实例 - Flickr搜索

  • YUI Loader按需加载

  • Selector代替Dom

  • Get组件实现跨站请求

  • YQL (YAP提供的一个工具)

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


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/


Yui2 yui3

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


Yui2 yui3

30 Essential Controls

Bill Scott, Theresa Neil

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


Yui2 yui3

前端工程师(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有机会重新解决核心部分的性能问题


Yui2 yui3

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


Yui2 yui3

“点菜”方式

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


Yui2 yui3

http://developer.yahoo.com/yui/3/configurator/


Yui2 yui3

http://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);


Yui2 yui3

YUI3的组件框架

Widget组件框架

基本组件框架

提供属性管理机制


Yui2 yui3

YUI3的组件框架

  • YUI 3所有的类都从这个类派生

  • 提供自定义事件和属性管理机制

  • “init”和”destroy”生命周期管理

  • 提供插件/扩展管理

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


Yui2 yui3

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的组件框架

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


Yui2 yui3

YUI3的组件框架

  • 1. 继承自Base

  • 2. 包括通用的属性和方法

  • boundingBox, contentBox

  • width, height

  • visible, disable, hasFocus

  • strings

  • show(), hide(), focus(), blur(), enable(), disable()

  • 3. Widget渲染周期的管理

  • 4. 为Widget开发建立一套通用的模式

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


Yui2 yui3

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)


Yui2 yui3

YUI 3的框架

YUI 2的Widget

其他框架(jQuery)

http:[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


Yui2 yui3

http://yuilibrary.com/


Yui2 yui3

http://developer.yahoo.com/yui/docs/index.html


Yui2 yui3

http://developer.yahoo.com/yui/examples/

>300个实例供学习


Yui2 yui3

http://developer.yahoo.com/yui/3/


Yui2 yui3

http://developer.yahoo.com/yui/theater/


Yui2 yui3

http://yuiblog.com/


Yui2 yui3

  • http://twitter.com/yuilibrary


Yui2 yui3

开发流程的演变

单兵作战 集团军作战

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


Yui2 yui3

编 码

自 测

布 署


Yui2 yui3

签出/更新(SVN)

编 码

自 测

布 署

打标签/提交(SVN)


Yui2 yui3

签出/更新(SVN)

编 码

检 验

自 测

布 署

打标签/提交(SVN)


Yui2 yui3

签出/更新(SVN)

编 码

检 验

自 测

压缩/优化

布 署

打标签/提交(SVN)


Yui2 yui3

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)


Yui2 yui3

签出/更新(SVN)

编 码

检 验

整 合

自 测

压缩/优化

文 档

布 署

打标签/提交(SVN)


Yui2 yui3

签出/更新(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......


Yui2 yui3

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

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


Yui2 yui3

布署

编译

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

编码


Yui2 yui3

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


Yui2 yui3

第一步:确认是否装过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执行全部任务


Yui2 yui3

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

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

JS/CSS合并后文件名

作者名

版本号

将会出现在svn目录中

SVN库根目录

图片上传目录


Yui2 yui3

演示:FDP


Yui2 yui3

角色的演变

网页制作 前端工程师


Yui2 yui3

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


Yui2 yui3

专业性 价值

框架

交互

工程实施

产品创新

流程

规范

易用

QA

维护

表现

效率

应用


Yui2 yui3

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


Yui2 yui3

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/


Yui2 yui3

谢 谢 !

http://hikejun.com

http://twitter.com/kejunz

YIM:[email protected]


  • Login