야후 사용자 인터페이스 블로그 (YUIBlog)

모바일 브라우저의 캐시 제한 : 안드로이드, IOS, 그리고 웹 OS

업데이트 (2010년 7월 12일)는이 문서에서 설명하는 결과를 HTML 페이지에 대한 정확하고 있지만, 새로운 테스트는 매우 다른 캐시 한계 CSS와 JS 자원을 공개했습니다. 업데이트된 결과에서 설명하는 모바일 브라우저의 캐시 제한, Revisited .

2008 초반에서 웨인 쉬어과 Tenni Theurer은 계속 YUI 블로그 포스트를 쓴 아이폰 Cacheability 들이 아이폰 OS 1.x.에서 모바일 사파리의 캐시의 다양한 특성과 한계에 연구 결과를 공유하는 다른 이유도 있었지만, 그들은 475킬로바이트과 5백킬로바이트 사이의 최대 총 캐시 크기를 가지고있다는 것을 25킬로바이트보다 큰 개별 구성 요소가 캐시에 없다는 사실을 발견합니다.

대부분 그이 후로 변경되었습니다. 우리는 두 가지 새로운 주요 릴리스와 아이폰 OS (현재 IOS), 그리고 고도로 지원하는 브라우저에서 여러 다른 모바일 장치의 많은 마이너 릴리즈 아이폰에 도전하는 등장했습니다 봤습니다. Stoyan Stefanov는 것을, 늦은 2009 년, 발견 아이폰의 캐시 제한은 변하지 않았다 (슬프게도, 최악의 경우). 지금은 상황이 어디까지 온거지? 그리고 그 이외의 IOS 브라우저는?

배경

브라우저 우리가이 검사의 목적으로 우려하고있는 것으로 캐시의 두 가지 유형이 있습니다

• 구성 요소 캐시 또는 개체 캐시는 개별 파일을 저장합니다. HTML, CSS, 자바 스크립트, 이미지는 모든 구성 요소 캐시로 이동하십시오. 그것이 이러한 구성 요소 중 하나가 필요 때마다 브라우저는 먼저 네트워크 요청을하기 전에 캐시를 확인합니다.
• 또한 뒤로 / 앞으로 캐시로 알려진 페이지 캐시, 전체 페이지 및 모든 구성 요소뿐만 아니라, 자신의 현재 상태를 저장합니다. 당신은 뒤로 또는 앞으로 단추를 사용하면, 브라우저는 페이지 캐시 가능하다면에서 페이지를로드합니다.

HTML5 응용 프로그램 캐시는 널리 모바일 브라우저에서 지원의 캐시의 또 다른 유형입니다. 브라우저 제조 업체는 이미 응용 프로그램 캐시의 한계를 문서화의 좋은 일을, 그래서 나는 내 테스트를 포함하지 않았다. 나중에 응용 프로그램 캐시에 대한 자세한.

장치 테스트

나는 다음의 모바일 브라우저 / 플랫폼 조합을 테스트 :

• 안드로이드 2.1 (넥서스 원)
• IOS 3.1.3에서 모바일 사파리 (1-세대 아이폰)
• IOS 3.2에서 모바일 사파리 (iPad)
• IOS 4.0 (아이폰 3GS)에서 모바일 사파리
• IOS 4.0에서 모바일 사파리 (아이폰 4)
• 웹 OS 1.4.1 (팜 사전 플러스)

참고 사항 : IOS 4.0에서 모바일 사파리를 제외하고, 나는 각 카테고리에서 유일한 장치를 테스트했습니다. 개별 장치나 운영 체제 이외의 설치된 소프트웨어를 기반으로 차이점에 변화가있다면, 나의 시험은 이러한 변화를 감지 않을 것입니다. 그들이 내가에 액세스했던 사람이기 때문에 나는 그들이 다른 기기보다 더 중요하다고 생각하기 때문에 이러한 특정 장치가 아닌 테스트되었습니다.

방법론

캐시 테스트는 지루하지만, 상대적으로 간단합니다.

나는 작은 시나트 응용 프로그램 (쓴 GitHub에 포크! pseudorandom 영숫자 및 공백 요청된 바이트 숫자로 구성된 응답을 생성합니다). 응답 중 하나를 gzip으로 압축 또는 비압축 제공 할 수 있습니다. 다음과 같은 먼 미래의 만료 응답 헤더는 모든 응답이 캐시로 간주되는 것을 보장하기 위해 보내집니다 :

 캐시 - 제어 : 최대 - 나이 = 315,360,000
 만료 : 2020년 5월 1일 (금) 03시 47분 24초 (그리니치 표준시)를

내 로컬 네트워크를 통해, 나는 다음 수동으로 컴포넌트 캐시를 테스트하는 각 장치에 대해 다음 단계를 수행 :

1. 캐시 테스트 색인 페이지를로드합니다.
2. 5킬로바이트에서 20메가바이트에 이르기까지 특정 크기의 구성 요소에 대한 링크를 누르, 그리고 그것이 로드될 때까지 기다립니다.
3. 뒤로 버튼을 누릅니다.
4. 다시 동일한 링크를 누릅니다. 임의의 문자가 동일 여부를 관찰하고, 서버 콘솔 구성 요소가 2 단계에 캐시였다 여부를 결정하는 요청에 대한 로그 항목을 출력 여부.
5. 캐시 될 최대 구성 요소의 크기를 결정하는 데 필요한 구성 요소 크기를 반복하고 조정합니다.

페이지 캐시를 테스트하려면, 그 대신에 4 단계에서 다시 링크를 도청으로, 나는 그것이 페이지 캐시가 아닌 컴포넌트 캐시를 사용하여 발생 브라우저의 앞으로 버튼을 도청을 제외하고 본질적으로 동일한 단계를 수행했습니다.

지원 ETag 및 Last-Modified 조정 적절한 전송 서버에 의해 결정되었다 ETag 또는 Last-Modified 응답 헤더를 (별도 테스트) 및 먼 미래 만료 헤더를 생략합니다. 나는 그 때 브라우저가 예상 전송되었는지 확인하기 위해 서버에 의해 수신된 요청 헤더 검사 If-None-Match 하거나 If-Modified-Since 4 단계에서 헤더를.

결과

