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

Node.js와 YUI 3 서버 사이드를 실행

모르는 사람들에게 Node.js , 내가 그것을 설명하는 방법입니다 :

Node.js은 위에 지어진 자바 스크립트에 대한 서버측이 아닌 차단 이벤트 구동 런타임입니다 V8 자바 스크립트 엔진 . 같은 HTTP 서버 뒤에 앉아 서버 측 스크립팅 언어에 대해 가능한 교체로 Node.js 생각 아파치 또는 nginx .

최근 내가 다 흥분에 대해 뭔지 볼 수 Node.js 주변을 연주 했는데요. 그래서 당연히 나는하려면 걸릴까요 있는지로 설정 YUI 3 노드에서 실행합니다. 아는 YUI 3 뒤에 아키텍처를 , 나는 그것을 실행하려면 어렵지 않을 것이라고 생각.

Node.js가 네이티브 DOM을 제공하지 않기 때문에, 당신이 궁금해 수도 "왜 자바 스크립트 프레임 워크를 사용합니까?"음, YUI 3 DOM 조작에 대한 모든 아니야 - 그것은 또한 클래스 / 객체 관리 도구의 강력한 세트를 포함하고, 언급하지 않기 위하여 우리의 강력한 사용자 정의 이벤트. 이러한 도구들은 모두 서버 사이드 프로그래밍에 즉시 유용합니다.

시작하기

첫째, 그것은 모든 YUI 3 모듈을 호출하기 때문에 YUI가, Node.js의 전역 유효 영역에로드됩니다 지적해야 YUI.add 파일의 시작. YUI 개체는 그 자체를 할당합니다 exports 당 개체 CommonJS의 사양하지만, 모듈이 사용되면, 그것은에 연결하는 글로벌 YUI이 필요합니다. (이것은 우리가 미래에 해결 뭔가있을 수도 있지만 그것이 탐험의 출발점입니다.)

내가 해야할일을 우선 로더를 작동시키려면 어떻게해야했다. 이렇게하면 방금 YUI 내장 3 도구를 사용 아주 간단했다. YUI 3 모듈 시스템을 구성하는 강력하고 쉽게, 사용하므로 YUI.add 나는 새 만들 수 있었던 방법을 get 모듈. 이 새로운 모듈은 클라이언트 쪽의 기본 매개 변수가 유틸리티를 해 수락했지만 대신 스크립트 노드를 생성하고 YUI 그런식으로 포함하는 그것은 현재의 프로세스로 데이터를 디스크에서 또는 CDN 및 부하에서 YUI를 가져옵니다. 여기 이것은 완료하는 방법을 보여줍니다 간단한 코드 스니펫 (snippet)은 다음과 같습니다 :

 YUI.add ( '가져오기'기능 (Y) {
     와이가 = 기능을 () {} 가져오기;
     Y.Get.script = 기능 (S, CB) {
         var에 URL을 = Y. 배열 (S), URL, I, L = urls.length;
         {(;, I <L I + + I = 0)에 대한
             URL = URL을 [I];
             경우 (URL이 [I] 일치 (/ ^ HTTPS :.? \ / \ / /)) {
                 URL = url.replace (. / \ JS $ /, '');
             }
             Y.log ( 'URL :'+ URL, '정보', '좀');
             / / 차단 필요하지 않으므로 차단하지 않습니다.
             require.async (URL, 함수 (MOD) {
                 패스 (CB);
             });
         }
     };
     / / 이것이 이렇게이다 퍼팅 우리는 오류가 이해가 안가
     Y.Get.css = 기능 (S, CB) {
         Y.log ( '로딩 CSS :'+ S '디버그', '좀');
         패스 (CB);
     };
 });

제가 스크립트를 로딩 해했다 이제, 내가 뭐하고 있었는지 추적할 수 있습니다 싶었어요. YUI 3라는 구성 속성을 포함 logFn 기본 콘솔 로깅이 존재하지 않을 수도 환경에서 지원하는 로깅을 허용합니다. 나는 로그 메시지를 방출 때 특별한 기능을 사용해야 YUI을 알려주는 글로벌 YUI 개체에 옵션을 추가하려면이 구성 속성을 사용합니다. 여기 그 함수를 한 번 봐은 다음과 같습니다

 logFn : 기능 (하위, T, M) {
     t = t | | '정보';
     M = (M)?  '('+ m + ')': '';
     var에 O = FALSE;
     {| (하위 instanceof를 배열 | 하위 instanceof를 개체)하는 경우
         / / 우리는 이것을 사용해야합니까?
         경우 (str.toString) {
             하위 = str.toString ();
         } 다른 {
             하위 = sys.inspect (하위);
         }
     }
     STDERR로 / / 출력 로그 메시지
     sys.error ( '['+ t.toUpperCase () + '] :'+ m + 하위);
 }

