Share
Per otto mesi ho avuto l'opportunità di fare il tirocinio con il team YUI di Yahoo, mentre stavo completando la mia laurea in ingegneria. Oggi vorrei condividere le dieci cose migliori che ho imparato dalla mia esperienza con YUI.
Il team YUI è il principale responsabile dello sviluppo e della manutenzione della libreria YUI. La libreria è una raccolta di componenti dell'interfaccia utente, strumenti di gestione delle classi e utilità scritte in JavaScript e CSS che semplificano la creazione di applicazioni Web da parte degli sviluppatori. A differenza di altre librerie, YUI non riguarda solo la manipolazione DOM; ha un ricco set di strumenti di gestione delle classi e un robusto sistema di eventi che rende più facile lo sviluppo in JavaScript.
Oltre a ciò, il Team YUI è anche responsabile di YUI Theater, una risorsa molto popolare per gli sviluppatori web, insieme a una miriade di strumenti più piccoli come YUI Builder, YUI Compressor, YUI Test e altro ancora.
Il mio ruolo nel team era principalmente quello di aiutare a sviluppare componenti per la biblioteca, anche se ho aiutato un po 'anche lo YUI Theatre.
Quando sono entrato in Yahoo nel mio primo giorno, non ho avuto esperienza del mondo reale con YUI. Avevo familiarità con JavaScript, jQuery, HTML / CSS e PHP, ma era fondamentalmente quando si trattava di programmazione web. Sono sicuro che molti di voi sono o sono stati nella stessa barca come me.
Il mio primo compito è stato imparare la sintassi e l'architettura dietro YUI3. Fortunatamente, ho avuto una buona conoscenza del JavaScript non elaborato, e questo ha aiutato incommensurabilmente. Un sacco di ingegneri front-end conoscono bene alcune librerie, ma molti non sanno come funzionano. Per costruire plugin o moduli su una libreria (come YUI3 o jQuery), è utile avere una comprensione fondamentale di come funziona quella libreria, e in questo caso, come funziona JavaScript come linguaggio.
Quello che ho imparato: Avere una conoscenza fondamentale di JavaScript non formattato (nessuna libreria) ti costringe a capire meglio la lingua e ti rende uno sviluppatore migliore nel lungo periodo.
Pensaci. Ogni libreria JavaScript è diversa e ha le sue idiosincrasie. L'unica comunanza è che sono radicati in JavaScript. Non ha senso comprendere prima le idiosincrasie di JavaScript? Prenditi un po 'di tempo per costruire qualcosa di piccolo senza usare una libreria. Sarai contento di averlo fatto.
Il team YUI si affida a Git come sistema di controllo della versione principale e il progetto è ospitato su Github. Precedentemente al mio tirocinio in YUI, ho usato Git per i miei piccoli progetti, e questo in genere consisteva nei seguenti passaggi:
Accentsconagua
git pull master di originegit add "" git commit -m "" git push origin masterSono sicuro che molti di voi hanno fatto quello che ho appena descritto. Generalmente, quando il tempo del progetto si allunga, i commit diventano più difficili da capire! Tuttavia, in una grande squadra con una dozzina di sviluppatori, questo metodo si interrompe molto velocemente. in primo luogo, maestro in YUI3 (e in molti altri progetti di grandi dimensioni) è considerato un codice stabile che è stato testato unitamente, quindi i commit generalmente non vanno lì fino a una fase successiva. Generalmente, ogni sviluppatore lavora su un ramo separato e si fonde in maestro una volta che sono fiduciosi nel loro codice.
Quello che ho imparato: Non devi essere un guru, ma capire le basi di Git (ramificando, fondendo, ripristinando e risolvendo i conflitti di fusione) può fare molto per mantenere i tuoi repository puliti e organizzati.
Un sacco di cose sono possibili con Git e ho scoperto che, piuttosto che apprenderle prima del tempo, è più utile ricercare quando è necessario fare qualcosa in particolare. Ancora più importante, la mia esperienza mi ha insegnato a stare attento quando faccio esperimenti con Git. È meglio chiedere a qualcuno quando provi un nuovo comando o provarlo su un falso repo invece di rovinare la cronologia dei commit del repo live. :)
Separare il codice in diversi file JavaScript per mantenere un'architettura modulare può essere doloroso per i nuovi sviluppatori. Di conseguenza, spesso vediamo file JavaScript grandi con centinaia di righe di codice al loro interno.
...
Questo introduce uno stretto accoppiamento tra gli oggetti e non è una buona pratica quando si tratta di programmazione orientata agli oggetti. Ancora peggio, potresti avere variabili globali che fanno fallire la tua app in modi imprevisti. Siamo stati tutti colpevoli di questo in passato. Fortunatamente, biblioteche come YUI possono aiutarti in questo.
Quello che ho imparato: Quando scrivi un'intera applicazione web in JavaScript, è molto importante avere un codice ben organizzato; mantenere un progetto codificato con spaghetti ti causerà solo mal di testa e incubi.
Uno degli aspetti più importanti di YUI3 è la sua natura modulare. Come sviluppatore, ti basta solo tirare giù il codice che ti serve. Ciò riduce l'accoppiamento, mantiene piccole le dimensioni del file e migliora la leggibilità del codice.
Ad esempio, puoi farlo in un file chiamato counter.js:
YUI.add ("contatore", funzione (Y) // Scrive codice specifico per il mio oggetto contatore, '1.0', richiede: ['nodo']); // Pronuncia ciò che deve eseguire il mio codice oggetto contatore. YUI li tirerà per primi. E poi in un file JS separato, come app.js:
YUI_config = modules: 'counter': fullpath: 'path / to / counter.js', richiede: ['node']; YUI (). Use ('counter', function (Y) // Abbassa il mio contatore module var counter = new Y.Counter (...); // Crea un counter instance); Invece di avere un grosso file chiamato app.js, lo abbiamo diviso in base alla funzionalità in counter.js e app.js.
La crescente popolarità di NodeJS mi ha fatto desiderare di iniziare a costruire qualcosa con esso. Essendo un ingegnere front-end, mi piace essere in grado di utilizzare JavaScript sul server. Sebbene NodeJS non sia adatto a tutto, vale la pena imparare.
JS sul server non ha le stesse limitazioni del JS lato client perché non esiste un DOM, ma una libreria come YUI può ancora aiutarti con l'architettura software sul server - cose come la gestione di classi e oggetti ed eventi personalizzati.
Quello che ho imparato: YUI 3 non è interamente dedicato alla manipolazione DOM, ma contiene anche un robusto set di strumenti di gestione di classe / oggetto, senza menzionare i nostri potenti eventi personalizzati. Tutti questi strumenti sono immediatamente utili nella programmazione lato server.
Essendo nel team YUI, sono stato in grado di esplorare il modulo NodeJS-YUI3 di Dav Glass, che avvolge la funzionalità YUI per l'utilizzo in un ambiente NodeJS. Ricorda che, oltre ai siti web, NodeJS è uno strumento utile anche per creare utility da riga di comando. Avere una buona architettura software è sempre un grande vantaggio!
Se non sei un utente YUI3, ti consiglio comunque di trovare un set di strumenti per organizzare il tuo JavaScript sul server. A causa della natura asincrona intrinseca di JavaScript e della sua propensione per i callback, devi stare attento o finirai rapidamente con spaghetti code.
Quello che ho imparato: Rimani concentrato e continua a fare hacking.
L'hacking è una delle mie cose preferite da fare quando cerco di imparare qualcosa di nuovo. Quando cerchi di imparare un nuovo strumento, non c'è niente come sedersi e costruire qualcosa con esso.
Simile a jQuery, YUI3 ha un insieme distinto di widget, utilità e framework CSS. In uno degli Yahoo Hack Days, ho avuto la possibilità di sedermi e provare alcuni di questi. Essendo un fan del cricket, ho creato un'app Web mobile chiamata Crictainment. Consentitemi di delineare alcune delle parti di YUI che ho trovato particolarmente utili per l'hacking.
L'hacking di un'app Web utilizzando YUI è piuttosto semplice. Ad esempio, se vuoi una scrollview sfogliabile con le dita:
Utilizzare YUI () ("scrollview", function (Y) var scrollview = new Y.ScrollView (srcNode: "# scrollable", height: "20em");); E nel codice HTML:
- AC / DC
- Aerosmith
- Bob Dylan
- Bob Seger
...
Il modulo scrollview determina se deve essere orizzontale o verticale in base alla larghezza e all'altezza del suo contenitore. Ulteriori informazioni sulla vista a scorrimento YUI3 sono disponibili qui.
Un'altra utilità utile quando si hacking qualcosa è l'utilità di animazione. Aiuta ad arricchire la tua applicazione con una bella animazione che sfrutta i CSS su browser abilitati e le impostazioni predefinite per le animazioni basate su timer JS sui browser più vecchi.
var myAnim = new Y.Anim (node: '#demo', a: width: 0, height: 0); myAnim.on ('end', function () myAnim.get ('node'). addClass ('yui-hidden');); È un altro strumento davvero importante che è ottimo per l'hacking YQL - Yahoo Query Language. Sono sicuro che molti di voi lo hanno usato, ma per coloro che non lo hanno fatto, pensate che sia un modo per accedere a un intero host di API diverse usando una sintassi standard. YUI e YQL funzionano molto bene insieme attraverso il modulo Y.YQL. Ad esempio, qui stiamo ottenendo l'attività recente di Vimeo:
YUI (). Use ('yql', function (Y) Y.YQL ('seleziona * da vimeo.activity.everyone dove username = "basictheory"', function (r) // r ora contiene il risultato del Query YQL);); Prova questa query qui. Uso regolarmente YQL per accedere a diverse API in modo coerente.
Indipendentemente dal fatto che tu stia usando YUI, jQuery o qualsiasi altra libreria, creare qualcosa con esso è un ottimo modo per familiarizzare con i tuoi strumenti di sviluppo. Quando fai l'hacking, non preoccuparti troppo dei dettagli tecnici: imposta un limite di tempo e costruisci semplicemente!
Una delle aggiunte più recenti a YUI è stata l'App Framework. È simile a Backbone.js, ma con la sofisticata infrastruttura di eventi di YUI sotto il cofano. App Framework mi ha facilitato la creazione di applicazioni Web in stile MVC.
Proprio come qualsiasi altro strumento, ho creato qualcosa con l'App Framework per capire come funzionava. Ancora una volta, non posso sottolineare i vantaggi dell'hacking sui prodotti. Per l'App Framework, ho creato TopForty con un mio amico.
YUI App Framework è basato sul modello di progettazione MVC. Iniziamo con il modello. Se non hai familiarità con MVC, dai un'occhiata a questo tutorial.
Per TopForty, siamo stati in grado di ottenere un ampio array JSON dei brani più chiacchierati di Twitter. Ogni oggetto nell'array assomigliava a questo:
"title": "PayPhone", "position": 1, "video_id": "5FlQSQuv_mg", "song_id": 627, "artist": "Maroon 5", "duration": 232, "images": [... ]
Lo abbiamo avvolto in una sottoclasse Y.Model chiamata Y.SongModel. Ecco la definizione della classe:
Y.SongModel = Y.Base.create ('songModel', Y.Model, [], initializer: function (config) ..., ATTRS: title: , artista: , immagini: value: [], nowPlaying: ... ...); Questo ci ha permesso di ascoltare gli eventi ogni volta che uno dei ATTRIBUTI nel modello cambiato e prendere le misure appropriate. Ad esempio, se il brano corrente in riproduzione è stato modificato:
// Quando l'attributo isPlaying del modello cambia, chiama la funzione handleIsPlayingChange. this.model.after ('isPlayingChange', this.handleIsPlayingChange, this); Ogni modello è stato rappresentato visivamente da una vista, che è essenzialmente solo HTML. Per TopForty, abbiamo avuto un Songview che assomigliava a questo:
2Accendere le luci
Futuro
Lo abbiamo avvolto in a Y.View sottoclasse chiamata Y.SongView. Ogni vista richiede a render () metodo chiamato quando si visualizza la vista sulla pagina e a initializer () metodo in cui gli eventi sono sottoscritti. Se lo si desidera, è possibile stabilire una relazione tra la propria vista e un'istanza Modello o Elenco modelli associandovi i gestori eventi in una personalizzata initializer () metodo come vediamo qui sotto:
Y.SongView = Y.Base.create ('songView', Y.View, [], initializer: function (config) var model = this.get ("model"); model.after ('change', questo .render, this); model.after ('destroy', this.destroy, this);, render: function () ..., destroy: function () ..., showSongOverlay: function () ... ATTRS: container: Y.one ("# songContainer")); In questo modo, siamo stati in grado di avere metodi specifici per la songview come displayNowPlayingIndicator () e showSongOverlay () sul Y.SongView esempio piuttosto che come funzioni separate.
Il router, formalmente conosciuto come Controller, è ciò che rende tutto connesso e funzionante. Ricorda che nel classico MVC, tutte le azioni dell'utente passano tradizionalmente attraverso il controller. Nelle app Web, il router utilizza la cronologia HTML5 per modificare gli URL e controlla lo stato dell'applicazione.
Ad esempio, in TopForty, facendo clic su una canzone, l'URL viene modificato rispetto all'ID della canzone. La modifica dell'URL viene rilevata dal router, che carica il video di YouTube per la canzone in questione:
Y.AppRouter = Y.Base.create ('appRouter', Y.Router, [], // I gestori di route predefiniti ereditati da tutte le istanze di CustomRouter. Index: function (req) // ... gestisce il / route, carica up l'interfaccia utente, ecc., loadSongFromUrl: function (req) // ... gestisce la / song /: songId 'route ... // Ottieni il video youtube dal modello con id: songId e riproducilo., ATTR: // I percorsi specifici a cui siamo interessati ascoltando: routes: value: [path: '/', callback: 'index', percorso: '/ song /: songId ", callback:' loadSongFromUrl '],); Quello che ho imparato: Sfruttare il modello di progettazione MVC può aiutarti a creare qualsiasi cosa, da semplici viste non interattive a ricche applicazioni.
Spero di essere stato in grado di darti un assaggio di ciò che è possibile con l'App Framework YUI. Per una panoramica più completa, raccomando i seguenti collegamenti. Se non sei un fan di App Framework, ti consiglio di esaminare le equivalenti alternative jQuery. In particolare, Backbone.js ha un ampio seguito con una buona documentazione.
Per gli sviluppatori, scrivere codice è spesso la parte facile e divertente. La parte difficile è capire come funziona il codice vecchio e buggato e cercare di correggere gli errori passati. Per minimizzare questo, molte organizzazioni tra cui Yahoo sottolineano l'importanza del Test Driven Development (TDD). Con TDD, scrivi prima i test, quindi aggiungi la funzionalità fino a quando non passano tutti i test. Vuoi aggiungere una nuova funzione? Scrivi un nuovo test, quindi codifica la funzione.
Ero nuovo al TDD quando mi sono unito al team YUI. Sfortunatamente, JS non ha la migliore suite di test. In particolare, le interazioni dell'utente sono difficili da testare. Inoltre, dobbiamo testare in tutti i principali browser.
Uno dei principali modi in cui conduciamo i test unitari è attraverso il test YUI.
Quello che ho imparato: Seguire i principi di sviluppo basati sui test ti rende più produttivo come programmatore.
YUI Test è un framework di test completo per JavaScript e applicazioni Web. È possibile utilizzare la semplice sintassi JavaScript per scrivere test di unità che possono essere eseguiti nei browser Web o sulla riga di comando, nonché test funzionali da eseguire nei browser Web.
Ecco come lo hai impostato:
// Crea una nuova istanza YUI e compilala con i moduli richiesti. YUI (). Use ('test', function (Y) // Test disponibile e pronto all'uso. Aggiungi codice // di implementazione qui); Ora possiamo iniziare a scrivere alcuni test unitari!
var testCase = new Y.Test.Case (name: "Nome TestCase", // ------------------------------ --------------- // Installazione e rimozione // --------------------------- ------------------ setUp: function () this.data = name: "Tilo", age: 23;, tearDown: function () elimina questo .data;, // ------------------------------------------- - // Test // ------------------------------------------- - testName: function () Y.Assert.areEqual ("Tilo", this.data.name, "Nome dovrebbe essere 'Tilo'");, testAge: function () Y.Assert.areEqual (23, this.data.age, "L'età dovrebbe essere 23");); Il test YUI supporta le asserzioni sull'uguaglianza (sono uguali()) che usa ==, asserzione di identità (areSame ()) che usa ===, asserzioni di valore speciale come è falso(), isNotUndefined (), oggetti finti e altro ancora.
Dopo aver scritto i nostri test, possiamo eseguirlo come mostrato di seguito. I risultati del test possono essere emessi come XML, JSON, jUnitXML o TAP.
Y.Test.Runner.add (testCase); Y.Test.Runner.run ();
Se non usi il test YUI, va bene. Tuttavia, voglio sottolineare l'importanza di testare il codice. Sono ancora colpevole di aver scritto codice senza scrivere test e probabilmente è ok se è il tuo piccolo progetto personale. Tutti noi tagliamo angoli a volte. Tuttavia, se stai programmando per un cliente o un'organizzazione, i seguenti principi TDD ti salveranno (e i tuoi clienti) da un mal di testa.
La pubblicazione di file JavaScript senza alcuna operazione di minification o lint può essere rischiosa. La minificazione può spesso comprimere la dimensione del file di oltre il 30%, aumentando la velocità di caricamento della pagina per l'utente finale. Linting è un buon modo per garantire che il tuo JavaScript segua buone pratiche di codifica in modo che gli errori siano ridotti al minimo.
Durante il mio periodo presso Yahoo, abbiamo utilizzato YUI Compressor e YUI Builder per comprimere e compilare il nostro codice. La fase di creazione include la concatenazione e il linting tramite JSLint. Sono sicuro che molti di voi hanno utilizzato JSLint a un certo punto e credo che aiuti a migliorare il proprio stile di programmazione.
Quello che ho imparato: Chiediti se una certa pratica riduce la possibilità di errori e, in tal caso, seguila.
Ora, non parlerò a fondo di YUI Compressor and Builder perché quelli potrebbero non essere gli strumenti di tua scelta. Di solito per i miei progetti, utilizzo il modulo NPM JSLint per controllare il mio codice.
Quello che voglio sottolineare è la necessità di eseguire questi passaggi prima di spingere il codice alla produzione. Poiché JavaScript non ha una fase di compilazione, molti sviluppatori sono abituati a spingere il loro JavaScript alla produzione, ai commenti e a tutto ciò che è incluso. Ancora una volta, questo va bene per i piccoli progetti, ma forse dovresti prendere in considerazione la possibilità di minimizzare e linting il tuo codice per garantire agli utenti di ottenere la migliore esperienza.
Il team YUI ha un grande seguito di sviluppatori amichevoli, attivi e ben informati proprio come la maggior parte dei grandi progetti open source. Come sviluppatori che lavorano su software open-source, ho imparato che non posso sedermi sotto una roccia e codificare tutto il giorno, anche se lo voglio. Lo sviluppo riguarda tanto la scrittura del codice quanto l'assicurarsi che il codice che scrivi sia in realtà aiutare qualcuno a risolvere un problema.
Mi ci è voluto un po 'per imparare, ma è una lezione importante. Quando scrivi software, l'obiettivo non è usare la tecnologia più cool o l'ultimo stack o il linguaggio più hot. Riguarda l'utente. Quando si scrive OSS, gli utenti sono spesso altri sviluppatori che si basano sul prodotto. Piccole cose come gli aggiornamenti settimanali, i tweet e le comunicazioni IRC possono effettivamente aiutarti oltre le ore di programmazione.
Quello che ho imparato: Non riguarda la tecnologia o lo stack o il linguaggio, riguarda l'utente.
Nel mio primo mese di internato alla YUI, ho scritto circa 500 righe di codice che ho dovuto eliminare perché la maggior parte di esse era ripetitiva e non rispondeva all'obiettivo finale. Ero colpevole di aver programmato troppo presto senza capire i requisiti del progetto. Una buona regola è quella di dedicare un terzo del tuo tempo a raccogliere i requisiti, un terzo del tuo tempo a scrivere test e il terzo finale a implementare il tuo software.
Voglio concludere condividendo la cosa più importante che penso di aver imparato durante il mio stage. Lo considero più importante di qualsiasi conoscenza tecnica che ho acquisito. Lavorando su una libreria che non è la più popolare, ho compreso l'importanza di diversificare le mie competenze e di essere flessibile come sviluppatore. Ho visto quanto lavoro ci vuole per mantenere un progetto open-source e ho guadagnato molto rispetto per tutti coloro che rilasciano gratuitamente il loro codice ben scritto.
Quello che ho imparato: Scegli una libreria perché è quella giusta per il lavoro, non perché sia la tua preferita. Comprendi che diversi software servono a scopi diversi e a volte capiscono che la differenza è difficile.
