CoffeeScript, sen kocaman bir çılgınsın

01/07/2012

Yaklaşık üç haftadır Play! Framework 1.2.x için Joosy benzeri bir front-end framework geliştirmeye çalışıyorum. Joosy tamamen CoffeeScript ile geliştirilmiş ve bir süredir hayal ettiğim tüm özelliklere sahip bir framework. Bu sebeple bu projenin hem fikirlerinden hem de kodlarından faydalanmaya çalışıyorum. Dolayısıyla daha önce yalnızca göz gezdirmiş olduğum CoffeeScript ile bu kadar yakınlaşmamın sebebi Joosy oldu diyebilirim.

CoffeeScript, derlenerek JavaScript diline dönüştürülen küçük bir programlama dili. Bu sebeple JavaScript ile aynı projede birlikte yaşayabiliyor. Örnek olarak jQuery kütüphanesini CoffeeScript ile de rahatlıkla kullanabiliyoruz. Durum böyle iken ve JavaScript gibi güzel bir programlama dili varken CoffeeScript neden var sorusu ister istemez akla geliyor. Geliştiriciler arasında da bu konuda önemli tartışmalar dönmekte. CoffeeScript'in temel varlık nedeni geliştirici verimliliğidir diyebilirim. JavaScript'in görece karmaşık syntax'ına karşılık CoffeeScript çok daha temiz bir syntax sunuyor. JavaScript bilen biri için öğrenme süresi 4-5 saatten fazla değil.

Bir JavaScript Ninja olmasam da ortalamanın üzerinde JavaScript bilgisine sahibim. JavaScript'in geliştiriciyi zorladığı noktaları biliyor olmamın CoffeeScript ile aramızdaki sevgiyi artırdığını düşünüyorum. Bu sebeple CoffeeScript öğrenmek isteyen birinin öncelikle iyi derecede JavaScript biliyor olması gerektiğini savunuyorum. Örnek olarak CoffeeScript içinde gelen class keyword'ünün ne büyük nimet olduğunu anlamak için bence JavaScript ile prototyping işleri ile uğraşmış ve zorlanmış olmak gerekiyor.

CoffeeScript hakkında önbilgi verdikten sonra CoffeeScript'in en sevdiğim özelliklerinden bahsetmek istiyorum. Her maddede önce CoffeeScript kodunu, sonra da karşılaştırma amacıyla derlendiği JavaScript kodunu vereceğim.

1. CoffeeScript ile değişken tanımlaması için var keyword'üne ihtiyaç bulunmuyor.
   
   CoffeeScript

   degisken = yes
   sayi = 1

   JavaScript

   var degisken, sayi;
   degisken = true;
   sayi = 1;

2. Fonksiyon tanımı çok yalın olduğundan özellikle jQuery callback'lerinde büyük kolaylık sağlıyor.
   
   CoffeeScript

   kare = (a) -> 
    a * a

   JavaScript

   var kare;
   
   kare = function(a) {
     return a * a;
   };

3. Nesne tanımlamak için gereken kod daha kısa ve anlaşılır.
   
   CoffeeScript

   kids =
     brother:
       name: "Max"
       age:  11
     sister:
       name: "Ida"
       age:  9

   JavaScript

   var kids;
   
   kids = {
     brother: {
       name: "Max",
       age: 11
     },
     sister: {
       name: "Ida",
       age: 9
     }
   };

4. ForEach ya da select/filter işlemleri tek satır ile gerçeklenebiliyor.
   
   CoffeeScript

   icecekler = ['bira', 'cola', 'rakı']
   alkolluler = (icecek for icecek in icecekler when icecek isnt 'cola')

   JavaScript

   var alkolluler, icecek, icecekler;
   
   icecekler = ['bira', 'cola', 'rakı'];
   
   alkolluler = (function() {
     var _i, _len, _results;
     _results = [];
     for (_i = 0, _len = icecekler.length; _i < _len; _i++) {
       icecek = icecekler[_i];
       if (icecek !== 'cola') {
         _results.push(icecek);
       }
     }
     return _results;
   })();

5. Bir değişkenin varlık kontrolü basit görünse de genelde çok baş ağrıtır. CoffeeScript bu sorunu da kolayca çözüyor.
   
   CoffeeScript

   keyif = true if raki? and meze?
   
   kadeh = 0
   kadeh ?= 4
   
   marka = yasuzum ? "yeni rakı"
   
   fasil?.beyhudeGectiOmrum()

   JavaScript

   var kadeh, keyif, marka;
   
   if ((typeof raki !== "undefined" && raki !== null) 
     && (typeof meze !== "undefined" && meze !== null)) {
     keyif = true;
   }
   
   kadeh = 0;
   
   if (kadeh == null) {
     kadeh = 4;
   }
   
   marka = typeof yasuzum !== "undefined" && yasuzum !== null ? yasuzum : "yeni rakı";
   
   if (typeof fasil !== "undefined" && fasil !== null) {
     fasil.beyhudeGectiOmrum();
   }

6. Bir değişken ve string'in değerini birleştirmek CoffeeScript ile çok daha kolay.
   
   CoffeeScript

   yazar = "Fehmi Can Sağlam"
   yil = 2004
   kitap = "Bensiz ve Mutlu Kal. Yazar: #{yazar}. Yayın yılı: #{yil}"

   JavaScript

   var kitap, yazar, yil;
   
   yazar = "Fehmi Can Sağlam";
   
   yil = 2004;
   
   kitap = "Bensiz ve Mutlu Kal. Yazar: " + yazar + ". Yayın yılı: " + yil;

7. Ve belki de CoffeeScript'in en güçlü olduğu nokta: Sınıflar ve miras alma.
   
   CoffeeScript

   class Animal
     constructor: (@name) ->
   
     move: (meters) ->
       alert @name + " moved #{meters}m."
   
   class Snake extends Animal
     move: ->
       alert "Slithering..."
       super 5
   
   sam = new Snake "Sammy the Python"
   sam.move()

   JavaScript

   var Animal, Snake, sam,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
   
   Animal = (function() {
   
     function Animal(name) {
       this.name = name;
     }
   
     Animal.prototype.move = function(meters) {
       return alert(this.name + (" moved " + meters + "m."));
     };
   
     return Animal;
   
   })();
   
   Snake = (function(_super) {
   
     __extends(Snake, _super);
   
     function Snake() {
       return Snake.__super__.constructor.apply(this, arguments);
     }
   
     Snake.prototype.move = function() {
       alert("Slithering...");
       return Snake.__super__.move.call(this, 5);
     };
   
     return Snake;
   
   })(Animal);
   
   sam = new Snake("Sammy the Python");
   
   sam.move();

Paylaştığım başlıklar CoffeeScript'in bana göre en önemli özelliklerini barındırıyor. Daha fazlası için CoffeeScript resmi sitesi oldukça güzel bir arayüz sunuyor. CoffeeScript konusundaki yorumlarınızı merakla bekliyorum.

Follow me on Twitter