资料下载
Download
1 / 59

打造高品质前端 – YUI 应用 - PowerPoint PPT Presentation


  • 334 Views
  • Updated On :

资料下载 http:[email protected]/yui.ppt. 打造高品质前端 – YUI 应用. 张克军 http://hikejun.com http://twitter.com/kejunz. 张克军 (Kejun) 前端工程师 /D2 委员会成员 雅虎中国 UED – 前端开发小组 主要负责前端开发流程、开发标准、品质提升 [email protected] http://hikejun.com http://twitter.com/kejunz YIM: listenpro GTalk: listenpro.

Related searches for 打造高品质前端 – YUI 应用

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 ' 打造高品质前端 – YUI 应用' - Renfred


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
Slide1 l.jpg

资料下载http:[email protected]/yui.ppt

打造高品质前端 – YUI应用

张克军

http://hikejun.com

http://twitter.com/kejunz


Slide2 l.jpg

张克军 (Kejun)

前端工程师/D2委员会成员

雅虎中国UED – 前端开发小组

主要负责前端开发流程、开发标准、品质提升

[email protected]

http://hikejun.com

http://twitter.com/kejunz

YIM: listenpro

GTalk: listenpro





Slide6 l.jpg

2007.5 (YUI)

http://flickr.com/photos/kejun/521035874/sizes/o/in/set-72157594522105362/


Slide7 l.jpg
雅虎中国的前端开发

专职F2E= 0

表格布局

简单的DHTML

无组织、无纪律的开发

专职F2E= 2

DIV布局

支持GBS

Ajax/丰富的交互体验

建立规范

专职F2E= 12

(还在招募中…)

团队协作开发

品质提升

统一的FDP

2005

2008

2007

推广YUI至全部产品线


Slide8 l.jpg

my.cn.yahoo.com

cn.yahoo.com

163.com

qq.com

sina.com.cn

sohu.com

xiaonei.com

kaixin001.com

youku.com


Slide9 l.jpg

facebook.com

gmail.com

ymail.com

yahoo.com

msn.com

myspace.com

youtube.com



Slide11 l.jpg

伴随前端技术的演变开发中的问题也在随之改变


The page is an application with a data connection to a server l.jpg

"The page is an application with a data connection to a server."

- Douglas Crockford (Yahoo!资深架构师)


Slide13 l.jpg

高级页面布局 server."

RIA组件

(tabview, carousel, slideshow…)

高级UI效果

(圆角, 阴影, …)

当前前端开发中要解决的问题

数据处理(Ajax)

性能体验

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

协作开发


Slide14 l.jpg

YUI server."提供了一套完整的解决方案

http://YUILibrary.com


Slide15 l.jpg

维护 server."

优化/测试

交互行为

模块

结构(布局)

CSS Grids

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

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

Layout Manager


Slide16 l.jpg

维护 server."

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

结构(布局)


Slide17 l.jpg

维护 server."

优化/测试

交互行为

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


Slide18 l.jpg

维护 server."

优化/测试

交互行为

Logger Control

Profiler

Profiler Viewer

YUI Test Utility

模块

YUI Compressor

结构(布局)


Slide19 l.jpg

维护 server."

优化/测试

YUI Doc

交互行为

模块

结构(布局)


Slide20 l.jpg

YUI server."是覆盖前端开发各个环节最全面的开源框架


Slide21 l.jpg

YUI server."太大?


Slide22 l.jpg

YUI 2.6.0 server."


Slide23 l.jpg

开始使用 server."YUI进行开发


Yui grids builder l.jpg
YUI Grids Builder server."快速创建页面布局

更多介绍

http://layouts.ironmyers.com/


Slide25 l.jpg

http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jshttp://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js (27.6K)

YUI Loader

Get

Global Object

YAHOO.namespace,

YAHOO.lang,

YAHOO.env,

YAHOO.log

使用YUILoader管理项目文件


Slide26 l.jpg

