Een Minimale JavaScript Setup

0
41

Sommige mensen geven de voorkeur aan het schrijven van JavaScript met Reageren. Voor anderen is het Vue of jQuery. Voor nog anderen is het hun eigen set van tools of een geheel leeg document. Sommige instellingen zijn minimaal, wat u toelaten om dingen gedaan te krijgen snel, en sommige zijn gek krachtige, zodat u met het bouwen van complexe en onderhoudbare toepassingen. Elke installatie heeft voordelen en nadelen, maar positieven meestal opwegen tegen negatieven als het gaat om populaire frameworks gecontroleerd en goedgekeurd door een actieve gemeenschap.

Reageren en Vue zijn krachtige JavaScript-frameworks. Natuurlijk zijn ze — dat is de reden waarom zowel zijn trending zo hoog in het totale gebruik. Maar wat is het dat maakt dat deze, en andere kaders, zo krachtig? Is het de snelheid? Overdraagbaarheid naar andere platformen zoals native desktop en mobiel? Ondersteuning van de enorme gemeenschap?

Het succes van een development team begint met een overeenkomst. Een overeenkomst van hoe dingen worden gedaan. Zonder een overeenkomst, code zou krijgen rommelig, en de software niet-duurzame heel snel, zelfs voor relatief kleine projecten. Daarom zijn veel (zo niet de meeste) van de kracht van een framework ligt binnen deze overeenkomst. De mogelijkheid voor het definiëren van overeenkomsten en gemeenschappelijke patronen die iedereen onderschrijft. Dat idee is van toepassing op elk framework, JavaScript of niet. Deze “regels” zijn van essentieel belang om de ontwikkeling en het brengen van teams onderhoudbaarheid van een willekeurige grootte, de herbruikbaarheid van de code, en de mogelijkheid om delen van het werk met een gemeenschap in een vorm die iedereen zal begrijpen. Dat is waarom we kunnen zoeken op het web voor een bepaalde component/plugin dat lost ons probleem niet zozeer iets te schrijven op onze eigen. We vertrouwen op open-source alternatieven, ongeacht welk kader dat we gebruiken.

Helaas, er zijn nadelen aan kaders. Als Adrian Holovaty (één van de Django makers) legt in zijn toespraak, kaders hebben de neiging om omvangrijke en overladen met functies voor een bepaalde use-case. Het zou de opname van een heel goed idee. Het kan ook een wens om een one-size-fits-all oplossing voor iedereen en ieders behoeften. Het zou kunnen zijn en te blijven populair. Één van beide manier, zijn er nadelen aan kaders in het licht van al de voordelen die ze ook hebben.

In server-rendered wereld, waar wij werken met inhoud die wordt geleverd aan de browser van een server, dit “kader missie” is gevuld met kennis, ideeën en oplossingen die mensen delen met collega ‘ s, vrienden en anderen. Ze hebben de neiging om het aannemen van een consistente ontwikkeling van regels en de handhaving daarvan binnen hun teams of bedrijven, in plaats van te vertrouwen op een vooraf bepaald kader. Voor een lange tijd, het is jQuery heeft toegestaan dat mensen te delen en hergebruiken van code op een wereldwijde schaal met de plugins — maar die tijd is het vervagen, zoals nieuwe kaders zijn het invoeren van de vouw.

Laten we een kijkje nemen op een aantal centrale punten die een kader — aangepaste of niet — moet overwegen essentieel voor het stimuleren van een eenvoudig te onderhouden en herbruikbare code.

Naamgeving

Sommigen zullen misschien zeggen dat de naamgeving is het moeilijkste onderdeel van de ontwikkeling. Of het benoemen van JavaScript variabelen, HTML-klassen, of een ander nummer van de dingen, een naamgeving heeft een grote invloed op hoe we samen kunnen werken, want het voegt context en betekenis aan onze code. Een goed voorbeeld van een naamgeving is BEM, een CSS-methodiek gemaakt door de mensen van Google en goedgekeurd door vele, vele front-enders. Dat soort van standaardisatie en consistentie kan helpen informeren over onze doelstelling, dat is een standaard overeenkomst voor de naamgeving van JavaScript kiezers.

Deze situatie lijkt vertrouwd: u opnieuw een project na een paar maanden en je ziet wat gedrag gebeurt op de pagina — misschien iets dat u wilt wijzigen of repareren. Echter, het vinden van de bron van dat probleem kan heel lastig zijn. Is het id-attribuut moet ik zoeken? Is het een van de klassen? Misschien de gegevens kenmerk voor dit specifieke element?

