Let's face it, JavaScript n'a pas toujours eu la meilleure réputation parmi les développeurs, et depuis la création de CoffeeScript en 2009, ce petit langage a pris le monde des développeurs JavaScript en plein essor; principalement parce qu’il surmonte ce que certains peuvent dire est le pire aspect de JavaScript: la syntaxe de son code.
Même si c'est une nouvelle langue, vous la récupérerez très rapidement, principalement parce qu’elle a été reformulée en JavaScript; c'est essentiellement plus joli, JavaScript plus simple.
Lorsque vous écrivez CoffeeScript, n'oubliez pas que vous écrivez du code qui, avant d'être déployé, va être compilé en JavaScript, qui suit les meilleures pratiques et passe le test JSLint, ce qui ne vous préoccupe pas. La sortie sera toujours valide JavaScript que le navigateur n'aura pas de problème en lecture. CoffeeScript consiste en JavaScript ce que SASS est en CSS: un moyen d'écrire du code plus simple et plus productif.
CoffeeScript est un utilitaire node.js. Pour l'installer, node.js doit être installé, de même que le gestionnaire de packages de nœuds. En supposant que vous ayez installé ces deux packages, il vous suffit d'aller sur votre terminal et d'installer CoffeeScript avec le gestionnaire de paquets en utilisant le code suivant:
npm install -g coffee-scriptJuste avec cela, vous avez installé CoffeeScript sur votre machine. Pour compiler un fichier .coffee dans un fichier JavaScript, vous devez taper:
coffee --compile script.coffeeCela compilera le fichier script.coffee dans script.js dans le même répertoire mais ne le fera que lorsque vous exécuterez la commande, si vous voulez le compiler dans chaque modification apportée au fichier café, vous devez ajouter -watch avant la compilation:
coffee --watch --compile script.coffeeDe plus, votre code JavaScript sera compilé chaque fois que vous apportez une modification à votre fichier .coffee.
Lorsque vous écrivez une variable JavaScript, vous devez ajouter le mot-clé var. Avec CoffeeScript, ce mot-clé a disparu et vous pouvez simplement taper la variable et l'affecter à quelque chose. Une autre chose à surveiller est que CoffeeScript utilise beaucoup de méthodes d'indentation pour éviter les points-virgules et que pour que le langage comprenne que la déclaration de la variable est complète, il vous suffit de vous déplacer sur une nouvelle ligne:
age = 21country = "Portugal"En JavaScript, vous devez taper quelque chose comme:
var age = 21;var country = "Portugal";C'est un petit exemple, mais vous pouvez commencer à voir à quel point CoffeeScript est puissant lorsqu'il s'agit de simplifier votre code.
Rappelez-vous tout ce temps passé à mémoriser les opérateurs JavaScript? Rappelez-vous pourquoi vous avez besoin d'utiliser === au lieu de simplement utiliser est? Eh bien CoffeeScript prend également soin de cela. Il offre de très bons alias pour les opérateurs:
Une autre chose dont CoffeeScript se débarrasse est les accolades. Il utilise la méthode d'indentation pour déclarer quand vous êtes à l'intérieur d'une instruction, si les instructions fonctionnent comme JavaScript mais que vous n'avez pas besoin des accolades ou des parenthèses; il suffit d'indenter le code que vous souhaitez exécuter lorsque l'instruction est vraie:
if work > 24 and sleep < 8vacations()elsework()compilera en JavaScript comme:
if (work > 24 && sleep < 8) {vacations();} else {work();}J'espère que vous commencez à voir les avantages de CoffeeScript avec ces simples démonstrations de la propreté de votre code et de son code plus propre.
Faire défiler des tableaux est l'une des choses que vous devez faire dans toutes les applications JavaScript que vous écrivez et la syntaxe pour les parcourir en JavaScript n'est ni la plus simple ni la plus propre. Pour parcourir un tableau, nous utilisons une boucle for..in, comme ceci:
tasks = ['Design','Code','Groceries']for task in tasksalert taskTout ce que ce morceau de code va faire est de lire toutes les choses dans le tableau et ensuite alerter puis un par un, juste pour rendre les choses encore plus simples, vous pouvez même écrire la boucle for ... in dans une ligne, comme ceci:
tasks = ['Design','Code','Groceries']alert task for task in tasksIl est tout simplement beaucoup plus lisible et maintenable que le JavaScript vanille, en parlant de ce que le code produit par CoffeeScript pour ces deux lignes serait:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}Bien que les boucles soient également très utiles lors de la construction de votre application JavaScript, CoffeeScript ne manque pas non plus pour faciliter la lecture et l'écriture, par exemple:
while sleep < 8sleep()Ou vous pouvez tout écrire sur une seule ligne si vous préférez:
while sleep < 8 then sleep()Ou:
sleep() until sleep > 8En JavaScript pur, cela se traduirait par:
//thenwhile (sleep < 8) {sleep();}Ou:
//untilwhile (!(sleep > 8)) {sleep();}Les fonctions sont également une autre partie essentielle de tout langage de programmation et même si les fonctions en JavaScript ne sont pas aussi compliquées que certaines autres pièces, CoffeeScript simplifie également cette fonction, une fonction simple qui prend le nom de quelqu'un :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Tout ce que vous faites est de nommer la fonction, dans ce cas les fonctions s'appellent sayHi, et après le signe égal, vous devez spécifier les paramètres. Ici, nom est le seul paramètre, après avoir défini la base de notre fonction, nous devons taper -> suivi à la ligne suivante par ce que nous voulons que la fonction fasse pour que CoffeeScript sache que nous sommes dans la fonction. Dans ce cas, tout ce que je veux c'est renvoyer "Hello" puis le nom de la personne et enfin j'utilise une simple alerte pour appeler la fonction avec le nom. Nous pouvons également écrire ceci dans une ligne en éliminant l'entrée et l'indentation simplement en écrivant ce que la fonction fera après le ->:
sayHi = (name) -> return "Hello " + nameCe petit extrait de code sera compilé dans le code JavaScript suivant:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Bien sûr, c'était une fonction très simple mais comme vous pouvez le voir, nous avons enregistré 3 lignes de code et bien sûr, dans le JavaScript, nous pouvions simplement nommer la variable comme nous le déclarons comme suit:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Les exemples que j'ai donnés ici correspondent à ce que compile CoffeeScript et même si, dans la plupart des cas, il existe des moyens plus simples pour taper quelque chose, tout le code JavaScript compilé est valide et sémantique.
Ce n'est que le début de ce que CoffeeScript peut vous donner, lorsque les choses commencent à devenir plus complexes, ce petit langage vous donnera beaucoup d’effet par rapport à JavaScript, moins de code à écrire, plus de code lisible et plus facile à maintenir. , de sorte que vous pouvez revenir sur un site Web un an plus tard et savoir ce qui se passe dans ce JavaScript.
Restez à l'écoute de la deuxième partie de cette série où je vais vous montrer comment combiner CoffeeScript avec jQuery et LocalStorage afin de créer une application de liste de contacts simple.
Avez-vous utilisé CoffeeScript pour simplifier JavaScript? Quelles parties de CoffeeScript préférez-vous en Javascript? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image de café via Shutterstock.