var loader = new Y.util.YUILoader({http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

base: 'http://cn.yui.yahooapis.com/2.6.0/build/',

loadOptional: true,

require: ['event', 'selector', 'carousel'],

onSuccess: function(){

YS = Y.util.Selector;

YD = Y.util.Dom;

YE = Y.util.Event;

YD.addClass(document.body, 'yui-skin-sam');

Y.flickrSearch.init();

}

});

loader.insert();


Slide27 l.jpg

loader.addModule({http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

name:'crumb',

type:'js',

fullpath:'http://cn.yimg.com/i/sns/js/crumb_1_0_0_min.js'

});

loader.addModule({

name:'sns_base',

type:'js',

fullpath:'http://cn.yimg.com/i/sns/js/snsbase_1_0_8_min.js',

requires:['dom', 'event']

});

loader.addModule({

name:'msg',

type:'js',

fullpath:'http://cn.yimg.com/i/sns/js/msg_1_0_0_min.js',

requires:['dom', 'event', 'dragdrop','animation']

});

loader.addModule({

name:'sns_events',

type:'js',

fullpath:'http://cn.yimg.com/i/sns/js/events_1_0_3_min.js'

});

loader.addModule({

name:'sns_share',

type:'js',

fullpath:'http://cn.yimg.com/i/sns/js/share_1_0_0_min.js'

});


Slide28 l.jpg

cn.yahoo.comhttp://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

qq.com

163.com

http:[email protected]/example/stat_js.php


1 flickr l.jpg
实例http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js1:Flickr搜索

YUI Loader按需加载

Selector代替DomGet实现跨站请求

YQL

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


2 flickr l.jpg
实例http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js2:Flickr搜索.增强版

Carousel增强展示效果

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


Slide31 l.jpg
实例http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js3: 复杂应用UI

http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html


Slide32 l.jpg
不断向前演变的http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jsYUI

  • 2006/2/13 - YUI beta 1(0.9)正式发布2006/5/9 - YUI beta 2发布2006/7/10 - YUI 0.11发布2006/8/28 - YUI 0.11.3发布2006/10/16 - YUI 0.11.4发布2006/11/13 - YUI 0.12.0发布2006/12/18 - YUI 0.12.1发布2007/1/8 - YUI 0.12.2发布2007/2/20 - YUI 2.2.0发布2007/4/9 - YUI 2.2.1发布2007/4/18 - YUI 2.2.2发布2007/7/31 - YUI 2.3.0发布2007/9/19 - YUI 2.3.1发布2007/12/4 - YUI 2.4.0发布2007/12/19 - YUI 2.4.1发布2008/2/20 - YUI 2.5.0发布2008/3/19 - YUI 2.5.1发布2008/5/28 - YUI 2.5.2发布2008/10/1 - YUI 2.6.0发布2008/8/13 - YUI 3 PR1发布2008/12/9 - YUI 3 PR2发布2009/2/18 – YUI 2.7.0发布

http://www.xtimeline.com/timeline/YUI-Timeline


Slide33 l.jpg

http://yuilibrary.com/http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js


Slide34 l.jpg

http://developer.yahoo.com/yui/docs/index.htmlhttp://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js


Slide35 l.jpg

http://developer.yahoo.com/yui/examples/http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

>300个实例供学习


Slide36 l.jpg

http://developer.yahoo.com/yui/theater/http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js


Slide37 l.jpg

http://yuiblog.com/http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js


Slide38 l.jpg


Yui in the wild l.jpg

YUI In The Wildhttp://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

http://yuiblog.com/blog/category/in-the-wild/


Slide40 l.jpg

下一代http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jsYUI

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


Slide41 l.jpg

YUI 2:http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

popup.innerHTML = desc.innerHTML;

YD.setStyle(popup,‘opacity’, 0.9);

YD.setStyle(popup,‘top’, (ev.clientY + 10) + ‘px’);

YD.setStyle(popup,‘left’, (ev.clientX + 10) + ‘px’);

YUI 3:

popup.set('innerHTML', desc.get('innerHTML'))