Ik denk dat je het punt. Wat helpt is met een soort van overeenkomst om het proces te vereenvoudigen en iedereen werkt met dezelfde namen. En het maakt echt niet uit of we gaan met klassen (bv. js-[naam]) of data-attributen (bijvoorbeeld gegevens-naam=”[naam]”). Het enige dat telt is dat de namen voldoen aan dezelfde stijl. Zeker genoeg, een kader dat u zal ontmoeten, zal de handhaving van een naamgevingsconventie van een soort, of het nu Reageren, Vue, Bootstrap, Stichting, enz.

Omvang

Een ontwikkelaar zal waarschijnlijk in strijd met JavaScript scope op een bepaald punt in de tijd, maar wij zijn speciaal gericht op het DOM bereik hier. Ongeacht wat u aan het doen met JavaScript, u gebruikt het op sommige DOM-element. Het beperken van de onderdelen van de code naar een DOM-element stimuleert onderhoudbaarheid en maakt code meer modulair. Componenten in zowel Reageren en Vue werken op een soortgelijke manier, hoewel hun “component” concept is anders dan de standaard DOM. Toch, het idee bereiken de code naar een DOM-element dat wordt weergegeven door deze componenten.

Terwijl we op het onderwerp van DOM manipulatie, verwijzen naar elementen binnen het root element van het onderdeel is super handig omdat het helpt vermijdt de constante behoefte om te selecteren elementen. Reageren en Vue doen dit uit de doos in een zeer goede manier.

Levenscyclus

In het verleden, de pagina levenscyclus was heel eenvoudig: de browser het laden van de pagina en de browser links op de pagina. Het maken of verwijderen van gebeurtenislisteners, of het maken van code uitvoeren op het juiste moment was veel eenvoudiger, als je zou gewoon alles te creëren wat je nodig hebt op te laden, en zelden moeite met het uitschakelen van de code, aangezien de browser zou het voor u doen door de standaardinstelling.

Tegenwoordig is de levenscyclus heeft de neiging om veel meer dynamisch, dankzij de state management en de manier waarop we de voorkeur aan het manipuleren van de wijzigingen direct naar de DOM of het laden van de inhoud van de pagina ‘ s met JavaScript. Helaas, dat gaat meestal gepaard met een aantal problemen waar u mogelijk opnieuw uit te voeren onderdelen van de code op bepaalde tijden.

Ik kan niet vertellen hoe veel keer in mijn leven dat ik heb gehad om te spelen met de code om mijn event handlers correct wordt uitgevoerd na het herschrijven van een deel van de DOM. Soms is het mogelijk om dit op te lossen met gebeurtenis-delegatie. Andere tijden, uw code handlers niet op alle of enkele malen uitgevoerd, omdat ze plotseling aangesloten tweemaal.

Een ander gebruik zou moeten maken van een exemplaar van bibliotheken na het wijzigen van de DOM, als “nep selecteert.”

In ieder geval, de levenscyclus is belangrijk en het beperken van de code naar een DOM-element helpt zeker ook hier, omdat je weet dat de code van toepassing op dat element moet opnieuw worden uitgevoerd in het geval het element wordt opnieuw weergegeven.

Kaders hetzelfde doen met functies als componentDidMount of componentDidUpdate, die geven u een gemakkelijke manier van het uitvoeren van code precies wanneer u het nodig hebt.

Herbruikbaarheid

Het kopiëren van code van ergens anders en hergebruiken is het super vaak voor. Wie heeft er geen gebruik gemaakt van een fragment uit een vorig project of een antwoord van StackOverflow, toch? Mensen bedacht zelfs diensten zoals npm bedoeld voor één ding: om gemakkelijk te delen en hergebruik van code. Er is geen noodzaak om het wiel opnieuw uitvinden en het delen van code met anderen is iets dat is handig, handig, en vaak efficiënter dan spinnen, iets van de grond af.