나 gzip을 테스트한 모두 활성화 및 비활성화지만 gzip을 어떤 장치에 cacheability에 아무런 효과가 없었습니다 것으로 나타났습니다. 압축되지 않은 구성 요소의 크기에 관계없이 그 구성 요소를 gzip으로 압축 제공되는 여부에 상관없이 모든 경우에 무엇이 중요 한 것입니다. 따라서 이곳에 언급된 모든 구성 요소 크기는 압축되지 않은 사이즈입니다.

아래 표는 내 전반적인 연구 결과를 보여줍니다.

기계적 인조 인간

안드로이드 브라우저는 테스트한 모든 장치에서 최고의 캐시 동작을 전시. 그것이 개별 구성 요소의 크기에 제한을 부과하지 보이는 반면, 전체 캐시 크기는 각각의 구성 요소가 효과적으로뿐만 2메가바이트로 제한됩니다 즉, 약 2메가바이트로 제한될 것으로 보인다.

페이지 캐시 즐겁게 사용 가능한 RAM이 모두 소진하고 브라우저가 충돌되기 전까지 내가 던져 모든 바이트 캐싱, 각 페이지의 크기에 제한을 부과하지를 보였다.

나는 유쾌 안드로이드의 구성 요소 캐시가 브라우저를 다시 시작 및 전원 사이클을 모두 살아남았다는 것을 찾을 수 놀랐어 IOS 장치의 쾌거를 전혀 일치시킬 수 없었다.

가능한 경고 :의 검토 안드로이드의 웹킷 소스 트리가 나에게는 캐시 제한 RAM 및 / 또는 그것이 도망 치고있는 특정 장치에서 사용 가능한 플래시 메모리의 크기를 기반으로 적응할 수 있다고 생각하는 데 이어집니다. true이면 숫자는 넥서스 하나에 적용할 수 있습니다. 캐시 크기가 아닌 전체 메모리보다 사용하지 않는 메모리를 기반으로 적응한다면 사실,이 숫자는 내 넥서스 하나에 적용할 수 있습니다.

제가 오해를하지만, 아이폰 3GS와 아이폰 4 IOS 4.0 시험 결과의 차이가이 이론을 지원할 수있다. (안드로이드와 모바일 사파리 둘 다 웹킷 기반 브라우저이다, 그래서 그들은 공통점이 동작을 할 수 있습니다.)은 웹킷 소스 익숙한이에 대한 자세한 설명해 주실 수있다면, 나와 함께 연락 주시기 바랍니다.

IOS

결과 IOS의 최근 3 버전에 걸쳐 격렬하게 다양. 모습일까요, IOS 3.1.3에서 모바일 사파리는 분명히 무제한 페이지 캐시 크기를 가지고 있음에도 불구하고, 모든 크기의 구성 요소를 캐시하지 않았다. 그것 IOS 3.1.3 사용자는 가능성들이 무선랜을 사용하지 않는 특히, suboptimal 브라우징 경험을지고 의미 때문에이 열세입니다. 그것만이 앞으로 / 뒤로 navigations으로 게임에 와서부터 무제한의 페이지 캐시 크기는, 작은 좋은 않습니다. 이 동작은 다른 사람들이 이전의 IOS 릴리스에서 관찰하고 그것에 대한 충분한 이유가 상상할 수없는 것과 큰 변화이며, 그래서 이것은 버그가있을 수 있습니다 의심.

IOS 3.2에서 모바일 사파리는 (어떤이 iPad에서만 사용 가능)이 버그를 전시하지 않습니다. 그것 25.6KB 컴포넌트 한계와 ~ 281.6KB 총 캐시 제한은 아무것도없는 것보단 낫지 있지만, 그들은 여전히​​ 테스트를 다른 장치에 비해 하찮은 것 같습니다. 유니 클리 IOS 장치간에, iPad는 25.6KB, 그 구성 요소 크기 제한 같은 동작 페이지 캐시에 페이지의 크기를 제한할 것으로 보인다.

IOS 4.0에서 모바일 사파리는 한계가 가능한 RAM (; 테스트한 두 장치는 플래시 메모리 32GB의 가지고 있던 아이폰 4 5백12메가바이트있는 동안 아이폰 3GS가 256메가바이트있다)을 기반으로 적응한다는 의미 아이폰 3GS에와 아이폰 4 가지 한계를, 전시 . 아이폰 3GS에서 IOS 4.0 51.199KB 구성 요소 크기 제한과 ~ 1.05MB 총 컴포넌트 캐시 크기를 가지고 있습니다.

아이폰 4, 구성 요소 크기 제한은 102.399KB에서 거의 정확히 아이폰 3GS에 두 번 제한했습니다. 전체 구성 요소 캐시 크기는 약 1.9MB했습니다. IOS 3.2 IOS 4.0 별도로 개발하지만, 공통된 조상에서 측쇄되었다 아마도 때문에 IOS 4.0 페이지 캐시 크기는 겨우 IOS 3.1.3와 같이 테스트를 모두 장치에 사용 가능한 RAM에 의해 제한되는 것처럼 보인다.

단지 실제로 브라우저를 죽이지 않고 응용 프로그램을 전환할 때 그들이 캐시를 보존 없었지만 IOS 장치들은 아무도, 강제로 브라우저를 다시 시작하거나 장치 전원 사이클에 걸쳐 캐시의 내용을 보존 없습니다.

웹 OS

웹 OS에 대한 검사 결과는 내가 그들의 거의 확신을 가질 수 있도록 일관성이 있었다. 나는 완성도를 위해 순수하게 수집하기 위해 관리되는 어떤 데이터가 거의 포함했습니다. 소금 무거운 입자로 받아주십시오.

마찬가지로 근처에 제가 확인할 수 있었던 것처럼, 웹 OS는 페이지 캐시에 일치하는 페이지의 크기 제한으로 1메가바이트 약 개별 구성 요소 크기 제한을 할 수도 있습니다. 나는 동축 케이블하지 못한 If-None-Match 하거나 If-Modified-Since 가 지원하지 않는 의미 웹 OS에서 요청 헤더 ETag 및 Last-Modified .

일부 테스트에서는, 그것은 웹 OS의 최대 구성 크기은 1MB보다 큰 것을 나타났지만이 앞뒤가 맞지 않았어요. 제가 아는 한, 웹 OS는 특정 시점 가능성이 후, 불쾌한 버그가 어디있어 보였 최대 총 캐시 크기에 도달-되었을 때 캐시가 완전 휴대폰 전원을 그렇게 했어요까지 모두 작동을 중지합니다. 어떤 경우에도 전원 사이클링 캐시 파손 문제를 해결하지 않았다, 나는 결국 문제의 정확한 원인과 웹 OS 캐시의 정확한 한계를 알아내려는 포기하고 있으므로.

