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

Quorus에서 로더 사용

년 | 9시 49분에서 2011년 3월 24일은 베드로 Abrahamsen에 의해 오전 개발 , YUI 구현 | 1 코멘트

오늘은 이야기하고자 YUI 로더 어떻게 우리의 Quorus 주식 수요에 대한 새로운 기능과 타사 웹 사이트를 제공하기 위해 그것을 사용합니다.

코드는 우리가 브라우저 환경을 통제할뿐만 아니라 필요없고 부럽지 위치하지만, 우리는 문서 자체를 사용하는 방법에 심한 제한에 의미를, 다른 사람들의 페이지에 힘이 기능을 작성합니다. 고객들은 페이지에 Quorus 부트 스트랩 스크립트를 넣어, 우리의 기능에 필요한 다른 모든 동적 및 수요에로드됩니다. 우리 요소, 스타일, 그리고 스크립트는 우리가 책임을지지 않습니다 것들의 동작을 변경하지 않도록하기 위해 우리는 영웅적인 길이로 이동합니다.

YUI 3 단지 모습을 갖춰 가기 시작했다 때 우리는 2 년 전에 현재의 코드베이스를 시작했다. 그것은 몇 달 동안 베타 버전을 때리진 않겠지? 코드베이스에 커밋 시점에 위험한 결정이었습니다. 돌이켜보면 나는 우리가 우리가없는 것을 성취했는지 상상할 수 없습니다. 나는 로더의 전원, 접근 구성 요소가 다른 프레임 워크를 보지 못했다 속성 과 CustomEvent을 .

우리가 고객에게 제공하는 Quorus 부트 스트랩 스크립트는 거의 아무것도 안 해. 그 직업은 페이지로드의 나머지 부분을 차단하지 않고 우리의 플랫폼의 핵심을로드하는 단지이며, 우리는 이렇게 했어요 때까지 대기열에 어떠한 API를 호출합니다. 이 핵심 스크립트 파일, stage2라고 불리는 inlines yui , loader , 그리고 oop 뿐만 아니라, API 호출, 사용자 클릭수 및 운영 환경에있는 다른 조건에 대응하기 위해 추가 라이브러리를로드하는 데 충분 현명함. 대부분의 다른 리소스는 사용자 지정 Quorus 및 주식 YUI 모듈을 제공하고 사용자 정의 콤보 서버에 의해 제공됩니다.

Bootstrap : 대기열이 API까지 그것이로드하고 우리가 글로벌 개체 QUORUS에 배열에 갈 준비가되었을 때 사이의 호스트 사이트의 코드에 만들어진 호출

 QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; 

일단 우리가 API 호출을 처리하는 준비, stage2 그들에게 시간 초과로 하나씩 실행합니다. 이것은 우리가 정기적으로 다시 사용자가 더 많은 경험을하게 대응 브라우저에 제어를 얻을 수 있도록합니다. 문제는 Y. AsyncQueue처럼 많이하지만, 간단하고 YUI을 로드할 수 요구하지 않습니다

 // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); 

bootstrap 파일은이 시점, 주로 불변으로이다 : 그것은 해제 한 달 이상 우리가 민첩 시작 회사들을 - 엄청나게 긴 시간을 준 새로운 버전을 배포하는 데 필요할 수 있습니다 고객에게 우리가 손에 뭔가. stage2 파일 한편, 우리 자신의 서버에서로드 소형이며, 짧은 캐시 수명이 있습니다. 이것은 최종 사용자도 몇 분 이상 이전 버전을 미치지 않는다는 보장합니다. 거의 우리가 필요로하는 다른 모든 리소스를 영구적으로 캐시 자바 스크립트 라이브러리와 CSS 파일에 있습니다.

우리 코드의 새 버전을 릴리스하면, stage2 자동으로 새로운 위치에서 다운로드 그들은 최신 코드를 사용 있도록 시작하는 브라우저를 연결해줍니다. 이 설정은 우리가 더 자주 필요 이상으로 자산을 제공하지 않고도 신속하게 변경 사항을 배포할 수 있습니다. 뿐만 아니라 이것은 우리의 대역폭 비용이 낮게 유지하지만, 그것은 더 나은 사용자 경험을 제공하는가 : 페이지가 로딩되는 동안 캐시된 리소스가 매우 빠르게로드합니다.