Componenten-ongeacht of het is om te Reageren, Vue, of een andere bouwsteen van een kader stimuleren van hergebruik door het hebben van een wrapper rond een stukje code dat dient een aantal specifieke doel. Een gestandaardiseerde wikkelaar, met een afgedwongen formaat. Ik zou zeggen dit is meer een side-effect van het hebben van een basis kunnen we bouwen op, dan een bewuste inspanning voor herbruikbaarheid, als een basis moet altijd een aantal standaard formaat van een code kan worden uitgevoerd, op dezelfde manier programmeertalen hebben een syntaxis die we moeten volgen… maar het is een super handige en nuttige bijwerking, zeker. Door dit te combineren opgedaan herbruikbaarheid met pakket managers zoals Garen, en bundlers, zoals webpack, kunnen we plots het maken van code die is geschreven door vele ontwikkelaars over de hele wereld werken samen in onze app met bijna geen inspanning.

Hoewel niet alle code is open-source en deelbaar, een gemeenschappelijke structuur zal helpen mensen in kleinere teams, dus iedereen is in staat om te begrijpen de meeste van de code die is geschreven binnen het team zonder overleg met de auteur.

DOM-manipulatie met het oog op prestaties

Het lezen van en het schrijven naar de DOM is kostbaar. Ontwikkelaars van front-end kaders houd dat in gedachten en probeer het optimaliseren van zo veel mogelijk met de staten, virtuele DOM en andere methoden om veranderingen te maken aan de DOM als het nodig is en daar waar het nodig is… en zo moeten wij ook doen. Terwijl we meer bezig met server-rendered HTML, de code eindigt het lezen van of schrijven naar de DOM. Immers, dat is wat JavaScript.

Terwijl de meeste van de wijzigingen van de DOM minimaal zijn, kunnen ze ook komen vrij vaak. Een mooi voorbeeld van frequent lezen/schrijven is het uitvoeren van een script op de pagina scrollen. Idealiter zouden we willen voorkomen dat het toevoegen van klassen, attributen of het wijzigen van de inhoud van de elementen die rechtstreeks in de handler, zelfs als we schrijven dezelfde klassen, attributen of inhoud omdat onze verandert nog steeds verwerkt in de browser en zijn nog steeds duur, zelfs wanneer er niets verandert voor de gebruiker.

Grootte

Als laatste maar niet het minste: de grootte. Grootte is essentieel of minstens zou moeten zijn voor een kader. De code in dit artikel besproken is bedoeld om te worden gebruikt als basis voor heel veel projecten. Het moet zo klein mogelijk en vermijd onnodige code die kunnen handmatig worden toegevoegd voor eenmalig gebruik is gevallen. Ideaal zou zijn modulair, zodat we kunnen trekken zijn stukken uit à la carte, gebaseerd op de specifieke behoeften voor het project bij de hand.

Terwijl de grootte van een zelf geschreven code is redelijk, veel projecten uiteindelijk hebben ten minste een aantal afhankelijkheden/bibliotheken te vullen in de gaten, en die kan dingen heel grof echt snel. Laten we zeggen dat we een carrousel op een top-level pagina ‘ s van een site en een aantal grafieken ergens dieper. Kunnen We bestaande bibliotheken die zou omgaan met deze dingen voor ons, zoals glad carrousel (10 KB minified/gzip-bestand, met uitzondering van jQuery) en highcharts (73 KB minified/gzipped). Dat is meer dan 80 KB van code en ik durf te wedden dat niet elke byte is nodig voor ons project. Als Addy Osmani legt, u heeft JavaScript is duur en de grootte is niet hetzelfde als andere activa op een pagina. Het is de moeite waard te houden dat in het achterhoofd de volgende keer dat u zich voor het bereiken van een bibliotheek, maar het moet niet ontmoedigen dat je dat doet als de voordelen opwegen tegen de negatieve.

Een kijkje bij een minimale oplossing noemen we Gia

Laten we een kijkje nemen op iets wat ik heb gewerkt aan en met behulp van een tijdje met mijn team van Giant. We willen JavaScript en we willen om te werken met JavaScript in plaats van een kader. Maar op hetzelfde moment, moeten we de onderhoudbaarheid en herbruikbaarheid die kaders bieden. We hebben geprobeerd om een aantal concepten van de populaire frameworks en ze toepassen op een server-rendered website waar de mogelijkheden voor een JavaScript-instellingen zijn zo groot, en toch zo beperkt.

