En Minimal JavaScript-Inställningar

0
19

En del människor föredrar att skriva JavaScript med att Reagera. För andra, det är Vue eller jQuery. För andra är det deras egen uppsättning av verktyg eller ett helt tomt dokument. Vissa inställningar är minimal, vissa gör du för att få saker gjorda snabbt, och vissa är galen kraftfull, så att du kan bygga komplexa och underhålla applikationer. Varje inställning har fördelar och nackdelar, men oftast positiva uppväger det negativa när det kommer till populära ramar verifieras och granskas av ett aktivt community.

Reagera och Vue är kraftfulla JavaScript-ramverk. De är naturligtvis — det är därför både trender så högt i den totala användningen. Men vad är det som gör att de, och andra ramar, så kraftfull? Är det hastigheten? Överförbarhet till andra plattformar som infödd desktop och mobil? Stöd av den stora gemenskapen?

Framgången av ett team börjar med ett avtal. En överenskommelse av hur saker och ting ska göras. Utan ett avtal, kod skulle bli rörigt, och programvaran ohållbar ganska snabbt, även för relativt små projekt. Därför, en hel del (om inte de flesta) av kraften i en ram som ligger inom ramen för detta avtal. Möjligheten att definiera konventioner och gemensamma mönster som alla följer. Som idé är tillämplig på alla ramar, JavaScript eller inte. Dessa “regler” är avgörande för utveckling och föra lag underhåll i valfri storlek, återanvändning av kod, och möjlighet att dela arbetet med en gemenskap i en form som någon kommer att förstå. Det är därför vi kan söka på webben för att någon komponent/plugin som löser våra problem snarare än att skriva något på våra egna. Vi förlitar oss på öppen källkod alternativ, oavsett vilka förutsättningar vi använder.

Tyvärr, det finns nackdelar med att ramar. Som Adrian Holovaty (en av Django skapare) förklarar i sitt tal, ramar tenderar att bli skrymmande och uppsvälld med funktioner för ett visst användningsområde. Det skulle kunna vara införandet av en riktigt bra idé. Det kan också vara en önskan att ge en en-storlek-passar-alla-lösning för alla och allas behov. Det kan vara att vara populär. Hursomhelst, det finns nackdelar med att ramar i ljuset av alla de fördelar som de också har.

I server-renderad värld, där vi arbetar med innehåll som levereras till webbläsaren från en server, detta “uppdrag” är fylld med kunskaper, idéer och lösningar som människor delar med arbetskamrater, vänner och andra. De tenderar att anta en konsekvent utveckling av regler och tillämpa dem i sitt team eller företag, snarare än att förlita sig på ett fördefinierat ramverk. Under en lång tid, det har varit jQuery som har gjort det möjligt för människor att dela och återanvända kod på en global skala med sin plugins — men den tiden är blekning som nya ramar in luckan.

Låt oss ta en titt på några centrala punkter som alla ram — anpassade eller inte — borde överväga avgörande betydelse för att främja en underhålla och återanvändas kodbasen.

Namnkonventioner

Vissa kanske säger att namnge är den svåraste delen av utvecklingen. Oavsett om det är namngivning av JavaScript variabler, HTML-klasser, eller något annat antal saker, en namnkonvention har en stor inverkan på hur vi arbetar tillsammans, eftersom det ger sammanhang och mening i vår kod. Ett bra exempel på en namngivning är BEM, en CSS-metod som skapats av folk på Yandex och antas av många, många front-enders. Denna typ av standardisering och enhetlighet kan hjälpa till att informera våra mål, vilket är att ha en standard konvention för namngivning av JavaScript väljare.

Denna situation kan verka bekant: du går in på ett projekt efter några månader och du ser vissa beteenden som händer på sidan, det kanske finns något du vill ändra eller fixa. Men att hitta källan till detta beteende kan vara en knepig sak. Är det id-attributet jag ska söka efter? Är det en av de klasser? Kanske de data som attribut för just denna del?

Jag tror att du får punkten. Vad som hjälper är att ha någon form av konventionen för att förenkla processen och se till att alla arbetar med samma namn. Och det spelar egentligen ingen roll om vi kommer med klasser (t ex js-[namn]) eller data som attribut (som till exempel data-name=”[name]”). Allt som räknas är att namnen följer samma stil. Säkert tillräckligt, någon ram du kommer att träffa kommer att genomdriva en namngivning av något slag, oavsett om det är för att Reagera, Vue, Bootstrap, Foundation, etc.

Omfattning

En utvecklare kommer sannolikt att kämpa med JavaScript omfattning vid någon punkt i tid, men vi är speciellt inriktade på DOM möjligheter här. Oavsett vad du gör med mig, du använder den för att påverka några DOM-element. Begränsa delar av koden till ett DOM-element uppmuntrar underhållet och gör koden mer modulärt. Komponenterna i både Reagera och Vue fungera på ett liknande sätt, även om deras “komponent” – konceptet är annorlunda än den vanliga DOM. Fortfarande, tanken omfång koden till ett DOM-element som är utförda av dessa komponenter.