우리가의 이익과 함께, 오늘 코드베이스를 시작했다면 YUI 갤러리 , 우리는 우리의 삶을보다 쉽게 사용할 수있는 구성 요소의 여러 가지가 있습니다. 그 중 하나는 에릭 Ferraiuolo의는 기본 구성 요소 관리자 수요의 구성 요소 (일반적으로 위젯) 최대 배선과 지원. 또있을 스토리지 라이트 우리는 페이지가로드를 통해 응용 프로그램 상태를 유지하기 위해.

자신의 위대한 작품 YUI 팀에, 그들의 공헌에 대해 사회에 많은 감사드립니다. 당신이 sandboxing 또는 조정 비동기적으로로드 구성 요소에 우리의 접근 방법에 대해 읽어 원하시면, 제가 코멘트에 알려주시기 바랍니다!

에 대한 저자 : 피터 Abrahamsen는 루비와 자바 스크립트를 쓴다는 서버 인프라와 연구 시애틀, 워싱턴, 미국에서 사용자 중심 디자인을 관리합니다. 그는에서 찾을 수 있습니다 IRC Rainhead로.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

인터넷 TV에 YUI 극장을 현실로

년 | 10:14 2010년 12월 6일 채드 송구에 의해 오전 개발 , YUI 구현 | 4 개의 댓글

난 내 친구, Ozgur CEM 센 (@ ozgurcemsen)로 일하고 있거든요 몇 YUI 관련 프로젝트에 대한 빠른 업데이 트를 게시 싶었어요. 에릭에 대한 몇 달 전에 게시 Boxee에 YUI 극장을 제공할 우리의 노력 . 우리는 reworking에게 Boxee에 대한 UI를 완성과 같은 태그와 검색에 의해 검색과 같은 몇 가지 새로운 기능을 추가. 현재 응용 프로그램이 새에 추가할 수있는 Boxee 팀과 작업하는 Boxee 상자 저장소 . 그게 그들이 데스크톱 버전에있는 표준 저장소에 추가됩니다. Boxee 박스 저장소 성능 및 비디오 품질을 주위에 몇 가지 엄격한 요구 사항이 있습니다. 새로운 버전은 잘하면 다음 주 정도 이내에하여야한다.

Boxee 애플 리케이션을 마무리하는 동안 우리는 삼성 TV 플랫폼에 발견하고 실제로는 "무료 TV"도전을 실행중인 때문에 타이밍은 완벽했다. 우리는 아주 늦게 게임 대회를 통해 와서 거의 제출 마감 날짜를 어긴하지만, 우리는 열심히 밀고 성공적으로 짧은 순서로 삼성 전자에 대해 동일한 경험을 재현. - 당신이 몇 분있다면 삼성을위한 YUI 극장 제출에 대한 단어를 확산 도움말 / 투표하시기 바랍니다 http://www.freethetvchallenge.com/submissions/249을 . 우리는 50이 있어요 + 비트에 다른 항목을.

마지막으로,하지만 - 우리가 또한 최근에 YUI 극장 애플 리케이션 작업을 완료 플렉스를 . 아직 공식적인 응용 프로그램 저장소에 아니지만 원한다면 당신이 여기에서 다운로드할 수 있습니다 요청은 당분간 인치입니다 - http://wiki.plexapp.com/index.php/YahooYUITheater을 .

여기 액션에서 응용 프로그램의 몇 가지 동영상이 있습니다 :

• 삼성 TV 응용 프로그램 - http://www.youtube.com/watch?v=e1kRicivfDU
• 플렉스 애플 리케이션 - http://www.youtube.com/watch?v=oxBPqVQqdnY
• Boxee 애플 리케이션 - http://www.youtube.com/watch?v=IK4i1DksuhU

당신도 그렇게 먼 아니라 미래에 TV를 연결 구글 TV와 야후도 비슷한 노력을 볼 것으로 예상한다.

다행히도 이러한 애플 리케이션은 일반적으로 meetups 및 / 참여 수 없거나 최신 안했다들을 위해 귀중한 자원이 될 증명 YUIConf을 . 우리는 그들이 출시되는 새로운 동영상을 추가하려면 계속됩니다.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

jQuery 및 YUI 3 : 두 개의 자바 스크립트 라이브러리의 이야기

10 월 27 일 마크 Rall에 의해 오후 2시 8분에 2010 |에서 개발 , YUI 구현이 | 5 코멘트

최근 내가 처음 자바 스크립트 프런트 엔드 응용 프로그램을 구축할 수있는 기회를했다. 어떤 다음은 손으로에있는 직업에 적합하지 않습니다 도구를 사용하려고 할 때 약 와서 발견과 진화의 단편이다. 그것은 두 개의 매우 다른 도서관, jQuery 및 YUI 3을 사용하여 같은 프론트 엔드 응용 프로그램을 개발을 통해 얻은 학습의 계정입니다. 클라이언트와 프로젝트의 세부 사항은 의도적으로 생략되었습니다.

