Vamos enfrentá-lo, JavaScript nem sempre teve a melhor reputação entre os desenvolvedores, e desde a fundação do CoffeeScript em 2009, esta pequena linguagem tomou o mundo dos desenvolvedores de JavaScript pela tempestade; principalmente porque supera o que alguns podem dizer é o pior aspecto do JavaScript: a sintaxe de seu código.
Mesmo que seja uma nova linguagem, você vai aprender muito rápido, principalmente porque é um JavaScript reformulado; é essencialmente JavaScript mais simples e mais simples.
Ao escrever o CoffeeScript, não esqueça que você está escrevendo código que antes de ser implementado será compilado em JavaScript que segue as melhores práticas e passa no teste JSLint, então essa é uma coisa a menos com a qual você precisa se preocupar. A saída ainda será válida JavaScript que o navegador não terá um problema na leitura. CoffeeScript é para JavaScript o que o SASS é para CSS: uma maneira de escrever código mais simples e produtivo.
O CoffeeScript é um utilitário node.js, portanto, para instalá-lo, você precisa ter o node.js instalado, bem como o gerenciador de pacotes do nó. Supondo que você tenha instalado estes dois pacotes, tudo o que você precisa fazer é ir ao seu terminal e instalar o CoffeeScript com o gerenciador de pacotes usando o código:
npm install -g coffee-scriptSó com isso você tem o CoffeeScript instalado em sua máquina. Para compilar um arquivo .coffee em um arquivo JavaScript, você precisa digitar:
coffee --compile script.coffeeIsto irá compilar o arquivo script.coffee em script.js no mesmo diretório, mas só irá fazê-lo quando você executar o comando, se você quiser que ele compile em cada mudança que você fizer no arquivo de café você precisa adicionar o - watch antes a compilação:
coffee --watch --compile script.coffeeCom isso, seu JavaScript será compilado toda vez que você fizer uma alteração em seu arquivo .coffee.
Ao escrever uma variável JavaScript, temos que prefixar a palavra-chave var, com o CoffeeScript essa palavra-chave sumiu e você pode simplesmente digitar a variável e atribuí-la a algo. Outra coisa a se observar é que o CoffeeScript usa muitos métodos de recuo para evitar ponto-e-vírgula e, para que a linguagem entenda que a instrução variável está completa, você só precisa mover para uma nova linha:
age = 21country = "Portugal"Em JavaScript você teria que digitar algo como:
var age = 21;var country = "Portugal";É um pequeno exemplo, mas você pode começar a ver como o CoffeeScript é poderoso quando se trata de simplificar seu código.
Lembre-se de todo esse tempo que você gastou memorizando operadores JavaScript? Lembre-se de se perguntar por que você precisava usar === em vez de apenas usar o is? Bem, o CoffeeScript também cuida disso. Ele oferece alguns aliases muito legais para os operadores:
Outra coisa de que o CoffeeScript se livra é de chaves. Ele usa o método indenting para declarar quando você está dentro de uma instrução, se as instruções funcionam como JavaScript, mas você não precisa das chaves ou parênteses; apenas recue o código que você deseja executar quando a afirmação for verdadeira:
if work > 24 and sleep < 8vacations()elsework()irá compilar em JavaScript como:
if (work > 24 && sleep < 8) {vacations();} else {work();}Espero que você esteja começando a ver os benefícios do CoffeeScript apenas com estas simples demonstrações de como ele pode ser limpo e que um código mais limpo significa um código mais sustentável.
Loop através de arrays é uma das coisas que você deve fazer em cada aplicativo JavaScript que você escreve e a sintaxe para fazer loops em JavaScript não é a mais simples ou a mais limpa, eu acho que é onde o CoffeeScript realmente brilha. Para percorrer um array, usamos um loop for..in, assim:
tasks = ['Design','Code','Groceries']for task in tasksalert taskTudo o que esse pedaço de código fará é ler todas as coisas da matriz e depois alertar uma por uma, só para tornar as coisas ainda mais simples, você pode até escrever o loop for ... em uma linha, assim:
tasks = ['Design','Code','Groceries']alert task for task in tasksÉ simplesmente muito mais legível e fácil de manter do que o JavaScript vanilla, falando de qual seria o código produzido pelo CoffeeScript para essas duas linhas:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}Embora os loops também sejam muito úteis ao construir seu aplicativo JavaScript e o CoffeeScript não deixa isso mais fácil de ler e escrever, por exemplo:
while sleep < 8sleep()Ou você pode escrever tudo em uma linha, se preferir:
while sleep < 8 then sleep()Ou:
sleep() until sleep > 8Em JavaScript puro isso se traduziria em:
//thenwhile (sleep < 8) {sleep();}Ou:
//untilwhile (!(sleep > 8)) {sleep();}Funções também são outra parte vital de qualquer linguagem de programação e mesmo que funções em JavaScript não sejam tão confusas quanto algumas outras partes, o CoffeeScript simplifica isso ao máximo também, uma função simples que pega o nome de alguém e então alerta que ele pode ser escrito assim :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Tudo o que você faz é nomear a função, neste caso, as funções são chamadas de sayHi, e depois do sinal de igual você precisa especificar os parâmetros. Aqui name é o único parâmetro, depois que a base de nossa função é definida, precisamos digitar -> seguido na próxima linha pelo que queremos que a função faça para que o CoffeeScript saiba que estamos dentro da função. Neste caso tudo o que eu quero é retornar “Olá” e depois o nome da pessoa e por último eu uso um alerta simples para chamar a função com o nome. Também podemos escrever isso em uma linha eliminando a entrada e o recuo apenas escrevendo o que a função fará após o ->:
sayHi = (name) -> return "Hello " + nameEste pequeno trecho de código será compilado no seguinte JavaScript:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));É claro que esta foi uma função muito simples, mas como você pode ver, ela nos salvou 3 linhas de código e, é claro, no JavaScript, podemos apenas nomear a variável conforme declaramos a função da seguinte forma:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Os exemplos que dei aqui são o que o CoffeeScript compila e, embora na maioria dos casos, há maneiras mais fáceis de digitar algo, todo o JavaScript compilado é válido e semântico.
Este é apenas o começo do que o CoffeeScript pode lhe dar, quando as coisas começam a ficar mais complexas, essa pequena linguagem lhe dará muita vantagem quando comparado ao JavaScript, menos código que você precisa escrever, mais código legível e mais sustentável também , para que você possa voltar a um website um ano depois e saber o que está acontecendo nesse JavaScript.
Fique ligado na segunda parte desta série, onde mostrarei como combinar o CoffeeScript com o jQuery e o LocalStorage para criar um aplicativo de lista de contatos simples.
Você já usou o CoffeeScript para simplificar o JavaScript? Que partes do CoffeeScript você prefere para JavaScript? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de café via Shutterstock.