Medan vi är på ämnet av DOM manipulation, refererar element inom rot-inslaget är super bra eftersom det hjälper undviker konstant behov av att markera element. Reagera och Vue göra detta i rutan i ett mycket bra sätt.

Lifecycle

I det förflutna, sidan lifecycle var mycket enkel: webbläsaren laddas sidan och webbläsarens vänstra sidan. Skapa eller ta bort händelsen lyssnare, eller att koden körs i rätt tid var mycket enklare, eftersom du skulle bara skapa allt som du behöver på belastning, och sällan bry sig om att inaktivera din kod, eftersom webbläsaren skulle göra det för att du som standard.

Numera lifecycle tenderar att vara mycket mer dynamiska, tack vare statliga förvaltningen och de sätt vi föredrar att manipulera ändringar direkt till DOM eller ladda innehållet i sidor med JavaScript. Tyvärr, som oftast innebär en del frågor där du kan behöva för att köra delar av din kod vid vissa tider.

Jag kan inte säga hur många gånger i mitt liv har jag haft att leka med kod för att få min händelsehanterare för att köra på rätt sätt efter att åter skriva en del av DOM. Ibland är det möjligt att lösa detta med event-delegationen. Andra gånger, din kod som hanterar inte köras alls eller köra flera gånger eftersom de är plötsligt fäst två gånger.

En annan användning fallet skulle vara att skapa en instans av bibliotek efter att ändra DOM, som “falska väljer.”

I alla fall, livscykeln är viktigt och att begränsa din kod till ett DOM-element hjälper verkligen här, eftersom du vet att koden tillämpas till denna del måste utföras på nytt vid elementet är åter utförs.

Ramar gör samma sak med funktioner som componentDidMount eller componentDidUpdate, som ger dig ett enkelt sätt att köra koden exakt när du behöver det.

Återanvändning

Kopiera koden från någon annanstans och återanvända det är super vanligt. Vem har inte använt en snutt från ett tidigare projekt, eller ett svar från StackOverflow, eller hur? Människor till och med uppfunnit tjänster som npm avsedd för en enda sak: att enkelt dela och återanvända kod. Det finns ingen anledning att uppfinna hjulet om och dela kod med andra är något som är bekvämt, praktiskt och ofta mer effektivt än att snurra upp något från scratch.

Komponenter, oavsett om det är för att Reagera, Vue, eller någon annan byggsten i en ram uppmuntra till återanvändning genom att ha en wrapper runt en bit kod som serverar vissa specifika ändamål. En standardiserad omslag med en påtvingad format. Jag skulle säga att detta är mer av en bieffekt av att ha några bas som vi kan bygga på, än en avsiktlig ansträngning för återanvändning, som en bas behöver alltid en viss standard format av en kod som man kan köra på samma sätt programmering språk har en syntax som vi måste följa med… men det är en super bekväm och användbar sidoeffekt, för säker. Genom att kombinera detta fick återanvändning med chefer paket som Garn, och bundlers som webpack, kan vi plötsligt få kod som skrivs av många utvecklare runt om i världen att arbeta tillsammans i vår app med nästan ingen ansträngning.

Även om inte alla-kod är open-source och delbar, en gemensam struktur kommer att hjälpa folk i mindre grupper, så vem som helst kan förstå det mesta av koden skrivs inom laget utan att behöva konsultera dess författare.

DOM manipulation med prestanda i åtanke

Läsa och skriva att DOM är dyra. Utvecklare av front-end ramverk att hålla detta i åtanke och försöka optimera så mycket som möjligt med stater, virtuella DOM och andra metoder för att göra ändringar till DOM när det behövs och där det behövs… och så ska vi. Medan vi är mer berörda med server-renderade HTML, de flesta av koden slutar läsa eller skriva till DOM. Efter allt, det är vad JavaScript är.

Medan de flesta av de ändringar av DOM är minimala, de kan också förekomma ganska ofta. Ett fint exempel på frekvent läsning/skrivning är att köra ett skript på sidan genom att bläddra. Helst skulle vi vilja att undvika att lägga till klasser, attribut eller ändra innehållet av element direkt i föraren, även om vi skriva samma klasser, attribut eller innehållet eftersom vår förändringar fortfarande får behandlas av webbläsare och är fortfarande dyra, även när ingenting förändras för användaren.

Storlek

Sist, men inte minst: storlek. Storleken är avgörande eller åtminstone borde vara en ram. Den kod som diskuteras i denna artikel är tänkt att användas som en bas i många projekt. Det bör vara så liten som möjligt och undvika onödig kod som kan läggas till manuellt för engångs-användning fall. Helst bör det vara modulär så att vi kan dra bitar av det à la carte, baserat på de specifika behoven för projektet på sidan.