개요

이 프로젝트는 대규모의 콘텐츠 게시자에 대한 개방형 표준을 기반으로 한 대화형 응용 프로그램에 여러 개의 서로 다른 플래시 도구의 리팩토링을 참여. 높은 중요성, 응용 프로그램은 매우 작은 초기 도보 인쇄 인해 일일 페이지 노출의 많은 클라이언트가 수신과 최적화해야했습니다. 여러 단계의 첫 번째 개념의 초기 증명되고 함께 참여했다.

개념은 신청서 될 무엇 하나 볼의 개발 참여. 그것은 구성되어 :

• 어떤 프레임 워크의 동적 로딩 (예 : jQuery 또는 YUI 3)와 초기 응용 프로그램 파일에 대한 책임 초기 시드 파일 (<1킬로바이트).
• jQuery 플러그인의 개발과 포함하는 폼 요소 스타일링 및 검증, 그리고 동적 차트 visualisations을 지원합니다.
• 사용자 입력, 구성 기본값 및 게시자의 사이트 내에서 응용 프로그램의 위치에 따라 UI의 생성 및 인구.
• 사용자의 입력에 따라 정보의 계산 및 프레 젠 테이션.

전체 공개의 이익에,이 시점에 내 자신의 경험까지이 작은 독립형 솔루션을 개발했다, 당신이 일반적으로 플러그인으로 표현할 수있는 유형입니다.하기 이들은 같은 이미지 carousels, 대화형지도와 트위터 / 플리커 위젯과 같은 역동적인 UI 구성 요소를 포함. 첫번째 JavaScript를 dabbling 당시, jQuery는 배우기 쉽습, 인기 나를 빨리 내가​​하고 있던 프로젝트에 필요한 기초를 데리러있었습니다. 그러나 이들은 모두 독립적인 단위로되었고 다른 코드와 함께 또는 큰 응용 프로그램의 일환으로 상호 작용을 할 필요가 없었다.

첫 시도

프로젝트의 첫 단계를 완료에, 내가 내가 사용했던 것보다 매우 다른 짐승을 다루는 것을 고통스럽게 분명했다. 코드 조직의 작은 경험을 가지고있는, 내 코드가 빠르게 분열증 비효율적 및 반복되었다. 그 결과, 어떤의 첫 번째 부분은 훨씬 더 큰 응용 프로그램이로드 속도가 느린되었습니다 될 것입니다. 사실 그것은 개념의 하나의 증거를 생성하는 팔초했다. 큰 변화가 필요하고 내가 좋아하는 작은 도서관 이용으로 간주가 있었을 때되었습니다 딘 에드워드의 기본 이나 존 Resig의 간단한 자바 스크립트 상속 jQuery에 클래스 기반 상속을 추가하는 패턴을, 내가 한 걸음 더 나아가 이동하기로 결정했다.

내가 원하는 것은 처음 OO 응용 프로그램을 개발하는 시간 완벽한 성숙한 프레임 워크되었습니다. 뭔가 효과적으로 프로세스를 통해 나를 안내합니다. 나는 다음과 같은 이유로 YUI 3 채택하기로 결정 사용할 수있는 라이브러리를 검토한 결과 :

• 속성 및 클래스 관리를 포함한 통합, 상속 기반 응용 프로그램 개발 지원.
• 장기 솔루션 :
  • 표준 및 접근성 지원.
  • 대규모 잘 알려진 조직, 야후에 의해 재정 지원
  • 같은 존경받는 이름과 관련된 더글러스 Crockford , 니콜라스 Zakas 및 Stoyan Stefanov .
• 성능 최적화 :
  • 단 7킬로바이트의 초기 씨앗 파일입니다.
  • 요구에 게으른 - 로드된 모듈.
  • CDN 배달.
• 다양하고 포괄적인 문서 :
  • 야후 개발자 네트워크
  • YUI 3 API 설명서
  • YUI 극장
  • YUI 라이브러리
  • YUI 블로그
• 릴리스 사이 성숙, 지속적인 진화.
• 의 통합 도구 YUI 압축기 , YUIDoc , YUI 빌더 , 그리고 콘솔 .
• 아니라 자바 스크립트, CSS도 프레임 워크.

두 가져가

통합 YUI 3 프로젝트에 몇 가지 직접 및 간접 혜택을 가져왔다 :

