Тестирование и отладка Javascript

В продолжение поста Тестируем проекты на Javascript.

Попалась на глаза очень интересная книжка (в формате PDF) о том, какие бывают средства тестирования и отладки, как ими пользоваться. В описание вошли Firebug, Silenium IDE, библиотеки YUI Test, QUnit, FireUnit, jspec.

Кроме того, разжеваны методы наследования в js, описаны проблемы, связанные с непониманием Javascript, показана техника TDD-разработки, и очень-очень много примеров.

Книга по всей видимости must read. (Я, кстати, ее еще не читал, сознаюсь :) )

Книга за ноябрь 2009
Последнюю версию всегда можно найти в проекте на GitHub-е

P.S. Если вы не в ладах с английским, пользы от такой книги, к сожалению, будет маловато.

3D-графика средствами Javascript

Javascript удивляет. Вобщем-то такую библиотеку должен был кто-то реализовать. И это сделал Dean McNamee. Имя его разработки — Pre3D. Вот, что пишет сам автор:

Pre3d is a JavaScript library, which will project a 3d scene into 2d, and draw it to a <canvas> element ... The library is designed to be low-level and direct, there is no retrained or scene graph API.

Видно, что библиотека построена по принципу проекции объемного изображения в двумерное с использованием модного нынче тэга canvas. Работает под большинством браузеров (это не касается IE).

Сайт проекта и примеры
Исходники

Вы знаете о чем-нибудь подобном?

JS интерфейс для аудио-плэйера

Еще один камень в огород Flash. На этот раз представляю вашему вниманию библиотеку JAI (Javascript Audio Interface) для построения аудио-интерфейсов на основе тэгов <audio> и <canvas> спецификации HTML5. Библиотека свободная и открытая.

Больше сведений по ссылке проекта JAI.

P.S.  Кому интересны эксперименты с аудио в браузере, предлагаю почитать серию статей Experiments with audio блоггера David Humphrey.

Проект Gordon и Flash

Очень забавную вещь реализовал Tobias Schneider — выполнение swf-файлов в среде, реализованной на чистом Javascript. Это значит, что флэшки можно запустить в браузере с отключенным Flash плагином. Если разработка будет поддержана сообществом, то в мире веб-разработок на одну маленькую революцию станет больше. Хотя бы потому, что эти самые swf-ки можно будет запустить на iPhone (уже можно).

На данном этапе Gordon нормально функционирует под браузерами Safari, Chrome (падает) и Firefox. Естественно, поддержка swf пока не полная.

Проект
Примеры реализации
Твиттер автора

Статический анализатор кода Javascript

Наткнулся на потенциально интересный инструмент, который для заданного кода рассчитывает его метрику. Называется jsmeter. В надежде получить удовольствие от улучшенных показателей, я подсунул в анализатор старый и новый код проекта, над которым плотно работаю уже третий месяц. Но обилие непонятных цифр меня крайне смутила. Их значение мне не понятно (в вики
очень скупое описание), хотя презентация инструмента их как-то умело и красиво представила... К тому же, подкупает тот факт, что авторами являются разработчики-исследователи из Microsoft. Значит есть в ней какой-то неведомый толк. Но какой?

Если кто владеет техникой статического анализа кода, не прояснил бы нам суть этой вещицы?

Тестируем проекты на Javascript

Без тестирования собственных продуктов сегодня не обойтись. Я интересуюсь этой темой по насущной проблеме: проект растет большими темпами, но при этом хочется, чтобы добавление нового функционала проходило с минимальными затратами. А получается, что изменив одно, ломается другое. На поиск конфликтов уходит время. С юнит-тестами можно понять, в каком месте сбоит, и, в итоге, быстрее разрешить ситуацию. И не стоит говорить, что само написание тестов уже трата времени. Нет. В дальнейшем только скажешь себе спасибо за уверенность при коммите очередного фикса.

Переходя от философии к теории замечу, что для многих языков уже сложились свои признанные средства тестирования (здесь и далее речь идет о юнит-тестах). Но в отношении JS не все так просто.

Существуют портированные варианты популярных продуктов (например, JsUnit по аналогии с CppUnit), но они не учитывают особенности самого языка. Да и сам язык накладывает на средства свои ограничения. Самое главное — невозможность подгружать файлы. Есть конечно обходные пути, будь то использование тэга <script>, но все-таки это изврат чистой воды. Как выход — использовать небраузерные интерпретаторы яваскрипта. Самый популярный — Mozilla Rhino. Rhino расширяет функционал языка: импорт файлов, вывод на консоль и др., все что нам требуется.

Кстати. Вы в курсе, что Rhino поставляется в пакете с Java SE (начиная с 6 версии)? Это позволяет расширять функционал java-решения скриптовыми вставками. Мне от этого не теплее, но факт остается фактом :)

Но Rhino не панацея. Необходимо использовать толковое средство тестирования. Как оказалось, их существует приличное количество — от самых простых до серьезных. Обзор некоторых из них можно почитать в Википедии или в статье JavaScript Unit Testing блога DailyJS. Именно та статья вывела меня на просто гениальное решение — JSpec.

