Yahoo! User Interface Blog (YUIBlog)

YUI Theater - Ryan Cannon: "Non c'è off-season: mossa NFL.com 's di YUI" (42 min.)

17 Gennaio, 2012 alle 10:57 am da Ryan Grove | In Development , le implementazioni YUI e YUI Teatro | Nessun Commento

NFL.com 's Ryan Cannon ( rcanine @ ) è unito a noi a YUIConf 2011 per condividere la storia del perché NFL.com scelto YUI oltre jQuery, come la migrazione di grandi dimensioni da una base di codice Prototype a YUI 3 in un fitto calendario, e come utilizzare al YUI creare siti web e applicazioni mobili per uno dei campionati più famosi del mondo dello sport.

Links

• Guarda in HD su YouTube
• Slides
• Pieno YUIConf 2011 Playlist su YouTube

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI Stories

10 novembre 2011 alle ore 01:07 da Ryan Grove | In implementazioni YUI , YUI Theater | 1 commento

A YUIConf 2011 settimana scorsa, abbiamo istituito una videocamera e ha invitato i partecipanti a dirci come usano YUI e perché lo ha scelto per i loro progetti. Siamo stati entusiasti di ascoltare le loro storie, e ci piacerebbe sentire anche la vostra! Dopo aver controllato il video , lasciare un commento e dirci come si usa YUI.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Uso Loader a Quorus

24 Marzo 2011 alle 9:49 pm Peter Abrahamsen | In Development , le implementazioni YUI | 2 commenti

Oggi, vorrei parlare di YUI Loader e come noi a Quorus, Inc. , utilizzarla per fornire siti di terze parti con le nuove caratteristiche su richiesta.

Il codice che scriviamo caratteristiche poteri sulle pagine di altri popoli, il che significa che siamo nella non invidiabile posizione di dover non solo non controlla l'ambiente del browser, ma pesanti restrizioni nel modo in cui usiamo il documento stesso. I nostri clienti mettere uno script Quorus bootstrap sulle loro pagine, tutto il resto necessario per il nostro funzionalità è caricato in modo dinamico e su richiesta. Andiamo a lunghezze eroici per assicurarsi che i nostri elementi, stili e script non alterano il comportamento di tutto non siamo responsabili.

Abbiamo iniziato la nostra base di codice presente due anni fa, quando YUI 3 è stato solo prendendo forma. E 'stata una decisione rischiosa, al momento di impegnarsi per una base di codice che non avrebbe colpito beta per diversi mesi. In retrospettiva non posso immaginare come si sarebbe realizzato ciò che abbiamo senza di essa. Non ho visto nessun altro quadro che ha componenti che si avvicinano il potere di Loader, Attribute e CustomEvent .

Lo script di bootstrap Quorus forniamo ai nostri clienti fa quasi nulla. Il suo compito è solo quello di caricare il centro della nostra piattaforma senza bloccare il resto del caricamento della pagina, e di coda di qualsiasi API chiamate fino a quando abbiamo fatto così. Questo file di script core, chiamato stage2, inline yui , loader , e oop , così come intelligenza sufficiente per caricare librerie aggiuntive per rispondere alle chiamate API, i clic degli utenti, e le altre condizioni del contesto operativo. Maggior parte delle altre risorse sono servite da un server combo personalizzata che serve personalizzato Quorus e stock moduli YUI.

Bootstrap code fino API chiamate in codice del sito ospitante tra il momento in carica e quando siamo pronti ad andare in un array sul nostro oggetto globale, 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); }; 

Una volta che siamo pronti a elaborare le chiamate API, stage2 li esegue uno per uno in timeout. Questo assicura cediamo il controllo regolarmente al browser, il che rende l'esperienza utente più reattiva. Il comportamento è molto simile a Y.AsyncQueue, ma più semplice e non richiede YUI da caricare:

 // 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(); 