• 상속 기반 아키텍처 및 클래스를 통해 관리 속성 인터페이스와 기본 및 위젯 performant, 재사용 및 조직 코드를 생산하는 클래스.
• 모델과 사용하여 데이터의 프레 젠 테이션의 분리 위젯 사이트 내의 응용 프로그램의 위치에 따라 다른 견해를 (인라인 또는 오버레이) 렌더링하는 클래스를.
• Sandboxing 및 동적 모듈 YUI.use ()를 통해 포함.
• 를 사용하여 크로스 브라우저 콘솔 디버깅 YUI 콘솔을 .
• 저장, 사용하는 성능 최적화 YUI 압축기를 이클립스 인치
• 기존 jQuery 플러그인을 쉽게 포함 및 통합.
• 저장, 사용하는 자동 코드 설명서에서 YUIDoc를 .

최종 결과는 행복한 클라이언트와 하위 초로드 시간 (이것은 개념의 초기 증거를로드 8 초 걸렸습니다 기억)과 완제품했다.

배우기 레슨

작업에 적합한 도구를 선택

이 게시물을 읽고 필자는 독자 안티 jQuery로 이것을 볼 것입니다 확신 해요. 전혀요. jQuery는 많은 혁신에 대한 책임 환상적인 프로젝트입니다. 그러나 모든 도구와 마찬가지로, 그것의 장점과 용도가 있습니다. 그 강도는 초보자를위한 항목에 장벽을 낮추고 경험 프로그래머의 효율성을 향상, 정규화 브라우저 일관성에있다. 프로젝트에서 나온 기본 학습은 모든 작업에 대해 하나 도구에 의존 수 없다는 것이었습니다. YUI가 jQuery도 잘 아키텍처 애플 리케이션 프레임 워크를 제공하여 제공할 수있는 것에 빌드. 그러나 그것은 비용을 줄일 수 있다고하는 것이 공평하다고, 다음 지점을 참조하십시오.

가파른 학습 곡선

제가 그랬듯이 익숙하지 않은 라이브러리와 함께 최초의 응용 프로그램을 작성 특히 당신은 인내심이 필요합니다. 그러나 귀결은 광대한 있습니다. 다른 라이브러리를 학습함으로써,뿐만 아니라 핵심 자바 스크립트 능력은 향상되며, 여러분은 어떻게 라이브러리 작업과 그들이 가지고 혜택 깊은 이해를 개발합니다. 저는 YUI 일상 생활에 대해 새로운 것을 배우려고하고 더 배우고, 더 나 YUI를 건물에 갔어요 생각과 깎아지른듯한 재능 경외에있어.

당신이 그것을 필요로 할 때 콘텐츠만로드

그것이 당신이 미리 필요할 수 있습니다 모든로드에 확실히 프로그래밍 방식으로 쉽게 반면, 성능 향상은 당신이 크다 필요한 게으른 로딩 내용의 직접적인 결과로 얻었다. 이것은 크게 응용 프로그램의 성능 개선을위한 핵심 요인 중 하나였습니다.

가능한 작은로 DOM과 상호 작용

이 시점은 사용되는 특정 라이브러리에 관련되지 않습니다. 필요한 DOM 요소를 캐싱보다 HTML 템플릿을 활용하여, UI 렌더링 시간이 상당히 떨어졌다. 노드는 노드 목록이 Y.all ()를 사용하여 캡처 수 있지만 Y.one ()를 사용하여 캐시 수 있습니다. 또한 () Y.Node.create 효율적으로 이전에 삽입하기 위해 DOM 요소에 HTML 대량의 텍스트 문자열을 변환에 매우 유용했다.

예를으로 자세히, CDN을 사용하여

YUI의 CDN 배달 라이브러리를 사용하여 우리는 CDN을 통해 모든 프로젝트의 자산을 제공하기로 결정했습니다. 이것은 아마도 성능 향상에 가장 큰 기여 요인 옆에되었습니다.

술집, 하위 와글와글함

저기 그 경험이 프로그래머를위한,이 비웃을하지보십시오. 과거에 플러그인보다 조금 더 작성하는 데 사용되고 있고, 응용 프로그램은 내부 의사 소통 방법을 전혀 몰랐어요. 심지어 읽은 후에 "사용자 지정 이벤트 페이지에 다른 구성 요소가 해당 이벤트에 가입하고 응답할 수 있도록 자신의 코드에서 가장 재미있는 순간이나 이벤트를 게시할 수 있도록,"난 아직 그것을보고 싶었어요.

