Inizio Blog User Interface (YUIBlog)

Esecuzione di YUI 3 Server-Side con Node.js

Per coloro che non conoscono Node.js , ecco come lo descrivo:

Node.js è un server-side, non-blocking, guidata evento per il runtime JavaScript costruito sulla sommità del motore JavaScript V8 . Pensate Node.js come un sostituto valido per il vostro lato linguaggio di scripting server-, seduto dietro un server HTTP come Apache o nginx .

Recentemente ho suonato in giro con Node.js per vedere che cosa tutta l'emozione era circa. Così, naturalmente, ho deciso di vedere cosa ci vorrebbe per arrivare YUI 3 per l'esecuzione con Node. Conoscere l'architettura dietro YUI 3 , ho pensato che non sarebbe troppo difficile per farlo funzionare.

Since Node.js non fornisce un DOM nativa, è lecito chiedersi: "Perché utilizzare un framework JavaScript?" Beh, YUI 3 non è solo manipolazione DOM - contiene anche un robusto set di strumenti oggetto di classe / gestione, per non parlare i nostri eventi potente personalizzati. Tutti questi strumenti sono utili in maniera diretta nella programmazione server-side.

Per iniziare

In primo luogo, va osservato che YUI sarà caricato nel campo di applicazione a livello mondiale in Node.js, perché tutti i moduli YUI 3 invocare YUI.add all'inizio del file. L'oggetto sarà YUI si assegnare al exports oggetto per il CommonJS specifiche, ma, una volta che un modulo è utilizzato, necessita di un globale YUI da allegare al. (Questo può essere qualcosa che aggirare in futuro, ma questo è il punto di partenza di questa esplorazione.)

La prima cosa che dovevo fare era arrivare caricatore al lavoro. Fare questo è stato abbastanza semplice, ho solo usato il built-in YUI 3 utensili. Il sistema di YUI modulo 3 è robusto e facile da configurare, in modo da utilizzare il YUI.add metodo sono riuscito a creare una nuova get modulo. Questo nuovo modulo accettato i parametri di default per il lato client Get Utility, ma invece di creare un nodo script incluso YUI che modo si recupera YUI dal disco o dal CDN e carica i dati nel processo corrente. Ecco un semplice frammento di codice che mostra come questo è fatto:

 YUI.add ('get', function (Y) {
     Y. Get = function () {};
     Y.Get.script = function (s, c ter) {
         var URL = Y. Array (s), url, I, L = urls.length;
         for (i = 0; l i <; i + +) {
             url = URL [i];
             if (! URL [i] match (/ ^ https:.? \ / \ / /)) {
                 url = url.replace (/ \ js $ /,.'');
             }
             Y.log ('URL:' + url, 'info', 'Get');
             / / Non ha bisogno di bloccare, in modo da non bloccare.
             require.async (url, function (mod) {
                 pass (CB);
             });
         }
     };
     / / Basta mettere le cose stanno così non otteniamo errori
     Y.Get.css = function (s, c ter) {
         Y.log ('caricamento CSS:' + s, 'debug', 'get');
         pass (CB);
     };
 });

Ora che ho avuto Get script di caricamento, volevo essere in grado di monitorare ciò che stava facendo. YUI 3 include una configurazione attributo chiamato logFn che permette la registrazione di sostegno negli ambienti in cui nativo console di registrazione potrebbe non esistere. Ho usato questa configurazione attributo per aggiungere un'opzione per l'oggetto globale YUI YUI che dice che si dovrebbe utilizzare una funzione speciale quando emettono messaggi di log. Diamo uno sguardo a quella funzione:

 logFn: function (str, t, m) {
     t = t | | 'info';
     m = (m)?  '(' + M + ')':'';
     o var = false;
     if (Object instanceof str | | str instanceof Array) {
         / / Se si usa questo?
         if (str.toString) {
             str = str.toString ();
         Else {}
             str = sys.inspect (str);
         }
     }
     / / Messaggi di log di output di stderr
     sys.error ('[' + t.toUpperCase () + ']:' + m + str);
 }