Il bootstrap file è, a questo punto, per lo più immutabile: è qualcosa che la mano fuori ad un cliente, che potrebbe richiedere un mese o più per distribuire qualsiasi nuova versione abbiamo dato loro, un tempo incredibilmente lungo per una società di avvio agile. Il stage2 file, nel frattempo, è piccolo, carichi da nostri server, e ha una vita breve cache. Questo assicura che nessun utente finale avrà una vecchia versione per più di pochi minuti. Quasi tutte le altre risorse di cui abbiamo bisogno in modo permanente cacheabili librerie JavaScript e file CSS.

Quando abbiamo rilasciare una nuova versione del nostro codice, stage2 indirizza automaticamente i browser per avviare il download da una nuova posizione, assicurando che utilizzare solo il nuovo codice. Questa configurazione ci permette di distribuire le modifiche rapidamente senza servendo le attività più spesso del necessario. Questo non solo a mantenere i costi di larghezza di banda bassa, ma fornisce una migliore esperienza utente: le risorse memorizzate nella cache caricare molto rapidamente mentre la pagina viene caricata.

Se abbiamo iniziato la nostra codebase oggi, con il beneficio della Galleria YUI , ci sono una serie di componenti che potremmo usare per rendere la nostra vita più facile. Uno di questi è Eric Ferraiuolo di Component Manager Base , che assiste con il cablaggio di componenti (tipicamente Widget) su richiesta. Un altro potrebbe essere di archiviazione Lite , per aiutarci a mantenere lo stato delle applicazioni su caricamento della pagina.

Molte grazie al team YUI per il loro grande lavoro, e alla comunità per i loro contributi. Se volete leggere i nostri approcci per sandboxing o di coordinare i componenti caricati in modo asincrono, per favore fatemelo sapere nei commenti!

Circa l'autore: Peter Abrahamsen scrive Ruby e JavaScript, gestisce l'infrastruttura server, e gli studi user-centered design a Seattle, Washington, USA. Lo si può trovare su IRC come Rainhead.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Portare Theater YUI alla TV su Internet

6 dicembre 2010 alle 10:14 am da Chad Auld | In Development , le implementazioni YUI | 4 Comments

Volevo postare un rapido aggiornamento su alcuni progetti relativi YUI ho lavorato sopra con un mio amico, Ozgur Cem Sen (@ ozgurcemsen). Eric pubblicato pochi mesi fa circa i nostri sforzi per portare YUI Theater di Boxee . Abbiamo appena finito di rielaborare l'interfaccia utente per Boxee e ha aggiunto alcune nuove funzionalità come la navigazione per tag e la ricerca. Stiamo attualmente lavorando con il team di Boxee per ottenere l'applicazione aggiunto nel nuovo repository Boxee Box . Questo è in aggiunta al repository standard, ma presentano per la versione desktop. Il repository Boxee Box ha alcune prescrizioni più rigorose in fatto di prestazioni e qualità video. Le nuove versioni dovrebbero auspicabilmente essere fuori entro la prossima settimana o giù di lì.

Mentre finendo l'applicazione Boxee ci siamo imbattuti sulla piattaforma TV Samsung e il tempismo è stato perfetto perché sono effettivamente in esecuzione uno "Free TV" sfida. Abbiamo incontrato il concorso piuttosto tardi nel gioco e quasi perso il termine di presentazione, ma abbiamo spinto molto e con successo ricreato la stessa esperienza di Samsung in breve tempo. Se si dispone di pochi minuti si prega di votare / contribuire a diffondere la parola sulla nostra sottomissione Theater YUI per Samsung - http://www.freethetvchallenge.com/submissions/249 . Abbiamo 50 + altre voci da battere.

Ultimo, ma non meno importante - abbiamo anche appena completato i lavori su un Theater YUI app for Plex . Non è nel repository delle applicazioni ancora ufficiale, ma la richiesta è dentro Nel frattempo potete scaricarlo da qui se vuoi - http://wiki.plexapp.com/index.php/YahooYUITheater .

Qui ci sono alcuni video delle applicazioni in azione:

• Samsung TV app - http://www.youtube.com/watch?v=e1kRicivfDU
• Plex app - http://www.youtube.com/watch?v=oxBPqVQqdnY
• Boxee app - http://www.youtube.com/watch?v=IK4i1DksuhU

Si dovrebbe aspettare di vedere gli sforzi simili per Google TV e Yahoo! Connected TV in un futuro non così lontano pure.

