Yahoo! User Interface Blog (YUIBlog)

I membri del Adify team: (Da sinistra a destra) Kunal colera, Reynold Wang, Takashi Arai, Levi Wolfe, Robert Porter, Edwin Jarlos, Melroy Saldanha.

Parlaci della tua azienda / prodotto / sito web.

Adify offre due servizi correlati - la piattaforma di rete Adify Builder e Media Adify. Adify Network Builder è completamente integrato, end-to-end piattaforma tecnologica sviluppata e ottimizzata per le esigenze uniche di premio network verticali e dei loro partner degli editori. Adify Network Builder consente alle aziende come la Warner Brothers, Univision e Forbes e gli imprenditori come Resonate, Yardbarker, MOG e di costruire e commercializzare con marchio reti verticali. Adify Media è la divisione dei servizi di media di Adify. Costruito sulla piattaforma tecnologica di rete Adify Builder che alimenta più di 200 reti pubblicitarie verticali, Adify Media dispone di un accesso unico a oltre 12.000 siti in reti costruite dai migliori società dei media. Adify media raggiunge gli obiettivi degli inserzionisti, offrendo creatività e il contenuto di trasparenza con il 100 per cento di qualità medio-coda siti.

Qual è l'approccio del team di sviluppo?

A differenza di molti altri progetti che utilizzano YUI, stiamo costruendo una applicazione aziendale. I nostri utenti desiderano un veloce, l'applicazione reattivo che possono accedere, ottenere i loro rapporti, e uscire. Vogliamo che la nostra applicazione per sentire come professionale e solido come una applicazione desktop, senza essere trattenuto da limiti tradizionali di un ambiente web-based.

Ciò che ha reso YUI una buona misura per il vostro progetto?

Come YUI è completamente lato client, si integra molto bene con le tecnologie server ASP.NET molti (incluso). E 'molto stabile e professionalmente mantenuto. Questo può essere visto in tutto, dalla documentazione delle API numerosi esempi e molto utile per i forum attivi e bug tracking. Sono impressionato Yahoo! ha tali persone di talento che lavorano su qualcosa che dare via gratis.

Come state usando YUI?

Abbiamo quasi 200 pagine aspx, e quasi tutti sono con YUI in qualche modo. Stiamo utilizzando Fonts e Griglie componenti CSS (non abbiamo ben lavorato fino a Reset ancora). Usiamo i componenti di base per navigare e manipolare il DOM, e per smussare le differenze browser. Alcune delle funzioni più comunemente chiamati includono Dom.addClass () , Dom.getElementsByClassName () , Event.stopEvent () , e Event.onDOMReady () .

Probabilmente utilizzare circa la metà dei componenti widget, alcuni punti salienti sono i seguenti:

1. Utilizzo di DataSource per alimentare Grafici e DataTable . E diventa incredibilmente facile passare tra le fonti locali o XHR a seconda della quantità di dati, che è grande per le prestazioni del client.
2. Utilizzando il ColorPicker controllo per creare altamente personalizzabile white-label di interfaccia. Siamo quindi in grado di componenti facilmente ReSkin vari con una piccola quantità di dinamica CSS.
3. L'integrazione di un pannello di YUI con ASP.NET UpdatePanel per fare qualcosa che noi chiamiamo uno UpdateDialog. Questo ci dà una in-page finestra di dialogo modale che possono utilizzare AJAX per caricare dinamicamente il suo contenuto o fare un Call Server basato sulla decisione dell'utente senza ricaricare l'intera pagina.

Qual è il tuo approccio alla YUI l'integrazione con ASP.NET?

Uno dei maggiori vantaggi di ASP.NET è la possibilità di incapsulare comportamenti comuni o widget in altamente riutilizzabili controlli server personalizzati. Lo sviluppatore di controllo diventa intimamente familiare con YUI, mentre lo sviluppatore della pagina deve solo imparare a utilizzare il controllo ASP.NET personalizzato. Noi avvolgere tutti i widget YUI che usiamo con un controllo personalizzato che eredita da WebControl . Il controllo è responsabile del rendering del markup desiderato e registrare gli script YUI. . Per esempio, se ho voluto mettere un ColorPicker che di default è rossa sulla mia pagina aspx, tutto ciò che vorrei scrivere è il seguente:

  <Adify:ColorPicker ID="myPicker" color="#ff0000" runat="server" /> 

