A Taste of CoffeeScript (deel 1)

Laten we eerlijk zijn, JavaScript heeft niet altijd de beste reputatie bij ontwikkelaars gehad, en sinds de oprichting van CoffeeScript in 2009 heeft deze kleine taal de wereld van JavaScript-ontwikkelaars stormenderhand veroverd; vooral omdat het wat sommigen misschien zeggen het slechtste aspect van JavaScript is: de syntaxis van de code.

Hoewel dit een nieuwe taal is, zul je het echt snel oppikken, vooral omdat het opnieuw geformuleerde JavaScript is; het is in wezen mooier, eenvoudiger JavaScript.

Wanneer je CoffeeScript schrijft, vergeet dan niet dat je code schrijft die voordat deze wordt geïmplementeerd, zal worden gecompileerd in JavaScript dat de beste werkwijzen volgt en de JSLint-test doorstaat, dus dat is een ding waar je je geen zorgen over hoeft te maken. De uitvoer is nog steeds geldig JavaScript dat de browser geen probleem zal hebben met lezen. CoffeeScript is voor JavaScript wat SASS voor CSS is: een manier om eenvoudigere en productievere code te schrijven.

Installeren en gebruiken

CoffeeScript is een hulpprogramma node.js, dus om het te kunnen installeren, moet node.js zijn geïnstalleerd, evenals de knooppuntpakketbeheerder. Ervan uitgaande dat u deze twee pakketten hebt geïnstalleerd, hoeft u alleen maar naar uw terminal te gaan en CoffeeScript met de pakketbeheerder te installeren met behulp van de code:

npm install -g coffee-script

Alleen al daarom staat CoffeeScript op uw computer. Om een ​​.coffee-bestand in een JavaScript-bestand te compileren, typt u het volgende:

coffee --compile script.coffee

Dit zal het bestand script.coffee compileren in script.js in dezelfde map, maar zal het alleen doen als je de opdracht uitvoert, als je wilt dat het compileert bij elke verandering die je in het koffiebestand aanbrengt, moet je de -watch toevoegen voor het compileren:

coffee --watch --compile script.coffee

Met deze toevoeging wordt uw JavaScript gecompileerd elke keer dat u een wijziging aanbrengt in uw .coffee-bestand.

Variabelen

Bij het schrijven van een JavaScript-variabele moeten we het var-sleutelwoord voorvoegen, met CoffeeScript is dat sleutelwoord verdwenen en kun je gewoon de variabele typen en het aan iets toewijzen. Een ander ding om op te letten is dat CoffeeScript veel inspringmethoden gebruikt om puntkomma's te vermijden en dat de taal begrijpt dat de variabele verklaring compleet is, je hoeft alleen maar naar een nieuwe regel te gaan:

age = 21country = "Portugal"

In JavaScript zou je iets moeten typen als:

var age = 21;var country = "Portugal";

Het is een klein voorbeeld, maar je kunt beginnen te zien hoe krachtig CoffeeScript is als het gaat om het vereenvoudigen van je code.

Logische en vergelijkende operatoren

Weet je nog hoeveel tijd je hebt doorgebracht met het onthouden van JavaScript-operators? Weet je nog niet zeker waarom je === moest gebruiken in plaats van alleen met is? Nou, daar zorgt CoffeeScript ook voor. Het biedt enkele heel aardige aliassen voor de operators:

Vergelijkingsoperatoren

• === kan nu worden geruild voor eenvoudig is;
• ! == is gelijkelijk getransformeerd naar de meer leesbare isnt.

Logische operatoren

• In plaats van && kunt u gewoon en gebruiken ;
• als voor || vanaf nu kun je typen of;
• het kleine uitroepteken dat een niet- gezegde noemde, schakelde over op het meest logische ding: niet.

Als verklaringen

Een ander ding waar CoffeeScript vanaf gaat is accolades. Het gebruikt de inspringende methode om te verklaren wanneer je in een statement zit, of statements werken zoals JavaScript, maar je hebt geen accolades of de haakjes nodig; typ gewoon de code die u wilt uitvoeren als de instructie waar is:

if work > 24 and sleep < 8vacations()elsework()

compileert in JavaScript als:

if (work > 24 && sleep < 8) {vacations();} else {work();}

Ik hoop dat je de voordelen van CoffeeScript begint te zien alleen met deze eenvoudige demonstraties van hoe schoon het je code kan maken, en schonere code betekent meer onderhoudbare code.