추천

이러한 결과를 바탕으로, 제가 테스트 장치에 대한 웹 응용 프로그램을 개발하는 사람에게 다음과 같은 권장 사항을 제공합니다 :

• 먼 미래의 캐시 만료 헤더를 사용합니다. 이것은 조건부 GET 요청을 보내도록하고 지원하지 않는 웹 OS에서 cacheability 향상 않아도 브라우저를 방지할 수 있습니다 ETag 또는 Last-Modified .
• IOS 4.0 iPad에 도착 적어도 때까지, 비압축, 25.6KB 이하로 개별 구성 요소 크기를 제한하려고합니다. 그리고 아이폰 사용자들이 가능한 빨리 IOS 4.0으로 업그레이 드 촉구합니다.
• 그것 25.6KB보다 구성 요소가 더 큰 요구하는 경우 귀하의 웹사이트, IOS 3.1.3 사용자 (가능성있는)을 지원해야하는 경우, 또는 모든 구성 요소의 총 크기가 281.6KB보다 큰 경우, HTML5 응용 프로그램 캐시 사용을 고려해야 localStorage , 또는 데이터베이스 스토리지는 귀하의 구성 요소를 저장합니다. 알렉스 Kessinger 최근 YUI 블로그 포스트, 오프라인 응용 프로그램에 YUI 3을 사용하는 소개 , 이러한 방식을 고려 YUI 3 개발자를 위해 관심 있을겁니다.
• 자신의 테스트를 수행 있습니다. 이러한 결과는 테스트된 브라우저 또는 장치 중의 차기 버전에 적용한다고 가정하지 마십시오. 출발점으로 이러한 결과를 사용하지만 모바 캐시 제한에 대한 가정을 바탕으로 주요 결정을 내리기 전에 그들에게 자신을 확인합니다. 번개 속도의 모바일 브라우저 세계의 변화, 이번 연구는 매우 짧은 수명을 가지고 있습니다.

나는 적이 GitHub에서 사용 가능한 내 테스트 코드를 만들어 그리고 당신이 그것을 포크, 그것을 사용하는 것이 좋습니다 그리고 당신이 배울 것을 공유할 수 있습니다.

문서를 불러라

브라우저 메이커는 브라우저의 캐시 제한을 문서화하고 게시 고려해 주시기 바랍니다. 바탕 화면 세계에서는 이러한 제한은 일반적으로 비 문제가 될만큼 높은 위치를, 설명서가 필요되지 않았습니다. 모바일 세계에서 브라우저의 캐시 제한은 웹 개발자들이 뛰어난 기능 performant 웹사이트를 만들기 위하여 가지고 있어야하는 중요한 정보입니다.

localStorage 및 응용 프로그램 캐시와 같은 새로운 기능의 한계는 일반적으로 쉽지도 않고 잘 문서화된다. 뿐만 아니라 구성 요소 캐시 설명서의이 수준을 확장하십시오.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

2010년 6월 25일위한 야생에서

항상 저희 의견에 알려주 @ yuilibrary 우리는 중요한 걸 놓친 경우.

• YUI 3 - 기반 합금의 UI가 정식 Liferay 컨퍼런스에서 발표 : 보낸 보도 자료 : "이러한 노력의 일환으로 Liferay도의 즉각적인 가용성 발표 Liferay 합금 UI를 . 야후의 YUI 프로젝트와 공동으로 개발된 합금 UI를 신속하게 사용자에게 친숙한 포틀릿, 위젯, 웹 애플 리케이션을 만들기 위해 풍부한 사용자 인터페이스 컴포넌트의 집합을 제공합니다. 합금의 UI는 비즈니스 요구 사항과 기능에 집중할 수 있도록 개발자를 자유롭게, CSS, HTML 및 자바 스크립트의 복잡으로 다룹니다. 합금의 UI는 일반적으로 프로젝트의 자원을 소비하는 몇 가지 일반적인 크로스 브라우저 호환성 문제를 해결하는 데 도움이됩니다. 새로운 라이브러리는 포털을 필요로하지 않으며, 모든 웹 응용 프로그램을위한 구성 요소를 개발하는 데 사용할 수 있습니다. Liferay Portal은 현대 포털 기반의 엔터 프라이즈 솔루션의 단순 성과 기능 확대, 합금 UI 주위의 프런트 엔드 프레임 워크를 표준화합니다. '합금 UI가 풍부한 UIs의 개발을 단순화하는 웹 개발자를위한 새로운 기능을 나타냅니다,'브라이언 Chan은 Liferay는 말했다 포털의 제작자 겸 최고 소프트웨어 아키텍트. '우리는 야후 팀과 함께이 문제에 근무 행복하고 기분 그것은 그들의 솔루션 개발자를 도울 수있는 훌륭한 자산이 될 것입니다.' '모든 합금 UI 구성 요소는 현재의 YUI 커뮤니티에 자유롭게 사용할 수 있습니다 YUI 3 갤러리 .
• AutoFusion의 CarPrices.com은 YUI 3.1.1을 사용하여 출시 : YUI 3 갤러리 기여 조쉬 Lizarraga는 새로운 일에 Autofusion 주식 회사와 협력되었습니다 CarPrices.com 프로젝트 YUI 3.1.1 유틸리티와 위젯의 호스트를 사용하여 건설. 조쉬는 미래 YUIBlog 포스트에서이 프로젝트를 더해야합니다.
  
• 분대의 Erez Zukerman은 YUI 극장에서 Crockford를 볼 JS Devs을 조언 다운로드 : Erez을 씁니다 : " 더글러스 Crockford는 천재입니다. 진심으로 - 남자는 영리합니다. 그는 현재 야후의 수석 자바 스크립트 아키텍트로 재직 것, 그가 발명한 JSON을 (널리 사용되는 데이터 교환 형식), 그는 ECMAScript위원회 (자바 스크립트 표준을 설정하는 사람)의 일부이고, 프로그래밍의 일반적인 역사를 매우 광범위한 지식을 가지고 언어와 컴퓨터 과학. 최근 Crockford 준 다섯 회담 야후의의 일환으로 자바 스크립트에 대해 YUI 극장 . 이것들은 모두 무료로 사용할 수 있고 그들은 길이 다섯 시간 (이상 총 6~7시간처럼 내 생각)에있다. 무엇이 회담에 대해 너무 멋지다 것은 Crockford가 정말 당신에게 피사체의 조감도를 제공하는이다; 첫 번째 시간은 바로 역사이다, 그것은 정말로 흥미 롭군요. 그것부터 온 집안에 널려있어 Jackquad 직기 우리 삭제와 키보드의 백스 페이스 키, 현대 프로그래밍 언어 및 자바 스크립트까지 모두 이유 통해. "Erez 좋아하는 자바 스크립트 자원의 자세한 내용은 자신의 게시물을 체크 아웃 , 또는 JavaScript 페이지에서 Crockford로 향할 (많은이의 두 번째 컬럼 작성과 더글라스의 최신 동영상을위한 YUI 극장 ).
  