알고 보니, YUI의 사용자 지정 이벤트는 게시 - 구독 및 모델 간 클래스와 객체 간 통신을 아름답게 작동합니다. 당신도 이벤트 전후에 가입하고 특정 조건에 따라 버블링을 억제하는 역동적인 논리를 포함할 수 있습니다.

귀하의 흐름에 최상의 통합

이클립스를 사용하여 우리는 빌드 과정에 JSLint와 YUI 압축기를 통합할 수있었습니다. 간단히 말하면, 당신는 Ctrl / Cmd를 + S를 누를 때마다는 자바 스크립트 코드 검증 및 최적화되었습니다. 그게 당신이 코드의 첫번째 라인에서 최적화된 생산 코드에 대한 테스트 학년 뜻입니다. 그것은 또한 배달 마감일에 혈안이 마지막 경주에 최적화하는 것을 잊지 않을 것을 의미합니다.

작업에 YUI 학습

모두가 다른 학습 스타일을 가지고 있지만, 나는 내가 마음에 특정 목적으로 YUI를 배울하던 자원 여러분게.

• 도서관의 일반적인 개요를하거나 특정 모듈을 배울 수있는 관련 YUI 극장 에피소드를보세요. 나는 매우부터 시작하는 것이 좋습니다 수 있습니다 :
  • 에릭 Miraglia의 YUI 3에 오신것을 환영합니다
  • YUI 3 설탕에 토드 Kloots
  • 매트 스위니의 YUI 3 성능
  • YUI 3 루크 스미스의 디버깅
  • YUI 3 문제 해결에 이삭 Schlueter
  • YUI 3 웹 애플 리케이션 개발 에릭 Ferraiuolo
  • 루크 스미스의 이벤트 진화
• 에서 YUI에 읽기 야후! 개발자 네트워크 . 제가 다시 읽어 때마다 매주 조금 읽고 자세한 내용을보십시오.
• 읽기 의 API 설명서를 참조. 당신은 YUI 극장이나 개발자 네트워크에서 찾을 수없는 경우, API에 파다. 그것도 직접 코드를 읽어 지불합니다.
• 질문을 읽고 게시 YUILibrary.com에 대한 포럼 .
• 많은 플레이를 즐기세요!

결론

YUI 3 대형 작은 프로젝트에 적합한 완벽한 기능을 갖춘 성숙하고 끊임없이 변화하는 라이브러리입니다. 프런트 엔드 웹 애플 리케이션이보다 복잡하게, YUI와 같은 라이브러리에 대한 필요성이 증가합니다. uninitiated 위해 당신이 함께 붙어 있으면 당신이 보상되며, 처음에는 어려운 경험이 될 수 있지만.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

YUI 3 빌딩 TipTheWeb

2010년 10월 5일 오후 9시 35분에서 에릭 Ferraiuolo으로 |에서 개발 , 야생에서 , YUI 구현 | 코멘트 끄기

저자 소개 : 에릭 Ferraiuolo는 이사입니다 TipTheWeb 과 공동 창립자 Oddnut 소프트웨어 . 그는 자신의 블로그에 글을 참고하세요 : 925 HTML , 그리고 트위터에서 찾을 수 있습니다 : @ ericf . 에릭 YUIConf 2009에서 기능을 발표했다 .

TipTheWeb는 사람들이 직접 팁을하여 좋아하는 웹 콘텐츠를 지원하는 수있는 새로운 서비스입니다. 당신은 훌륭한 블로그 게시물을 찾으면 예를 들어, 당신은 25 센트 팁을 수 있습니다.

TipTheWeb 조언을받을 게시자를 부여하여 자유롭게 액세스할 고품질 웹 콘텐츠를 홍보하는 비영리 단체입니다. 당신이 온라인으로 게시할 경우, 조언을 받고 TipTheWeb에서 상을받을 수로 게시 장소를 주장하여 TipTheWeb 계정을 사용할 수 있습니다.

YUI 3 TipTheWeb의 사용

TipTheWeb의 사용자 인터페이스는 완전히 우리가 찍은 접근 방식은 우리의 JavaScript 코드의 기초와 구조로 YUI 3을 사용하는 것이었다 (우리가 쿨에이드를 마셨다.) YUI 3 위에 구축됩니다. 우리는 33 사용자 정의 YUI 3 모듈을 내장했습니다 (56 당신은 submodules, 플러그인, 그리고 롤 - 업 포함하면) 우리가 YUI 3 갤러리 공헌한 몇 가지 중, : 구성 요소 관리자 , Markout , 중첩 엑스트라 , 그리고 REST 리소스 .

페이지 수준의 클래스

