⬆️ ⬇️

Coffeescript. And again about him. A summary of the amenities

CoffeeScript is, so to speak, a high-level language that converts to JavaScript.



Founded by a simple guy named Jeremy Ashkenas with the support of his homies, which are mentioned on github . Inspired by Ruby, the boy decided to make life easier for all of us and created it! CoffeeScript!





')

Goals





The purpose and purpose of this language is to eliminate the headache of a developer using JavaScript. Everyone who is familiar with JavaScript knows how difficult it is to maintain fast-growing code with a lot of magic like inheritance, passing the context of an object to callback methods, and much, much more. And those who have the nerve to write a multi-page native code with a breakdown into classes that use the JavaScript-based prototypical inheritance, can happily shoot themselves, since what they did was nail the fish with rotten fish :). Hey, dudes, in CoffeeScript this is done easily and simply:



  1. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  2. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  3. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  4. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  5. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  6. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  7. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  8. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  9. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  10. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  11. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  12. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  13. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  14. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  15. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  16. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  17. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  18. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  19. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()
  20. class Animal name: "animal" move: (meters) -> alert (@name + " moved " + meters + "m." ) class Snake extends Animal constructor: (name) -> @name: name move: -> alert ( "Slithering..." ) super ( 5 ) class Horse extends Animal constructor: (name) -> @name: name move: -> alert ( "Galloping..." ) super ( 45 ) sam: new Snake ( "Sammy the Python" ) tom: new Horse ( "Tommy the Palomino" ) sam.move() tom.move()




We can even not worry (until the moment when it will be necessary to podbezhagit) about what CoffeeScript has signed a contract with Vizenim, but just to be sure that we will get the native high-speed code at the output:



  1. ( function () {
  2. var Animal, Horse, Snake, sam, tom;
  3. var __extends = function (child, parent) {
  4. var ctor = function () {};
  5. ctor.prototype = parent.prototype;
  6. child .__ superClass__ = parent.prototype;
  7. child.prototype = new ctor ();
  8. child.prototype.constructor = child;
  9. };
  10. Animal = function () {};
  11. Animal.prototype.move = function (meters) {
  12. return alert ( this .name + "moved" + meters + "m." );
  13. };
  14. Snake = function (name) {
  15. this .name = name;
  16. return this ;
  17. };
  18. __extends (Snake, Animal);
  19. Snake.prototype.move = function () {
  20. alert ( "Slithering ..." );
  21. return Snake .__ superClass __. move.call ( this , 5 );
  22. };
  23. Horse = function (name) {
  24. this .name = name;
  25. return this ;
  26. };
  27. __extends (Horse, Animal);
  28. Horse.prototype.move = function () {
  29. alert ( "Galloping ..." );
  30. return Horse .__ superClass __. move.call ( this , 45 );
  31. };
  32. sam = new Snake ( "Sammy the Python" );
  33. tom = new Horse ( "Tommy the Palomino" );
  34. sam.move ();
  35. tom.move ();
  36. }) ();




And do not worry about name conflicts, since everything is done in your environment. But if it is necessary to “share” a class or a variable from such a “package”, it is worth nothing to assign a reference to them to a variable in the global namespace.



About the documentation.





Read in English about how to use CoffeeScript here . In my opinion, everything is described and available with examples.



Features





All coffee scripts are “brewed” in their coffee maker so as not to “spoil” other coffee scripts. Personally, I think this is right.



Short lambda is just super. And also, that I really liked it, so this is the transfer of context to callback handlers:



  1. class Data
  2. manyData: null
  3. constructor: ->
  4. deferred: new Deferred ()
  5. @initData (deferred)
  6. SomeClass.fillData (deferred)
  7. initData: (deferred) ->
  8. deferred.addCallback: (data) =>
  9. @manyData: data
  10. deferred.addCallback: (error) ->
  11. alert (error.name + ":" + error.message)
  12. new Data ()




At the exit:




  1. var Data;
  2. Data = function () {
  3. var deferred;
  4. deferred = new Deferred ();
  5. this .initData (deferred);
  6. SomeClass.fillData (deferred);
  7. return this ;
  8. };
  9. Data.prototype.manyData = null ;
  10. Data.prototype.initData = function (deferred) {
  11. deferred.addCallback = ( function (__this) {
  12. var __func = function (data) {
  13. this .manyData = data;
  14. return this .manyData;
  15. };
  16. return ( function () {
  17. return __func.apply (__ this, arguments);
  18. });
  19. }) ( this );
  20. deferred.addCallback = function (error) {
  21. return alert (error.name + ":" + error.message);
  22. };
  23. return deferred.addCallback;
  24. };
  25. new Data ();




