Share
Il n'y a pas deux façons de le faire: le secteur du développement Web peut être extrêmement difficile. C’est un projet qui exige que nous nous éduquions continuellement tout au long de notre carrière. Prenez quelques années et soudainement, vous serez submergé par de nouveaux cadres, outils, meilleures pratiques et pré-processeurs. C'est vrai, si on veut être développeur web, il vaut mieux accepter l'idée que votre scolarité ne se terminera jamais (et vous ne devriez pas le vouloir).
CoffeeScript.org devrait naturellement être votre premier arrêt lors de l’apprentissage de CoffeeScript. Sa documentation est fantastique. Une fois que nous reconnaissons qu’un certain pourcentage de chaque semaine devrait être consacré à l’affinement de nos compétences et à l’apprentissage de nouvelles choses, il est extrêmement important de déterminer dans quoi investir notre temps. Il semble que tous les jours, de nouvelles bibliothèques ou de nouveaux outils soient mis à la disposition du public. Mais cela ne signifie pas que nous devrions jeter la prudence (et le temps) au vent, et les adopter tous; pas du tout. Il faut certes garder un esprit curieux, mais un scepticisme sain est primordial.
Inévitablement, cependant, certains outils sautent rapidement au sommet de la liste des «nouveaux et brillants».
Ce sont ces types qui ont le potentiel de redéfinir la manière dont nous construisons le Web. jQuery a redéfini la manière dont nous interrogeons et travaillons avec le DOM. Backbone.js aide les développeurs à transformer leur code spaghetti en modules bien structurés et maintenables. Et, juste peut-être, CoffeeScript va réinventer la façon dont nous écrivons notre code JavaScript.
Un seul problème: CoffeeScript n'ajoute rien de nouveau au langage JavaScript. il propose simplement une syntaxe améliorée (beaucoup diraient drastiquement améliorée), qui est finalement compilée en JavaScript classique. Notre dilemme est donc le suivant: dans un environnement qui nous oblige déjà à apprendre un nombre incalculable de langages, de techniques et de modèles, vaut-il vraiment la peine d'investir du temps pour apprendre un autre pré-processeur? Eh bien, alors que la réponse à cette question peut certainement être débattue, dans l'opinion de cet auteur, vous devriez absolument creuser!
Il est possible que ce soit la première fois que vous avez entendu parler de CoffeeScript. Si c'est le cas, ne vous inquiétez pas; il vient tout juste de commencer à vraiment prendre de la vitesse dans la communauté du développement.
Fondamentalement, CoffeeScript, créé par Jeremy Ashkenas, transforme ce que certains appellent «du mauvais JavaScript» en un code propre et succinct. Il n'augmente pas les fonctionnalités du langage JavaScript. il ne fait que superposer une syntaxe plus belle.
La meilleure façon de démontrer ce que propose CoffeeScript est de parcourir la syntaxe..
L'onglet «Try CoffeeScript» de CoffeeScript.org propose une compilation en temps réel. c'est un excellent moyen de jouer avec la syntaxe.) Si vous souhaitez simplement jouer avec la syntaxe, visitez CoffeeScript.org, puis cliquez sur l'onglet “Try CoffeeScript”. D'autre part, si vous souhaitez installer CoffeeScript localement, assurez-vous que des copies à jour des fichiers Node.js et npm (Node Package Manager) sont installées sur votre système. Ne t'inquiète pas c'est facile.
Ensuite, CoffeeScript peut être installé à partir de la ligne de commande:
npm install -g coffee-script
C'est tout! Vous êtes prêt à partir. À regarder un fichier, script.café, et le compiler pour script.js chaque fois que le fichier est enregistré, dans la ligne de commande, accédez à la racine de votre projet et tapez:
café --watch --compile script.coffee
En outre, de nombreux éditeurs, tels que TextMate et Sublime Text 2, proposent des ensembles qui transforment ce processus de création en un simple trait de clé. Vous pouvez également consulter des applications, telles que LiveReload et CodeKit, qui gèreront automatiquement la tâche «Regarder et compiler»..
LiveReload automatise le processus de visualisation et de compilation des fichiers CoffeeScript.) Considérez l'extrait de code suivant:
var foo = 'bar'; var bar = 'baz';
Dans CoffeeScript, var ne devrait jamais être utilisé; en fait, le moteur émettra une erreur si vous essayez de le faire. Au lieu de cela, toutes les variables sont automatiquement déclarées dans la portée actuelle, ce qui signifie que nous n’avons plus à nous soucier de la création accidentelle de mauvaises variables globales..
Le code ci-dessus peut être réécrit comme suit:
foo = 'bar' bar = 'baz'
Lorsque le code est finalement compilé en JavaScript normal, les deux noms de variable sont déclarés en haut de la portée de la fonction, puis affectés en conséquence, comme suit:
var bar, foo; foo = 'bar'; bar = 'baz';
Beaucoup de développeurs JavaScript détestent le fait que toutes les expressions doivent se terminer par un point-virgule..
var foo = 'bar';
Techniquement, vous constaterez que, souvent, vous pouvez vous en sortir en laissant des points-virgules; mais, néanmoins, cette approche a des pièges à éviter, et il a été jugé recommandé de toujours les inclure pour une assurance maximale..
En CoffeeScript, cependant, nous pouvons leur dire au revoir pour toujours. En tant que tel, l'extrait de code précédent peut être modifié pour:
foo = 'bar'
En prenant des indices supplémentaires dans des langages comme Ruby, dans CoffeeScript, les parenthèses peuvent souvent être omises. Cela transforme le code JavaScript traditionnel, tel que:
if (suppose === 10) résultat = 'correct';
dans:
si devinez == 10 résultat = 'correct'
Mieux encore, nous pouvons être plus succincts en utilisant un modificateur d'instruction:
résultat = 'correct' si devinez == 10
Beaucoup plus propre et lisible, hein? "Ensemble résultat "corriger" si le deviner variable est égale à 10. “Excellent!
Veuillez noter que CoffeeScript compile tous les
==dans la version d'égalité stricte,===, comme recommandé par des outils, comme JS Lint.
Vous constaterez rapidement que dans CoffeeScript, le même bloc de code peut être réécrit de différentes manières. Bien que vous puissiez les ignorer, les alias permettent des comparaisons plus lisibles par l'homme. Les regroupements suivants sont identiques en termes de fonctionnalité et de compilation.
// lancement égalité == le lancement 'go' est 'go' // lancement instable! = le lancement 'go' n'est pas 'go' // ne retourne pas false si! goForFlight renvoie false si pas goForFlight renvoie false à moins que goForFlight // true renvoie true return on return oui // false return false return off return no return // et goForFlight && launch () goForFlight et launch () // ou goForFlight || prepare () goForFlight ou prepare ()
Les fonctions constituent un domaine clé dans lequel la syntaxe est considérablement différente de JavaScript. Une fonction traditionnelle qui détermine s'il s'agit du jour de paye - ou du vendredi - pourrait ressembler à:
var payDay = function () renvoie new Date (). getDay () === 5; // est-ce vendredi?
Pour tenter de nettoyer le fouillis, avec CoffeeScript, cette fonction peut être réécrite comme suit:
payDay = -> new Date (). getDay () == 5
Alternativement, nous pouvons placer le bit de code entier sur une seule ligne.
payDay = -> new Date (). getDay () == 5
Il y a deux choses essentielles à noter ici:
Accentsconagua
une fonction() a été remplacé par ->.revenir le mot clé peut être supprimé dans ce cas particulier.Tous les arguments applicables doivent être placés entre parenthèses, avant la ->. Peut-être que le jour de paye est jeudi; si oui, la fonction peut être modifiée pour être plus flexible.
payDay = (day) -> new Date (). getDay () == day
Mais que se passe-t-il si nous voulons attribuer un jour de paye par défaut du vendredi (ou du 5)? En JavaScript normal, nous ferions probablement:
var payDay = fonction (jour) jour || (jour = 5); renvoie la nouvelle Date (). getDay () === jour;
Avec CoffeeScript, d’autre part, nous pouvons raccourcir considérablement cette.
jour de paye = (jour = 5) -> nouvelle date (). getDay () == jour
Chouette!
Un objet JavaScript typique peut être considérablement nettoyé dans CoffeeScript. Considérer ce qui suit:
var personne = jambes: 2, mains: 2, doigts: 10
CoffeeScript nous permet de supprimer le var mot-clé, ainsi que les accolades et les virgules. Sur une seule ligne, cependant, des virgules sont toujours obligatoires..
personne = jambes: 2, mains: 2, doigts: 10
Cependant, si nous plaçons chaque propriété sur sa propre ligne, elles peuvent être omises. La même chose est vraie pour les tableaux.
personne = jambes: 2 mains: 2 doigts: 10
Important: parce que CoffeeScript dépend des espaces, même une ligne indentée de manière incorrecte peut modifier radicalement la manière dont le code est compilé en JavaScript.
La compréhension nous permet de transformer facilement dix lignes de code en quelques-unes. C'est essentiellement un moyen de créer des expressions à parcourir sur un ensemble d'éléments fourni dans un tableau ou un objet.
Par exemple, plutôt que d’utiliser le type pour déclaration - et la "mise en cache" qui accompagne l'itération sur un tableau - nous pouvons utiliser à la place pour dans.
Imaginons qu'il faille parcourir plusieurs caractères. Avec JavaScript traditionnel, nous pourrions faire:
var caractères = ['Marty', 'Doc', 'Biff']; pour (var i = 0, len = caractères.longueur; i < len; i++ ) console.log("Get %s to the time machine", characters[i]); Ce n'est certainement pas joli; mais si nous utilisons plutôt CoffeeScript, cela peut être beau.
caractères = ['Marty', 'Doc', 'Biff'] pour la personne dans les caractères console.log "Obtenez% s à la machine à remonter le temps", personne
Est-ce que ça ne me fait pas plaisir d'écrire? Sûrement, je ne peux pas être le seul!
Comme vous le verrez bientôt, nous pouvons même utiliser l'interpolation de chaînes pour améliorer le code - mais je prends de l'avance..
Il y a cependant un problème: nous avons par inadvertance dirigé Biff vers la machine à remonter le temps, ce qui n'est pas une bonne idée. Modifions le code pour spécifier qu'il ne devrait enregistrer la chaîne dans la console que si la personne en cours dans le tableau n'est pas Coup de poing. Dans CoffeeScript, si nous exploitons les filtres, c'est un jeu d'enfant.
caractères = ['Marty', 'Doc', 'Biff'] pour une personne en caractères quand personne n'est pas 'Biff' console.log "Obtenez% s à la machine à remonter le temps", personne
Oui; le remède nécessitait au total quatre mots lisibles par l'homme.
Maintenant, si nous le souhaitons, nous pouvons rendre ces boucles plus lisibles en utilisant la compréhension par liste. Pour faire une boucle à travers le personnages tableau et connectez le nom de chaque personne à la console:
console.log personne pour personne en caractères
Ou, comme autre exemple, récupérer toutes les balises d'ancrage de la page (à l'aide de la méthode jQuery carte méthode), stocker chaque ancre href Dans un tableau, et enfin, parcourez ce tableau et enregistrez les valeurs dans la console, avec du JavaScript normal, nous ferions:
var links = $ ('a'). map (function () return this.href;); console.log (links.join (',')); Avec CoffeeScript, cependant, nous avons de meilleurs choix:
console.log (lien pour le lien dans $ ('a'). map -> @href) .join ',' Comme dernier exemple, si nous avions un tableau d'objets personne:
personnes = [nom: 'Jeffrey' âge: 27 ans, nom: 'John' âge: 13 ans, nom: 'Jan' âge: 42 ans]
Notre travail consiste à créer un nouveau tableau, appelé de l'âge, et faites-la correspondre à une liste d'objets uniquement, où la personne a 21 ans ou plus. Encore une fois, avec du JavaScript vanille régulier, nous pourrions faire:
var ofAge = []; pour (var i = 0, len = people.length; i < len; i++ ) if ( people[i].age >= 21) ofAge.push (personnes [i]);
Oui, c'est assez bavard pour une tâche aussi simple. Avec CoffeeScript, réduisons cela à une seule ligne, en utilisant la compréhension.
ofAge = (p pour p chez les personnes quand p.age> = 21)
Bam! En encapsulant tout ce qui se produit après le signe égal entre parenthèses, nous spécifions que le de l'âge variable doit être égal aux résultats de cette opération, qui sera un tableau. Donc, le tableau sera construit, puis assigné à de l'âge. Lorsque confus, lisez simplement l'expression de gauche à droite. "Poussez l'objet personne vers le résultats tableau, pour chaque la personne dans le personnes tableau… aussi longtemps que la personne est âge propriété est supérieure ou égale à 21. "Le quand mot-clé s'appelle un filtre et peut être incroyablement puissant. Admettez-le: vous commencez à saliver.
Dans la section précédente, nous avons utilisé une méthode assez typique pour lier une variable à une chaîne.
console.log "Obtenez% personne à la machine à remonter le temps", personne
Semblable aux langages, comme Ruby, CoffeeScript offre une interpolation de chaîne, via le # syntaxe. Ce code peut être réécrit, comme suit:
console.log "Obtenez # personne à la machine temporelle"
Veuillez noter que, comme dans la plupart des langues, pour tirer parti de l’interpolation de chaîne, vous devez utiliser des guillemets doubles, plutôt que des guillemets simples..
Considérez la tâche assez commune de mettre en cache une référence à ce, ainsi, lorsque le contexte change - par exemple dans le rappel d'une liaison d'événement jQuery - nous pouvons toujours accéder à l'emplacement mis en cache. Voici un exemple:
var self = this; $ ('h1'). on ('click', function () // 'this' fait maintenant référence à l'ancre sur laquelle on a cliqué // utilise self à la place de self.someMethod ();); CoffeeScript fournit la “grosse flèche”, ou =>, qui peut être d'une aide considérable. Si on change -> à =>, dans les coulisses, CoffeeScript mettra en cache une référence à ce. Ensuite, dans la fonction, toutes les références à ce sera dynamiquement remplacé par la version en cache.
Pour illustrer cette idée, le code suivant:
$ ('h1'). sur 'clic', => this.someMethod () … Va compiler pour:
var _this = this; $ ('h1'). on ('click', function () return _this.someMethod ();); CoffeeScript fournit un utile classe syntaxe, pour ceux qui préfèrent une approche plus classique de la structuration de leur code. Par exemple, en tapant simplement classe personne, CoffeeScript compilera ce code pour:
var personne; Person = (function () function Person () return Person;) ();
Remarquez comment La personne variable est égale à une expression de fonction invoquant auto qui retourne le intérieure La personne une fonction. Devrions-nous avoir besoin d'exécuter un peu de code immédiatement après l'instanciation, semblable à PHP __construction méthode, nous pouvons placer notre init code dans le constructeur méthode du classe, ainsi:
constructeur de classe personne: (nom, âge) -> this.name = nom this.age = age
le constructeur méthode ne peut pas être appelée explicitement; au lieu de cela, il est déclenché dynamiquement lorsque vous instanciez la classe. Ce code peut cependant être amélioré. CoffeeScript fournit du sucre supplémentaire qui peut le raccourcir. Dans CoffeeScript, le @ le symbole fera toujours référence à ce, ou l'instance de La personne. En tant que tel, plutôt que cet age, nous pouvons plutôt utiliser @âge, quels développeurs Ruby seront familiers. Le code ci-dessus peut être réécrit comme suit:
classe Person constructeur: (nom, âge) -> @name = nom @age = age
Mieux encore, nous pouvons faire avancer les choses. Ces variables d'instance peuvent être définies d'une manière différente:
classe Person constructeur: (@name, @age) ->
Pas mal, hein? À ce stade, pour prolonger La personneAvec le prototype de méthodes supplémentaires, nous créons simplement de nouvelles méthodes, de la même manière que nous ajoutions des méthodes à un objet. Dans les coulisses, CoffeeScript associera la méthode au prototype. Ajoutons une méthode qui détermine l'année de naissance de la personne.
Constructeur de classe Person: (@name, @age) -> getBirthYear: -> new Date (). getFullYear () - @age
Ce beau code propre, une fois compilé en JavaScript, sera:
var personne; Person = (function () function Person (nom, âge) this.name = nom; this.age = age; Person.prototype.getBirthYear = fonction () retourne la nouvelle date (). GetFullYear () - this. âge;; personne de retour;) ();
Nous avons donc effectivement réduit le nombre de lignes de seize à quatre. Pour instancier cette nouvelle classe, nous pouvons écrire:
man = new Person ('Jeffrey', 27) man.getBirthYear () # 1985 Mieux encore, créer des classes enfants, qui s’étendent La personne, nous avons seulement besoin d'utiliser le étendre mot-clé:
classe Enfant étend Personne
À ce point, Enfant a maintenant accès à toutes les propriétés et méthodes de la La personne classe, et peut les référencer ou les écraser à volonté.
En dépit de tout ce sucre glorieux, il reste encore la question: devrions-nous utiliser CoffeeScript en production? Eh bien, John Q. Reader, cela dépend en grande partie de vous. Il y a des arguments valables pour et contre. Les opposants diront que, comme vous ne travaillez pas spécifiquement avec le code JavaScript compilé, le débogage peut potentiellement devenir une tâche plus difficile. Vous êtes en train de déboguer du code que vous n'avez pas écrit. Cela peut être une lutte.
“Je pense que CoffeeScript est une expérience brillante. CoffeeScript prend les bonnes parties et ajoute une syntaxe minimale, ce qui est magnifique. Je ne recommande pas de l'utiliser en production, car il comporte son propre monde de problèmes. - Douglas Crockford ”
On pourrait également soutenir qu'une trop grande dépendance à des abstractions telles que celle-ci peut amener le développeur à une compréhension moindre de JavaScript, dans son ensemble. Étant donné que le compilateur intègre un grand nombre de meilleures pratiques, il est plus facile pour le développeur de les mémoriser, telles que d'éviter les globales et de lever des variables. Que ce type d’automatisation soit une bonne chose ou non, reste à débattre.
«Une meilleure pratique pouvant être appliquée et générée par un compilateur est meilleure qu'une meilleure qui doit être mémorisée et saisie manuellement à chaque fois.» - Jeremy Ashkenas
Pour se faire l'avocat du diable, on aurait pu en dire autant de jQuery. Est-ce que jQuery encourage une nouvelle génération de développeurs qui n'apprend jamais vraiment le JavaScript vanille? Absolument pas; si quoi que ce soit, il a grandement contribué à la résurgence du langage JavaScript.
Bien que la syntaxe CoffeeScript puisse initialement être plus familière et accueillante pour les développeurs Ruby et Python qui ont peur de JavaScript, elle les encouragera à approfondir le langage sous-jacent..
Pour recueillir davantage d'opinions CoffeeScript auprès de maîtres JavaScript - des deux côtés de la clôture -, reportez-vous à «Si vous apprenez CoffeeScript» dans Nettuts +. ) En fin de compte, CoffeeScript est juste JavaScript. Il offre une belle syntaxe qui se situe au-dessus du langage. Les avantages sont évidents: le code adhère automatiquement aux meilleures pratiques et devient plus court, moins sujet aux erreurs et considérablement plus lisible. Mais, là encore, le débogage, qui peut prendre beaucoup de temps dans le flux de travail d'un développeur, est une préoccupation.
Le choix vous appartient! Quant au tien vraiment, eh bien je ne peux pas imaginer revenir. Je suis tout à fait avec CoffeeScript.
