Share
Timp de opt luni, am avut ocazia să lucrez cu echipa YUI de la Yahoo, în timp ce îmi terminam diploma de licență. Astăzi, aș dori să împărtășesc primele zece lucruri pe care le-am învățat din experiența mea cu YUI.
Echipa YUI este responsabilă în primul rând pentru dezvoltarea și întreținerea Bibliotecii YUI. Biblioteca este o colecție de componente de interfață utilizator, instrumente de gestionare a clasei și utilitare scrise în JavaScript și CSS, care fac mai ușor dezvoltatorii să creeze aplicații web. Spre deosebire de alte biblioteci, YUI nu este doar despre manipularea DOM; dispune de un set bogat de instrumente de gestionare a clasei și de un sistem robust de evenimente, care facilitează dezvoltarea în JavaScript.
În afară de aceasta, echipa YUI este, de asemenea, responsabilă pentru Teatrul YUI, o resursă foarte populară pentru dezvoltatorii web, împreună cu o multitudine de instrumente mai mici, cum ar fi YUI Builder, Compresor YUI, Test YUI și multe altele.
Rolul meu la echipa a fost de a contribui în primul rând la dezvoltarea componentelor pentru bibliotecă, deși am ajutat puțin la teatrul YUI.
Când am intrat în Yahoo în prima mea zi, am avut experiență zero în lumea reală cu YUI. Am fost familiarizați cu JavaScript, jQuery, HTML / CSS și PHP, dar asta a fost, practic, când a venit la programarea web. Sunt sigur că mulți dintre voi sunteți sau au fost în aceeași barcă ca mine.
Prima mea sarcină a fost să învăț sintaxa și arhitectura din spatele YUI3. Din fericire, am avut o bună înțelegere a JavaScript-ului brut, și acest lucru a ajutat incomensurabil. Mulți ingineri din front-end cunosc foarte bine anumite biblioteci, dar mulți nu știu cum funcționează sub capotă. Pentru a construi pluginuri sau module pe o bibliotecă (cum ar fi YUI3 sau jQuery), este util să aveți o înțelegere fundamentală despre funcționarea bibliotecii și, în acest caz, cum funcționează JavaScript ca limbă.
Ce am învățat: Având o înțelegere fundamentală a JavaScript-ului brut (fără biblioteci) vă forțează să înțelegeți limba mai bine și vă face un dezvoltator mai bun pe termen lung.
Gandeste-te la asta. Fiecare bibliotecă JavaScript este diferită și are propriile idiosincrații. Singura caracteristică este că acestea sunt înrădăcinate în JavaScript. Nu are sens să înțelegem mai întâi idiosincrațiile JavaScript? Ia ceva timp pentru a construi ceva mic, fără a folosi o bibliotecă. Veți fi bucuroși că ați făcut-o.
Echipa YUI se bazează pe sistemul de control al versiunii Git, iar proiectul este găzduit de Github. Înainte de stagiul meu la YUI, am folosit Git pentru proiectele mele mici, iar în general aceasta a constat în următorii pași:
Accentsconagua
git pull master de originegit adăugați "" git commit -m "" git push master de origineSunt sigur că mulți dintre voi ați făcut ceea ce tocmai am descris. În general, pe măsură ce timpul proiectului devine mai lung, comitetele devin mai greu de înțeles! Cu toate acestea, într-o echipă mare cu o duzină de dezvoltatori, această metodă se descompune foarte repede. in primul rand, maestru în YUI3 (și multe alte proiecte mari) este considerat a fi un cod stabil care a fost testat pe unitate, astfel încât angajamentele, în general, nu merg acolo până la o etapă ulterioară. În general, fiecare dezvoltator lucrează pe o ramură separată și se integrează maestru odată ce au încredere în codul lor.
Ce am învățat: Nu trebuie să fii un guru, dar înțelegerea principiilor de bază ale lui Git (ramificarea, îmbinarea, revenirea și rezolvarea conflictelor de fuziune) poate duce mult la menținerea reputațiilor dvs. curate și organizate.
Multe lucruri pot fi făcute cu Git și am constatat că, mai degrabă decât să le învățați înainte, este mai util să cercetați când trebuie să faceți ceva în special. Mai important, experiența mea ma învățat să fiu atent atunci când am experimentat cu Git. Este mai bine să ceri pe cineva atunci când încerci o comandă nouă sau o încerci pe un repo martor, în loc să spui istoria comiterii replicii vii. :)
Separarea codului în diferite fișiere JavaScript pentru a menține o arhitectură modulară poate fi dureroasă pentru noii dezvoltatori. Ca rezultat, vedem adesea fișiere JavaScript mari cu sute de linii de cod în ele.
...
Aceasta introduce o cuplare strânsă între obiecte și nu este o practică bună atunci când vine vorba de programarea orientată pe obiecte. Și mai rău, este posibil să aveți variabile globale care fac ca aplicația să nu reușească în moduri neașteptate. Toți am fost vinovați de asta în trecut. Din fericire, bibliotecile precum YUI vă pot ajuta în acest sens.
Ce am învățat: Când scrieți o întreagă aplicație web în JavaScript, este foarte important să aveți un cod bine organizat; menținerea unui proiect codificat în spaghete vă va provoca numai dureri de cap și coșmaruri.
Unul dintre aspectele cele mai importante ale lui YUI3 este natura sa modulară. În calitate de dezvoltator, trageți numai codul de care aveți nevoie. Acest lucru reduce cuplarea, menține dimensiunile fișierelor mici și îmbunătățește citirea codului.
De exemplu, puteți face acest lucru într-un fișier numit counter.js:
YUI.add ("contra", funcția (Y) // Scrieți codul specific obiectului meu counter, '1.0', necesită: ['node']); // Spuneți ce trebuie să ruleze codul meu obiect contra. YUI le va trage primul. Și apoi într-un fișier separat JS, cum ar fi app.js:
YUI_config = modules: 'counter': fullpath: 'path / to / counter.js', necesită: ['node']; Utilizarea ('contra', funcția (Y) // Trageți în jos modulul meu counter. Var counter = nou Y.Counter (...); În loc să fie numit un fișier mare app.js, l-am împărțit pe baza funcționalității counter.js și app.js.
Popularitatea crescândă a NodeJS ma făcut să vreau să încep să construiesc câteva lucruri cu ea. Fiind un inginer de front-end, îmi place să pot folosi JavaScript pe server. Deși NodeJS nu este potrivit pentru tot, merită învățat.
JS de pe server nu are aceleași limitări ca JS-ul clientului, deoarece nu există niciun DOM, dar o bibliotecă, cum ar fi YUI, vă poate ajuta în continuare cu arhitectura software pe server - lucruri precum gestiunea claselor și obiectelor și evenimente personalizate.
Ce am învățat: YUI 3 nu este vorba despre manipularea DOM - conține, de asemenea, un set robust de instrumente de gestionare a claselor / obiectelor, ca să nu mai vorbim de evenimente personalizate puternice. Toate aceste instrumente sunt imediat utile în programarea de la server.
Fiind în echipa YUI, am putut să explorez modulul Dav Glass "NodeJS-YUI3, care împachetează funcționalitatea YUI pentru utilizare într-un mediu NodeJS. Amintiți-vă că, în afară de site-urile web, NodeJS este un instrument util și pentru crearea utilităților de linie de comandă. Având o arhitectură bună a software-ului este întotdeauna un mare plus!
Dacă nu sunteți utilizator YUI3, vă recomandăm să găsiți un set de instrumente care să vă ajute să vă organizați JavaScript pe server. Datorită naturii incoerente a JavaScript-ului și a propriei sale orientări pentru apelurile de apel, trebuie să fiți atenți sau veți termina rapid cu codul spaghetti.
Ce am învățat: Rămâi concentrat și păstrați hacking-ul.
Hacking-ul este unul dintre lucrurile mele preferate de făcut când încerc să învăț ceva nou. Când încearcă să învețe un instrument nou, nu există nimic ca să stai jos și să construiești ceva cu el.
Similar cu jQuery, YUI3 are un set distinct de widget-uri, utilitare și cadre CSS. Pe una dintre zilele Yahoo Hack, am avut șansa să stau jos și să încerc câteva dintre acestea. Fiind un fan al cricket-ului, am creat o aplicație web mobilă numită Crictainment. Permiteți-mi să evidențiez câteva dintre părțile din YUI pe care le-am găsit deosebit de utile pentru hacking.
Hacking o aplicație web folosind YUI este destul de simplă. De exemplu, dacă doriți o vizualizare scroll care să poată fi flickable cu degetele:
Utilizarea funcției ("scrollview", funcția (Y) var scrollview = nou Y.ScrollView (srcNode: "# scrollable", înălțime: "20em"); Și în HTML:
- AC DC
- Aerosmith
- Bob Dylan
- Bob Seger
...
Modulul de vizualizare scroll vă arată dacă ar trebui să fie orizontal sau vertical pe baza lățimii și înălțimii containerului. Mai multe informații despre vizualizarea scrol YUI3 sunt aici.
O altă utilitate folositoare când hacking ceva este utilitarul Animație. Vă ajută să vă îmbogățiți aplicația cu o animație plăcută care utilizează CSS pe browsere capabile și implicit pentru animațiile bazate pe timer JS pe browserele mai vechi.
var myAnim = nou Y.Anim (nod: '#demo', la: width: 0, height: 0); myAnim.on ('end', funcția () myAnim.get ('node') addClass ('yui-hidden');); Un alt instrument foarte important, care este grozav pentru hacking este YQL - Yahoo Query Language. Sunt sigur că majoritatea dvs. ați folosit-o, dar pentru cei care nu au, gândiți-vă la aceasta ca la o modalitate de a accesa o întreagă serie de API-uri diferite utilizând o sintaxă standard. YUI și YQL funcționează foarte bine împreună prin modulul Y.YQL. De exemplu, aici obținem activitatea recentă de la Vimeo:
YUI () utilizează ('yql', funcția (Y) Y.YQL ('select * din vimeo.activity.everyone unde username =' basictheory '', funcția (r) // r acum conține rezultatul Întrebare YQL);); Încercați această interogare aici. Folosesc regulat YQL pentru a accesa API-uri diferite într-o manieră consecventă.
Indiferent dacă utilizați YUI, jQuery sau orice altă bibliotecă, construirea de ceva cu ea este o modalitate excelentă de a vă familiariza cu setul de instrumente de dezvoltare. Când hacking, nu vă faceți griji prea mult despre detaliile tehnice - doar setați o limită de timp și construiți-o!
Una dintre cele mai noi adăugiri la YUI a fost Framework App. Este similar cu Backbone.js, dar cu infrastructura de evenimente sofisticate YUI sub capota. Cadrul de aplicații mi-a făcut ușor să construiesc aplicații web în stil MVC.
La fel ca orice alt instrument, am construit ceva cu App Framework pentru a înțelege cum a funcționat. Încă o dată, nu pot să subliniez avantajele hacking-ului asupra produselor. Pentru App Framework, am construit TopForty cu un prieten de-al meu.
YUI App Framework este construit pe modelul de design MVC. Să începem cu modelul. Dacă nu sunteți familiarizat cu MVC, aruncați o privire la acest tutorial.
Pentru TopForty, am reușit să obținem o gamă largă de JSON din cele mai discutate melodii de pe Twitter. Fiecare obiect din matrice arăta astfel:
"title": "PayPhone", "pozitie": 1, "video_id": "5FlQSQuv_mg", "song_id": 627, "artist": ]
Am înfășurat acest lucru într-o subclasă Y.Model numită Y.SongModel. Iată definiția clasei:
Y.Model = Y.Base.create ('songModel', Y.Model, [], initializer: function (config) ..., ATTRS: title: valoare: [], acumPlaying: ... ...); Acest lucru ne-a permis să ascultăm pentru evenimente ori de câte ori unul dintre attrs în modelul modificat și să ia măsurile corespunzătoare. De exemplu, dacă melodia curentă care a fost redată a fost modificată:
// Când se modifică atributul PlayPlaying al modelului, apelați funcția handleIsPlayingChange. this.model.after ('isPlayingChange', this.handleIsPlayingChange, acest lucru); Fiecare model a fost reprezentat vizual de o vizualizare, care este în esență doar HTML. Pentru TopForty, am avut a SongView care arata cam asa:
2Porniți luminile
Viitor
Am înfășurat asta într-un Y.View subclasa numită Y.SongView. Fiecare Vizualizare necesită a face() metoda care se numește atunci când se afișează vizualizarea pe pagină și a initializare () unde sunt înregistrate evenimentele. Dacă doriți, puteți stabili o relație între vizualizarea dvs. și o instanță a modelului sau a listei de modele, prin atașarea acestora la un personalizat initializare () așa cum vedem mai jos:
Y.SongView = Y.Base.create ('songView', Y.View, [], initializer: function (config) var model = this.get ("model"); () , distribute: function () ..., distruge: function () ..., showSongOverlay: function () ... , ATTRS: container: Y.one ("# songContainer")); Procedând astfel, am reușit să avem metode specifice fiecărei melodii, cum ar fi displayNowPlayingIndicator () și showSongOverlay () pe Y.SongView exemplu, nu ca funcții separate.
Router-ul, cunoscut în mod formal ca Controller, este ceea ce face ca totul să se conecteze și să funcționeze. Amintiți-vă că în clasicul MVC, toate acțiunile utilizatorilor trec în mod tradițional prin intermediul controlerului. În aplicațiile web, routerul utilizează istoricul HTML5 pentru a schimba adresele URL și pentru a controla starea aplicației.
De exemplu, în TopForty, făcând clic pe o melodie modifică adresa URL în ID-ul melodiei. Schimbarea adresei URL este preluată de routerul care încarcă videoclipul YouTube pentru piesa în cauză:
Y.AppRouter = Y.Base.create ('appRouter', Y.Router, [], // Traductorii de ruta implicit mostenit de toate instantele CustomRouter. Index: function (req) // ... se ocupa de / route, load up UI etc., loadSongFromUrl: funcția (req) // ... se ocupă de ruta / song /: songId '... // Obțineți videoclipul pe YouTube de pe model cu un id de songId și redați-l, ATTRS: // Rutele specifice pe care suntem interesați să le ascultăm: rute: value: [path: '/', callback: 'index', path: '/ song /: songId' loadSongFromUrl '],); Ce am învățat: Folosirea modelului de design MVC vă poate ajuta să creați orice, de la simple vizualizări non-interactive la aplicații bogate.
Sper că am fost în măsură să vă dau un gust pentru ceea ce este posibil cu YUI App Framework. Pentru o analiză mai amănunțită, vă recomandăm următoarele linkuri. Dacă nu sunteți un fan al App Framework, vă recomandăm să vă uitați în alternativele jQuery echivalente. În special, Backbone.js are o linie mare, cu o bună documentație.
Pentru dezvoltatori, scrierea de coduri este adesea partea ușoară și distractivă. Partea dificilă constă în a determina cât de vechi, cod de buggy funcționează și de a încerca să remedieze erorile din trecut. Pentru a minimiza acest lucru, o mulțime de organizații, inclusiv Yahoo, subliniază importanța dezvoltării testate (TDD). Cu TDD, mai întâi scrieți testele, apoi adăugați funcționalitatea până când toate testele dvs. trec. Doriți să adăugați o funcție nouă? Scrieți un nou test, apoi codificați caracteristica.
Am fost nou la TDD când am intrat în echipa YUI. Din păcate, JS nu are cea mai bună suită de testare. În special, interacțiunile utilizatorilor sunt greu de testat. În plus, trebuie să încercăm în toate browserele majore.
Una dintre căile principale pe care le efectuăm testarea unității este testul YUI.
Ce am învățat: Urmând principiile de dezvoltare bazate pe teste, te faci mai productiv ca programator.
Testul YUI este un cadru complet de testare pentru aplicațiile JavaScript și Web. Puteți utiliza sintaxa JavaScript simplă pentru a scrie teste de unități care pot fi executate în browsere web sau pe linia de comandă, precum și teste funcționale care se execută în browserele web.
Iată cum ați pus acest lucru:
// Creați o instanță YUI nouă și o umpleți cu modulele necesare. YUI () foloseste (testul, functia (Y) // Testul este disponibil si gata de utilizare.
Acum, putem începe să scriem niște teste unitare!
var testCase = nou Y.Test.Case (nume: "TestCase Name", // ------------------------------ --------------- // Configurare și rupere în jos // --------------------------- ------------------ setUp: function () this.data = nume: "Tilo", varsta: 23;, tearDown: function () sterge aceasta .date; , //------------------------------------------- - // Teste // ------------------------------------------- - testName: funcția () Y.Assert.areEqual ("Tilo", acest nume.data, "Numele trebuie să fie" Tilo " this.data.age, "vârsta ar trebui să fie 23");); Testul YUI sprijină afirmațiile privind egalitatea (sunt egale()) care utilizează ==, similitudine (areSame ()) care utilizează ===, valori speciale, cum ar fi isFalse (), isNotUndefined (), obiecte mock și multe altele.
Dupa ce am scris testele noastre, o putem executa asa cum se arata mai jos. Rezultatele testului pot fi afișate ca XML, JSON, jUnitXML sau TAP.
Y.Test.Runner.add (testcase); Y.Test.Runner.run ();
Dacă nu utilizați testul YUI, este bine. Cu toate acestea, vreau să subliniez importanța testării codului. Sunt vinovat chiar și astăzi de scrierea codului fără a scrie teste și probabil că este bine dacă este propriul proiect personal mic. Toți ne-am tăiat colțurile cândva. Cu toate acestea, dacă programați pentru un client sau o organizație, respectarea principiilor TDD vă va salva (și clienții) dintr-o durere de cap.
Servirea fișierelor JavaScript fără nici un pas de minificare sau scame poate fi riscant. Minificarea poate adesea comprima dimensiunea fișierului cu peste 30%, ceea ce face ca încărcarea paginii să fie mai rapidă pentru utilizatorul final. Linting este o modalitate bună de a vă asigura că JavaScript respectă practici bune de codificare, astfel încât erorile să fie reduse la minimum.
În timpul meu de la Yahoo, am folosit YUI Compressor și YUI Builder pentru a ne comprima și a construi codul. Etapa de construire include concatenarea și lingușirea prin JSLint. Sunt sigur că cei mai mulți dintre voi ați folosit JSLint la un moment dat și cred că vă ajută să vă îmbunătățiți stilul de codificare.
Ce am învățat: Întrebați-vă dacă o anumită practică vă reduce posibilitatea de eroare și, dacă este așa, urmați-o.
Acum, nu voi vorbi în profunzime despre compresorul YUI și constructorul, deoarece acestea nu ar putea fi instrumentele alese de dvs. De obicei, pentru proiectele mele, folosesc modulul JSLint NPM pentru a verifica codul meu.
Ceea ce vreau să subliniez este nevoia de a efectua acești pași înainte de a împinge codul spre producție. Deoarece JavaScript nu are un pas de compilare, mulți dezvoltatori sunt obișnuiți să-și împingă JavaScript-ul la producție, comentarii și toate incluse. Din nou, acest lucru este în regulă pentru proiectele mici, dar probabil ar trebui să vă gândiți să minifiți și să vă lămâieți codul pentru a vă asigura că utilizatorii beneficiază de cea mai bună experiență.
Echipa YUI are o mare urmărire a dezvoltatorilor prietenoși, activi și cunoscători, la fel ca majoritatea proiectelor open source. Ca dezvoltatori care lucrează la software-ul open-source, am aflat că nu pot să stau sub o stâncă și să codifică toată ziua, chiar dacă vreau. Dezvoltarea este la fel de mult despre scrierea codului, ca și despre asigurarea faptului că codul pe care îl scrieți ajută într-adevăr pe cineva să rezolve o problemă.
Asta mi-a luat ceva timp pentru a învăța, dar este o lecție importantă. La scrierea de software, obiectivul nu este de a utiliza cea mai tare tehnologie sau cea mai recentă stiva sau cea mai tare limbă. E vorba de utilizator. Când scrieți OSS, utilizatorii sunt adesea alți dezvoltatori care se bazează pe produsul dvs. Lucruri mici, cum ar fi actualizările săptămânale, tweet-urile și comunicarea IRC vă pot ajuta de fapt mai mult de ore de codare.
Ce am învățat: Nu este vorba de tehnologie sau stack sau de limbă, este vorba de utilizator.
În prima mea lună de internare la YUI, am scris aproximativ 500 de linii de cod pe care trebuia să le dezmembrez deoarece majoritatea era repetitivă și nu abordează scopul final. Am fost vinovat de codarea prea devreme fără să-mi imaginez cerințele proiectului. O regulă bună este să cheltuiți o treime din cerințele dvs. de colectare a timpului, o treime din testele dvs. de scriere a timpului, iar cea de-a treia să implementați software-ul.
Vreau să închei prin împărtășirea celui mai important lucru pe care l-am învățat în stagiul meu. Consider că este mai important decât orice cunoștințe tehnice pe care le-am câștigat. Lucrând la o bibliotecă care nu este cea mai populară, am realizat importanța diversificării abilităților mele și a flexibilității în calitate de dezvoltator. Am văzut cât de mult este nevoie pentru a menține un proiect cu sursă deschisă și am câștigat mult respect pentru oricine dă drumul liber codul bine scris.
Ce am învățat: Alegeți o bibliotecă deoarece este cea potrivită pentru lucrare, nu pentru că este preferată. Înțelegeți că diferitele tipuri de software servesc scopuri diferite și uneori înțelegerea diferenței este dificilă.