Poi nel mio lato server file code-behind, posso solo ottenere o impostare myPicker.Color di usarlo. Ecco un esempio più complesso di come si potrebbe utilizzare un DataTable in una pagina aspx per mostrare scatti nel corso del tempo.:

 <Adify:YuiDataSource ID="LastMonthData" OnRowDataBound="OnDataSourceBound" runat="server">
 <Columns>
	 <Adify:YuiDataSourceColumn Name="Time" />
	 <Adify:YuiDataSourceColumn Name="Clicks" />
	 <Adify:YuiDataSourceColumn Name="CTR" />
 </ Columns>
 </ Adify: YuiDataSource>

 <Adify:YuiDataTable DataSourceId="LastMonthData" runat="server">
 <Columns>
	 <Adify:YuiDataTableColumn Key="Time" Formatter="Date" />
	 <Adify:YuiDataTableColumn Key="Clicks" Formatter="Number" />
	 <Adify:YuiDataTableColumn Label="Click Key="CTR" Attraverso %" Formatter="Percent3" />
 </ Columns>
 </ Adify: YuiDataTable>

Abbiamo creato la nostra associazione a dati personalizzato YuiDataSource controllo server web. E 'responsabile per la serializzazione di oggetti JavaScript, nel caso di locali fonti di dati, o caching lato server di oggetti per XHR fonti di dati. Si rende nel codice HTML della pagina come YuiDataSource e potrebbe essere utilizzato da un grafico o DataTable (o entrambi). Il nostro controllo YuiDataTable espone una proprietà della raccolta denominata colonne che è una raccolta di YuiDataTableColumn oggetti. Essa serializza Columns in un array di oggetti JavaScript passati al costruttore DataTable.

Il punto principale è che i controlli personalizzati sono il più semplice possibile da utilizzare. Essi espongono proprietà per una qualsiasi delle opzioni YUI fornisce, e l'override del OnPreRender evento di rendere se stessi come le chiamate JavaScript a YUI. Questo libera l'autore della pagina di pensare alla logica sulla sua pagina, e non i dettagli scabrosi di un'istanza di un widget YUI.

Come YUI ha aiutato a raggiungere il successo il vostro progetto?

Gli sviluppatori di applicazioni tendono a rendere buoni gli sviluppatori ASP.NET in quanto di solito hanno un forte background scientifico computer. Purtroppo non sempre hanno esperienza abbastanza tanto che fare con la moltitudine dei browser o con JavaScript (che ho imparato nel corso degli anni è molto più potente e complesso di quanto inizialmente sospettato).

YUI aiuta in diversi modi. In primo luogo, aiuta astrarre un certo numero di differenze tra i browser, quindi non tutti dobbiamo conoscere ogni dettaglio su come alcune versioni del browser oscuro colpisce il nostro codice. In secondo luogo, la navigazione alcuni dei campioni è servito da ispirazione. Ho anche visto un Product Manager fare rapidamente un prototipo utilizzando un campione di YUI per spiegare come voleva una funzione per lavorare.

Infine, non riesco nemmeno a contare quante ore abbiamo risparmiato o come migliorare la nostra interfaccia è diventata grazie a tutti i widget. Abbiamo sostituito un selettore tavolozza molto semplice con il ColorPicker, ASP.NET 's built-in Calendario con YUI, e una griglia potente ma difficile da mantenere JavaScript con il DataTable. In ogni caso, abbiamo notevolmente aumentato la fruibilità della nostra applicazione diminuendo contemporaneamente la quantità di sforzo speso per correggere i bug nei nostri controlli.

Quali sono state le sfide di utilizzare YUI nel vostro progetto?

Onestamente, scrivendo JavaScript che vive fino a YUI. Se c'è una cosa che ci ha spinto a scrivere meglio il codice lato client, sarebbe l'esempio di YUI. Abbiamo davvero cercato di applicare la stessa disciplina e il rigore quando si scrive JavaScript come quando lo sviluppo di codice server in C #.

Quali sono alcuni YUI progetti legati sul tuo roadmap?

Abbiamo un piccolo strumento interno scritto usando il Uploader di controllo che è diventato molto popolare. Siamo decisamente interessati a integrare la Uploader nel nostro prodotto principale. Siamo tutti molto felici con il controllo DataTable, e vogliono iniziare ad aggiungere inline-editing, se del caso. Abbiamo anche bisogno di stare al passo con tutti i grandi miglioramenti al controllo Chart.

Stiamo anche tenendo d'occhio YUI 3 e non vedo l'ora di iniziare a vedere i widget basati sulla nuova architettura.