.setStyles({

opacity: 0.9, top: (ev.clientY + 10) + "px", left: (ev.clientX + 10) + "px"});jQuery:popup.html(desc.html()).show().css("opacity", 0.9).css("top", (ev.clientY + 10) + "px").css("left", (ev.clientX + 10) + "px");


Slide42 l.jpg

原图:http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jshttp://farm4.static.flickr.com/3465/3289407277_c8837454ca_o.png


Slide43 l.jpg

dom-base(4.9k)http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

dom-screen(4.6k)

dom-style(4.7k)

selector(6.0)k)

dom (21k)

event(22.4k)

yuitest(22.0k)

attribute(3.9k)

yui(23.3k)

yui-base(8.0k)

base(4.0k)

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)

console(8.0k)

classnamemanager(0.4k)

widget-position(1.5k)

widget-position-ext(2.3k)

widget-stack(3.6k)

widget-stdmod(4.9k)

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)

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)

YUI 3 PR2 高度模块化

json-parse(1.2k)

json-stringify(1.7k)

json(2.9k)

yuitest(22.0k)

yui(23.3k)

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)


Slide44 l.jpg

http://developer.yahoo.com/yui/3/configurator/http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js


Yui 3 x l.jpg
YUI 3.x http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js追求的目标

  • Lighter

  • Faster

  • More Consistent

  • More Powerful

  • More Securable


Yui 3 x 1 l.jpg
开始用http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jsYUI 3.x (1)

(function(){

//你的代码

})();

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

//你的代码

});


Yui 3 x 2 l.jpg
开始用http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jsYUI 3.x (2)

(function(){

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

tip.className = “tip”;

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

document.body.appendChild(tip);

})();

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

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

});


Yui 3 x 3 l.jpg
开始用http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jsYUI 3.x (3)

var MY_CONF = {

base: ‘/yui3/build/’,

combine: false,

charset: ‘utf-8’,

loadOptional: true,

modules:{

my_module: {

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

requires: [“node”,“base”]

}

}

};

……

YUI.namespace('example.yui3.demo1');

YUI.namespace('example.yui3.demo2');

YUI.namespace('example.yui3.demo3');

……

YUI(MY_CONF).use(‘node’, ‘my_module’, YUI.example.yui3.demo1.init);

YUI(MY_CONF).use(‘node’, ‘base’, ‘anim’, YUI.example.yui3.demo2.init);

YUI(MY_CONF).use(‘node’, ‘io’, ‘slider’, YUI.example.yui3.demo3.init);


Yui 3 l.jpg
实例一http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js: 简单开始YUI3

  • Node/NodeList

  • Event

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


Slide50 l.jpg
实例二:http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jsYUI3组件开发

  • 高度的一致性

  • 统一的属性管理方式

  • 统一的自定义事件机制

  • 统一的组件生命周期

DEMO:http://hikejun.com/demo/yui3/id7_slideshow/slides1.html


Yui3 x beta l.jpg

期待http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.jsYUI3.x Beta版上半年发布


Slide52 l.jpg

jQueryhttp://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

Dojo

GWT

YUI

Prototype

MooTools


Slide53 l.jpg

http://flickr.com/photos/equanimity/3240917987http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js


Slide54 l.jpg

前端开发的品质http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js


Slide55 l.jpg

用户http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

产品前端

成本

http://flickr.com/photos/kairyo/3275765792/


Slide56 l.jpg
代码品质http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js

  • 代码的正确性(单元测试)

  • 代码的规范性(JSLint+Ant)

  • 代码的可读性(模式化、一致性)

  • 代码的可维护性(SVN、YUIDoc/JSDoc)

  • 代码的兼容性 (GBS)

  • 代码的性能 (YSlow、YUI Profiler、JSLitmus)


Slide58 l.jpg

网站http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js


Slide59 l.jpg

谢谢http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js!

http://hikejun.com

http://twitter.com/kejunz

http://d2forum.org

YIM:listenpro

GTalk:listenpro


ad