Medan storleken av self-skriven kod är oftast rimligt, många projekt slutar upp med åtminstone några beroenden/bibliotek för att fylla i luckorna, och de kan göra saker och ting ganska skrymmande riktigt snabbt. Låt säga att vi har en karusell på en sida på en webbplats och i vissa diagram någonstans djupare. Vi kan vända oss till befintliga bibliotek som skulle hantera dessa saker för oss, som slick karusell (10 KB minified/gzip, exklusive jQuery) och highcharts (73 KB minified/gzip). Det är över 80 KB av koden, och jag skulle satsa på att inte varje byte är nödvändigt för vårt projekt. Som Addy Osmani förklarar, JavaScript är dyrt och dess storlek är inte samma sak som andra tillgångar på en sida. Det är värt att hålla detta i åtanke nästa gång du hittar dig själv att nå för ett bibliotek, men det bör inte avskräcka dig från att göra det om det positiva uppväger det negativa.

En titt på en minimal lösning som vi kallar Gia

Låt oss ta en titt på något som jag har jobbat på och med ett tag med mitt team på Jätten. Vi som JavaScript och vi vill arbeta direkt med JavaScript snarare än en ram. Men samtidigt, vi behöver underhåll och återanvändning som ramar erbjuda. Vi försökte ta några begrepp från den populära ramar och tillämpa dem på en server utförda hemsida där de alternativ för en JavaScript-inställningar är så stort, och ändå så begränsad.

Vi kommer att gå igenom några grundläggande funktioner i vår inställning och fokus på hur man löser de punkter som vi har täckt så långt. Observera att många av lösningarna till våra behov är direkt inspirerad av stora ramar, så om du ser några likheter, vet att det inte är en olycka. Vi kallar det för Gia (få det, som kort för Jätten?!) och du kan få det från npm och hitta källkod på GitHub.

Gia, som många ramar, som är byggd runt komponenter som ger dig en grundläggande byggsten och några fördelar som vi ska ta i lite. Men förväxla inte Gia komponenter med komponenten begrepp som används genom att Reagera och Vue, där alla dina HTML är en produkt av komponenten. Detta är olika.

I Gia, en komponent är en wrapper för din egen kod som körs i räckvidden av en DOM-element, och exempel på en komponent som är lagrade i element i sig. Som ett resultat, ett exempel är automatiskt bort från minnet av sophämtare i fall den delen tas bort från DOM. Källkoden för de komponenter kan hittas här och är ganska enkel.

Bortsett från en komponent, Gia innehåller flera medhjälpare för att ansöka, förstöra och arbeta med komponenten instans eller kommunicera mellan komponenter (med standard eventbus ingår för enkelhetens skull).

Låt oss börja med en grundläggande inställning. Gia är att använda ett attribut att markera element, tillsammans med namnet på den komponent som skall verkställas (dvs g-komponent=”[komponent namn]”). Detta upprätthåller en konsekvent namngivning. Kör loadComponents funktion skapar de fall som definieras med g-komponent attribut.

Se Pennan Grundläggande del av Georgy Marchuk (@gmrchk) på CodePen.

Gia komponenter också möjligt för oss att enkelt välja element inom rot-element med g-ref attribut. Allt som behöver göras är att definiera refs som förväntas och oavsett om vi arbetar med ett enda element eller en mängd av dem. Referens är sedan tillgänglig i detta.ref objekt inom komponenten.

Se Pennan Komponent med ref delar av Georgy Marchuk (@gmrchk) på CodePen.

Som en bonus, standard alternativ kan definieras i den komponent som automatiskt om av alla alternativ som ingår i g-alt-attribut.

Se Pennan Komponent med val av Georgy Marchuk (@gmrchk) på CodePen.

Komponenten innehåller metoder som genomförs vid olika tillfällen, för att lösa lifecycle fråga. Här är ett exempel som visar hur en komponent kan återställas eller tas bort:

Se Pennan fyll på/ta bort komponenter av Georgy Marchuk (@gmrchk) på CodePen.

Lägg märke till hur loadComponents funktion inte tillämpa samma komponent när den redan finns.

Det är inte nödvändigt att ta bort lyssnare knutna till de grundläggande del av en komponent eller element inom det innan nytt gör dem eftersom de delar skulle tas bort från DOM ändå. Det kan dock finnas vissa lyssnare som skapas på global objekt (t ex fönster), som de som används för att bläddra hantering. I detta fall är det nödvändigt att ta bort lyssnaren manuellt innan förstöra komponenten instans i syfte att undvika minnesläckor.

