0,0
рейтинг
28 декабря 2009 в 22:50

Разработка → Coffeescript — Javascript в силе Ruby

Ruby*
CoffeeScript — язык, чтобы писать на JavaScript с более удобным синтаксисом.

Краткий пример на CoffeeScript (с jQuery):
jQuery($ =>
 notified: false
 $('a').click( =>
  if notified
   true
  else
   $('.alert').show()
   false..
 ).
)

Этот код будет транслирован в:
jQuery(function($) {
  var notified = false;
  $('a').click(function() {
    if (notified) {
      return true;
    } else {
      $('.alert').show()
      return false;
    }
  })
})


Введение


JavaScript — отличный язык: хорошая идеология прототипного ООП, отличные виртуальные машины типа V8 и прекрасное будущее короля веб-клиентов. С распространением HTML 5, он начнёт теснить Flash и Silverlight. И недавно JS начали рассматривать и как серверный язык (например, node.js).

Вот только в современном мире синтаксического сахара код JavaScript немного тяжёл. При каждой лямбде неправильно писать длинную строку function() { … }, не хватает switch-when и foreach для массивов1. После Ruby и Python даже скобки вокруг условия в if или обязательные return кажется лишними символами.

Вот бы тот же JavaScript, только с немного другим синтаксисом. И успешные примеры смены синтаксиса у нас есть: Haml и Sass для HTML и CSS, соответственно. Они не скрывают от на вёрстку (как ужасный WebForms), а просто позволяют записывать этот же код с немного другим синтаксисом, но мы постоянно контролируем результат трансляции.

CoffeeScript


CoffeeScript для JavaScript, как Haml для HTML. Позволяет записывать тот же код, немного по другому:
Операторы

У операторов if и while убраны лишние символы:
while a < 20
 a += 1.

А так же есть короткая форма для одной строки
student.passed(exam.subject) if exam.mark > 2

Лямбда

Упрощает синтаксис лямбды. В CoffeeScript, так же как и в Ruby, любая функция возвращает последнее значение.
square: x =>
 x * x.
square(2)

Массивы

Позволяет работать с массивами как в Python:
# В codes будет ['toast', 'cheese', 'wine']
codes: food.toLowerCase() for food in ['Toast', 'Cheese', 'Wine'].
# Выделить чётные ячейки таблицы
highlight(row) for row, i in table if i % 2 == 0.

И позволяет проще получать подстроку или часть массива:
"abcdef"[0..3]

numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
three_to_six: numbers[3..6]
.


Более подробно можно посмотреть на сайте CoffeeScript.

Инструменты


Транслятор CoffeeScript написан на Ruby и распространяется через RubyGems:
gem install coffee-script

С помощью него можно транслировать ваши .coffee файлы в обычный JavaScript-код:
coffee application.coffee

Чтобы не забыть оттранслировать файл и не искать призрачную ошибку, можно указать автоматически транслировать все .coffee файлы при изменении:
coffee -w *.coffee

Установив Narwhal можно экспериментировать с CoffeeScript в интерактивной консоли или выполнять coffee-скрипты вне браузера.

Примечания