TipTheWeb의 핵심 기능은 에이 젝스를 통해 서버와 통신할 몇 가지 뛰어난 기능을 웹 페이지에 구현됩니다. 이 페이지의 각각에 대해 우리가 페이지의 기능적 부분 사이의 동작을 조정하는 데 사용되는 페이지 레벨의 클래스를 갖는 사용자 정의 YUI 3 모듈을 만들었습니다.

우리 프로그램의 주요 페이지 중 하나에서, 도움말 페이지, 당신은이 접근법은 페이지 수준의 수업 TipsWindow와 적용 방법을 볼 수 있습니다. 페이지의 주요 기능 부품 위젯입니다 CreateTip 조언을 만들기위한 사용 및 편집에 대한 TipList 위젯, 취소하고, 기존의 팁을 자금.

오버레이 많은

우리는 사용 Y.Overlay 사용자 상호 작용을 구현하기 위해 응용 프로그램의 UI에 걸쳐 광범위하게들, 이것은 여전히 페이지에서 사용 가능한 고급 기능에 대한 기능을하면서 우리는 혼란없는 인터페이스를 유지하실 수 있습니다. 우리는 내장되어되지 않은 기능이 필요 Y.Overlay , 그래서 우리는 개발 중첩 부가 YUI 세 갤러리에 다른 YUI 3 구동 사이트를 많이 사용하고. 여기에 우리가 TipTheWeb에 오버레이를 사용하는 장소는 다음과 같습니다

TipTheWeb 현황

밖으로 시도하기 위해 우리가 사랑하는 거라고 TipTheWeb을 , 지금 우리가 초대 전용 베타 버전에 따라서 초대 요청 사이트에서하고 우리는 당신에게 초대 코드를 보내드립니다.

저희 이야기를 잡아주십시오 YUIConf 2010 우리가 TipTheWeb에서 YUI 3 YQL을 사용하는 방법에 (깊이 이상) 발표 거기에있을 것이다.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

구현 포커스 : 렌터카 익스프레스

년 | 6시 1분에서 2010년 9월 28일는 스테판 Klopp에 의해 오전 야생에서 , YUI 구현 | 2 개의 댓글

렌터카 Express는 인터넷에서 최고의 독립 렌터카 비교 웹사이트입니다. 그것은 전 세계 1000 개 이상의 도시와 공항에서 사용자의 임대 차량 온라인 수 있습니다.

우리의 사용자 기반이 크게되지 않은 기술이며, 이는 그들이 가능한 한 쉽게 가격과 임대료 자동차를 비교하려는 의미합니다. 2010 년 6 월 우리의 웹사이트의 다시 시작을 통해 우리는 직관적인 경험을 고객에게 제공하기 위해 YUI 2의 여러 구성 요소를 구현합니다.

우리는 어떤 YUI 구성 요소를 사용하고 있습니까?

우리가 사용하고있는 구성 요소가 포함 연결 관리자 , 자동 완성 , 데이터 원본 , 일정 , 애니메이션 , JSON , 그리고 컨테이너를 .

우리는 YUI를 선택한 이유

우리가 잠재적에서 사용할 수있는 다른 자바 스크립트 라이브러리 검토할 때 렌트카 Express를 , 우리는 YUI 우리의 요구에 가장 완벽한 것으로 나타났습니다. 우리의 가장 큰 판매 기능은 YUI 다른 디자인 패턴을 구현했다 매우 모듈식 접근뿐만 아니라, 그들이 제공하는 강력한 설명서 및 예제를했습니다. 개발 관점에서 이것은 도서관과 함께 투쟁하지 않고 우리의 응용 프로그램의 신속한 개발되었다.

우리는 YUI를 사용하는 방법

우리는 여러 가지 방법으로 YUI를 활용. 우리 4 가장 많이 사용되는 구성 요소는 자동 완성, 일정, 컨테이너 및 연결 관리자입니다. 다음은 이러한 각각의 구성 요소를 사용하는 몇 가지 방법이 있습니다.

자동 완성

자동 완성 구성 요소는 사용자가 차를 임대하고있는 도시 또는 공항을받는 데 도움을 저희 사이트에서 광범위하게 사용됩니다. 우리는 정말이 구성 요소를 구현하는 것이 얼마나 쉬운 좋아, 그리고 얼마나 빨리 그것은 응답합니다. 우리 캐시 검색 검색 결과를 개선하는 데 도움이되는 결과 서버측 있지만, 클라이언트 측 캐싱은 또한 구성 요소의 응답 속도에 엄청난 도움이 필요. 우리가 진짜로 데려 또 다른 기능은 결과가 스타일에 얼마나 쉽게되었습니다. 우리가 어떤 도시에서 발견되는 위치는 공항에서 발견된 식별하는 데 필요한 사용자에게 위치를 표시할 때이 결정되었습니다.

