Stoyan Stefanov씨는 Yahoo 엔지니어로 좀더 나은 예시를 찾기 위해 일해왔습니다.
그리고 새로운 결과를 아래 자료로 발표하였습니다.

그는 웹 페이지의 성능향상을 위한 14가지 기존 룰에 20가지 새로운 규칙을 찾아냈습니다.
우리는 다음 정보에 대해서 분류화 최적화를 하였습니다. :  서버, 컨텐츠, 쿠키, 자바스크립트, CSS, 이미지 그리고 모바일

아래의 새로운 목록입니다.  그리고 좀더 상세한 정보는 곧 발표할 예정입니다.

1. Flush the buffer early	[server]
2. Use GET for AJAX requests	[server]
3. Post-load components	[content]
4. Preload components	[content]
5. Reduce the number of DOM elements	[content]
6. Split components across domains	[content]
7. Minimize the number of iframes	[content]
8. No 404s	[content]
9. Reduce cookie size	[cookie]
10. Use cookie-free domains for components	[cookie]
11. Minimize DOM access	[javascript]
12. Develop smart event handlers	[javascript]
13. Choose <link> over @import	[css]
14. Avoid filters	[css]
15. Optimize images	[images]
16. Optimize CSS sprites	[images]
17. Don’t scale images in HTML	[images]
18. Make favicon.ico small and cacheable	[images]
19. Keep components under 25K	[mobile]
20. Pack components into a multipart document	[mobile]

Is it just me, or is performance getting a LOT of attention these days?

우렁 아가씨가 다녀갔다

어제도 이런 저런 자료를 보다가 새벽 2시 즈음에 잠이 억지로 들었었는데...

다 못보고잔 "NorthCast - Christian Heilmann - YUI! javaScript Evolved.avi"

내용이 퍽 궁금하지는 않지만 빨리 보고 싶다..

외국에는 저런 개발자들의 커뮤니티가 자연스럽게 형성되는 것 같은데 늘 국내의 개발자 커뮤니티에 대해서는 불만이다..

앗참.. 우렁각시...

점심밥 먹고 와서 너무 피곤해서 의자에 파뭍혀 잠을 청하고 있었는데..

너무 깊숙히 잠들었었나 보다.. 누가 다녀간지도 기억도 소리 조차 없었는데..

일어나서 한참을 코딩하고 있는데 어디선가 자꾸 "아메리카노" 커피 향이 코구멍을 간지럽혔다..

블로그에 누가 왔었나 한번 보려고 했는데 주위를 잠깐 살펴봤더니 달력옆에 놓여진 커피~~

이런 사랑스러운 사람들... 누군지 모르지만 확 사랑해버리고 싶다 ㅋㅋㅋ..

야후 YUI가 2.5로 릴리즈 되었네요.
그것도 엄청난 새로 추가된 Layout Manager, Uploader(플래시와 자바스크립트를 연동한 다중 업로드), Resize Utility, ImageCropper, Cookie Utility, ProfilerViewer Control(매우 비쥬얼함)

그리고 DataTable Control의 향상되었고 슬라이드 컨트롤에 Dual-Thumb Slider functionality 의 새롭게 포함되었습니다.

DataTable Control

퍼포먼스 향상과, 수평, 수직 스크롤링, Paginator 클래스, 드래그 드롭 컬럼 재정렬 지원, 칼럼 표시/숨기기/추가/삭제를 후킹하기 위한 컬럼 APIs를 제공합니다.(해보지 않아서 맞는 말인지 모르겠음;;)

DataTable 은 YUI에서 가장 인기 있고 중요한 컴포넌트이레요(과연..흠..)


Layout Manager
안정화만 되면 상당히 좋은 기능을 할 것 같습니다.
예제를 잠깐 수행해봤는데 아직 최적화 되지는 않았고 알파 수준에 미치는 것 같습니다.

패널에 다양한 컴포넌트를 얹어서 좌측 레이아웃 처럼 구성해서 리사이즈, 풀사이즈, 드래그 등 다양한 액션을 제공하는 컴포넌트입니다.

컨테이너의 패널에 composition style로 다양한 컴포넌트를 올려 실제 움직이는 어플리케이션과 같은 레이어를 구성해주는 역활을 합니다.



Uploader
여러분들이 그동안 브라우저를 통한 업로드를 위한 UI를 생성했다면 어려운점이 많았을 것입니다.
하나의 파일을 올리거나 프로그래스 상황 표시하는 거나, 메타 데이터에 실질적 접근 등등 하지만  YUI Uploader 는 이 문제를 포함 다른 문제들도 함께 처리가 가능하게 되었구요.  javascript/flash 하이브리드 컨트롤이랍니다.;;;