1 — В JavaScript 1.6 есть Array#forEach(), а в jQuery есть $.each(), но они работают медленнее и длинная лямбда всё равно их губит.
Андрей «A.I.» Ситник @Iskin
карма
175,5
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (119)

  • 0
    Разбил мне сердцо. Партнёр… :) Щютка
  • +9
    забавно, но в массы не пойдет.
    • 0
      guess what?
      • 0
        лол
        • 0
          Лолищще. Привет из 2013.
          • 0
            :D. Правда ужасные точки из языка всё же убрали :).
            • 0
              Некропостинг — это весело.
              • 0
                Вы даже не представляете насколько!
                • 0
                  Коффи-скрипт, кстати, живее всех живых
                  • 0
                    Ну вообще-то он перешёл в ES6 больше. Но отлично просуществовал, открыв дорогу Babel.
    • 0
      ))))))
      А теперь вы топ пользователь toster.ru/user/Fesor
  • –7
    >С распространением HTML 5, он начнёт теснить Flash и Silverlight
    расплылся в улыбке :D, это ж надо в такое поверить
    • +3
      Ну тут имелось больше, что с HTML 5 Javascript получит больше возможностей в браузере. Например, веб-сокеты и видео, для которых традиционно используется Flash.
      • –13
        HTML никогда не потеснит Silverlight, который ориентирован для бизнеса. Flash, который используется для всего чего только можно. Потому что скорость внедрения изменений в JS в десятки раз меньше.
        • +2
          Бред полнейший. Ни разу ни в одну флешку изменения не вносились быстрее чем за пол дня. Нужно найти исходники, человека, который разбирается, перекомпилировать, залить. Даже если это простое изменение шрифта.

          Об интеграции я молчу. Для интеграции флешки с контентом всего остального сайта нужно делать огромную работу. HTML не надо интегрировать, его можно генерировать сразу такой, какой нужно.
          • 0
            Я говорю не о изменении кода, а о изменениях в технологии.
        • 0
          Бред! Привет из 2013.
          • 0
            Да я вижу ты крут писать 4 года спустя
      • +1
        плюс еще появился canvas!
  • +7
    Читаемость кода хуже.
    Другой програмист не знакомый Coffeescript не разберется.
    PS. Или привычка
    • 0
      Ну, например, для Ruby программистов только проще. Так что в Ruby on Rails проекте проблем с читаемостью не будет.
      • +2
        Ой не факт. Одно присвоение через ":" и python-like циклы чего только стоят.
        • –1
          Присвоение через: действительно странно (хотя мне нравится единством с синтаксисом хеша), но его можно заменить на =. А Python-like циклы говорят очень удобны :), но можно их не писать, а использовать Array#forEach и Array#map из JS 1.6.
          • 0
            Возможно и удобны, для программистов на python :) После руби-кода глаз сильно «цепляется» (лучшего слова для описания ощущения не нашел) за них. Мне больше нравится подход prototype'а с его each, map, и т.п. Он-то как раз ближе всего к руби, как мне кажется.
            • 0
              Мне тоже такой подход больше нравится :). В качестве небольшой защиты Pythin-like циклов могу заметить, что они быстрее :). Но вообще это конечно фишка Python’а — расширяться за введения новых возможностей в язык, а не использование гибкости уже существующего синтаксиса (чего только аннотации стоят) :).
      • +1
        Отлично! Теперь любой Ruby программист без труда разберется в JS, который, возможно, он в первый раз в жизни видит. Зато нормальный JS программист застрелится от такого. Кому это нужно?
      • 0
        Будут
  • +6
    Боже какой бред!
    Над синтаксисом языка работают десятки профессоров, которые целыми днями сидят и дискутируют о тех или иных аспектах синтаксиса… Но нет, найдется какой-то умник, который решит, что они мудаки, и напишет свой ненужный транслятор.
    • +2
      Взгляды на синтаксис тоже постоянно меняются. Мы же не пишем на COBOL потому что его разработали те же десятки профессоров.
      • +1
        Да, синтаксис меняется. Однако это эволюционное развитие, а не попытка «переписать все по новому».
        • 0
          Тут тоже изменения не коренные. Код транслируется явно. Сам синтаксис — не более чем заимствование уже проверенных хороших идей из Ruby и Python.
        • +3
          https://developer.mozilla.org/en/New_in_Javascript_1.8
          (Почемуто у меня Хабр с тегами не хочет дружить.)
          • 0
            Да, очень хорошо, что JS развивается, но даже в версии 1.8 лямбда слишком длинна для её массовым применения (особенно чувствуется в jQuery).
          • 0
            Генераторы!!111
    • 0
      Это какие над JS работали, поимённо?
  • +3
    > Coffeescript — язык, чтобы писать на Javascript с более удобным синтаксисом.
    Карандаш — палка, чтобы писать на бумаге с более отчётливым следом.
  • +3
    И недавно JS начали рассматривать и как серверный язык
    недавно, в 1996 году :)
    • +1
      Не знал, спасибо. Но недавно появилась вторая волна из-за ВМ нового поколения.
  • 0
    >Coffeescript — язык
    >Javascript с более удобным синтаксисом

    >После Ruby и Python даже скобки вокруг условия в if или обязательные return кажется лишними символами.
    >Вот бы тот же Javascript, только с немного другим синтаксисом.

    ололо
  • 0
    Программа не должна быстра писаться, она должна быстро читаться.
    • 0
      Верно, но Coffeescript настолько же читаем, как и Javascript. Просто у него другой синтаксис, как у Ruby, LISP и любого другого не C-подобного синтаксиса. Так что тут только дело привычки.
      • +3
        К примеру, замыкания абсолютно не выделяются среди кода.
        • 0
          Хм, ну в Ruby они тоже выделяются не сильнее блоков в if. Собственно, поэтому в Ruby всё и строится на лямбдах (даже работа с массивами).
        • 0
          Кроме того, вроде именно такой синтаксис лямбды, где-то уже был. Вроде в Haskell, я его видел.
      • –2
        >синтаксис… не C-подобного
        ну и на*уй нужен js без С-подобного синтаксиса?
        вобщем сомнительная разработка.
    • 0
      Лучше чтобы и то и то :)
      Многим языкам это удалось
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Мне тоже нравится JS и jQuery, но на 10 раз устаёшь писать function() {} (ну хотя бы def() { }). Синтаксис Coffeescript выглядит дико только для C-style программистов. Это дело привычки, для Ruby и Python это совершенно читабельный код.
      • +2
        По моему того же можно добиться грамотной настройкой макросов в любимой IDE.
        • –5
          Тем больше букв, тем ниже читаемость. Да и решение через огромную IDE — это «кастыль».
      • НЛО прилетело и опубликовало эту надпись здесь
        • –2
          Если для других ЯП это читатебельно, тогда это дело вкуса, а не «ЭТО» ;). Карму то точно снижать не стоит — я понимаю, что на Хабре больше PHP программистов, чем Ruby, но у них тоже есть свои темы.
        • +1
          А вообще очень плохо, когда кругозор ограничен языками одного стиля.
          • +1
            Что такое «стиль языка»? Ссылку в студию.

            Или вы имеете в виду «парадигму»? В таком случае выше — верное замечание в неверно выбранный момент — отсутствие curly braces не меняет «стиль языка», как вы сказали. Это далеко не не ФП vs Имератив.
            • +1
              Действительно, я больше имел в виду парадигму. Но если человек не может понимать, а самое главное не хочет принимать язык из-за не C-синтаксиса, разве это хорошо и не однобокое мышление?
              • +2
                Все, что меняет coffeescript — это синтаксис. Парадигма не сдвигается ни на миллиметр.

                Ваше утвеждение про кругозор выше верно, но не для этого случая — тут нет смены «стиля языка»
  • НЛО прилетело и опубликовало эту надпись здесь
    • –2
      Но в проекте могут быть также file.lisp, file.erl или любые другие ЯП, у которых не C-стиль. Основной аргумент минусующих — я всю жизнь программировал на C-стиле, а это не C-стиль, поэтому язык плохой, а статью нужно заминусовать. Чем не консерватизм к стилю ЯП? ;)
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          Тоже самое можно сказать и о Haml или Sass, но они активно применяются. Их синтаксис другой, разработчик должен их знать. Но поскольку отличается только синтаксис, который учится за пару дней, то Haml и Sass активно применяются как в мире Ruby, так и вне его.
        • +2
          Кстати, не надо забывать, что PHP начинал именно как Coffeescript — небольшое расширение Perl ;).
        • 0
          C как раз тут причем он консервативен и бородат. не думаю, что не зная ruby и python вы пойдете разбираться в коде RoR проекта. А если уж начнете — то код вам уже будет понятнее. А также всегда можно транслировать код в javascript.
      • –1
        Причем тут С-стиль или нет? Давайте еще приведем в пример Perl с его синтаксисом. Или brain fuck… Ну чем не языки программирования?

        Ценность языка не может определяться лаконичностью его синтаксиса.

        А разница между временем написания «function(){}» и "=>" со временем нивелируется до незаметного минимума.

         

        При желании все, что вы написали можно сделать при помощи макросов в IDE. А вот сделали бы вы классы (в привычном понимании) и еще черь знает сколько другого полезного синтаксического сахара, вот тогда было бы полезно.
        • +1
          Классы в прототипном ЯП?! «привычное понимание»? O_o

          Ладно, извините, просто я сторонник, что языков и парадигм много и не надо в монастырь JS входить с уставом ООП Java :). Классы в привычном понимание есть в ExtJS, но они ужасают разработку. Самый неплохой вариант, JS.Class, но всё равно это как-то не правильно :).
        • 0
          Кстати, в Coffeescript синтаксис работы с классом тоже становится чуть понятнее. Например, наследование: Snake extends Animal вместо
          Snake.__superClass__ = Animal.prototype;
          Snake.prototype = new Animal();
          .
    • +3
      Ну тогда вы откроете незнакомый file.js скомпилированный из file.coffee и увидите тот же javascript.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Код из Coffee транслируется явно. Действительно, надо несколько мгновений подумать, где эта же строка в coffee-файле, но опыт Haml и Sass показывает, что это не проблема.
          • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              вас кто-то заставляет это делать? это просто +1 возможность, +1 вариант синтаксиса.
        • 0
          Ну я думаю, что если вам не нравится coffee, а нравится javascript, вы просто выкидываете coffee-файл и поддерживаете дальше только javascript-код.
        • 0
          это да, правильный аргумент, но как сказано ниже можно самому догадаться в какой строчке косяк.
    • 0
      Там и будет JS код, это же транслятор. Аналогия с haml была проведена.
  • –3
    для человека который не знаком с яваскриптом проще coffee выучить :)
    • +2
      Ерунду говорите
      • –3
        Ну изучить Coffeescript с нуля, как минимум, не сложнее Javascript. Наш мозг отравляется знаниями и изучив JS, многие вещи Coffee кажутся нам странными, хотя новичку (или программисту из мира Ruby и других не C-языков) кажутся понятными.
        • 0
          «Не сложнее» не значит «проще», нет?
          • 0
            Но и не значит сложнее, раз Вы говорите, что это ерунда ;). Язык просто другой. Как уже написал andoriyu, не все думают в узких рамках пары популярных языков. Если кто-то учился программировать с Python (а его преподают в некоторых школах), то и с Coffee начинать проще, так как синтакс JS ему будет непривычен.
            • –1
              А мне не нужно ничего утверждать или говорить «ерунда/не ерунда». Автор выше сказал, что выучить (цитирую) «проще», вы съехали ослабили утверждение, заменив его на «не сложнее», т.е. _может быть_ проще.

              У меня есть желание спорить только с оригинальным утверждением, извините.
      • 0
        я говорю от своего лица, я не так тесно знаком с яваскриптом и мне проще переключится на этот сладкий синтаксис чем париться с си подобным синтаксисом собственно из-за которого я не перестал си.
        • +1
          Тем не менее вы утверждаете, что возможность не вбивать пару лишних символов в строке делает его проще, чем js. Очень странное заявление — с потолка прямо-таки.
          • –2
            Ну если столько программистов не принимают Coffee из-за отсутствия C-синтаксиса, то и Ruby/Python/Lisp-программистам будет тяжелее смотреть на JS-синтаксис.
            • –3
              Откуда тут взялись Ruby-программисты? Опять с потолка?
            • 0
              Да причём тут C-синтаксис,
              просто вместо расширения получаем другой синтаксис для того что уже все знают. Профит минимальный.
              И haml и sass такие же. (чего только требования отступов стоит, привет питон)
  • +1
    Не успели утихнуть страсти по поводу Ruby-надстроек над CSS…
    • +1
      Ну успех Sass и Haml в Ruby мире и вселяет в меня уверенность в будущем Coffeescript :).
      • +2
        Узок круг революционеров. Страшно далеки они…
        Упреки брошенные в адрес Coffeescript один в один повторяют упреки к Sass
        А Haml — вообще недоразумение. У php-программистов таких недоразумений вагон и маленькая тележка и любое упоминание об этом выливается в холивар.
        • +1
          Спасибо, тяжело «воевать» с большинством :).
      • 0
        Кстати где можно посмотреть на доли использования haml vs erb?
        Мне вот кажется что erb не сдаст свои позиции haml
        Haml для питонистов хорошо
  • 0
    нелепо, особенно точка в конце функции. по мне так концепция блоков кода (или как это правильно называется) в руби куда интереснее.
    • 0
      Точка меня тоже смутила, но думаю привыкнуть к ней легче, чем к скобкам в LISP. Блоки в JS точно так же есть — просто синтаксис другой (в JS 1.6 есть и map, each, reject и inject, только у последних 3х названия чуть другие). В том-то и дело, что из-за длинного синтаксиса лямбды, блоки в JS используются редко, а Coffeescript map будет выглядить так:
      array.map(i =>
      i + 1.)
      • 0
        Вообще-то, в javascript 1. == 1.0. Если не в стандарте, то во многих реализациях — точно.
        • 0
          В данном случае точка оканчивает лямбду, т. е.:
          array.map(i =>
            i + 1
          .)


          Проверил, Coffee именно так и транслирует.
    • 0
      вообще то, точка не нужна, видимо автор попутал что то, подробно же все расписано в документации и примерах coffeescript.org
  • –2
    Вот вместо выдумывания Coffiescript лучше бы потратил 2% времени на настройку автокомплита и написания шаблонов, которые используются постоянно. А остальные 98% времени уделил бы родным/любимому человеку или отдыху. Толку было бы больше.

    З.Ы. Комменты про тяжелые IDE насмешили — не нужно в бедный эклипс пихать ту кучу плагинов. Я как посмотрел этот список, это хуже чем окно сервисов в Win7 (но она хотя бы не тормозит!) — NetBeans, Aptana, WebIDE — всё такая жуть, как вы с этим работаете?
    • 0
      Это решение — кастыль, лечение симптомов, а не болезни. Код всё равно получается слишком длинный, в for (i = 1; i < array.length; i++) всё равно делаешь ошибки.
      Кстати, автокомпилит и шаблоны есть не только в IDE, но и в лёгких текстовых редакторах типа TextMate, только Haml и Sass всё равно пользуются успехом, хотя проблемы HTML и CSS тоже можно решить с помощью различным граф. редакторов и т. д.
  • 0
    Даёшь чистый Ruby в браузере!
    А еще HAML и SASS. А данные — отдельным файлом :)
  • 0
    В чём собственно загвоздка?
    Был язык, для которого синтаксис разработан и принят.
    Его используют по всему миру. Он стандарт.
    И уже какой есть, такой есть. Он может нравиться, может не нравиться.
    Вообще нету ни одного языка, который бы нравился на 100%.
    Существуют несколько путей изменения этого.
    Отказаться от языка, эволюционно его развить, или же революционно.
    sass, haml, cofeescript попытки революционного изменения.
    В результате получается нечто, что уже не может работать само по себе, и это самое главное.
    Это лишает автономности технологий, которые разрабатывались таковыми.
    Также это заставляет изучать второй синтаксис для того, что уже известно.
    Какие варианты могут быть?
    Примеры эволюционного подхода:
    ERB, LESS.
    Им тоже присуще выше описанные недостатки, но они уже не так ярко выражены.
    И ERB и LESS расширяют HTML и CSS, но при этом сохраняют дань традициям языка, чтут его.
    Вот для JS можно поискать подобное решение, хотя чего ещё не хватает JS?
    Ведь в отличие от языков разметки, он то полноценный язык, да ещё какой!

    Насчёт длинных функций и прочего. Посмотрите как в jQuery сделано. Куда ещё короче — $().

    Проделанная работа вызывает уважение, по крайней мере для себя создали то, о чём мечтали. А другие зато теперь имеют права выбора.
    • 0
      Почему LESS эволюционный, а SASS — революционный? Или вы именно про sass? Но им ведь мало кто пользуется, практически все используют его в виде SCSS, и когда говорят SASS подразумевают SCSS.
      • 0
        Привет из 2009-ого :D
        • 0
          Лол. Гуглил на тему кофескрипта, открыл пару ссылок, потом отвлекся, забыл об этом, и читал как новую статью))
          • 0
            А я пока так и не стал пользоваться CoffeScript,
            хотя променял ERB на Slim
      • 0
        Ну практически все — это далеко не все. Не понимаю, почему они заменили sass на scss. Может для того, что бы снизить порог вхождения?
        • 0
          Потому что scss обратно совместим с css. В следствии чего можно безболезненно переводить старые проекты на него и он понятен другим людям, которые могут работать с этим проектом.
          • 0
            Автоматически конвертируется прекрасно что в sass, что в scss. А если человеку непонятен sass, то у этого человека явные проблемы.
            • 0
              Вы живете в каком-то идеальном мире. Если человеку который будет работать с проектом после меня будет непонятен sass то проблемы будут у меня в первую очередь. Т.к. важен результат.
              • 0
                Sass кристально понятен, даже автоматически сгенерированный. Он тоже самое, что и scss только с отступами вместо скобок. Здравый человек не может понять css, scss, но не понять sass. Более того, человеку с минимальной смекалкой даже не нужно лезть в документацию, по уже написаному коду можно все понять.

                А, как вы говорите, результат будет быстрее и качественней на sass.
                • 0
                  Завидую, вас окружают здравые люди.

                  Нет, человек НЕ может понять scss. Фишка в том, что ему и не надо, он может в scss файлике писать на чистом css и оно будет работать, потому что scss обратно совместим с css.
                  Хотя конечно то что для работы с scss нужно установить руби и что-то там компилировать — уже является практически непреодолимой преградой.
  • +2
    а в javascript 1.7 есть генераторы списков (вроде так они в питоне называются):
    var numbers = [1, 2, 3, 4];
    var doubled = [i * 2 for each (i in numbers)];
    alert(doubled); // Alerts 2,4,6,8
  • 0
    Идея не нова.
    Странно что до сих пор не вспомнили про Cappuccino

    Но все таки я не думаю что это правильный путь развития языка
  • +3
    Почитал комменты — всё-таки забавно, как подаётся и воспринимается информация. Автор статьи, не являясь автором Coffeescript-a, пытается его отстаивать, как будто имеет к нему особое отношение (кроме как пользователя). Комментирующие с категоричным видом думают, что им что-то навязывают и (зачем-то) отстаивают Си-подобный синтаксис, как будто имеют к нему какое-то отношение (кроме как пользователей).

    Автору: не распинайтесь Вы особо. Предоставили информацию, осветили — всё. Дальше люди сами решат, будут они это использовать или нет. Анализируйте со стороны — умейте видеть плюсы и минусы. Не принимайте какую-то конкретную сторону по причине, что Вы — не автор Coffeescript-a; Вы можете его осветить и рассказать, что к чему, не нарываясь на «консерваторов» (как Вы сами отмечаете).

    Кстати, клянчить где-то карму (или, тем более, просить кого-то заминусовать), всё-таки, некрасиво. За такое вот уже можно и послать (с Хабра; хотя, я понимаю, что это проблема Хабра и 80% так поступают — это нужно искоренять).

    Тем, кто отвечает — не нравится что-то — не используйте, вам навязывает что ли кто-то? Че вы накинулись на автора статьи, как на автора Coffeescript-a, который как будто навязывает вам этот Coffeescript в ваши текущие проекты? Какой смысл минусовать ему карму?

    По теме: я не буду использовать ;) Хоть Ruby и Python мне очень нравятся. Но больше мне нравится JS. С учётом того, что я знаю JS достаточно хорошо, у меня также будут сомнения по поводу качестве сгенерированного кода.

    P.S.: Да, и сниппеты с автокомплитом в редакторе, всё-таки, рулят ;)
    • 0
      Ошибку с выпрашиванием кармы осознал. Просто с начала не смирился с тем, что не все топики попадают на главную :).
  • 0
    a =+ 1.
    че эт?
    • 0
      Описка. Спасибо, исправил на a += 1.
  • 0
    Синтаксис довольно сомнителен — на мейнстрим не тянет, а еще надо транслятор запускать.
    Лучше уж haxe использовать. Он хоть более близок в JS.
    • 0
      этот коммент сюда (забыл нажать кнопочку)
  • 0
    Ну тут немного задачи разные. Отличие Coffeescript от Javascript только в синтаксисе и управляющих конструкциях (транслятор можно настроить как префильтр при запросе к серверу, пустяк). А haxe — это целое API с кучей бонусов, в то время как coffee — это тот же js, только вид другой

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.