달력

세입자가 검색을 수행할 날짜를 입력하면 달력 구성 요소는 사이트 전반에 걸쳐 사용됩니다. 우리는 존 Peloquin의 사용자 지정 버전을 사용하는 간격 선택 일정 과에 표시 YUI ​​대화 상자 . 기본적으로 우리가 원했던 것은뿐만 아니라 시각적으로 그들이 현재 선택 범위를 어떤 날짜를 보여주 그들의 날짜를 선택할 때 임차인에게 두 달간보기를 제공했다. 다시, 이것은 YUI이 캘린더를 사용하여 구현하는 매우 간단한 있었고, 그것은 기본적으로 해당 사업부로 YUI 간격 일정을 장착, 캘린더 사업부를 포함하는 신체를 설정, YUI 대화 상자를 생성하기 위해 내려왔다.

컨테이너

우리는 다른 여러 가지 방법으로 웹 사이트를 통해 YUI 컨테이너를 사용합니다. 위의 예제에서 우리는 사용자가 날짜를 선택할 때 우리가 간격 일정을 표시할 수 있도록 대화 상자를 사용했다. 우리의 속도 검색 결과 페이지에서 우리는 임차인에게 더 렌터카 기관의 다양한 측면에 대한 정보들이 잠재적으로 임대 수있는 차량을 제공하기 위해 컨테이너 많이 사용합니다. 이 페이지에서 컨테이너의 대부분은 패널 우리가 각기 다른 목록을 다시 사용하는 것이. 예를 들어, 자동차 디스플레이 패널 기능 :

상황이 기관 평가를 평가 관리원과 함께 좀 더 재미 있어요. 등급을 표시하면, 저희는 정말 기관이받은 점수에 대한 사용자의 관심을 집중하고 깨끗한, 쉽게보기 방식으로이 정보를 표시 싶었어요. 대화 상자 컨트롤을 이용하여 우리는이 목표를 달성하는 데 도움이 쉽게 뷰포트 및 센터 대화 상자를 제한 할 수 있었다. 빈 머리글과 바닥글을 설정하여 그것은 단지 우리의 CSS에 적절한 스타일을 추가하여 스타일링은 간단했다. 최종 결과는 그들이 원하는 정보와 세입자를 제공하는 깨끗한 등급 컨테이너했습니다.

연결 관리자

우리가 XHR 요청을 통해 데이터를 끌어 할 때마다 연결 관리자는 사이트 전반에 걸쳐 사용됩니다. 위의 예제 중 일부에서는 자동 완성 implementaitons에 대한 도시와 공항을 요청하고 대화 상자 평가 관리원에 대한 평가 정보를 당기는이 구성 요소를 활용합니다.

우리는 연결 관리자를 이용 한 흥미로운 방법은 대부분의 페이지에 앉아 우리의 대여 센터 블록이다. 성능하기 위해 우리는 우리의 콘텐츠 페이지에 많은 전체 페이지 캐싱을 많이 해. 그러나, 우리는 여전히 해당 페이지에 동적 대여 센터 블록을 표시합니다 싶었어요. 이것은 우리가 연결 관리자 해결할 수있었습니다 문제가 우리를 발표했다. 오히려 우리가 완전히 캐시된 페이지와 우리는 그것이 단순한 비동기 요청을 통해 대여 센터 블록을 포함하는 것이 더 쉽습되었다 찾은 페이지의 캐시에만 측면을 헤어져야하는 데보다. 우리는 우리가 완전히 캐시된 페이지를 필요에서 성능을 유지하면서도 여전히 우리 대여 센터 상자에서 동적 콘텐츠를 표시할 수있는 것으로 나타났습니다.

최종 사상

전반적으로 우리는 YUI를 사용하기 위해 선택과 매우 행복했습니다. 그것은 사용하고 구현하기가 쉽고, 잘 문서화되어있다 모듈러 라이브러리를 제공.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

구현 포커스 : 등불

년 | 9 2010년 9월 15일 제니 국 도넬리입니다하여 오전 YUI 구현 | 코멘트 끄기

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

DuckDuckGo 검색 엔진에서 YUI 2 사용

년 | 5시 41분에서 2010년 8월 19일 가브리엘 와인버그에 의해 오전 YUI 구현 | 2 개의 댓글

DuckDuckGo가 광범위 YUI를 사용하는 검색 엔진입니다. 여기는 특히 사용은 다음과 같습니다