Speriamo che queste applicazioni si rivelano preziose risorse per coloro che non possono di solito frequentare i Meetup e / o non ha fatto l'ultima YUIConf . Continueremo ad aggiungere nuovi video che vengono rilasciati.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

jQuery e YUI 3: A Tale of Two librerie JavaScript

Ottobre 27, 2010 at 14:08 da Mark Rall | In Development , le implementazioni YUI | 5 commenti

Recentemente ho avuto l'opportunità di costruire la mia prima applicazione di front end JavaScript. Quello che segue è una breve storia della scoperta e l'evoluzione che avviene quando si tenta di utilizzare strumenti che non sono adatti per il lavoro a portata di mano. Si tratta di un conto delle conoscenze acquisite attraverso lo sviluppo della stessa applicazione front-end con due librerie molto diverse, jQuery e YUI 3. Dettagli del cliente e il progetto sono stati volutamente omessi.

Panoramica

Il progetto prevedeva la refactoring di diversi strumenti di Flash disparate in un'unica applicazione interattiva basata su standard aperti per un editore di contenuti di grandi dimensioni. Di grande importanza, la domanda doveva essere altamente ottimizzato con una piccola stampa del piede iniziale, a causa del gran numero di page impression al giorno il cliente riceve. Varie fasi sono stati coinvolti, con il primo è una prova iniziale di concept.

Il concetto ha comportato lo sviluppo di una visione di quello che sarebbe l'applicazione completata. Si trattava di:

• Un file seme iniziale (<1KB) responsabile per il caricamento dinamico di tutte le strutture (ad esempio, jQuery o YUI 3) e il file domanda iniziale.
• Lo sviluppo e l'inclusione dei plugin jQuery per sostenere elemento stilistico forma e la validazione, e visualizzazioni dinamiche grafico.
• La generazione e la popolazione di interfaccia utente, basata su input dell'utente, le impostazioni predefinite di configurazione e la posizione dell'applicazione all'interno del sito della casa editrice.
• Il calcolo e presentazione delle informazioni in base all'input dell'utente.

Ai fini di una completa informativa, la mia esperienza fino a questo punto era stato lo sviluppo di piccole soluzioni indipendenti, il tipo di cui si potrebbe descrivere come plugin in genere. Tra questi i componenti dell'interfaccia utente dinamici come caroselli di immagini, mappe interattive e Twitter / Flickr widget. Al momento della prima dilettarsi con JavaScript, jQuery era popolare, facile da imparare e mi ha permesso di raccogliere rapidamente le basi necessarie per i progetti su cui stavo lavorando. Tuttavia queste erano tutte le unità standalone e non aveva bisogno di interagire con altro codice o come parte di un'applicazione più complessa.

Primo tentativo

Al termine della prima fase del progetto, è diventato dolorosamente ovvio che avevo a che fare con un animale molto diverso da quello a cui ero abituato. Avendo avuto poca esperienza in organizzazione del codice, il mio codice è diventato rapidamente disorganizzato, inefficiente e ripetitivo. Come risultato, la prima parte di quello che sarebbe diventato uno un'applicazione molto più grande era lento da caricare. In realtà ci sono voluti otto secondi per generare quella un'unica prova di concetto. Un grande cambiamento era necessario e, mentre io avevo pensato di utilizzare una piccola biblioteca come la Base di Edward Dean e John Resig Simple Inheritance JavaScript modello per aggiungere classe a base di eredità a jQuery, ho deciso di fare un passo avanti.

Quello che volevo era un quadro completo, maturo all'interno del quale sviluppare la mia prima applicazione OO. Qualcosa che potrebbe effettivamente mi guiderà attraverso il processo. Nel rivedere le librerie disponibili, ho deciso di adottare YUI 3 per i seguenti motivi:

• Integrato, l'ereditarietà sviluppo basato su supporto applicativo inclusi attributi e la classe di gestione.
• Soluzione a lungo termine:
  • Il supporto per gli standard e l'accessibilità.
  • Finanziato da un grande noto l'organizzazione, Yahoo!
  • Associata con nomi di tutto rispetto come Douglas Crockford , Nicholas Zakas e Stoyan Stefanov .