Doorlopen van arrays

Het doorlopen van arrays is een van de dingen die je zeker moet doen in elke JavaScript-app die je schrijft en de syntaxis voor het doorlussen ervan in JavaScript is niet de eenvoudigste of de schoonste, ik denk dat dit is waar CoffeeScript echt op schijnt. Om een ​​array te doorlopen gebruiken we een lus for..in, zoals zo:

tasks = ['Design','Code','Groceries']for task in tasksalert task

Al dit stukje code zal doen is alle dingen in de array lezen en dan een voor een waarschuwen, gewoon om de dingen nog eenvoudiger te maken, je kunt zelfs de ... loop in een regel schrijven, zoals zo:

tasks = ['Design','Code','Groceries']alert task for task in tasks

Het is gewoon veel beter leesbaar en onderhoudbaar dan het vanille JavaScript, waarbij de code die door CoffeeScript voor deze twee regels wordt geproduceerd, zou zijn:

var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}

Terwijl loops

Hoewel loops ook erg handig zijn bij het bouwen van je JavaScript-app, maakt CoffeeScript het niettemin ook gemakkelijker om dit te lezen en te schrijven, bijvoorbeeld:

while sleep < 8sleep()

Of u kunt alles op één regel schrijven als u dat liever hebt:

while sleep < 8 then sleep()

Of:

sleep() until sleep > 8

In pure JavaScript zou dit vertalen naar:

//thenwhile (sleep < 8) {sleep();}

Of:

//untilwhile (!(sleep > 8)) {sleep();}

functies

Functies zijn ook een ander essentieel onderdeel van elke programmeertaal en hoewel functies in JavaScript niet zo rommelig zijn als sommige andere delen, vereenvoudigt CoffeeScript dit ook tot het maximum, een eenvoudige functie die iemands naam gebruikt en vervolgens waarschuwt kan zo worden geschreven :

sayHi = (name) ->return "Hello " + namealert sayHi('Sara')

Het enige wat u hoeft te doen is de functie een naam te geven, in dit geval worden de functies sayHi genoemd en daarna moet u na het gelijkteken de parameters opgeven. Hier is de naam de enige parameter, nadat de basis van onze functie is gedefinieerd, moeten we typen -> gevolgd op de volgende regel met wat we willen dat de functie doet, zodat CoffeeScript weet dat we binnen de functie zijn. In dit geval wil ik alleen "Hallo" en vervolgens de naam van de persoon retourneren en ten slotte gebruik ik een eenvoudige waarschuwing om de functie met de naam te bellen. We kunnen dit ook op één regel schrijven en het invoeren en inspringen elimineren door gewoon te schrijven wat de functie zal doen na de ->:

sayHi = (name) -> return "Hello " + name

Dit kleine codefragment wordt gecompileerd in het volgende JavaScript:

var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));

Natuurlijk was dit een heel eenvoudige functie, maar zoals je kunt zien, heeft het ons 3 regels code bespaard en natuurlijk kunnen we in de JavaScript de variabele een naam geven, zoals we de functie als volgt declareren:

var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));

De voorbeelden die ik hier heb gegeven, zijn waar CoffeeScript naar compileert en hoewel er in de meeste gevallen gemakkelijker manieren zijn om iets te typen, is al het gecompileerde JavaScript geldig en semantisch.

Conclusie

Dit is nog maar het begin van wat CoffeeScript je kan geven, wanneer de zaken steeds complexer worden, zal deze kleine taal je veel gebruiksmogelijkheden bieden in vergelijking met JavaScript, minder code die je moet schrijven, meer leesbare code voor mensen en ook onderhoudbaarder , zodat je een jaar later terug kunt komen naar een website en weet wat er aan de hand is in dat JavaScript.

Blijf op de hoogte voor het tweede deel van deze serie, waarin ik je zal laten zien hoe je CoffeeScript kunt combineren met jQuery en LocalStorage om een ​​eenvoudige lijst met contactpersonen te maken.

Heeft u CoffeeScript gebruikt om JavaScript te vereenvoudigen? Welke delen van CoffeeScript geeft u de voorkeur aan Javascript? Laat het ons weten in de comments.

Uitgelichte afbeelding / thumbnail, koffie afbeelding via Shutterstock.

• ← A Taste of CoffeeScript (deel 2)
• Leer tellen met CSS →