Языковые Альтернативы для Веба

[recoder]

Что делать несчастному веб-программисту, связанному по рукам и ногам старыми языками разметки, представления и скриптования? Что делать, если ужасно надоели горы всякой ботвы, накопившиеся за прошедшие годы и существующие исключительно для обратной совместимости? Что делать, если хочется чего-то нового, изящного, чистого, светлого?

Правильно! Надо написать свои аналогичные языки, с блэкджеком и шлюхами, правильно задизайненные с самого начала. А потом, в определённый момент (либо при деплойменте, либо даже на лету) компилировать их в старые языки, которые уже и выдавать ничего не подозревающим клиентам.

HAML (HTML Abstraction Markup Language)

HAML призван заменить HTML-based темплейтные движки и преследует такие цели:

• Код должен быть легко читаемым
• Код должен быть неизбыточным (DRY)
• Код должен быть правильно выровнен
• Код должен создавать структурированный XHTML

В результате HAML-код выглядит примерно так:

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
  %head
    %title BoBlog
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    = stylesheet_link_tag 'main'
  %body
    #header
      %h1 BoBlog
      %h2 Bob's Blog
    #content
      - @entries.each do |entry|
        .entry
          %h3.title= entry.title
          %p.date= entry.posted.strftime("%A, %B %d, %Y")
          %p.body= entry.body
    #footer
      %p
        All content copyright © Bob

Изначально HAML создавался для RoR, но сейчас доступен и для Python, и для Java, и для Scala, и для Perl и т.д.

SCSS (Sassy CSS)

SCSS (так же являющийся третьей версией SASS) создавался как язык описания стилей, отвечающий примерно тем же требованиям:

• Совместимость с CSS3
• Поддержка SSI в стилевых файлах
• Поддержка переменных и функций
• Поддержка вложенных правил и mixin'ов
• Поддержка примитивных управляющих директив (if/for/while)
• Создание правильно форматированных выходных стилевых файлов
• Встроенная интеграция с FireBug'ом

Примерный вид SCSS-файла таков:

$width: 2px;
$color: #ccc;
$style: solid;

.fakeshadow {
  border: {
    style: $style;
    left: {
      width: 2 * $width;
      color: darken($color, 50%);
    }
    right: {
      width: $width;
      color: $color;
    }
  }
}

Есть и альтернативы: SASS, LESS (Leaner CSS), HSS.

Coffee Script

Альтернативный JavaScript в виде Coffee Script выглядит несколько сложнее, однако однозначно транслируется в более объёмный JS-код. Язык пока ещё находится в предварительных стадиях развития, однако уже содержит несколько интересных фич: свою реализацию класс-объектной модели, yaml-подобные определения структур, списковое присваивание (pattern matching/destructuring assignment), усовершенствованная работа с массивами и range'ами.

Пример кода на CoffeeScript, работающий с jQuery и Raphael (из блога the next 10000 hours, где приводится и результирующий JS-код):

app: {
  init: ->
    app.paper: Raphael('playspace',320,200)
    app.draw_circle()
    app.draw_square()

  # simple circle with event-based on-click event
  draw_circle: ->
    circle: app.paper.circle(50,40,30)
    circle.attr("fill","#f00")
    circle.attr("stroke","#fff")
    $(circle.node).click((e) -> app.kick(e))

  # square with object-based on-click event
  draw_square: ->
    square: app.paper.rect(150,40,50,30)
    square.attr("fill","#0f0")
    square.attr("stroke","#fff")
    $(square.node).click((e) -> app.punt(square,e))

  kick: (e) ->
    app.paper.text(e.pageX + 10, e.pageY + 10, "Raphaël\nkicks\nbutt!")

  punt: (obj,e) ->
    obj.translate(10,10)
}

# make it globally visible - not really needed, handy for debugging
if window?
  window.APP: app

$(app.init)

Выглядит несколько непривычно, однако потом - более компактно и более читаемо, чем традиционный JS. Посмотрим, как этот проект будет развиваться дальше...

Очень любопытные технологии. Надо будет попробовать на практике.

Comments

[fantaseour.livejournal.com]

Первый пример очень нравится, я о нем слышал. А вот второй, пока не знаю, -- синтаксис JS и так достаточно гибкий, но посмотрим, что будет дальше.

[juan-gandhi.livejournal.com]

Очень хорошие новости; спасибо!

[mpak666.livejournal.com]

Знаком с HAML и SASS в Ruby, конечно красиво, но всё изучение новинок опять отдаляет от "корней", многие начинают именно с новинок, хотя надо понимать основы и что на самом деле из этой "прослойки" этого опять же генерится обычный HTML и CSS.

[recoder]

Знать низы конечно же надо. Но такие изящные абстракции, как мне показалось, могут излагать мысли очень лаконично (что вообще ценится в Ruby-сообществе). А раз всё компактнее, то всё это легче окинуть взглядом, чтобы понять что к чему.

Надеюсь, что это всего лишь дело привычки.

По поводу 2.

[shaggyowl.livejournal.com]

CSS-у, по хорошему, не хватает нескольких простых базовых вещей
раз - http://www.terrainformatica.com/htmlayout/fspu.whtm
два - http://www.terrainformatica.com/htmlayout/flow.whtm
С их помощью большинство задач верстки решается легко и непринужденно.
Примеры использования можно посмотреть тут http://www.terrainformatica.com/htmlayout/HTMLayoutSDK.zip (browse.exe и далее html_samples)

Re: По поводу 2.

[recoder]

Ну это же свой собственный альтернативный движок. Если писать всё с самого начала и продумать все требования заранее - то конечно можно сделать идеальное решение. Но это тупиковый путь.

Вообще, много наших теперешних бед - из-за того что развитием HTML/CSS долгое время занималось академическое сообщество, совершенно оторванное от реальных нужд разработчиков. В результате - отдельно живут выхолощенные стандарты, отдельно вендоры браузеров тянут одеяла в свои стороны, и отдельно - сами разработчики, мучительно пытающиеся решать свои задачи в этом бардаке, постоянно переизобретая велосипеды и наступая на одни и те же грабли.

Будем надеяться WHATWG изменит курс развития стандартов в практическую сторону.