Agree that the code for coffee looks more than adequate.



Now you don’t have to worry about declaring variables with var , and forget about the word function - they are forbidden in CoffeeScript. But if you need to embed plain javascript into your CoffeeScript sources, simply wrap them in ` ` characters:



  1. hi: `function () {
  2. return [document.title, "Hello JavaScript" ] .join ( ":" );
  3. } `
  4. `var getSomeValue = function () {...}`




As a result:




  1. var hi;
  2. hi = function () {
  3. return [document.title, "Hello JavaScript" ] .join ( ":" );
  4. };
  5. var getSomeValue = function () {...};




But this, I think, may be needed only in extreme cases of despair.



Chips





CoffeeScript has access to all sorts of language constructs, unfortunately not in Native JavaScript, and I’ll give you a few examples taken from the project site.



CoffeeScript




  1. cholesterol: 127
  2. healthy: 200 > cholesterol> 60




Javascript




  1. var cholesterol, healthy;
  2. cholesterol = 127 ;
  3. healthy = ( 200 > cholesterol) && (cholesterol> 60 );




CoffeeScript




  1. theBait: 1000
  2. theSwitch: 0
  3. [theBait, theSwitch]: [theSwitch, theBait]




Javascript




  1. var _a, theBait, theSwitch;
  2. theBait = 1000 ;
  3. theSwitch = 0 ;
  4. _a = [theSwitch, theBait];
  5. theBait = _a [ 0 ];
  6. theSwitch = _a [ 1 ];




CoffeeScript




  1. numbers: [ 0 .. 9 ]
  2. threeToSix: numbers [ 3 .. 6 ]
  3. copy: numbers [ 0 ... numbers.length]




Javascript




  1. var copy, numbers, threeToSix;
  2. numbers = ( function () {
  3. a = []; for ( var i = 0 ; ( 0 <= 9 ? i <= 9 : i> = 9 ); ( 0 <= 9 ? i + = 1 : i - = 1 )) a.push (i);
  4. return a;
  5. }). call ( this );
  6. threeToSix = numbers.slice ( 3 , 6 + 1 );
  7. copy = numbers.slice ( 0 , numbers.length);




CoffeeScript




  1. yearsOld: {max: 10 , ida: 9 , tim: 11 }
  2. ages: for child, age of yearsOld
  3. child + "is" + age




Javascript




  1. var _a, _b, age, ages, child, yearsOld;
  2. var __hasProp = Object.prototype.hasOwnProperty;
  3. yearsOld = {
  4. max: 10 ,
  5. ida: 9 ,
  6. tim: 11
  7. };
  8. ages = ( function () {
  9. _a = []; _b = yearsOld;
  10. for (child in _b) { if (__hasProp.call (_b, child)) {
  11. age = _b [child];
  12. _a.push (child + "is" + age);
  13. }}
  14. return _a;
  15. }) ();




CoffeeScript




  1. years: [ 2000 .. 2010 ]
  2. for year in years
  3. "year is" + year




Javascript




  1. var _a, _b, _c, year, years;
  2. years = ( function () {
  3. a = []; for ( var i = 2000 ; ( 2000 <= 2010 ? i <= 2010 : i> = 2010 ); ( 2000 <= 2010 ? i + = 1 : i - = 1 )) a.push (i);
  4. return a;
  5. }). call ( this );
  6. _b = years;
  7. for (_a = 0 , _c = _b.length; _a <_c; _a ++) {
  8. year = _b [_a];
  9. "year is" + year;
  10. }




Summary





For full development, of course, there are not enough common plug-ins for highlighting and autocompletion, but if you do not take into account these temporary difficulties, CoffeeScript essentially clearly simplifies writing complex JavaScript applications.



A huge plus of CoffeeScript is that we have the ability to write easily complex code, which at runtime does not require the connection of various libraries emulating classical classes and some implementations of ecma standards that everyone can agree will significantly increase the speed of the scripts.



And the organization of the development mode and deploy'ya everyone will choose to taste, this is not the task in this topic.



Thanks for attention.

Source: https://habr.com/ru/post/97993/



All Articles