• 메트 Snider & 친구 YUI에서 2 기반 Mint.com, 2010 Webby의 우승자에게 축하 : 축하 매트 Snider . 및 금융 서비스 부문에서의 당연한 2,010 Webby 어워드에 대한 Mint.com의 다른 뛰어난 프론트 엔드 엔지니어 민트 YUI 처음부터 2 기반되어 있으며 매트가 계속 YUI 프로젝트에 큰 기여 . 당신이 볼 수있는 YouTube에서 위에 매트의 다섯 단어가 취임 연설을 .
  
• YUI 3 Ajaxian의 디온 Almaer 리뷰 Caridy Patiño Mayea의 미리 갤러리 모듈 : 디온은 Ajaxian가 자산을 prefetching 및 캐싱을 위해 Caridy Patiño Mayea의 미리 모듈을 검토에 좋은 포스트를 가지고 , YUI 3 갤러리 항목 것을 그는 YUIBlog에 대해 최근에 썼다 .
  
• 이동 가능한 유형 (@ foxxtrot으로)와 함께 선택 YUI 격자를 사용하여 : YUI 기여 제프 크레이그 YUI 두 격자로 이동 가능한 유형 블로그를 변환하는 그의 경험에 대해 썼다 : "그럼, 지금까지 내 블로그를 읽고있는 사람으로서, 넌 알거야 그 주말 내 블로그 템플릿은 자바 스크립트에 대한 YUI 격자 및 YUI3를 사용하도록 업그레이 드. MT 템플릿 (또는, 나는 MTOS 4의 첫 번째 버전을 설치할 때 표준 있었다 템플릿)에서 떨어져 전환함으로써, 나는 망할 근처 반으로 HTML pageweight을 줄일 수있었습니다. 오래된 템플릿은 정말 사업부 - 무거운 있었고, 여분의 마크업 몇 톤했다. 대부분의 결정은 내 블로그의 시각적 느낌을 고치겠 욕정, 난 그것을하는 동안 나는 물론 선택 YUI 그리드 아래에 다시 작성할 수 있습니다 느꼈습니다. "
• 네이트 Schutta는 IBM DevelperWorks 위해 YUI와 도조를 비교 : IBM의 developerWorks에 대한 서면 네이트 Schutta는 새로운 포스트에서 YUI 2.x 및 도조를 비교합니다. 우리 YUI 3.x를 codeline 요즘에 더 집중하고 있지만, 네이트의 기사는 자바 스크립트 라이브러리에 대한 이러한 사고에 대한 유용한 지침을 가지고 있으며, 자신의 사업이나 프로젝트에 대한 결정. 첫째 - 왜 YUI 또는 도조?

  귀하의 처분에 이렇게 많은 훌륭한 선택으로, 당신은 왜 YUI 또는 도조을 생각해 보실래요? 한마디로 : 완성도. 추가적인 라이브러리 또는 플러그인을 포함 다른 솔루션과는 달리, 도조와 유이 오늘날의 프런트 엔드 엔지니어가 원하는 모든 것을 (및 기타) 있습니다. 그 축복과 저주가 모두 있지만 귀하의 아약스 요구를위한 원스톱 상점을위한 시장에있다면,이 두 가지 강력한 경쟁자입니다. 자바 스크립트 헬퍼와 유틸리티 모두 제공하는 최고의 위젯과 컨트롤 - 지금까지 표준 브라우저의 제한된 팔레트를 넘어 풍부한 외에도.

  일반 도서관의 선택 기준에 관한 네이트의 조언은 유용하다 :

  • 당신은 뭘 바라는거야? 당신은 자바 스크립트 프로그래밍의 고통을 조금 꺼내 뭔가를 찾고있는, 또는 귀하의 페이지에있는 거의 모든 UI 요소의 완전한 교체를위한 찾고 계십니까?
  • 코드가 얼마나 쉽게 읽을입​​니까? 지난 몇 년간 설명서의 대규모 개선에도 불구하고, 확률은 어느 시점에서 코드에 파고하셔야합니다. 도서관에 커밋하기 전에, 소스의 무릎 깊은 시간을 보냅니다. 그것은 이해하기 쉽습니다, 심지어 원래 저자가 그것으로 문제가 있습니까?
  • 설명서는 얼마나 훌륭한가? 깔끔하고 읽기 쉬운 코드가 낮은 별의 문서를 위해 만들 수 있지만, 아무것도 당신이 매우 자습서 및 예제처럼 시작할 수 없습니다. 위키 또는 웹사이트 주변에 찌르고, 그들이 제공해야하는 지 참조하십시오. 예제는 명확하고 쉽게 따라해야하는 건가요? 빠른 Google 검색은 해당 자료의 적절한 부분을 가지고 있습니까?
  • 도서관을 둘러싸는 그런 사회는 무엇입니까? 메일링리스트를 확인하십시오. 트래픽이 많이 있습니까? 새로운 사람은 존경이나 조소로 치료 있습니까? 코드는 최근 업데이 트하거나, 몇 년 전에 마지막 릴리스했습니다 되었습니까?
  • 당신이 도움을받을 수 있나요? 이것은 커뮤니티에 대한 이전의 비트와 관련되어 있지만, 그것은 개발 커뮤니티 주위를 보며 무엇을 이용하여 누가 볼 항상 가치입니다. 도서관 이력서에 자주 나타나되는 감각을 얻기 위해 작업 보드를 확인하십시오.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI : 개관 시간 금요일 6 월 25번째

의 최신 할부 YUI : 개관 시간은 이번주 금요일, 6 월 25 일 것입니다.