• ImageLoader. 매트 Mlinac의 YUI 2 ImageLoader는 이 프로젝트에 대한 YUI에서 내가 구현하고 무엇 원래 내게 줬어 제일 먼저했습니다. DuckDuckGo 결과 옆에 favicons을 가지고 있으며, 흔히 일반적으로 포함하고 결과 페이지 상단에 '제로 클릭 정보 "가 이미지를 . 나는 가능한 한 빨리 결과를 얻는 것처럼, 궁극적인 목표입니다 로드할 때 이러한 이미지는 결과와 함께 경쟁하고 싶지 않았어.

  ImageLoader 유틸리티 아니라 페이지 로딩 후 이미지를로드하여이 문제를 처리합니다. 당신은 아래로 스크롤하면 DDG 또한 결과의 다음 페이지를 자동으로로드합니다. 가끔 favicons 아이콘 그러므로 숨겨져 있으며, ImageLoader 자신의로드가 필요 때까지 (때로는 무기한) 지연됩니다. 이것을 달성하기 위해, 당 다른 이미지 그룹 (내부) 페이지 자체 사용자 정의 트리거 각이 있습니다.

    div.event = 새로운 YAHOO.util.CustomEvent ( '그');
       var에 ig1 = 새로운 YAHOO.util.ImageLoader.group (사업부 '를 클릭하십시오');
       ig1.addCustomTrigger (div.event);
       = ig1을 div.ig;
  

• 쿠키. DuckDuckGo은 많이 가지고 설정 을 통해 교대로 쿠키를 통해 저장, URL의 매개 변수를 . 쿠키가 사용되는 때, 니콜라스 Zakas의 사용 YUI 2 쿠키 유틸리티를 쉽게 얻고 값을 설정합니다.

    YAHOO.util.Cookie.set (쿠키 값, {만료 새로운 날짜 ( "2025년 1월 12일")});
     X = KI | | YAHOO.util.Cookie.get ( "I"); 

• 스타일 시트. 일부 DDG 설정 모양을 변경하고 사이트의 느낌. 이러한 변경은 실제로 루크 스미스의를 통해 페이지 로딩 후 교양있는 YUI이 스타일 시트 유틸리티 . 이러한 변화 중 일부는 간단하고 난 그냥 사용할 수있는 setStyle DOM 함수를 .

    YAHOO.util.Dom.setStyle ( 'B2', '표시', '블록'); 

  기타 내가 할 수있는 유틸리티를 사용하여 실제 수업 변경을 요구합니다.

    . YAHOO.util.StyleSheet ( 'DDG') 설정 ( 'CI.'{표시 : "블록"}).
               집합 ({표시 : "블록"} 'CID.').
               집합 ({표시 : "블록"} 'ci2.').
               () 활성화; 

• 돔. 나는 또한 매트 스위니의 자료의 일부 기능을 사용 YUI 2 돔 구성 요소를 . 제가 참조 setStyle 위에, 나는 또한 관련 사용 getStyle , addClass 과 removeClass 기능을. 또한, 찾기 getViewportHeight , getViewportWidth , getX 와 getY 일들뿐 아니라 모바일 화면에 현재 크로스 브라우저를 작동하고, 할 매우 유용하게 기능을.

• KeyListener. DDG는 잔뜩 가지고 키보드 단축키 는 마우스없이도 결과를 탐색하자. 제가 사용 YUI 2 KeyListener의 이러한 단축키를 사용하려면 구성 요소를.

    kl14 = 새 YAHOO.util.KeyListener (문서, {키 : [70]}, {FN :하지}); kl14.enable (); 

• 자동 완성. 저는 현재 검색 엔진에 검색 제안을 추가하기 위해 노력하고, 그리고 제니 국 도넬리입니다의 사용합니다 YUI이 자동 완성 프런트 엔드에 대한 구성 요소를. 나는 자동 완성이 곧 YUI 3에 도입지고 것을 이해합니다. 아직 YUI 2를 사용하지만 제가 사용하는 다른 모든 이미 YUI 3에 소개되었습니다. 그러나, 곧 YUI 3 마이 그 레이션을 탐험하는 것입니다.

저자 소개 : 가브리엘 와인버그는 밸리 포지, PA의 기반을 둔 DuckDuckGo 검색 엔진의 창시자이다. 가브리엘 십 년 넘게 시작 설립자되어, 그의 마지막 회사는 2006 년에 판매되었다. 가브리엘은 물리학 MIT와 기술 및 정책 프로그램에서 학위를 보유하고 있습니다.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!