Yahoo! Blog User Interface (YUIBlog)

Attuazione Focus: Enterprise Developer Web, un Python / quadro YUI

Enterprise Web Developer (EWD), un / Python quadro YUI

Sin dagli albori, nel 1996, volevo che la gente in grado di utilizzare tecnologie web come interfaccia utente per le applicazioni che avevano precedentemente preso in considerazione utilizzando client / server o qualche altra tecnologia per creare GUI. Sembrava di essere una tecnologia che aveva il potenziale per essere fortemente automatizzato in modo tale che gli sviluppatori potrebbero concentrarsi su esprimere quello che volevano fare, piuttosto che come raggiungerlo.

La cosa che ha sempre sgomento e mi ha sorpreso è come l'industria non ha abbracciato questa filosofia. Anche se non mancano di web / framework Ajax là fuori - sembra che ci sia un nuovo ogni settimana - hanno tutti un tema comune: l'idea che un web / application Ajax è principalmente un problema di programmazione. Al contrario sono stato fermamente convinto che con la costruzione di un quadro che era stato in primo luogo di progettazione mirata, gli aspetti di programmazione potrebbero potenzialmente essere automatizzato a tal punto che la programmazione effettivo richiesto anche in una domanda di assistenza sanitaria complessa dovrebbe essere in grado di essere ridotto a livelli quasi banale. Questo è stato l'obiettivo del nostro progetto EWD e dimostra che tale approccio è pratico, fattibile e di grande beneficio.

Perché Python e YUI?

Abbiamo portato EWD al libero Open Source NoSQL database GT.M e Chris Munt, M / Gateway co-fondatore, ha sviluppato una serie di legature EWD linguaggio che può utilizzare. La nostra serie slidecast recente (descritta sotto) è stato basato su Python suo legame perché è un linguaggio popolare in questi giorni - rapporti recenti suggeriscono che essa è cresciuta in uso dal 45% da aprile 2008. Tuttavia, è possibile utilizzare EWD altrettanto facilmente con Ruby o Java.

La nostra serie di screencast si concentra su EWD / integrazione YUI per diverse ragioni:

• YUI fornisce un potente e altamente funzionale e utilizzabile insieme di widget UI
• a differenza di molti quadri di Javascript, YUI non è un "ambiente" tutto o niente, quindi è possibile combinare e abbinare YUI components with your proprio
• YUI è un libero libreria Open Source così in combinazione con EWD e GT.M in esecuzione su una piattaforma Linux, la demo si basa su una fonte completamente gratuito Open stack
• essa ha di Yahoo! e Douglas Crockford pedigree: quanto più è necessario che dici!

EWD utilizza la sintassi XML per integrare YUI. Quali sono i vantaggi di questa offerta?

Rendere il lavoro EWD con YUI è stato piuttosto semplice, ma ben presto divenne chiaro per me che lo sviluppatore medio affrontato alcuni ostacoli al momento dell'adozione di tale quadro Javascript per il loro sviluppo dell'interfaccia utente. Quadri sono ambienti complessi, che richiedono un sacco di conoscenza approfondita del Javacript piuttosto avanzato, c'è una grande curva di apprendimento e c'è un sacco di "diavolo nel dettaglio". Inoltre, tale Javascript complesso e prolisso richiede manutenzione a valle, spesso da qualcuno che non lo sviluppatore originale. Inoltre, per me, hanno presentato l'ennesimo esempio di come la soluzione del settore per web / sviluppo di applicazioni Ajax è stata avvicinarsi ulteriormente programming e lontano dalla skillsets di designer.