• Ottimizzazione delle prestazioni:
  • Seme del file iniziale di 7KB solo.
  • Lazy-caricati i moduli su richiesta.
  • Consegna CDN.
• Documentazione varia e completa:
  • Yahoo! Developer Network
  • YUI 3 Documentazione API
  • YUI Theater
  • YUI Biblioteca
  • YUI Blog
• Maturo, coerente evoluzione fra le release.
• Strumenti integrati di YUI Compressor , YUIDoc , YUI Builder e Console .
• Non solo JavaScript, un framework CSS troppo.

Take Two

Integrare YUI 3 ha portato diversi benefici diretti e indiretti al progetto:

• Ereditarietà basata su architettura e la gestione della classe tramite l' attributo di interfaccia, Base e Widget classi produttrici performante, codice riutilizzabile e organizzato.
• Separazione della presentazione dal modello e dati utilizzando il Widget di classe per rendere visualizzazioni alternative (in linea o sovrapposizione) in base alla posizione dell'applicazione all'interno del sito.
• Sandboxing e dinamica modulo inclusione attraverso YUI.use ().
• Cross-browser debug console utilizzando YUI Console .
• Il risparmio, l'ottimizzazione delle prestazioni con YUI Compressor in Eclipse.
• Facile inserimento e l'integrazione dei pre-esistenti plugin jQuery.
• Il salvataggio, documentazione del codice automatizzate con l'uso YUIDoc .

Il risultato finale è stato un cliente felice e un prodotto finito con sub-secondo i tempi di caricamento (ricordando ci sono voluti 8 secondi per caricare la prova iniziale di concetto).

Lessons Learned

Selezionate lo strumento giusto per il lavoro

Nel leggere questo post sono sicuro che alcuni lettori potranno vedere questo come anti-jQuery. Niente affatto. jQuery è un progetto fantastico responsabile di molte innovazioni. Ma, come con qualsiasi strumento, ha i suoi punti di forza e uno scopo previsto. La sua forza sta nella incongruenze browser normalizzare, abbassando la barriera all'entrata per i principianti e migliorare l'efficienza dei programmatori esperti. L'apprendimento primario che è venuto fuori del progetto era che non si può contare su uno strumento per ogni lavoro. YUI si basa su ciò che jQuery in grado di fornire, ma propongono anche un framework per applicazioni ben architettato. Ma è giusto dire che si tratta di un costo, si veda il punto successivo.

Curva di apprendimento ripida

Ci vuole pazienza, soprattutto quando si scrive la tua prima applicazione, con una biblioteca familiare come ho fatto io. Tuttavia, il payoff è immenso. Imparando un'altra libreria, non solo le vostre abilità di base JavaScript migliorare, potrai anche sviluppare una più profonda comprensione di come funzionano le biblioteche ed i vantaggi che ne derivano. Cerco di imparare qualcosa di nuovo su YUI tutti i giorni e più imparo, più mi trovo in soggezione del pensiero e talento puro che è andato nella costruzione di YUI.

Solo caricare il contenuto quando ne avete bisogno

Mentre è certamente di programmazione più facile solo per caricare tutto il necessario in anticipo, i miglioramenti delle prestazioni ottenuto come risultato diretto di contenuti lazy loading solo quando ne avete bisogno è enorme. Questo era uno dei fattori chiave che contribuiscono per migliorare drasticamente la prestazioni dell'applicazione.

Interagisci con il DOM il meno possibile

Questo punto non riguarda la libreria specifico utilizzato. Con la memorizzazione nella cache gli elementi necessari DOM e utilizzando modelli HTML in più, il tempo di rendering dell'interfaccia utente sono notevolmente diminuiti. I nodi possono essere memorizzati nella cache utilizzando Y.one () mentre gli elenchi dei nodi possono essere catturato usando Y.all (). Anche Y.Node.create () è stato molto utile in modo efficiente la conversione di stringhe di testo di grandi dimensioni agli elementi HTML DOM prima dell'inserimento.

Impara per esempio, utilizzare un CDN

