Share
Acht maanden lang kreeg ik de kans om bij het YUI-team in Yahoo te studeren, terwijl ik mijn technische opleiding afrondde. Vandaag zou ik graag de top tien dingen willen delen die ik heb geleerd van mijn ervaring met YUI.
Het YUI-team is primair verantwoordelijk voor de ontwikkeling en het onderhoud van de YUI-bibliotheek. De bibliotheek is een verzameling van gebruikersinterfacecomponenten, klassenbeheertools en hulpprogramma's die zijn geschreven in JavaScript en CSS, waardoor het voor ontwikkelaars eenvoudiger wordt om webtoepassingen te maken. In tegenstelling tot andere bibliotheken gaat YUI niet alleen over DOM-manipulatie; het heeft een uitgebreide reeks klassenbeheertools en een robuust gebeurtenissysteem dat het gemakkelijker maakt om zich te ontwikkelen in JavaScript.
Afgezien daarvan is het YUI-team ook verantwoordelijk voor YUI Theater, een zeer populaire bron voor webontwikkelaars, samen met een groot aantal kleinere hulpmiddelen zoals YUI Builder, YUI Compressor, YUI-test en meer.
Mijn rol bij het team was om voornamelijk te helpen bij het ontwikkelen van componenten voor de bibliotheek, hoewel ik ook een beetje met YUI Theater hielp.
Toen ik op mijn eerste dag Yahoo binnenliep, had ik geen echte ervaring met YUI. Ik was bekend met JavaScript, jQuery, HTML / CSS en PHP, maar dat was eigenlijk het geval bij het programmeren van websites. Ik weet zeker dat velen van jullie in dezelfde boot zitten als ik.
Mijn eerste taak was om de syntaxis en architectuur achter YUI3 te leren. Gelukkig had ik een goed begrip van onbewerkt JavaScript, en dit hielp enorm. Veel front-end engineers kennen bepaalde bibliotheken heel goed, maar velen weten niet hoe ze onder de motorkap werken. Om plug-ins of modules bovenop een bibliotheek (zoals YUI3 of jQuery) te bouwen, is het nuttig om een fundamenteel begrip te hebben over hoe die bibliotheek werkt, en in dit geval, hoe JavaScript als een taal werkt.
Wat ik heb geleerd: Fundamenteel begrip van onbewerkt JavaScript (geen bibliotheken) dwingt je de taal beter te begrijpen en maakt je op de lange termijn een betere ontwikkelaar.
Denk er over na. Elke JavaScript-bibliotheek is anders en heeft zijn eigen idiosyncracies. De enige overeenkomst is dat ze zijn geworteld in JavaScript. Is het niet logisch om eerst de eigenaardigheden van JavaScript te begrijpen? Neem de tijd om iets kleins te bouwen zonder een bibliotheek te gebruiken. Je zult blij zijn dat je het gedaan hebt.
Het YUI-team vertrouwt op Git als hun primaire versiecontrolesysteem en het project wordt gehost op Github. Voorafgaand aan mijn stage bij YUI, gebruikte ik Git voor mijn eigen kleine projecten, en dit bestond over het algemeen uit de volgende stappen:
Accentsconagua
git pull origin mastergit add "" git commit -m "" git push origin masterIk weet zeker dat velen van jullie hebben gedaan wat ik zojuist heb beschreven. Over het algemeen, als de projecttijd langer wordt, worden de commits moeilijker te begrijpen! In een groot team met een tiental ontwikkelaars valt deze methode echter snel uiteen. ten eerste, meester in YUI3 (en vele andere grote projecten) wordt beschouwd als een stabiele code die unit-getest is, dus commits gaan over het algemeen niet daar tot een later stadium. Over het algemeen werkt elke ontwikkelaar op een afzonderlijke tak en wordt er een samengevoegd meester zodra ze vertrouwen hebben in hun code.
Wat ik heb geleerd: Je hoeft geen goeroe te zijn, maar het begrijpen van de basisprincipes van Git (vertakken, samenvoegen, terugdraaien en oplossen van samenvoegconflicten) kan een lange weg zijn om je repo's schoon en georganiseerd te houden.
Er zijn veel dingen mogelijk met Git en ik heb ontdekt dat, in plaats van ze van tevoren te leren, het nuttiger is om te onderzoeken wanneer je iets specifieks moet doen. Wat nog belangrijker is, mijn ervaring heeft me geleerd om voorzichtig te zijn bij het experimenteren met Git. Het is beter om iemand te vragen wanneer je een nieuwe opdracht probeert of het op een neprepo probeert in plaats van de commit-geschiedenis van de live repo in de war te sturen. :)
Het scheiden van code in verschillende JavaScript-bestanden om een modulaire architectuur te behouden, kan pijnlijk zijn voor nieuwe ontwikkelaars. Als gevolg hiervan zien we vaak grote JavaScript-bestanden met honderden regels code erin.
...
Dit introduceert een nauwe koppeling tussen objecten en is geen goede oefening als het gaat om objectgeoriënteerd programmeren. Erger nog, het kan zijn dat er globale variabelen zijn waardoor uw app op onverwachte manieren faalt. We zijn hier allemaal in het verleden schuldig aan geweest. Gelukkig kunnen bibliotheken zoals YUI je hiermee helpen.
Wat ik heb geleerd: Wanneer u een volledige webtoepassing in JavaScript schrijft, is het erg belangrijk om een goed georganiseerde code te hebben; het onderhouden van een spaghetti-gecodeerd project zal alleen hoofdpijn en nachtmerries veroorzaken.
Een van de belangrijkste aspecten van YUI3 is de modulaire aard ervan. Als ontwikkelaar hoeft u alleen de code te verwijderen die u nodig hebt. Dit vermindert de koppeling, houdt bestandsgroottes klein en verbetert de leesbaarheid van uw code.
U kunt dit bijvoorbeeld doen in een bestand met de naam counter.js:
YUI.add ("counter", functie (Y) // Schrijfcode specifiek voor mijn tegenobject, '1.0', vereist: ['node']); // Zeg wat mijn tegenobjectcode moet uitvoeren. YUI zal deze eerst ophalen. En dan in een apart JS-bestand, zoals app.js:
YUI_config = modules: 'counter': fullpath: 'path / to / counter.js', vereist: ['node']; YUI (). Use ('counter', functie (Y) // Mijn tellermodule naar beneden trekken var-teller = nieuw Y.Counter (...) // een tellerinstantie maken); In plaats van één groot bestand genoemd te hebben app.js, we hebben het op basis van functionaliteit opgesplitst in counter.js en app.js.
De groeiende populariteit van NodeJS deed me willen beginnen met het bouwen van een aantal dingen ermee. Als een front-end engineer, vind ik het leuk om JavaScript op de server te kunnen gebruiken. Hoewel NodeJS niet voor alles geschikt is, is het de moeite waard om te leren.
JS op de server heeft niet dezelfde beperkingen als client-side JS omdat er geen DOM is, maar een bibliotheek zoals YUI kan u nog steeds helpen met de softwarearchitectuur op de server - zaken als klasse- en objectbeheer en aangepaste evenementen.
Wat ik heb geleerd: YUI 3 gaat niet alleen over DOM-manipulatie - het bevat ook een robuuste set tools voor klasse / objectbeheer, om nog maar te zwijgen van onze krachtige aangepaste evenementen. Al deze tools zijn onmiddellijk nuttig bij het programmeren aan de serverzijde.
Als lid van het YUI-team was ik in staat om de NodeJS-YUI3-module van Dav Glass te verkennen, die de YUI-functionaliteit omhult voor gebruik in een NodeJS-omgeving. Vergeet niet dat, afgezien van websites, NodeJS ook een handig hulpmiddel is voor het maken van opdrachtregelhulpprogramma's. Een goede software-architectuur hebben is altijd een groot pluspunt!
Als u geen YUI3-gebruiker bent, raad ik u toch aan een set hulpprogramma's te zoeken om uw JavaScript op de server te ordenen. Vanwege het inherente asynchroon karakter van JavaScript en de neiging om te worden teruggebeld, moet je voorzichtig zijn of je zult snel eindigen met spaghetti-code.
Wat ik heb geleerd: Blijf gefocust en blijf hacken.
Hacking is een van mijn favoriete dingen om te doen als ik iets nieuws probeer te leren. Wanneer je een nieuw hulpmiddel probeert te leren, is er niets beters om er mee te gaan zitten en er iets mee te bouwen.
Net als jQuery heeft YUI3 een verschillende reeks widgets, hulpprogramma's en CSS-frameworks. Op een van de Yahoo Hack Days kreeg ik de kans om te gaan zitten en een paar van deze uit te proberen. Omdat ik een fan ben van cricket, heb ik een mobiele webapp gemaakt met de naam Crictainment. Ik zal enkele delen van YUI schetsen die ik bijzonder handig vond om te hacken.
Een web-app hacken met YUI is vrij eenvoudig. Als u bijvoorbeeld een scrollweergave wilt die met uw vingers kan worden getrild:
YUI (). Use ("scrollview", functie (Y) var scrollview = new Y.ScrollView (srcNode: "# scrollable", height: "20em");); En in de HTML:
- AC / DC
- Aerosmith
- Bob Dylan
- Bob Seger
...
De scrollview-module zoekt uit of deze horizontaal of verticaal moet zijn op basis van de breedte en hoogte van de container. Meer informatie over de scrollview van YUI3 is hier te vinden.
Een ander handig hulpmiddel bij het hacken van iets is het hulpprogramma Animatie. Het helpt je applicatie op te fleuren met een aantal leuke animaties die gebruikmaken van CSS op geschikte browsers en standaard op JS timer-gebaseerde animaties in oudere browsers.
var myAnim = new Y.Anim (node: '#demo', to: width: 0, height: 0); myAnim.on ('einde', functie () myAnim.get ('node'). addClass ('yui-hidden');); Een andere echt belangrijke tool die geweldig is voor hacking is YQL - Yahoo Query-taal. Ik weet zeker dat de meesten van jullie het hebben gebruikt, maar voor degenen die dat nog niet hebben gezien, is het een manier om toegang te krijgen tot een hele reeks verschillende API's met behulp van een standaardsyntaxis. YUI en YQL werken heel goed samen via de Y.YQL-module. Hier krijgen we bijvoorbeeld de recente activiteit van Vimeo:
YUI (). Use ('yql', functie (Y) Y.YQL ('select * from vimeo.activity.everyone waar gebruikersnaam = "basictheory"', function (r) // r bevat nu het resultaat van de YQL Query);); Probeer deze vraag hier uit. Ik gebruik YQL regelmatig om op een consistente manier toegang te krijgen tot verschillende API's.
Ongeacht of u YUI, jQuery of een andere bibliotheek gebruikt, het is een geweldige manier om vertrouwd te raken met uw ontwikkeltoolbox. Maak je tijdens het hacken niet al te veel zorgen om de technische details - stel gewoon een tijdslimiet in en bouw hem gewoon!
Een van de nieuwere toevoegingen aan YUI is het App Framework. Het is vergelijkbaar met Backbone.js, maar met YUI's geavanceerde evenementeninfrastructuur onder de motorkap. Het App Framework maakte het gemakkelijk voor mij om MVC-achtige webapplicaties te bouwen.
Net als elke andere tool, heb ik iets gebouwd met het App Framework om te begrijpen hoe het werkte. Nogmaals, ik kan de voordelen van het hacken op producten niet benadrukken. Voor het App Framework heb ik TopForty gebouwd met een vriend van mij.
Het YUI-appraamwerk is gebaseerd op het MVC-ontwerppatroon. Laten we beginnen met het model. Als je niet bekend bent met MVC, bekijk dan deze tutorial.
Voor TopForty konden we een grote JSON-array krijgen van de meest spraakmakende nummers van Twitter. Elk object in de array zag er als volgt uit:
"title": "PayPhone", "position": 1, "video_id": "5FlQSQuv_mg", "song_id": 627, "artiest": "Maroon 5", "duration": 232, "images": [... ]
We verpakten dit in een Y.Model-subklasse genaamd Y.SongModel. Dit is de klassedefinitie:
Y.SongModel = Y.Base.create ('songModel', Y.Model, [], initializer: function (config) ..., ATTRS: title: , artiest: , afbeeldingen: waarde: [], nowPlaying: ... ...); Hierdoor konden we luisteren naar evenementen wanneer een van de attrs in het model veranderd en gepaste actie ondernemen. Als het huidige nummer dat wordt afgespeeld bijvoorbeeld is gewijzigd:
// Als het kenmerk attributen van het model verandert, roept u de handleIsPlayingChange-functie aan. this.model.after ('isPlayingChange', this.handleIsPlayingChange, this); Elk model werd visueel weergegeven door een weergave, die in feite gewoon HTML is. Voor TopForty hadden we een SongView dat zag er ongeveer zo uit:
2De lichten aandoen
Toekomst
We verpakten dit in een Y.View subklasse genoemd Y.SongView. Elke weergave vereist een render () methode die wordt aangeroepen wanneer de weergave op de pagina wordt weergegeven, en a beginwaarde () methode waarbij evenementen worden onderschreven. Als u wilt, kunt u een relatie tussen uw weergave en een model- of modellijstinstantie tot stand brengen door gebeurtenishandlers eraan toe te voegen in een aangepast beginwaarde () methode zoals we hieronder zien:
Y.SongView = Y.Base.create ('songView', Y.View, [], initializer: function (config) var model = this.get ("model"); model.after ('wijzigen', dit .render, this); model.after ('destroy', this.destroy, this);, render: function () ..., destroy: function () ..., showSongOverlay: function () ... , ATTRS: container: Y.one ("# songContainer")); Door dit te doen konden we songview-specifieke methoden hebben zoals displayNowPlayingIndicator () en showSongOverlay () op de Y.SongView bijvoorbeeld in plaats van als afzonderlijke functies.
De router, formeel bekend als de controller, is wat maakt alles verbinden en werken. Vergeet niet dat in klassieke MVC alle gebruikersacties traditioneel door de controller gaan. In web-apps gebruikt de router HTML5-geschiedenis om URL's te wijzigen en beheert de staat van de toepassing.
Als u bijvoorbeeld in TopForty op een nummer klikt, wordt de URL naar de ID van het nummer gewijzigd. De URL-wijziging wordt opgehaald door de router, die de YouTube-video voor het betreffende nummer laadt:
Y.AppRouter = Y.Base.create ('appRouter', Y.Router, [], // Standaard routehandlers overgenomen door alle CustomRouter-instanties index: function (req) // ... behandel de / route, laad deze op de UI, etc., loadSongFromUrl: function (req) // ... behandel de / song /: songId 'route ... // Download de youtube-video van het model met een id van: songId en speel het af., ATTRS: // De specifieke routes waar we naar luisteren: routes: waarde: [path: '/', callback: 'index', path: '/ song /: songId ", callback:' loadSongFromUrl '],); Wat ik heb geleerd: Gebruikmaken van het MVC-ontwerppatroon kan u helpen alles te maken, van eenvoudige niet-interactieve weergaven tot rijke toepassingen.
Ik hoop dat ik je een voorproefje heb gegeven van wat mogelijk is met het YUI App Framework. Voor een grondiger doorloop, adviseer ik de volgende links. Als je geen fan bent van het App Framework, raad ik je aan de equivalente jQuery-alternatieven te bekijken. Backbone.js in het bijzonder heeft een groot aanhang met goede documentatie.
Voor ontwikkelaars is het schrijven van code vaak het gemakkelijke en leuke deel. Het moeilijkste is uitzoeken hoe oud, buggy code werkt en proberen om fouten uit het verleden te herstellen. Om dit te minimaliseren, benadrukken veel organisaties, waaronder Yahoo, het belang van Test Driven Development (TDD). Met TDD schrijf je de tests eerst en voeg je de functionaliteit toe tot al je tests slagen. Wil je een nieuwe functie toevoegen? Schrijf een nieuwe test en codeer de functie.
Ik was nieuw bij TDD toen ik bij het YUI-team kwam. Jammer genoeg heeft JS niet de beste testsuite. Gebruikersinteracties in het bijzonder zijn moeilijk te testen. Verder moeten we testen in alle belangrijke browsers.
Een van de belangrijkste manieren om eenheidstests uit te voeren, is via de YUI-test.
Wat ik heb geleerd: Door testgedreven ontwikkelingsprincipes te volgen, word je productiever als programmeur.
YUI-test is een compleet testraamwerk voor JavaScript en webtoepassingen. U kunt de eenvoudige JavaScript-syntax gebruiken om eenheidstests te schrijven die kunnen worden uitgevoerd in webbrowsers of op de opdrachtregel, evenals functionele tests die in webbrowsers kunnen worden uitgevoerd.
Zo stel je het in:
// Maak een nieuwe YUI-instantie en vul deze met de vereiste modules. YUI (). Gebruik ('test', functie (Y) // Test is beschikbaar en klaar voor gebruik. Implementatie // code hier toevoegen); Nu kunnen we beginnen met het schrijven van een aantal unit tests!
var testCase = nieuwe Y.Test.Case (name: "TestCase Name", // ------------------------------ --------------- // Instellen en afsluiten // --------------------------- ------------------ setUp: function () this.data = name: "Tilo", age: 23;, tearDown: function () verwijder dit .data;, // ------------------------------------------- - // Tests // ------------------------------------------- - testName: function () Y.Assert.areEqual ("Tilo", this.data.name, "Name moet 'Tilo'");, testAge: function () Y.Assert.areEqual (23, this.data.age, "Age should be 23");); YUI-test ondersteunt gelijkheidsbeweringen (zijn gelijk()) die gebruikt ==, gelijkheid bewering (zijn hetzelfde()) die gebruikt ===, speciale waarde-beweringen zoals is fout(), isNotUndefined (), nep-objecten en meer.
Nadat we onze tests hebben geschreven, kunnen we deze uitvoeren zoals hieronder wordt weergegeven. De resultaten van de test kunnen worden uitgevoerd als XML, JSON, jUnitXML of TAP.
Y.Test.Runner.add (TestCase); Y.Test.Runner.run ();
Als je de YUI-test niet gebruikt, is dat prima. Ik wil echter het belang benadrukken van het testen van uw code. Ik ben zelfs vandaag nog schuldig aan het schrijven van code zonder tests te schrijven en het is waarschijnlijk goed als het je eigen kleine persoonlijke project is. We hebben ooit een keer geknipt. Als u echter programmeert voor een client of organisatie, bespaart u volgens de TDD-principes u (en uw klanten) tegen hoofdpijn.
Het serveren van JavaScript-bestanden zonder enige stap in het minificeren of pluisstappen kan riskant zijn. Minificatie kan de bestandsgrootte vaak met meer dan 30% comprimeren, waardoor uw pagina sneller wordt geladen voor de eindgebruiker. Linting is een goede manier om ervoor te zorgen dat uw JavaScript goede codeermethoden volgt, zodat fouten worden geminimaliseerd.
Tijdens mijn tijd bij Yahoo, gebruikten we YUI Compressor en YUI Builder om onze code te comprimeren en te bouwen. De bouwstap omvat aaneenschakeling en verwerveling door JSLint. Ik weet zeker dat de meesten van jullie JSLint op een bepaald moment hebben gebruikt, en ik geloof echt dat het je codeerstijl helpt verbeteren.
Wat ik heb geleerd: Vraag jezelf af of een bepaalde oefening je kans op fouten verkleint en volg deze alsjeblieft.
Nu ga ik niet diep in op YUI Compressor en Builder, omdat die misschien niet het gereedschap van uw keuze zijn. Meestal gebruik ik voor mijn eigen projecten de JSLint NPM-module om mijn code te controleren.
Waar ik op wil wijzen, is de noodzaak om deze stappen uit te voeren voordat de code naar de productie wordt geduwd. Aangezien JavaScript geen compilatiestap kent, zijn veel ontwikkelaars gewend om hun JavaScript naar productie, opmerkingen en alles inbegrepen te sturen. Nogmaals, dit is prima voor kleine projecten, maar misschien moet u overwegen om uw code te verkleinen en te verbleken om ervoor te zorgen dat gebruikers de beste ervaring krijgen.
Het YUI-team heeft een groot aantal vriendelijke, actieve en goed geïnformeerde ontwikkelaars, net als de meeste grote open-sourceprojecten. Terwijl ontwikkelaars aan open-source software werkten, leerde ik dat ik de hele dag niet onder een steen kan zitten en coderen, zelfs als ik dat wil. Bij ontwikkelen gaat het net zo goed om het schrijven van code als om ervoor te zorgen dat de code die je schrijft iemand helpt een probleem op te lossen.
Dit kostte me een tijdje om te leren, maar het is een belangrijke les. Bij het schrijven van software is het doel niet om de coolste technologie of de nieuwste stapel of de heetste taal te gebruiken. Het gaat over de gebruiker. Bij het schrijven van OSS zijn de gebruikers vaak andere ontwikkelaars die bovenop uw product bouwen. Kleine dingen zoals wekelijkse updates, tweets en IRC-communicatie kunnen u eigenlijk meer dan uren coderen helpen.
Wat ik heb geleerd: Het gaat niet om de technologie of de stapel of de taal, het gaat om de gebruiker.
In mijn eerste maand stage bij YUI schreef ik ongeveer 500 regels code die ik moest schrappen omdat het meeste repetitief was en niet het einddoel had. Ik was te vroeg schuldig aan coderen zonder de vereisten van het project te kennen. Een goede regel is om een derde van uw tijd te besteden aan het verzamelen van vereisten, een derde van uw tijd aan het schrijven van tests en de laatste derde om uw software te implementeren.
Ik wil afsluiten door het belangrijkste te delen dat ik denk dat ik heb geleerd tijdens mijn stage. Ik beschouw het als belangrijker dan enige technische kennis die ik heb opgedaan. Door te werken aan een bibliotheek die niet het meest populair is, besefte ik hoe belangrijk het is om mijn vaardigheden te diversifiëren en flexibel te zijn als ontwikkelaar. Ik heb gezien hoeveel werk het kost om een open-sourceproject te onderhouden en heb veel respect gekregen voor iedereen die zijn goed geschreven code gratis uitgeeft.
Wat ik heb geleerd: Kies een bibliotheek omdat deze de juiste is voor de taak, niet omdat dit uw favoriet is. Begrijp dat verschillende stukjes software verschillende doelen dienen, en soms is het moeilijk om het verschil te begrijpen.