지난 주, 에두아르도 Lundgren는 위대한 몇몇 우리를 도입 AlloyUI의 최근 갤러리에 추가 모듈. 토론 인스턴스, 구성, 개발 결정, 그들 중 일부 역사가 적용 TreeView의 모듈을. 하지만 그건 시작에 불과했습니다. 우리는 또한 그들의 탐험 IO , 노드 및 양식 유효성 검사 모듈을 가능한 비주얼 스타일의 일부에서 약간의 시간을 보냈다. 에두아르도 우리에게 새의 스낵 미리 준 Liferay 주식 이 모든 노력이 제공하는 포털. 정말 최고 노치 작동합니다.

말했다 건, 그것은 쇼와이 - 이야기 혹은 대화가 진짜 주인공 이었다면 말하기 힘드 네요. 옆으로 컨텐츠와 관련된 좋은 코드는 많이 있었는데 좋은 의견 커뮤니티 협업, 갤러리의 성격, 어떻게 우리가 그것과 YUI 낫게 할 대해서 논의. 따라서 대기 모두에게 큰 감사합니다!

이번 주, 우리는 원시 개발자의 세계뿐만 아니라 디자이너의 세계 모두에서 조금 손대고거야. Caridy Patiño가 되어 다시 우리와 함께 그의 이야기 이벤트 바인더 여기에 실렸었습니다 모듈 오늘 아침 . 우리는 코드 검토를 수행하고 YUI가도로드되기 전에 완료되어야 구성 단계를 다루겠습니다. 맞습니다 : 순수 순정한 DOM 스크립팅. 당신이 헬멧을 착용하는 것이 좋습니다.

그럼 우리가 제프 Conniff, 대한 책임 야후와 똑같이 nuanced 스킨 디자인 프로세스로 이동 할게 현재 다양한 슬라이더의 모양과 느낀다. 그는 시각적 자산을 구축하는 자신의 프로세스를 통해 우리를 도보와 같은 PSDs을 쉽게 귀하의 사이트 팔레트에 맞게 색상을 테마로 자산을 만드는 방법을 보여 드리죠. 여기있는 포토샵 파일은 당신이 연극을하려는 경우. 나는 또한 슬라이더의 CSS와 DOM 구조를 구축에서 만들어진 결정의 일부에 대해 얘기하자.

금요일 오전 10 시부터 태평양 서머 타임 오후 12시로 : 우리는 일반적인 날짜와 시간이 이번주로 돌아 왔군요. 이 회의 통화에 대한 새 참석자 코드는하지만, 그렇지 않으면 연결 세부 사항은 평소와 동일합니다.

1. 1-888-371-8922 (미국 이외의 참가자는 지역 번호를 나에게 이메일)에 전화 걸기
2. 참석자 코드 47188953을 입력합니다 #
3. 화면 공유 세션에 참가 (이것은 그것을 처음 사용하는 경우 이것이 당신이 어도비 커넥트 플러그인을 설치하라는 메시지가 나타납니다)

또 만들었 포럼 스레드 우리가 초기 논의를 시작할 수 있도록 오픈 시간을!

또한, 언제나처럼, 당신은에 따라 향후 일정과 주제로 최신 유지할 수 @ yuilibrary를 트위터에 또는에 가입 YUI 이벤트 캘린더 .

거기서 당신을보고 싶습니다!

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 3 갤러리에서 : Caridy Patiño Mayea의 이벤트 바인더 모듈 조기 바인딩 이벤트 및 이벤트 기반의 모듈 로딩에 대한 지원을 제공

이 문서 내 소개 이벤트 바인더 모듈 최근 YUI 3 갤러리에서 출시를.

YUI 3 최신 3.1.1 릴리스와의 새로운 혁신적인 프로젝트의 거대한 주입의 상당 채택과 함께, 개발자 커뮤니티에서 좋은 견인을 받고있다 YUI 3 갤러리 . 많은 개발자들이 YUI 3의 주문형 자연 주위 그들의 머리를 마시는 자신의 디자인을 활용하여 그 기능을 시작합니다. 이 방법은 큰 이점이 있지만 그것은 또한 몇 가지 과제를 표시할 수 있습니다.

이러한 도전 과제 중 하나는 초기 사용자 상호 작용을 잡을 것입니다. 브라우저가 페이지를 렌더링 시작해도로서, 우리는 사용자가 페이지 요소와 상호 작용을 시작할 수 있기를 바랍니다. 자바 스크립트 초기화 과정 (이벤트 리스너의 첨부 파일 포함)에 완료되기 전에 대부분의 경우 이러한 상호 작용이 일어날 수 있습니다.

많은 경우에 당신은 단지 당신의 이벤트 청취자를 설정하는 다음 모든 사용자 상호 작용에 필요한 조각을로드하는 논리를 추가하여 초기화 코드를 간소화합니다. - 최근 페이스 북의 엔지니어들은 로딩 프로세스를 개선하기위한 비슷한 접근 방식에 대해 얘기 레이 방고에서 면접 볼 JSConf에 있습니다. 다음은이 기법은 YUI 3에서 어떻게 동작하는지에의 예입니다 :

  <스크립트 src에 = "http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js &
 
	 3.1.1/build/oop/oop-min.js & 3.1.1/build/event-custom/event-custom-base-min.js &
	 3.1.1/build/event/event-base-min.js & 3.1.1/build/dom/dom-base-min.js &
	 3.1.1/build/dom/selector-native-min.js & 3.1.1/build/dom/selector-css2-min.js &
	 3.1.1/build/node/node-base-min.js "> </ 스크립트>
 
 유이 (). ( '이벤트 기지'기능 (Y) {사용
     사용자가 초점을 맞추고까지 / / 로딩 자산을 시작하는 입력 요소 기다
     Y.on ( "클릭"기능 (전자) {
 
       Y.use ( 'anim', '사실은'함수 () {
           / / 원격 콘텐츠를로드하고 여기에 애니메이션을 사용하여 그것을 표시
       });
 
       e.halt (); / /이 전파를 중지
     } "# 데모");
 }); 

청취자만을 사용자 조작없이뿐만 아니라 일부 로딩 논리 관계를 갖지 않으 때문에 코드의 일부 복잡도를 소개합니다. 이 방법의 또 다른 단점은 아직도 초기 조치를 잡아 적어도 리스너와 로딩 로직을 정의하기 위해 상단 (이 경우에는 YUI의 씨앗, 이벤트 유틸리티, 일부 의존성)에 일부 JavaScript 코드를로드해야한다는 것입니다. 자, 두 개의 별도의 사용 - 가지 경우로 이것을 고려하자 :