In biblioteca con CDN consegnato YUI abbiamo deciso di consegnare tutte le attività del progetto tramite CDN. Questo è probabilmente il più grande successivo fattore che contribuisce al miglioramento delle prestazioni.

Pub, confusione sub

Per i programmatori esperti là fuori, cercate di non ridere di questo. Essendo stato abituato a scrivere poco più di plugins in passato, non avevo idea di come le applicazioni devono comunicare internamente. Anche dopo aver letto "Eventi personalizzati consentono di pubblicare i momenti interessanti o eventi nel proprio codice in modo che altri componenti della pagina possono iscriversi a questi eventi e rispondere loro:" ho ancora perso.

Come si è visto, evento personalizzato YUI publish-and-subscribe modello funziona a meraviglia per la comunicazione inter-classe e inter-oggetto. Puoi anche iscriverti pre e post agli eventi e includono la logica dinamica per eliminare bolle sulla base di determinate condizioni.

Integrare le migliori pratiche nel flusso di lavoro

Utilizzo di Eclipse siamo stati in grado di integrare JSLint e YUI Compressor nel processo di compilazione. In parole povere, ogni volta che si preme Ctrl / Cmd + S il codice JavaScript viene convalidato ed ottimizzato. Ciò significa che si sta testando contro ottimizzato, codice di produzione di qualità dalla prima riga di codice. Significa anche che non si dimentica di ottimizzare la frenetica corsa finale al termine di consegna.

Imparare YUI on the Job

Anche se ognuno ha un diverso stile di apprendimento, ho pensato di condividere le risorse che ho usato per imparare YUI con un obiettivo specifico in mente.

• Guarda i relativi episodi Theater YUI per avere una panoramica generale della libreria o imparare un modulo specifico. Consiglio vivamente di iniziare con:
  • Eric Miraglia Benvenuti a YUI 3
  • Todd Kloots su YUI 3 zucchero
  • Matt Sweeney YUI 3 Performance
  • Debugging Luke Smith in YUI 3
  • Isaac Schlueter sulla soluzione dei problemi con YUI 3
  • Eric Ferraiuolo sul Web App per lo sviluppo con YUI 3
  • Luke Smith Eventi Evolved
• Leggi su YUI sul Yahoo! Developer Network . Cerco di leggere un po 'ogni settimana per saperne di più ogni volta che lo ri-lettura.
• Leggi la API documentazione. Se non riesci a trovare su YUI Theater o sul Developer Network, scavare nella API. Si paga anche per leggere il codice direttamente.
• Leggere e inviare domande al forum sulla YUILibrary.com .
• Gioca molto e buon divertimento!

Conclusione

YUI 3 è una libreria completo, maturo e in continua evoluzione adatto per piccole e grandi progetti. Come front end di applicazioni web diventano più complesse, la necessità di librerie come YUI crescerà. Mentre per chi non lo sapesse può essere un'esperienza scoraggiante in un primo momento, se si bastone con esso sarete ricompensati.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Costruire TipTheWeb con YUI 3

5 ottobre 2010 alle 21:35 da Eric Ferraiuolo | In Development , In The Wild , le implementazioni YUI | Commenti disabilitati

Chi l'Autore: Eric Ferraiuolo è un direttore di TipTheWeb e co-fondatore del Software Oddnut . Scrive sul suo blog: 925 HTML , e può essere trovato su Twitter: @ ericf . Eric era un presentatore featured al YUIConf 2009 .

TipTheWeb è un nuovo servizio che consente alle persone di sostenere direttamente i propri contenuti preferiti da web inclinarlo. Per esempio, se si trova un grande post del blog, si poteva punta 25 centesimi.

TipTheWeb è una organizzazione non-profit promuovendo liberamente accessibili, di alta qualità dei contenuti web mediante la concessione di editori che ricevono suggerimenti. Se si pubblicano on-line, è possibile utilizzare l'account TipTheWeb di rivendicare i luoghi che pubblicano per ricevere suggerimenti e essere idonei a ricevere riconoscimenti da TipTheWeb.

Uso TipTheWeb di YUI 3