나는 YUI 3 로딩과 메시지를 로깅했다 이제, 다음 단계는 시스템을 테스트하는 것이었다. 내 최대 부하로 결정 YQL 갤러리 모듈 과 제작 시도 YQL 요청합니다. 이것은 내가 예상했던 것보다 쉬울으로 밝혀졌다. YQL 모듈 해 사용하기 때문에, 그것은 상자 밖으로 일했습니다. 여기 내 GitHub 테이블에 대한 YQL 쿼리를 실행하는 그것의 샘플 콘솔 출력이야.

 [INFO] : (YUI) 모듈 요구 사항 : [배열] : 3
 [INFO] : 누락 (YUI) 모듈 : [배열] : 3, 3
 [INFO] : (YUI) 로더를 가져오기 : http://yui......oader/loader-min.js
 [INFO] : (얻을) URL : http://yui.yahooapis.co.../loader/loader-min.js
 [INFO] : (YUI) 모듈 요구 사항 : [배열] : 11
 [INFO] : 누락 (YUI) 모듈 : [배열] : 8, 8
 [INFO] : (YUI) 로더를 사용하여
 [INFO] : (얻을) URL : http://yui.yahooapis.com/combo?3.1.0/build/du ......
 ...........ild / 갤러리 - yql / 갤러리 - yql - debug.js
 [생명] (기본) 생성자 호출
 [INFO] : 전화 (속성) 속성 생성자
 [생명] (기본) INIT라는
 [INFO] (행사) yui_3_1_0_1_12703536585676 : 하나를 발사 : INIT
 [INFO] : 초기화에 대한 (속성) initValue : 거짓
 [INFO] : (속성) 속성을 추가 : 초기화
 거짓 : [INFO] : 파괴에 대한 (속성) initValue
 [INFO] : (속성) 속성을 추가 : 파괴
 [INFO] : (속성) 속성을 추가 : 초기화
 [INFO] (행사) : 하나를 발사 : foo는
 [INFO] : (이벤트) : 하나 푸 -> 하위 : yui_3_1_0_1_127035365856711
 [DEBUG] : (myapp) foo는 해고
 [INFO] : (얻을) URL : http://query.yahooapis.com/v1/public/yql?q=select % 20 * %의 20fro ....... bles.env &
 [INFO] (행사) yui_3_1_0_1_127035365856715 : 쿼리 -> 하위 : yui_3_1_0_1_127035365856716
 {카운트 : '1 '
 만들어 : '2010 - 04 - 04T04 : 1시 Z '
 , 랑 'EN - US'
 , 업데이트 : '2010 - 04 - 04T04 : 1시 Z '
 , URI : 'http://query.yahooapis.com/v1/yql
 결과 :
    {사용자 :
       { 'gravatar - ID': 'd5c18055c50c5b34b0163e0bf0dbf59f'
       , 이름 : 'DAV 유리'
       회사 : [개체]
       .....
       , 블로그 'http://blog.davglass.com/'
       }
    }
 }

그래서이 그랬던것처럼 쉽게하는 모든 그건, 그건에 대한 지원 추가하는 방법에 대해 볼 때가 됐다는 걸 알았지 YUI 3 IO를 . YUI 3의 IO 모듈은 이미 플래시 전송을 통해 크로스 도메인 요청에 대한 지원을했다. 난 그냥 Node.js.위한 새로운 교통 수단을 추가하기로 결정 토마스 샤, IO의 저자,​​ IO는 플래시 전송이 작동하는 것과 동일한 방식으로 타사 전송을 수락 할 수있었습니다. 이 시점에서 이미 Node.js.에서 제공하는 HTTP 연결 처리와 통합하기는 쉬워 이것은 서버에서 실행되는 브라우저에서 XDR 전송에서 실행하도록 설계된 코드를 허용 - 당신이해야 할 모든 전송 유형을 변경하고, 다른 모든 정확히 동일하게 작동합니다.

 YUI (). 사용 ( 'JSON', '기본', 'IO - nodejs'기능 (Y) {
     var에 URL = 'http:/'+ '/ yuilibrary.com / 갤러리 / API / 사용자 / davglass';
     Y.io (URL, {
         XDR : {
             사용 : 'nodejs'
         }
         에서 : {
             시작 : 함수 () {
                 Y.log ( '시작 IO', '정보', 'TEST');
             }
             성공 : 기능 (ID, O) {
                 Y.log (Y.JSON.parse (o.responseText) userinfo.);
             }
         }
     });

IO 모듈이 작동되고 나서는, 나는 재미있는 것을 만들 수있는 라이브러리를 사용하기 시작했다. 나는 무엇을 만들어요? 나는 현지 콤보 서버를 구축 YUI 3 Node.js를 사용합니다. 즉, 나는 YUI 3 combo'd 파일을 제공하는 도구를 만들 YUI 3을 사용할 수 있습니다. 이 프로젝트는 잘 할 수 의외로 간단했다. 콤보 로더에 대한 소스는에서 구할 수 내 GitHub 계정을 내가 가지고 여기 데모 서버를 .

모두 모두, Node.js 아래 핵심 YUI 3 유틸리티 작품을 만드는 과정은 YUI 3의 아키텍처에 간단하게 감사했다. 내 용 코드 Node.js YUI 3 모듈은 내 GitHub 저장소에서 사용할 수 있습니다 그것이 실행하는 방법에 대한 지침과 함께.

나는 YUI 3 Node.js.에서 실행 점점 이후로 난 추구 봤는데 몇 가지 추가 실험에 대해 이야기 언제, 다음 게시물에 계속 지켜봐 주시기 바랍니다

: 대화 찾기 bloglines | 테크노을

공유하고 확장 : del.icio.us와 스크랩 | 디그 그것! | 레딧!