• 초기 사용자 상호 작용을 캡처
• 일부 사용자 상호 작용의 주문형 자연을 촉진

이러한 요구를 해결하기 위해 나는에 대한 새 모듈을 만든 YUI 3 . 내 주요 초점은 어플 리케이션 로직에 영향을 미치지 않고 작동하는 구성 요소를 만들 수있다. 이 새로운 모듈이 "라고합니다 갤러리 - 이벤트 바인더 "와 YUI 로더를 통해 사용할 수 있습니다.

초기 사용자 상호 작용을 캡처

이 기능의 주요 목표는 이벤트 청취자가 초기화되기 전에는 사용자 상호 작용이 대기는 것을 보장하는 것입니다.

알아보자 이벤트 바인더 예제 :

  YUI ({
     / / 마지막 갤러리는이 모듈 빌드
     갤러리 '갤러리-2010년 6월 7일 - 17-52'
 }) 있습니다. ( '갤러리 - 이벤트 바인더', '이벤트'기능 (Y) {사용
 
     Y.on ( '클릭', 기능 (전자) {
 
         / / 여기에 물건을 할
         e.halt (); 원하신다면 / /이 이벤트 전파를 중지 ...
 
     } '# 데모');
 
     / / 초기 사용자 상호 작용을 플러시
     Y.EventBinder.flush ( '클릭');
 
 }); 

이 예제에서 YUI 로더가로드하려고합니다 gallery-event-binder 및 event 주문형 모듈을, 그리고 일단 그들이 모두 자신의 의존성과 함께 준비, 콜백 함수 (제 3 인자) 안에있는 코드를 실행합니다. 실행하는 동안 리스너가있는 요소에 대해 설정된 id=demo . 여기에 트릭이 참가한입니다 Y.EventBinder.flush('click') 라고하더라도, 시스템이 초기화 코드가 실행해지기 전에 일어난 것 클릭 이벤트의 일부를 플러시합니다.

구성

이 기술은 몇 가지 추가 구성의 구체적 정의 필요 YUI_config YUI 실행을 조정할 수있는 전역 변수와 같은 있습니다. 걱정 마, 그건 아주 간단 해요. 자 세부 사항의 예를 보자 :

 
 YUI_config = {
     / / 표준 YUI_config 구성
     결합 : 사실,
     필터 : '분'
 
     / / 이벤트 바인더 구성 여기서 시작
     eventbinder : {
         / / 이벤트 핸들러는 redispatch하려는 이벤트를 저장할 수 있습니다.
         FN : 기능 (전자) {
             VAR 바인더 = YUI_config.eventbinder,
                 필터 = / yui3 - 이벤트 바인더 /
                 컨테이너 = (e.target | | e.srcElement)
                 정보 = {
                     대상 : 용기,
                     유형 : e.type
                 };
 
             클래스를 가진 요소 yui3 - 이벤트 바인더 용 / / 모양
             동안 (컨테이너 &&! filter.test (container.className)) {
                 컨테이너 = container.parentNode;
             }
 
             경우 (컨테이너) {
                 (binder.q = binder.q | | []) 푸시 (정보).;
 
                 / /이 이벤트에 대한 기본 브라우저 동작을 방지
                 IF (e.preventDefault) {
                     () e.preventDefault;
                 }
                 반품 (e.returnValue = 거짓);
             }
         }
         특정 이벤트에 대해 듣기 / / 인터페이스
         listenFor : 함수 (타입) {
             VAR D = 서류;
             / / 라이브러리로드하기 전에, 우리는 브라우저의 불일치를 감당해내야만
             {(d.addEventListener) 경우
                 d.addEventListener (유형, this.fn, 허위);
             } 또 {
                 d.attachEvent (+ 유형, this.fn '에');
             }
 
             이것을 반환;
         }
     }
 };
 / / 모니터링 프로세스에 이벤트를 추가할
 YUI_config.eventbinder.listenFor ( '클릭');

이 코드는 페이지 상단에 포함되어야합니다. 당신은 일단 그냥 몇 물린 될 것입 작게하다 이 구성 개체를. 나는 생산을 위해 캐시 (외부) 파일을 사용하여 페이지의 헤드 섹션에 포함시키는 것이 좋습니다. 당신은에 대해 자세히 읽어 YUI_config 하고이 개체를 통해 조정할 수있는 다른 구성 공식적인 API 설명서를 .

당신이 가장 잘 맞게이 구성을 수정하고, 당신이 무슨뿐만 아니라 걱정하는 이벤트를 정의할 수 있습니다. 위 예제에서 우리는 감시 목록 (마지막 라인)에 '클릭'을 추가했다. 당신은 체인을 사용하여 모니터링 목록에 여러 이벤트를 추가할 수 있습니다 :

  YUI_config.eventbinder.listenFor ( '클릭') listenFor ( 'keyup') listenFor ( 'mouseover')..; 

얼마나 기능이 작동합니까?

구성 (즉, 일단 YUI_config ) 논리가 실행되며, 따라서에 대한 호출과 YUI_config.eventbinder.listenFor , 특정 이벤트 유형에 대한 리스너가 정의됩니다. 버블 최대가 리스너로 모니터됩니다 자만 이벤트에 대해 정의됩니다 document 요소입니다. 사용자 상호 작용이 수준에서 잡힌 경우, 그것은 대상 요소 또는 그 조상 중 하나가 클래스가있는 경우 구체적으로 조사, 분석됩니다 yui3-event-binder . 그렇다면, 이벤트가 대기열에 추가되고 해당 이벤트의 기본 동작을 방지합니다. 이 기술은 페이지의 특정 분야에서 상호 작용의 특정 유형을 모니터링하는 편리한 방법을 제공합니다.

이 코드가 실행되면 지정된 유형 또는 유형의 이벤트에 대한 리스너가 추가되어 document 해당 이벤트가 발생하고 거품까지 (이 전용 모니터 이벤트에 해당 거품) 이렇게하면, 그들은 처리 대기열에 중지와 그 정보가 저장됩니다 . 나중에 사용자에 use() 콜백하여 초기화가 완료되면, 단순히 전화 Y.EventBinder.flush 들이 이벤트 시뮬레이션 모듈의 단지 당시 호의 된 것처럼 모든 저장된 클릭 이벤트를 redispatch합니다.

일부 사용자 상호 작용의 주문형 자연을 촉진