L'interfaccia utente di TipTheWeb è completamente costruita sulla cima di YUI 3 (abbiamo bevuto il Kool-Aid.) L'approccio che abbiamo adottato è stato quello di utilizzare YUI 3 come il fondamento e la struttura per il nostro codice JavaScript. Abbiamo costruito 33 moduli personalizzati YUI 3 (56 se si includono sottomoduli, plugin, e roll-up), molti dei quali abbiamo contribuito alla YUI 3 Galleria: Component Manager , Markout , Overlay Extra e risorse REST .

A livello di pagina Classi

Le caratteristiche principali della TipTheWeb sono implementati su alcuni altamente funzionali le pagine web che comunicano con il server tramite Ajax. Per ciascuna di queste pagine abbiamo creato un costume YUI 3 moduli che espone una pagina a livello di classe utilizzata per coordinare le azioni tra le parti funzionali della pagina.

In una delle pagine principali della nostra applicazione, la pagina Tips, si può vedere come questo approccio è applicato con il livello di pagina TipsWindow classe. Le parti funzionali principali della pagina sono i widget: CreateTip utilizzati per la creazione di suggerimenti, e le widget TipList per la modifica, cancellazione, e il finanziamento punte esistenti.

A Lot di overlay

Usiamo Y.Overlay s ampiamente in tutta l'interfaccia utente della nostra applicazione per implementare dall'utente interazioni; questo ci permette di mantenere l'interfaccia clutter-free, mentre continua ad avere la funzionalità per le funzionalità avanzate disponibili sulla pagina. Avevamo bisogno di caratteristiche che non sono state costruite in Y.Overlay , così abbiamo sviluppato Overlay Extra , che si trova nella Galleria 3 YUI e utilizzato da un sacco di altre YUI 3 siti alimentati. Ecco un posto dove si usa una sovrapposizione da TipTheWeb:

Stato attuale della TipTheWeb

Ci piacerebbe per voi di provare TipTheWeb , in questo momento siamo in beta solo su invito, in modo da richiedere un invito sul nostro sito e ti invieremo un codice di invito.

Assicurati di prendere il nostro discorso alla YUIConf 2010 , dove ci sarà la presentazione (più in profondità) su come usiamo YUI 3 e YQL a TipTheWeb.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Attuazione Focus: Auto a noleggio espresso

28 settembre 2010 alle 06:01 am da Stefan Klopp | In In The Wild , le implementazioni YUI | 2 commenti

Autonoleggio espresso è la società indipendente leader sito di comparazione di auto a noleggio su Internet. Permette di auto noleggio utenti online in più di 1000 città e aeroporti di tutto il mondo.

La nostra base utenti è in gran parte non-tecnica, il che significa che vuole confrontare i prezzi e noleggiare auto il più facilmente possibile. Con il rilancio del nostro sito web nel giugno del 2010 abbiamo implementato molti componenti di YUI 2 a contribuire a fornire ai nostri clienti un'esperienza intuitiva.

Quali componenti YUI stiamo usando?

I componenti che abbiamo usato sono Connection Manager , completamento automatico , DataSource , Calendar , Animazione , JSON , e Container .

Perché abbiamo scelto YUI

Nell'esame delle diverse biblioteche JavaScript che potrebbe potenzialmente utilizzare su Autonoleggio espresso , abbiamo scoperto che il YUI è stata la più completa per le nostre esigenze. Le maggiori caratteristiche di vendita per noi è stato l'approccio molto modulare la YUI ha portato a realizzare diversi modelli di progettazione, nonché la documentazione robusta ed esempi da essi offerti. Dal punto di vista dello sviluppo ciò ha portato ad un rapido sviluppo della nostra applicazione, senza dover lottare con una libreria.

Come usiamo YUI

Utilizziamo la YUI in un numero di modi. I nostri 4 componenti più utilizzati sono il completamento automatico, calendario, Container, e Connection Manager. Ecco alcuni dei modi in cui usiamo ciascuna di queste componenti.

Completamento automatico

