ReCoder (recoder) wrote,
ReCoder
recoder

  • Mood:

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

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

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

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. Посмотрим, как этот проект будет развиваться дальше...

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

coding

Tags: coding
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 6 comments