Fin dai primi giorni di EWD avevo assicurato che si trattava di utente estensibile, che consente di incapsulare la funzionalità e il comportamento in formato XML-based "tag personalizzati", e hanno dimostrato di essere una soluzione perfetta per integrare YUI. I tag personalizzati YUI ho dimostrato sono pertanto un'estensione personalizzata di EWD. Il tag personalizzati YUI non solo di generare tutto il codice Javascript necessario al widget corrispondente, ma anche di gestire la distruzione del widget al momento giusto, e comprendono ottimizzate "just in time carico del corretto. Js e. File css, lasciando la sviluppatore non devi preoccuparti di tutta quella roba configurazione up-front. Un'altra caratteristica fondamentale di tag XML è che esse sono intrinsecamente nidificabili, e di solito questo è esattamente ciò che devi fare con i widget YUI: menu e DataTable nidificato all'interno di tab-pannelli per esempio. Così i reali vantaggi sono che lo sviluppatore può esprimere ciò che vuole fare in poche intuitivamente di nome e disposti tag personalizzati. Non solo rendere lo sviluppo rapido e semplice, ma la manutenzione a valle diventa anche troppo semplice (e ricordiamo che una delle spese generali e costi di un grande, applicazioni mission-critical è di manutenzione).

Un buon esempio è l'uso di widget TabView. In questi EWD può essere descritto da un semplice ed intuitivo (e quindi altamente gestibile), insieme di tag annidati XML personalizzato, ad esempio:

 <yui:TabView>
     <yui:Tab label="By Artist" active="true" dataSrc="selectCDXArtist.ewd" />
     <yui:Tab label="By Title" active="false" dataSrc="selectCDXTitle.ewd" />
 </ Yui: TabView>

Il YUI: Tag's Custom tag processore TabView viene richiamato dal compilatore di EWD quando incontra un esempio di questo tag, e genera il codice eseguito in tempo che invierà il appropriate YUI TabView Javascript ed associati markup HTML al browser.

EWD serie di istruzioni

Abbiamo fatto una serie di screencast per introdurre EWD. Ecco Parte prima:

L'obiettivo del screencast è stato quello di dimostrare il livello estremo di automazione di EWD quando viene utilizzato per le sue potenzialità. Ho anche voluto dimostrare come, in EWD, sei molto descrivere quello che stai voler raggiungere, lasciando EWD a fare tutto il lavoro e il modo per gestire tutti i per giorno giorno le cose che sono essenziali per una applicazione web ma che può e deve essere automatizzata, ad esempio, la gestione delle sessioni, la gestione della sicurezza ecc spero che quando la gente guarda i video che vedono come programmazione poco è stato lasciato per un programmatore di fare: è praticamente il recupero dei dati dal database, convalidando i campi modulo nei confronti di un database e salvataggio dei dati in un database.

Dicono sempre una foto vale mille parole, e penso che un video è ancora più potente. Vedere per credere, e non c'è niente come essere mostrato come uno strumento può essere utilizzato dal ragazzo che ha progettato e scritto it!

Ho scelto di esplorare un insieme di interazioni tipiche dell'interfaccia utente di un'applicazione media che potrebbe essere dimostrato nel giro di circa un'ora. Volevo anche dimostrare come nidificazione dei componenti dell'interfaccia utente è stato possibile utilizzando sia la nidificazione inerenti YUI tag personalizzati e EWD il "frammento" basato su Ajax architettura. La demo comprende logging in un'applicazione, un menu principale, pannelli scheda per scegliere le azioni necessarie e una query sul database i cui risultati sono presentati in un oggetto DataTable. Speriamo che il fatto che sono stato in grado di dimostrare come tutto ciò che la funzionalità può essere creato in poco più di un'ora mostra la potenza e di beneficiare di EWD come un quadro di sviluppo. E in termini di manutenibilità, l'intera applicazione dimostro è descritto in appena 134 righe di semplice HTML / XML markup e solo 78 righe di semplice codice Python!

Dove può arrivare la gente EWD di provarlo per se stessi?

Il modo più veloce e più semplice modo per ottenere un lavoro EWD sistema pienamente funzionante è quello di utilizzare il nostro libero M / DB Installer . Abbiamo fatto uno screencast anche per questo.

Attualmente il EWD / YUI libreria di tag personalizzati in genere non è disponibile, ma speriamo di essere in grado di rilasciarlo al più presto.

Abbiamo anche un forum per gli utenti EWD che le persone sono molto benvenuti.

Trova conversazioni: bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | digg it! | reddit!