Il componente di completamento automatico viene utilizzato ampiamente sul nostro sito per aiutare gli utenti a trovare una città o aeroporto in cui noleggiare un'auto. Abbiamo apprezzato molto quanto fosse facile per implementare questa componente, e quanto velocemente si risponde. Noi della cache dei risultati di ricerca server-side per contribuire a migliorare i risultati della ricerca, tuttavia, avendo il client-side caching anche aiutato moltissimo ad accelerare la risposta del componente. Un'altra caratteristica che abbiamo veramente preso per come è stato facile i risultati erano allo stile. Quando si visualizzano le posizioni per l'utente questo è stato fondamentale perché abbiamo bisogno di identificare quali luoghi in cui trovano in città e che sono stati trovati negli aeroporti.

Calendario

Il componente calendario viene anche utilizzato in tutto il sito quando un affittuario si sta riempiendo in date per condurre una ricerca. Stiamo usando una versione personalizzata di John Peloquin di Intervallo Calendario selezione e la visualizzazione in una finestra di dialogo YUI . Essenzialmente quello che volevamo fare era dare l'affittuario di due mesi vista al momento di scegliere le date, come pure visivamente mostrare ciò intervallo di date che attualmente selezionato. Di nuovo, questo era estremamente semplice da implementare con YUI 2 Calendario, e fondamentalmente è sceso per la creazione di una finestra di dialogo YUI, l'impostazione del corpo per contenere un div per il calendario, poi fissare un calendario Interval YUI a quel div.

Contenitori

Utilizziamo contenitori YUI tutto il nostro sito web in un certo numero di modi diversi. Nell'esempio di cui sopra che stavamo usando una finestra di dialogo per aiutarci a visualizzare il Calendario intervallo quando un utente è stato selezionando una data. Sulla nostra pagina dei risultati di ricerca tasso di noi fanno un largo uso dei contenitori per dare il noleggiatore ulteriori informazioni sui diversi aspetti della agenzia di noleggio auto e del veicolo che potrebbero potenzialmente affitto. La maggior parte dei contenitori su questa pagina sono pannelli che abbiamo ri-utilizzare per ogni lista diversa. Ad esempio, il display veicolo dispone di Panel:

Le cose sono un po 'più divertente con le agenzie di rating affittuario nominale. Quando si visualizzano le valutazioni, abbiamo voluto focalizzare l'attenzione dell'utente per i punteggi un'agenzia ricevute e per visualizzare queste informazioni in un ambiente pulito, di facile visione modo. Utilizzando la finestra di dialogo Controllo siamo riusciti a limitare la finestra e centrare la finestra di dialogo con facilità per aiutarci a raggiungere questo obiettivo. Impostando un'intestazione e piè di pagina vuota ha reso semplice lo styling semplicemente aggiungendo gli stili appropriati al nostro CSS. Il risultato finale è stato un contenitore pulito valutazioni che fornisce il locatario con le informazioni che vogliono.

Connection Manager

Connection Manager è utilizzato in tutto il sito ogni volta che abbiamo bisogno di estrarre i dati tramite una richiesta XHR. In alcuni degli esempi di cui sopra ci avvaliamo di questo componente per la richiesta di città e aeroporti per i implementaitons Completamento automatico e tirando le informazioni di rating per il Locatario nominale di dialogo.

Un modo interessante ci avvaliamo di Connection Manager è con il nostro blocco di centro di noleggio che si trova sulla maggior parte delle pagine. Per aiutare con le prestazioni che facciamo un sacco di full-page caching su molte delle nostre pagine di contenuto. Tuttavia, abbiamo ancora la voglia di visualizzare il blocco dinamico centro di noleggio su queste pagine. Questo ci ha presentato un problema siamo riusciti a risolvere con Connection Manager. Invece di dover spezzare la nostra pagina completamente cache e cache solo gli aspetti della pagina che abbiamo trovato è stato più facile includere solo il blocco di centro di noleggio tramite una semplice richiesta asincrona. Abbiamo trovato che questo ci ha permesso di mantenere le prestazioni da avere una pagina completamente nella cache, ma ancora visualizzare il contenuto dinamico nel nostro box centro di noleggio.

Considerazioni finali

Nel complesso siamo stati molto contenti della nostra scelta di utilizzare YUI. Ci fornisce una libreria modulare che è ben documentato, facile da usare e da implementare.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!