Begreppet komponent begränsad till ett DOM-element är liknande i dess natur att Reagera och Vue komponenter, men med ett viktigt undantag som DOM-strukturen är utanför komponent. Som ett resultat, måste vi se till att det passar den komponent. Definiera de element ref säkert hjälper, som Gia komponent kommer att berätta när det krävs refs inte är närvarande. Det gör återanvändbar komponent. Följande är exempel på implementering av en grundläggande karusell som lätt skulle kunna återanvändas eller delad:

Se Pennan Grundläggande karusell komponent av Georgy Marchuk (@gmrchk) på CodePen.

Medan vi pratar om återanvändning, det är viktigt att nämna att komponenter behöver inte återanvändas i sitt befintliga skick. Med andra ord, kan vi förlänga dem för att skapa nya komponenter som alla andra JavaScript-klass. Det innebär att vi kan förbereda en allmän del och bygga vidare på det.

För att ge ett exempel, en komponent som skulle ge oss avstånd mellan markören och centrum av en del som känns som en sak som kan vara till nytta en dag. En sådan komponent kan hittas här. Efter att ha redo, det är löjligt enkelt att bygga vidare på det och arbeta med siffrorna, som nästa exempel visar i render-funktion, även om vi skulle kunna oense om nyttan av detta exempel.

Se Pennan ZMXMJo av Georgy Marchuk (@gmrchk) på CodePen.

Låt oss försöka titta in optimerad DOM manipulationer. Upptäcka om en förändring till DOM som ska ske kan göras manuellt lagras eller kontrolleras utan att direkt komma åt DOM, men det tenderar att bli en hel del arbete som vi kanske vill undvika.

Det är där Gia riktigt drog inspiration från Reagera, med enkla, avskalade komponent statlig förvaltning. Status för en komponent är inställd på samma sätt till stater som Reagerar, med hjälp av en setState funktion.

Som sagt, det är inga rendering som är involverade i vår komponent. Innehållet tolkas av servern, så vi måste göra en användning av förändringar i statliga någon annanstans. Staten förändringar utvärderas och eventuella ändringar skickas till stateChange metod för en komponent. Helst någon interaktion mellan komponenten och DOM skulle hanteras i denna funktion. I det fall någon del av den staten och som inte har förändrats, det kommer inte att vara närvarande i stateChanges objekt som skickas till en funktion och därför inte bearbetas — DOM kommer inte att beröras utan att det är absolut nödvändigt.

Kontrollera följande exempel med en komponent som visar delar som är synliga i visningsområdet:

Se Pennan Avsnitt i viewport-komponent genom att Georgy Marchuk (@gmrchk) på CodePen.

Lägg märke till hur du skriver till DOM (visualiseras genom blink) görs endast för de poster där staten faktiskt ändringar.

Nu får vi till min favorit del! Gia är verkligen minimal. Hela bunten innehåller all kod, inklusive alla medhjälpare, tar upp en ynka 2.68 KB (minified/gzip). För att inte nämna att du troligen inte kommer att behöva alla Gia: s delar och skulle sluta importera ännu mindre med en bundler.

Som tidigare nämnts, storleken på koden snabbt kan öka genom att inkludera tredje part beroenden. Det är därför Gia också innehåller kod uppdelning stöd där du kan definiera ett beroende för en komponent, som endast kommer att vara laddad när komponenten är initieras för första gången, utan några ytterligare inställningar som krävs för att den bundler. På det sättet, skrymmande bibliotek som används någonstans djupt inom din webbplats eller applikation behöver inte sakta ner saker.

I fall du bestämmer dig för en dag som du verkligen vill dra nytta av alla de godsaker stora ramar kan erbjuda någonstans i din kod, det finns inget lättare än att bara fylla på det som alla andra beroenden för komponenter.

klass SampleComponent sträcker Komponent {
async kräver() {
detta.vue = väntar import(‘vue’);
}

mount() {
ny här.vue({
el: här.element,
});
}
}

Slutsats

Jag antar att den viktigaste punkten i denna artikel är att du inte behöver en ram för att skriva underhålla och återanvändbar kod. Följande och upprätthålla ett par begrepp (att använda ramar) kan ta dig långt på egen hand. Medan Gia är minimal och inte har så många av robusta funktioner som erbjuds av stora aktörer, som Reagerar och Vue, det hjälper oss fortfarande få som ren struktur som är så viktiga på lång sikt. Det finns några mer intressanta saker att inte göra cut här. Om du gillar det så långt, go check it out!

GitHub Repo

Det finns massor och massor av användningsfall och olika behov kräver olika metoder. Olika ramar kan göra mycket av jobbet åt dig, i andra fall kan de vara begränsande.

Vad är din minimal installation och hur tar du hänsyn till de punkter som vi berört här? Föredrar du en ram eller icke-ram miljö? Vill du använda ramar i kombination med statisk webbplats generatorer som Gatsby? Låt mig veta!