이 기능의 주요 목표는 개발자가 사용자 상호 작용을 기반으로로드하는 논리를 정의할 수 있도록하는 것입니다.

여기 그 또 다른 이벤트 바인더 예제 :

 
 YUI ({
   모듈 : {
     '나의 - 정의 - 모듈': {
       fullpath : '. / 나의 - 정의 - module.js'
     }
   }
 }) 있습니다. ( '갤러리 - 이벤트 바인더', '노드'함수 (Y) {사용
 
   / / '# 데모'에 대한 리스너를 설정에서 '나의 - 정의 - 모듈'의지 
   / / 특정 이벤트를 처리합니다.
   Y.EventBinder.on는 ( '클릭', '나의 - 정의 - 모듈', '# 데모')를;
 
   / / 목록에있는 모든 앵커에 대한 대의원 수신기를 설정하고 의존  
   / /에서 '나의 - 정의 - 모듈'및 '내 - 다른 모듈'은 이러한 특정 이벤트를 처리하는 방법
   Y.EventBinder.delegate ( '클릭', [ '내 - 다른 모듈'], '# mylist', '리');
 
 });

여기 사용 Y.EventBinder.on 및 Y.EventBinder.delegate 일부 리스너를 정의합니다. 이러한 두 가지 방법 랩 Y.on 과 Y.delegate 사용자 상호 작용을 통해 로딩 로직을 운전합니다. 이것은 사용자가 특정 기능을 사용하려고 할 때까지 우리가 페이지에 특정 기능의 로딩을 연기하실 수 있습니다.

In this case, when a user clicks on one of the elements, we load one or more custom YUI modules that implement all the features associated with that particular click. Once those modules become available (and new listeners are set), the binder will flush the event that was on hold during the loading process to preserve the state of the action.

This feature doesn't require any initial configuration. Both of Event Binder's features can be used at the same time to cover early and on-demand user-interactions. In this case, you need to define the configuration, then set the on-demand listeners, and finally flush the early events.

Here's an end-to-end event binder example :

 
// configuration
YUI_config = { /* your custom event-binder configuration here */ };
YUI_config.eventbinder.listenFor('click')
 
// initialization
YUI({
  modules: {
    'my-custom-module': {
      fullpath: './my-custom-module.js'
     }
   }
}).use('gallery-event-binder', function(Y) {
  
  Y.EventBinder.delegate('click', ['my-custom-module'], '#doc', '.yui3-event-binder a');
  Y.EventBinder.flush('click');
 
 });

A more advanced configuration

You can modify the fn function in your configuration to be more selective about which events to queue and you can store more information about the events. Additionally adds a yui3-waiting class to the click target which we style in CSS to display a loading spinner:

 
YUI_config = {
    // standard YUI_config configuration
    combine: true,
    filter: 'min',
 
    // event binder configuration starts here
    eventbinder: {
        // set of options that should be preserved for every event (all optional)
        eventProperties: [
            "ctrlKey", "altKey",
            "shiftKey", "metaKey",
            "keyCode", "charCode",
            "screenX", "screenY",
            "clientX", "clientY",
            "button",
            "relatedTarget"
        ],
 
        // listener callback function
        fn: function(e) {
            var binder = YUI_config.eventbinder,
                props = binder.eventProperties,
                filter = /yui3-event-binder/,
                target = (e.target || e.srcElement),
                container = target,
                info = {
                    target: target,
                    type : e.type
                 }
                i;
 
            if (target.nodeType === 3) {
                // target is a text node, so use its parent element
                target = target.parentNode;
             }
 
            // look for an element with the class yui3-event-binder
            while (container && !filter.test(container.className)) {
                container = container.parentNode;
             }
 
            if (container) {
                target.className += ' yui3-waiting';
 
                // back up the event properties to simulate the event later on
                for (i = props.length - 1; i >= 0; --i) {
                    info[props[i]] = e[props[i]];
                 }
 
                (binder.q = binder.q || []).push(info);
 
                // prevent the default browser action for this event
                if (e.preventDefault) {
                    e.preventDefault();
                 }
                return (e.returnValue = false);
             }
         }
 
        listenFor: function(type) {
            var d = document;
 
            if (d.addEventListener) {
                d.addEventListener(type, this.fn, false);
             } 또 {
                d.attachEvent('on' + type, this.fn);
             }
 
            return this;
         }
     }
 };
// add events to the monitoring process
YUI_config.eventbinder.listenFor('click');

Check out this event binder example to see this advanced configuration in action.

결론 :

For high performance web applications, it's important for pages to load and become responsive quickly. To accomplish this, we have to rely on on-demand loading techniques. Once you start using them, it's equally important to control user interactions that can happen before the corresponding code for an action become available.

Event Binder (gallery-event-binder) provides friendly APIs to deal with both use-cases without you having to change your application logic. It can be applied to any YUI 3 application without introducing extra complexity to your code.

Find conversations: bloglines | technorati

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

Using the YUI 3 Calendar Date Selector from Alloy

The Alloy components (contributed by Nate Cavanaugh and Eduardo Lundgren from Liferay) in the YUI 3 Gallery are simple to use. This example illustrates the use of the Alloy calendar to progressively enhance a set of select elements for date selection.

Let's start with the markup — the HTML that will be on the page and functioning regardless of whether JavaScript is enabled. Alloy's Calendar module does not require this markup; you can feed it an empty element and it will create the select elements for you in the event that your use case would not benefit from progressive enhancement.

 <div id="calendar">
	<select class="yui3-datepicker-month" name="month" id="monthselect">
		<option value="0">
			 1월
		</option>
		<option value="1">
			 2월
		</option>

 ...

	 </ 선택>

        <select class="yui3-datepicker-day" name="day" id="dayselect">
		<option value="1">
			 일
		</option>
		<option value="2">
			 2
		</option>

 ...

	 </ 선택>

        <select class="yui3-datepicker-year" name="year" id="yearselect">
		<option value="2009">
			 2009
		</option>

 ...

	 </ 선택>
 </ 사업부> 