We gaan door middel van een aantal fundamentele kenmerken van onze instelling en focus op hoe het lost de punten die we tot dusver hebben besproken. Merk op dat veel van de oplossingen voor onze behoeften zijn rechtstreeks geïnspireerd door de grote kaders, dus als je een aantal overeenkomsten, weet dat het niet een ongeluk. We noemen het Gia (krijgen, net als kort voor Reus?!) en je kunt het krijgen van npm en het vinden van de bron code op GitHub.

Gia, net als vele kaders, is opgebouwd rond de componenten die het geven van u een elementaire bouwsteen en een aantal voordelen die we je contact op in een beetje. Maar verwar Gia componenten met de component begrippen die worden gebruikt door Reageren en Vue, waar al uw HTML is een product van de component. Dit is anders.

In Gia, een component is een wrapper voor uw eigen code die wordt uitgevoerd in het kader van een DOM-element, en de aanleg van een component wordt opgeslagen in het element zelf. Als een resultaat, een exemplaar wordt automatisch verwijderd uit het geheugen door de garbage collector in het geval het element wordt verwijderd uit de DOM. De source code van het component kunt u hier vinden en is vrij eenvoudig.

Afgezien van een component, Gia omvat meerdere hulpverleners toe te passen, te vernietigen en te werken met het onderdeel aanleg of de communicatie tussen componenten (met standaard eventbus opgenomen voor het gemak).

Laten we beginnen met een basic setup. Gia is het gebruik van een kenmerk te selecteren elementen, samen met de naam van de component worden uitgevoerd (d.w.z. g-component=”[component naam]”). Dit dwingt een consistente naamgeving. Het uitvoeren van de loadComponents functie maakt de gevallen gedefinieerd met de g-kenmerk component.

Zie de Pen Basic component door Georgy Martsjoek (@gmrchk) op CodePen.

Gia componenten kunnen we ook makkelijk selecteer de elementen in het root-element met de g-ref attribuut. Alles dat gedaan moet worden is het bepalen van de refs die u verwacht en of we nu werken met een enkel element of een array van hen. Verwijzing is dan toegankelijk.ref object binnen het onderdeel.

Zie de Pen Component met ref elementen door Georgy Martsjoek (@gmrchk) op CodePen.

Als een bonus, de standaard opties kunnen worden gedefinieerd in de component, die automatisch worden herschreven door de opties zijn opgenomen in de g-opties kenmerk.

Zie de Pen Component met opties door Georgy Martsjoek (@gmrchk) op CodePen.

Het onderdeel omvat methoden die worden uitgevoerd op verschillende tijdstippen, om het oplossen van de levenscyclus probleem. Hier is een voorbeeld dat laat zien hoe u een component kan worden geïnitialiseerd of verwijderd:

Zie de Pen plaatsen/verwijderen componenten door Georgy Martsjoek (@gmrchk) op CodePen.

Merk op hoe loadComponents functie werkt niet in dezelfde component als het al bestaat.

Het is niet nodig te verwijderen listeners het root element van een onderdeel of de elementen in de voor re-waardoor ze sinds de elementen zou worden verwijderd uit het DOM toch. Er kan echter worden sommige luisteraars gemaakt op de wereldwijde objecten (bijv. venster), zoals gebruikt voor ga hanteren. In dit geval is het nodig om eerst de luisteraar handmatig voor het vernietigen van de component instantie om te voorkomen dat het geheugen lekken.

Het concept van een component binnen het bereik van een DOM-element is vergelijkbaar in zijn aard om te Reageren en Vue onderdelen, maar met een belangrijke uitzondering dat de DOM-structuur is buiten de component. Als gevolg daarvan hebben we te zorgen dat het past op de component. Het definiëren van het ref-elementen helpt zeker, als Gia component zal u vertellen wanneer de vereiste refs zijn niet aanwezig. Dat maakt het onderdeel opnieuw te gebruiken. Het volgende is een voorbeeld van de implementatie van een basic-carrousel die gemakkelijk kunnen worden hergebruikt of worden gedeeld:

Zie de Pen Basic carrousel onderdeel door Georgy Martsjoek (@gmrchk) op CodePen.

Terwijl we praten over de herbruikbaarheid, het is belangrijk te vermelden dat de componenten niet hoeven te worden hergebruikt in hun huidige toestand. In andere woorden, we kunnen uitbreiden tot de creatie van nieuwe componenten zoals elke andere JavaScript-klasse. Dat betekent dat we ons kunnen voorbereiden op een algemene component en voortbouwen.

