Yahoo! User Interface Blog (YUIBlog)

Attuazione Focus: vitalista, uno Getting Things Done (GTD) App Web Costruito con YUI 2

A proposito di vitalista

Vitalista è un potente strumento di organizzazione personale che segue da vicino le popolari metodologia Getting Things Done di David Allen . Con vitalista, tutte le cose da fare sono online, in formato GTD, e pronta per l'accesso o l'aggiornamento da qualsiasi luogo.

Perché YUI?

Abbiamo utilizzato YUI al vitalista piuttosto pesantemente in quanto attorno alla versione 2.2.0 - per circa tre anni. Inizialmente abbiamo finito per scegliere YUI fuori dei framework JavaScript disponibili per due ragioni principali: la documentazione e l'impronta del codice. Ancora oggi, mi sento YUI continua a guidare il gruppo in entrambe le aree.

Con interfacce utente ricevendo tutti i giorni più complesso, un altro notevole vantaggio di YUI è il numero di programmi di utilità disponibili e widget. E a vitalista stiamo prendendo pieno vantaggio, utilizzando i seguenti componenti (versione 2.8.0r4): animazione , autocomplete , cronologia del browser , calendario , compressore , il collegamento , dei cookie , caratteri CSS , CSS Reset , datasource , dom , drag and drop , elemento , eventi , json , logger , menù , selezione , swf , tooltip , yahoo .

Ossessione per prestazioni e la reattività

All'inizio a vitalista abbiamo deciso di andare la rotta di carico la maggior parte dei componenti necessari ei dati sulla prima visita alla nostra applicazione principale. Ciò è stato fatto per due motivi, la reattività dell'interfaccia utente e la facilità di installazione offline. Concentriamoci sulla capacità di risposta.

Se in teoria è semplice, avendo JavaScript gestire praticamente tutta la nostra generazione UI sicuramente aggiunti alcuni complessità. Ad esempio, la velocità di aggiunta e attraversare la DOM è della massima importanza. Qualcosa di semplice come l'aggiunta di un elemento radice al getElementsByClassName funzione aumenta notevolmente le prestazioni. E a volte abbiamo dovuto sacrificare la convenienza programmatico per la velocità. Mentre il YUI 2 Utility Selector può essere molto potente, abbiamo inizialmente trovato getElementsByClassName per essere più veloce. (Con le ultime versioni di YUI 2, le prestazioni Utility Selector sembra essere aumentato un bel po ', ma abbiamo ancora default getElementsByClassName quando possibile per migliorare le prestazioni - in particolare nei browser che hanno il supporto nativo, che Utility Dom YUI 2 del sfrutta. )

YUI due automatico poteri una delle caratteristiche più recenti di vitalista, uscito nell'ultimo anno o giù di lì, ma è stato anche uno dei più difficili implementazioni in termini di reattività e l'utilizzo della CPU browser. Nel nostro primo tentativo, ogni volta che avevamo bisogno di un nuovo controllo automatico per un ingresso che avrebbe creato una nuova istanza, distruggendo una volta che non era più necessario. Questo accade tipicamente quando ci si sposta da "pagina" per "pagina" (tenere a mente, tutte le nostre "pagine" sono solo client generati schermi). Internet Explorer ha lottato con questo, spesso ancoraggio la CPU al 100% ed efficace portare il computer a una battuta d'arresto. Questo ci ha costretto a disattivare il supporto automatico per IE. Due cambiamenti chiave ci ha aiutato a creare un più efficiente completamento automatico. Per prima cosa, creiamo solo pochi casi generici del completamento automatico che possono essere condivisi da "pagina" per "pagina". Quindi l'aggiornamento è necessario solo stabilire un nuovo DataSource, che nel nostro attuazione richiede meno sforzo CPU. Numero due, prestare attenzione alla maxResultsDisplayed proprietà. Perché lasciamo che l'elenco completo di completamento automatico viene visualizzato senza alcun input (abbiamo aggiunto anche il tasto freccia giù per visualizzare l'elenco), abbiamo inizialmente la maxResultsDisplayed ad un numero arbitrariamente grande come 10.000. Semplicemente cambiando questo numero alla lunghezza della nostra effettiva datasource portato a significativi guadagni di prestazioni della CPU.