With this markup in place (or with just an empty root element if we aren't progressively enhancing existing form fields), we bring in the Alloy Calendar module with datepicker selection support from the YUI 3 Gallery . This requires us to have YUI 3 on the page and then to follow the configuration step outlined on the module's Gallery page .

 <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
 <SCRIPT>
YUI({
	// All of this configuration information can be cut-and-pasted from the Gallery entry for
	// this module: http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
    gallery: 'gallery-2010.06.07-17-52',
    modules: {
        'gallery-aui-skin-base': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
							gallery-aui-skin-base-min.css',
            type: 'css'
         }
        'gallery-aui-skin-classic': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/
							gallery-aui-skin-classic/css/
							gallery-aui-skin-classic-min.css',
            type: 'css',
            requires: ['gallery-aui-skin-base']
         }
     }
}).use('gallery-aui-calendar-datepicker-select', function(Y) {
    var datePickerSelect = new Y.DatePickerSelect({
		displayBoundingBox: '#calendar',
		dateFormat: '%m/%d/%y',
		yearRange: [ 2009, 2012 ],
		dayField: Y.one("#dayselect"),
		dayFieldName: "day",
		monthField: Y.one("#monthselect"),
		monthFieldName: "month",
		yearField: Y.one("#yearselect"),
		yearFieldName: "year"
	}).render();
 });

 </ SCRIPT> 

Here's a live version of this simple example .

It's as simple as that. The configuration properties for datePickerSelect are lucidly defined in the Alloy documentation . In this example, the properties are used to set the root element, format the date, set the date range, and then wire up our existing select elements to the widget instance so that it knows which form fields to use for progressive enhancement. In practice, only the root element ( displayBondingBox ) is a required property.

Check out the YUI 3 Gallery roster for a full list of the Alloy UI contributions .

Find conversations: bloglines | technorati

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

Implementation Focus: YUI 3 Powering Autofusion's ResearchPro

About the author: Josh Lizarraga is a YUI Contributor and frontend developer located in San Diego, California. He uses YUI to build rich frontend interfaces and Ajax applications for Autofusion, Inc. , a San Diego firm that offers web solutions to the automotive industry in the United States and Canada. When he's not on the clock, Josh enjoys contributing to the YUI project with test cases and Gallery modules.

About the Project

In addition to serving industry professionals, Autofusion provides end-user information resources via our CarPrices.com sister-site. “ResearchPro” is the name we've bestowed on our brand new car research application, which allows the user to quickly and easily find everything there is to know about a potential new car purchase.

Researching a new car before you buy is typically a daunting yet necessary experience, and the current options available to consumers are not very user-friendly. ResearchPro attempts to remedy these issues with a simple, guided approach to car research. We also take the experience one step further, allowing customers to receive a free quote on their dream car from local dealers.

Why YUI?

We started using YUI 2 for all of our frontend development about two years ago, and haven't looked back. YUI's focus on application development makes it a no-brainer for Autofusion, as we provide many embeddable web apps and widgets to our customers.

Over the years we have used just about every YUI 2 component there is in both our client web properties and our internal tools. YUI's proven track record and incredible documentation really set it apart from the other libraries we've worked with. The refinements to the library offered by YUI 3 made it an easy choice for this project.

How YUI is Utilized in the Project

ResearchPro makes use of several YUI 3 components, namely IO , JSON , Node , Event , Animation , and even the beta Slider widget. We're also using the selector-css3 and event-mouseenter modules, as well as a custom module that handles the JSON communication with the backend.

Challenges and Benefits of Using YUI 3

Migrating from YUI 2 to YUI 3 was both the largest challenge and the largest benefit during ResearchPro's development. Working with Node instances instead of DOM nodes directly can take some adjusting to at first, but we quickly found that this excellent abstraction greatly reduces the amount and complexity of the code for a given task. Likewise, the chainability of YUI 3 methods offers some great syntactic sugar that is hard to live without.

The primary challenge of the YUI 3 migration was and continues to be beta bugs. The first YUI 3 beta was released a few months before we started development, and we took that opportunity to start this project with the new codeline. We wanted to be familiar with YUI 3 once it replaces YUI 2 in our workflow down the road. During development, we discovered and reported several bugs, some of which are still being worked out today.

What's Next for Autofusion?

We are always developing new products with YUI and revising our existing offerings to incorporate YUI on the frontend. Our online inventory solution is powered by YUI 2, and we're currently planning a refined version of the product that will use YUI 3 in its place.

Our inventory interface makes heavy use of the Container module family, so hopefully by the time we start development YUI 3 will have implementations of Panel and Dialog. We've been very pleased with the rapid growth of features, and expect YUI to be our frontend toolkit of choice for years to come.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI: Open Hours, Wed June 16th

It's time again for YUI: Open Hours ! A change of schedule this week, though. The call will be on Wednesday .

I want to start by sending a huge thanks to Iliyan Peychev, Andrew Bialecki , Matt Snider , and Jacob Fogg for featuring their Gallery widgets in the last Open Hours. From Matt's game UI inspired Radial Menu to Iliyan's full featured Accordion , it was a great exploration of the types of UI tools you can find (or create) in the Gallery today as well as a study in different ways to use YUI 3 to solve UI challenges. You can find links to the modules in the May 21st Open Hours post , and a sampling of some of the interesting points from the discussion in the comments .

This week, hot on the heels of their huge YUI 3 Gallery contribution , Nate Cavanaugh and Eduardo Lundgren of Liferay, Inc. will be joining us to introduce us to some of the new AlloyUI modules. This is a pretty big deal. We've been working with these guys for months to get their 65 modules into the Gallery. That's right, 65 modules! All created by just Nate and Eduardo. Talk about productive.

Obviously we'll barely have time to scratch the surface of all the AlloyUI modules, but we will do a quick overview of some of the most interesting or popular ones and cover some “Getting started” code. There's such a variety of modules, there will be something for everyone.

• For YUI 3 newcomers or folks that have been waiting for the YUI 2 widgets to be migrated, there are now a lot more options to check out.
• For people wanting to take those first steps creating something in YUI 3, there are now more things to write plugins for, patch, or extend.
• For seasoned component developers, there's now a lot more implementation code to reference for evolving conventions and components to collaborate on.
• For more complex app developers, you can get a sense of one team's strategy for code submodularization and approach for building and packaging modules in a larger or more complex application.

Nate and Eduardo are open to whatever questions you have, so the conversation can go however deep, and in whichever direction you want. If you have any questions about a particular module or about anything else, ask away.

We're changing up a little this week and moving Open Hours to Wednesday . The time will be the same as before, though (10am – 12pm PDT), and the connection details are also the same:

1. Dial in to 1-888-371-8922 (non-US participants, email me for a local number)
2. Enter the attendee code 4718 8953#
3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

거기서 당신을보고 싶습니다!

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!