Ora che ho avuto YUI 3 di carico e registrazione dei messaggi, il passo successivo è stato quello di testare il sistema. Ho deciso di caricare su mio YQL modulo Gallery e provare a fare una YQL richiesta. Questo si è rivelato più facile di quanto mi aspettassi. Poiché il modulo utilizza Get YQL, ha funzionato out of the box. Ecco un esempio di console di stampa in esecuzione di una query YQL contro la mia tabella GitHub.

 [INFO]: (YUI) requisiti Modulo: array []: 3
 [INFO]: (YUI) moduli mancanti: array []: 3, 3
 [INFO]: (YUI) caricatore Recupero: http://yui......oader/loader-min.js
 [INFO]: (get) URL: http://yui.yahooapis.co.../loader/loader-min.js
 [INFO]: (YUI) requisiti Modulo: array []: 11
 [INFO]: (YUI) moduli mancanti: array []: 8, 8
 [INFO]: (YUI) Utilizzo di Loader
 [INFO]: (get) URL: http://yui.yahooapis.com/combo?3.1.0/build/du ......
 ...........ild / galleria-YQL / galleria-YQL-debug.js
 [LIFE]: (base) di costruzione chiamato
 [INFO]: (attributo) costruttore di attributo chiamato
 [LIFE]: (base) chiamato init
 [INFO]: (evento) yui_3_1_0_1_12703536585676: Firing uno: init
 [INFO]: (attributo) initValue per inizializzata: false
 [INFO]: (attributo) attributo Aggiunta: inizializzato
 [INFO]: (attributo) initValue per distrutti: false
 [INFO]: (attributo) attributo Aggiunta: distrutto
 [INFO]: (attributo) attributo Aggiunta: inizializzato
 [INFO]: (evento): uno di cottura: pippo
 [INFO]: (evento): uno: sub foo->: yui_3_1_0_1_127035365856711
 [DEBUG]: (myapp) Foo Fired
 [INFO]: (get) URL:% http://query.yahooapis.com/v1/public/yql?q=select 20fro 20% * ....... bles.env &
 [INFO]: (evento) yui_3_1_0_1_127035365856715: sub-query>: yui_3_1_0_1_127035365856716
 {Count: '1 '
 , Creato: '2010-04-04T04: 01:00 Z '
 , Lang: 'en-US'
 , Ultimo aggiornamento: '2010-04-04T04: 01:00 Z '
 , Uri: 'http://query.yahooapis.com/v1/yql
 , I risultati:
    {Utente:
       {'Gravatar-id': 'd5c18055c50c5b34b0163e0bf0dbf59f'
       , Il nome: 'Dav Glass'
       , Società: [Object]
       .....
       , Sul blog: 'http://blog.davglass.com/'
       }
    }
 }

Quindi, con tutto che il lavoro più semplice, come ha fatto, ho pensato che era ora di vedere di aggiungere il supporto per YUI 3 IO . modulo I / O YUI 3 ha già avuto il supporto per le richieste di dominio tramite una croce di trasporto Flash. Ho deciso che vorrei aggiungere un nuovo trasporto solo per Node.js. Sha Thomas, autore di I / O, è stato in grado di fare IO accettare i trasporti di terze parti nello stesso modo che le opere di trasporto di Flash. A questo punto è stato facile per integrarsi con la gestione connessione HTTP già fornite da Node.js. Questo consente al codice che ha progettato per eseguire il trasporto XDR nel browser per essere eseguito sul server - tutto quello che dovete fare è cambiare il tipo di trasporto, e tutto il resto dovrebbe funzionare esattamente lo stesso.

 YUI (). Uso ('json', 'base', 'io-nodejs', function (Y) {
     var url = 'http:/' + '/ yuilibrary.com / gallery / api / user / davglass';
     Y.io (url, {
         XDR: {
             uso: 'nodejs'
         },
         su: {
             inizio: function () {
                 Y.log ('IO Start', 'info', 'test');
             },
             successo: function (id, o) {
                 Y.log (Y.JSON.parse (o.responseText) UserInfo.);
             }
         }
     });

Dopo avere ottenuto il modulo I / O al lavoro, ho deciso di utilizzare la libreria per costruire qualcosa di divertente. Che cosa ho fatto costruire? Ho usato YUI 3 e Node.js per costruire un server locale combo. In altre parole, ho potuto utilizzare YUI 3 per costruire uno strumento che serve YUI 3 file combo'd. Questo progetto è stato sorprendentemente facile da fare pure. La fonte per la Loader Combo è disponibile presso il mio conto GitHub e ho un server demo qui .

Nel complesso, il processo di realizzazione del nucleo YUI 3 lavori utilities sotto Node.js è stato semplice grazie all'architettura YUI 3's. Il codice per la mia Node.js YUI 3 modulo è disponibile nel mio repository GitHub con le istruzioni su come farlo funzionare.

Restate sintonizzati per il mio prossimo post, quando parlerò di alcuni esperimenti supplementari che ho portato avanti da sempre YUI 3 in esecuzione su Node.js.

Trova conversazioni: bloglines | technorati

Condividi e ampliare: Bookmark con del.icio.us | digg it! | reddit!