Om een voorbeeld te geven, een onderdeel dat zou ons de afstand tussen de cursor en het centrum van een element lijkt een zaak die u kunnen helpen op een dag. Een dergelijke component kan hier gevonden worden. Nadat dat klaar is, het is ongelooflijk eenvoudig om voort te bouwen op het werk en met die nummers, zoals het volgende voorbeeld laat in de render functie, hoewel we kunnen stellen over het nut van dit specifieke voorbeeld.

Zie de Pen ZMXMJo door Georgy Martsjoek (@gmrchk) op CodePen.

Laten we proberen te kijken naar geoptimaliseerde DOM manipulaties. Het detecteren als een wijziging van de DOM hoort te gebeuren handmatig kan worden opgeslagen of worden gecontroleerd zonder direct toegang tot de DOM, maar die heeft de neiging om veel van het werk dat we misschien wilt vermijden.

Dit is waar Gia echt haalde zijn inspiratie uit om te Reageren, met simpele, uitgeklede onderdeel toestand beheer. De staat van een onderdeel wordt ook aan de staten Reageren met behulp van een setState functie.

Dat gezegd hebbende, er is geen rendering betrokken bij onze component. De inhoud wordt geleverd door de server, dus moeten we maken gebruik van de wijzigingen in de toestand elders. De status verandert worden geëvalueerd en eventuele actuele wijzigingen worden verzonden naar de stateChange methode van een component. Ideaal, iedere interactie tussen de component en de DOM zou worden behandeld in deze functie. In geval een deel van de staat verandert niet, het zal niet aanwezig zijn in de stateChanges object doorgegeven aan een functie en daarom niet worden verwerkt — de DOM niet worden aangeraakt, zonder dat het echt nodig is.

Kijk naar het volgende voorbeeld met een component waaruit blijkt secties die zijn zichtbaar in de viewport:

Zie de Pen Secties in de viewport onderdeel door Georgy Martsjoek (@gmrchk) op CodePen.

Merk op hoe te schrijven naar de DOM (gevisualiseerd door het knipperen) is alleen gedaan voor items waar de staat in feite verandert.

Nu komen we aan bij mijn favoriete deel! Gia is echt minimaal. De hele bundel met alle in de code, met inbegrip van alle helpers, neemt een miezerig 2.68 KB (minified/gzipped). Niet te vergeten dat je waarschijnlijk niet nodig dat alle Gia ‘ s delen en zou het importeren van nog minder met een bundler.

Zoals eerder vermeld, de grootte van de code kan snel toenemen door derden afhankelijkheden. Dat is de reden waarom Gia ook bevat de code splitsen ondersteuning waar u kunt een van de afhankelijkheden voor een component, die zal alleen worden geladen wanneer de component wordt geïnitialiseerd voor de eerste keer, zonder extra instellingen nodig om de bundler. Op die manier, de omvangrijke bibliotheken ergens diep in je site of applicatie niet hebben om alles te vertragen.

In het geval u besluit op een dag dat je echt wilt profiteren van al het lekkers grote kaders kunnen bieden ergens in je code, is er niets makkelijker dan alleen het laden van het net als iedere andere afhankelijkheid voor het onderdeel.

klasse SampleComponent breidt Onderdeel {
async require() {
deze.vue = wachten op invoer(‘vue’);
}

mount() {
nieuw dit.vue({
el: dit.element,
});
}
}

Conclusie

Ik denk dat het belangrijkste punt van dit artikel is dat u geen behoefte aan een kader om te schrijven, te onderhouden en herbruikbare code. Volgende op en de handhaving van een aantal concepten (die kaders gebruiken) kan je ver op zijn eigen. Terwijl Gia is minimaal en niet veel van de krachtige functies die worden aangeboden door de grote spelers, zoals Reageren en Vue, het nog steeds helpt ons om dat schoon structuur die zo belangrijk is in de lange termijn. Het bevat wat meer interessante dingen die niet de cut te maken hier. Als je het dan zo ver, go check it out!

GitHub Repo

Er zijn veel en veel use cases, en de verschillende behoeften vereisen een verschillende aanpak. Verschillende kaders kunnen doen veel van het werk voor u; in andere gevallen, kunnen ze beperkend.

Wat is uw minimale installatie en hoe u de punten die we hier? Heb je liever een kader of een niet-framework-omgeving? Maakt u gebruik van kaders in combinatie met een static site generators, zoals Gatsby? Laat het me weten!