Per il monitoraggio delle prestazioni sul front-end, si usa il YUI 2 Controllo Logger . Quando in modalità di debug, che in uscita gli aggiornamenti di log dettaglio le varie fasi di lavorazione JavaScript. Una cosa grande circa il logger è il fatto che mantiene un timestamp di quando è stato aggiornato l'ultima volta. Questo è stato molto utile quando si cerca di capire i colli di bottiglia nel nostro codice. E per più del monitoraggio delle prestazioni lato server, YSlow è stato anche molto utile per fare in modo che stanno generando le richieste http il più velocemente possibile.

Attuazione caratteristica più interessante

Personalmente, ho avuto la resistenza più divertente di attuazione e calo vitalista (con YUI 2 Drag and Drop ). Drag and drop serve in realtà due scopi nella vitalista per l'elemento resistenza stessa. In primo luogo, lo usiamo per ricreare manualmente ordinamento liste, in secondo luogo, lo usiamo per lo spostamento di compiti tra le liste. A questo scopo, due diversi goccia di destinazione "zone" sono utilizzati: uno per gli elementi della lista del contenuto e uno per gli elementi della lista nel menu barra laterale sinistra.

La parte interessante: ecco le due zone diverse funzionano in modo diverso. Quando si trascina nell'area dei contenuti, vogliamo l'elemento di trascinamento per spostare continuamente l'elemento aleggiava e aggiungere l'elemento di trascinamento nella nuova posizione. Nell'area del menu, non vogliamo spostare a nulla, ma vogliamo mettere in evidenza la scelta del menu che stiamo passando sopra. Ecco un frammento di codice dal metodo onDragOver:

 if (destElNodeName === "li") {
	 orig_p = srcEl.parentNode;
	 p = destEl.parentNode;
	
	 if (! _D.hasClass (p.parentNode, "nav")) {
		 se (this.goingUp) {
			 p.insertBefore (srcEl, destEl);
		 Else {}
			 p.insertBefore (srcEl, destEl.nextSibling);
		 }
	 Else {}
		 _D.removeClass (_S.query ("# ​​Sidebar nav:.. Non (alt) li"), "drag");
		 _D.addClass (DestEl, "drag");
	 }

	 _DDM.refreshCache ();
 }

Costruire componenti vitalista con YUI Compressor

In relazione alla nostra ossessione per le prestazioni, abbiamo creato un web front-end che utilizza il YUI Compressor in collaborazione con alcuni altri script per costruire i vari componenti JavaScript e CSS utilizzati in tutto vitalista. In questo modo stiamo mantenendo l'impronta più piccolo codice possibile per ciascuna delle sezioni principali del nostro sito. E come forse sapete, mantenendo il numero di richieste HTTP al livello più basso possibile, aiuta sui tempi di caricamento delle pagine, così combinando JavaScript e CSS, dove possibile, può aiutare molto.

Alcuni retroscena è necessario qui. Vitalista ha il suo proprio core set di utility JavaScript e CSS, che sono condivisi da tutte le sezioni principali del sito. Ciascuna sezione individuale (come il principale applicazione, iPhone ottimizzata applicazione, o sito di marketing) ha il suo specifico JavaScript e CSS.

Quindi le basi del processo di creazione sono le seguenti: in primo luogo, il globale JavaScript e CSS sono ridotte di uso YUI Compressor. Poi, per ogni sezione, i vari file JavaScript e CSS sono ridotte di una, e poi combinati con il file globale per creare un unico file. Inoltre, ogni sezione richiede solo alcuni componenti del YUI, così che ciascuno dei pezzi necessari sono combinati in un singolo file YUI, riducendo ulteriormente il numero di file necessari.

Cosa c'è di nuovo?

Il prossimo progetto importante con vitalista utilizzando YUI sarà l'aggiornamento al 3 YUI quadro. Con la capacità versione 3.1.0 's utilizzare legacy YUI 2 componenti facilmente, è il momento di fare la mossa.

Se siete interessati a saperne di più su vitalista, si prega di consultare il nostro sito web: www.vitalist.com . Inoltre, non esitate a contattarci via email a support@vitalist.com con tutte le domande che potete avere.

Trova le conversazioni: bloglines | technorati

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