JSpec is a minimalistic JavaScript behavior driven development framework, providing simple installation, extremely low learning curve, absolutely no pollution to core prototypes, async request support, and incredibly sexy syntax, tons of matchers and much more.

Как видите, тут вам и BDD, удобство использования, и секси синтаксис. Последнее — это вообще отдельный разговор, потому что синтаксис — чистый DSL (помните CoffeeScript?).

Посмотрите на примеры:

describe 'ShoppingCart'
  before_each
    cart = new ShoppingCart
  end

  describe 'addProducts'
    it 'should add several products'
      cart.addProduct('cookie')
      cart.addProduct('icecream')
      cart.should.have 2, 'products'
    end
  end

  describe 'checkout'
    it 'should throw an error when checking out with no products'
      -{ cart.clear().checkout() }.should.throw_error EmptyCart
    end
  end
end

Как говорится, inspired by Ruby. Точнее, это аналог RSpec для Руби. Мало того, этот инструмент может быть установлен как гем. Это позволяет работать с ним не только в браузере, но и в консоли. Чтобы приступить, нужно совсем немного:

sudo gem install jspec
jspec init myproject
cd myproject
jspec run --rhino

Rhino устанавливается автоматически. Вместо последней строчки, можно использовать более общую команду jspec. Она позволяет в фоне следить за изменениями, и отправлять сообщения через Growl (фича для пользователей MacOS).

 Хочу вас сразу предупредить, что JSpec некорректно работает с Руби 1.91 — используйте 1.86. И да, так как сам автор не пользуется виндоподобными операционными системами, то существуют некоторые проблемы с отображением в консоли cmd. Чтобы это исправить, надо заменить функцию color.

Если вас заинтересовал JSpec, то прошу на официальную страницу за дальнейшими разъяснениями.

Мне нравится в нем а) синтаксис, б) удобство, в) простота. А больше и ничего не надо :)

Официальная страница JSpec
Пример использования

Playground для вашего кода (JS + HTML + CSS)

jsFiddle — шелл для работы с великой тройкой. Теперь можно устраивать свои пляски с бубном (ну как еще перевести playground): удобный редактор, который поможет разобраться c поставленной задачей при заданных условиях. Можно подгрузить популярные библиотеки (jQuery, MooTools, YUI и др.). Со своими наработками можно поделиться с друзьями, сохранив их по короткой ссылке.

Альфа-версия оправдывает многие недоработки (мне кажется, или AJAX'ом тут совсем не пахнет?). Но идея неплохая, да.

Когда John Resig просматривает элемент, он видит голые электроны

Это и другое можно почитать в статье  John Resig: JavaScript's Chuck Norris

P.S. Кто не в курсе, Джон — автор jQuery. 

CoffeeScript — язык, транслируемый в Javascript

Что, опять изучать новый язык? Успокойтесь, это всего лишь DSL, реализованный на Ruby. Синтаксис до не могу упрощает кодинг — используются все преимущества Руби, как языка. Но как и во всех подобных подходах страдает трансляция (ruby > js). Если вы не боитесь монструозного сгенерированного кода, зачастую сложного, затратного и неэффективного, то вперед — CoffeeScript для вас :) Но все-таки имейте ввиду — это just for fun, не более того.

Оригинал описания CoffeeScript
Примеры


P.S. Что-то мне подсказывает, если трансляцию кода сделать оптимизированной под компилятор Closure, может получится очень даже вкусная вещь.

Обновление блога

Всем привет, давно не "виделись"! Наступил новый год (с чем я вас собственно и поздравляю), а это значит надо строить новые планы. Если разобраться, то планов, как всегда, громадье. Хочется все успеть, все познать, все опробовать. Зачастую, к концу год, оглядываясь назад, понимаешь, что этот год планировал совсем по-другому :)

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

Ну так что поменялось, спросите вы. Отвечаю. Я ушел от такого мощного языка, как C++, и приобщился к веб-девелопменту. Нет, я не верстаю сайты, не подкручиваю сайты при помощи jQuery. Я занимаюсь тем, что сейчас принято называть аббревиатурой RIA. Да, и я нисколько не жалею об этом! Да и вообще, я по уши влюблен в javascript (а ведь это самый популярный язык, интерпретатор которого установлен почти на всех компьютерах мира! не знали? :))! Все эти замыкания, анонимные функции, прототипный интерфейс — просто мечта! Для меня открылся новый мир — самое приятное событие в жизни наверно каждого программиста.

Собственно, всей этой кухней я занимаюсь от силы год. Но уже где-то поднаторел и преуспел. Из последних моих достижений на творческо-рабочей ниве — рерайт с нуля проекта в пять тысяч строк. Но не простого, а очень запущенного и запутанного (была попытка сделать рефакторинг, из чего стало ясно — все-таки проще переписать, учитывая всю опасность этого мероприятия). Занимался переписыванием в одиночку. На получение стабильной альфа-версии было потрачено два месяца времени. Опыт, левел-ап и все-такое :)