geri

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

yorumlar Disqus aracılığıyla sunulmaktadır