Resize Utility
  Layout Mangaer 에 확장되어 리사이즈를 담당합니다.

ImageCropper Control
Resize Utility를 이용하여 이미지 크롭 인터페이스의 도구로서 사용됩니다

캡쳐 프로그램과 유사하게 구현되겠네요.







Cookie Utility
  좋은 유틸리티 입니다. 개발자들이 모두 알고 있지만 한 도메인당 쿠키 공간은 제한이 되어있습니다. 그 사이즈가 오버될 경우 쿠키는 온데간데 없이 사라져 버리거나 오작동을 유발하는데요.
이에 착안해 Nicholas C.Zakas씨가 만들었다고 하네요.
  심플하면서도 파워풀하게 트리 구조의 쿠키 관리를 하여 제한된 쿠키 공간을 효율적으로 사용할 수 있도록 메니지 먼트를 합니다.


ProfilerViewer Control
 
  보기만 해도 궁금해지네요.  기존 Profiler 보다 더욱 비쥬얼해진 ProfilerViewer Control 은 기존 Profiler에 Charts Control 과 DataTable Control 을 함께 잘 조합하여 FireBug's와 같은 통합 프로파일링 인터페이스르 툴을 추가적으로 개발을 위해서 만들었습니다.    이걸 보고 CBD 방법론이 강력함을 느낍니다.


Slider Control with Dual Thumb Support

Slider 의 좀더 강력한 기능이 추가되었습니다.
좌측 이미지만 보아도 감이 오시죠?




이번 YUI 2.5의 릴리즈는 많이 새롭습니다.  이번 릴리즈를 통해서 생성된 실용적인 컴포넌트들에 "짝짝짝' 박수를 보냅니다.

원  문 : http://yuiblog.com/blog/2008/02/20/yui-250-released/

YUI2.4.0 - Yahoo User Interface 분석 자료입니다.
yahoo.js 에 들어있는 global object 에 대한 내용을 다루고 있습니다.

번역에 있어 다소 오류가 있을 수 있습니다.
정확한 정보는 developer.yahoo.com 에서 확인하시기 바랍니다.

pdf :

YUI, YAHOO USER INTERFACE 세미나 자료
Simple Use Case: YAHOO Object

가장 심플리티한 사용!! YAHOO 글로벌 오브젝트를 사용하기 위해서 어떤 액션도 필요 하지 않습니다.

YUI 의 YAHOO 오브젝트 라이브러리는 모든 구성요소들에 실용적인 메서드들의 컨테이너와 프로바이더 역활을 한다.．

Type-Checking Your Data

타입체크를 위한 YAHOO.lang 오브젝트 Yahoo Global Object 에 포함되어 있으며 여러가지 유용한 타입체크 메서드를 제공합니다.

isArray
  : 제공된 오브젝트가 Array 인지 체크, array 이면 true 아니면 false 를 반환한다.
isBoolean
  : 제공된 오브젝트가 Boolean 인지 체크, boolean 이면 true 아니면 false 를 반환한다.
isFunction
  : 제공된 오브젝트가 Function 인지 체크, function 이면 true 아니면 false 를 반환한다.
isNull
  : 제공된 오브젝트가 Null 인지 체크, null 이면 true 아니면 false 를 반환한다.
isNumber
  : 제공된 오브젝트가 Number 인지 체크, number 이면 true 아니면 false 를 반환한다.
isObject
  : 제공된 오브젝트가 Object 인지 체크, object 이면 true 아니면 false 를 반환한다.
isString
  : 제공된 오브젝트가 String 인지 체크, string 이면 true 아니면 false 를 반환한다.
isUndefined
  : 제공된 오브젝트가 Undefined 인지 체크, undefined 이면 true 아니면 false 를 반환한다.
isValue
  : 꾀 편리한 메서드 입니다. null/undefined/NaN 의 경우에는 false를 그외의 것들은 true를 반환합니다.
    0과 false 그리고 ''(공백) 도 true를 반환합니다.

User Agent Detection

YAHOO.env.ua 오브젝트 Yahoo Global Object 에 포함되어 있으며 다양한 브라우저를 구분하는 도구로 쓰입니다. 
우리는 다양한 브라우저에서 어느 브라우저에서는 지원되지만 어느 브라우저에서는 지원되지 않거나 합니다. 하지만 크로스 브라우징을 위해서 모든 브라우저에서 지원되도록 만들어야 합니다.
이때 브라우저 스니핑은 부정확한 합니다.  브라우저의 환경과는 많은 것들이 연관됩니다.
그동안 나온 많은 기술들을 매우 정확합니다. 하지만 100% 보장하지는 않습니다.

YAHOO.env.ua.gecko : FireFox 버젼 정보를 반환한다. 아니면 int(0) 을 반환
YAHOO.env.ua.ie : IE이면 버젼 정보를 반환한다. 아니면 int(0) 을 반환
YAHOO.env.ua.opera : Opera 이면 버젼 정보를 반환한다. 아니면 int(0)을 반환
YAHOO.env.ua.webkit : Apple Webkit 이면 버젼 정보를 반환한다. 아니면 int(0)을 반환
YAHOO.env.ua.mobile : 아직은 제한적으로 Webkit 기반 브라우저와 Opera Mini 를 사용하는 Safari, iPhone/iPod tuch, Nokia N-series 들만 지원

Creating Class Hierarchies with YAHOO.lang.extend

자 바스크립트(javascript)는 계층적 클래스(class) 개념을 제공합니다. 다른 객체지향 언어들처럼 슈퍼클래스(super class)의 기능적 오버라이드(overrid) 추가(extend)가 가능한 클래스(class)를 만들 수 있습니다.

Creating a Composition-Based Class Structure Using YAHOO.lang.augmentProto

YAHOO.argument 와 매우 유사한 메서드입니다. argumentProto는 배경지식을 위해서 argumentProto 의 히스토리를 보고 구문을 위해서 한번쯤 보기를 권장합니다.

composition 은 상속의 개념이 아닙니다.
왼쪽 이미지를 통해 설명 합니다.

만약 Foo가 클래스 계층의 일부분이다면 상속 사슬에서 EventProvider를 포함하는 것은 부적당하게 되므로 근본적으로 두 가지는(Foo 와 EventProvider) 다릅니다.

확장된 클래스와는 다릅니다.

argumentProto의 의도는 컴포지션 스타일(Composition-style) 클래스 체계를 고려하고 많은 클래스들에 의해 공유되는 중요하지 않는 습성또는 성질을 뽑아내는데 도움을 줍니다.


이것은 다중상속과 매우 유사해 보일지 모릅니다. 하지만 그렇지 않습니다. argumentProto는 단지 어떤 클래스의 프로토타입에 또 다른 하나의 프로토타입까지 public 메서드와 멤버를 추가합니다.

이것은 Prototypejs 의 Object.extend 와 똑같은 기능을 말합니다. dest class에 source class 의 property 를 copy하는 기능입니다.

이런 경우 a class instanceof b class 의 경우 false 로 나오겠죠? 

Prototype.js Framework 에 익숙해져서 argumentProto 라는 네이밍이 왠지 어색합니다.
Object.extend 가 왠지 직접적이고 어떤 기능을 한다라고 느끼기에 참 좋은것 같습니다.

Add Behavior to Objects or Static Classes with YAHOO.lang.augmentObject

YAHOO.lang.argumentObject 는 YAHOO.lang.argumentProto 와 매우 유사합니다. 실제로 argumentProto는 내부적으로 argumentObject를 사용하고 있습니다.  그러나 클래스의 정의(즉 펑션 프로토타입)에 기능적 추가 보다는 오히려 argumentObject는 오브젝트 literals 과 클래스 인스턴를 포함한 어떤 오브젝트와도 동작할 수 있습니다.

여러분의 코드 구조 관리를 돕기 위한 다른 기술들을 위해서  argumentProto와 extned를 보세요.

Combining Simple Data Sets with YAHOO.lang.merge

YAHOO.lang.merge 는 data object 를 단일 셋으로 만드는 역활을 합니다.
Prototype.js 의 hash.merge 와 동일한 기능을 합니다. 중복되는 key 는 나중에 merge 되는 것들로
모드 replace 됩니다.



이렇게 YAHOO Global Object 에 대한 자료는 마칩니다. 예시는 YUI pdf cheat 에 모두 나와있고 또한
여러곳에 나와있기 때문에 따로 기재하지는 않습니다.

쓰임새에 대해서 알아보고 나중에 좀더 고급화된 활용법에 대해서 이야기할 기회가 있다면
그때 좀더 자세한 예시와 함께 포스팅하도록 하겠습니다.

첨부로 Class diagram 을 자료로 첨부합니다. 
다운로드 :