Трое суток в раю после трех месяцев в аду

Статья для журнала “Хакер”

сайт журнала архив статьи

ТРИ МЕСЯЦА В АДУ

Начало конца: появился штурман, провел инструктаж – сегодня начинаем разработку нового игрового оналйн проекта: – “Флэша не будет вообще, все будет на Аяксе, а ты (ткнул в меня пальцем) будешь заниматься клиентским движком, так как лучше всех знаешь ЯваСкрипт. Все должно быть гламурно и эффектно!”

МЕСЯЦ ПЕРВЫЙ – АРМИИ МУТАНТОВ

Неделя первая: Начат поиск достойного фреймворка. Всю неделю рылся в инете, выкачивали примеры, движки, Читал восторженные отзывы. Запомнил новое слово Виджет. Как все прикольно – шевелится, подсвечивается, радует глаз.
Неделя вторая: Прокачал похоже все, что есть о Ajax, начиная вырезками из газет и кончая платными корпоративными фреймворками. Пришел к выводу – у всех все одно и тоже, отличается только дизайн и немного реализация.
Неделя третья: Отобрал самых крутых, играюсь, пробую собирать скелет проекта. Все просто замечательно! На сбор тестовой модульной сетки проекта уходит 10 – 20 минут. На забивку его пробным фаршем из стандартных компонентов еще час – полтора! Красота! Радуюсь как бесплатным конфетам с ликером!
Неделя четвертая:  Опять пришел штурман, отвесил мне пинка. Заявил, что если, я, наконец, не определюсь с платформой – будет рыбалка (меня сначала вздернут, а потом прям на веревке скормят акулам). Я выкатил ящик с плюшевыми аякс-мутантами, разной степени измученности и начал их комментировать:
а) dojo – прикольный, кондовенький, сыроват;
b) sajax – понятия не имею нашел на их сайте только пример с умножением двух цифр;
c) mochkit – совсем все простенько, но табличку отсортировать смогут;
d) pxtk – так и не нашел примеров и документации;
е) qooxdoo – модные чуваки, они мне понравились – кандидат номер 1;
f) aculo – небольшая коллекция полезных скриптов;
g) xajax – ну умножать цифры они умеют;
h) yahoo – слава гугла не дает им покоя, но документация на 5+;
i) prototype – эээ, типа модный фреймворк в 390 байт;
j) zimbra – посмотрим когда наши хостеры начнут поддерживать серверную Яву ;
k) google – без комментариев, но возможно наш дизайнер сможет прикрутить сюда дизайн ;
l) spry – аdobe, пока только умеет сортировать колонки, анимировать картинки;
n) tibco – серьезное корпоративное решение, мы разоримся на кофеине пока разберемся с этим монстром, (смеюсь каждый раз как читаю название – звучит как “чибик” =^__^=).
На вопросительное “Ииии?” – мной из-под стола была вынута красивая глянцевая коробка  модным дизайном. На ней красным было написано -  Backbase. Я сделал большие щенячьи глаза и завилял хвостом! Из пасти текла слюна.

МЕСЯЦ ВТОРОЙ – ВСЕ ДОРОГИ ВЕДУТ АД, ИЛИ О БЛАГИХ НАМЕРЕНИЯХ

Неделя первая: Начли разбираться с Backbase. Страшно понравилась система инклюдов – сборки темплейтов на стороне клиента, а также конструктор виджетов – объявление своих компонентов и их поведения:

<s:include b:source=”мои-виджеты/красная-супер-кнопка.xml”/>

<b:red-super-button b:label=”экземпляр кнопки раз”/>

<b:red-super-button b:label=”экземпляр кнопки два”/>

Неделя вторая: Переписали под свой дизайн и интерактив все компоненты Backbase. Возникли небольшие сложности с браузерной совместимостью, но их быстро решили. Все здорово и красиво, проект разложен по папочкам и блестит свежими комментариями. Только почему-то не с первого клика срабатывает кнопка “OK”, видимо евенты не успевают пробраться через дизайн…
Неделя третья: Начали писать клинет-сайд логику. Для большинства задач вообще не нужно писать код – большинство проблем решается с помощью XPath, например проверку правильности e-mail можно сделать вообще по ходу верстки:

<s:when b:test="@name='email' and not(matches(@value, '^.+@(.+\.)+.{2,4}$'))">

<s:setatt style="background: red; " />

<s:setatt b:valid="false" />

</s:when>

Неделя четвертая: IE делает первый предупредительный выстрел. Дизайнер в панике стоит отключить кэш у этого браузера – вся верстка, начинает беситься, дергается и моргать. Тех поддержка Backbase разводит руками, – “Sorry guys, It`s IE bug!”. Что означает – это не наша проблема, у эксплорера баг в прогрузке изображений из CSS, а именно – при каждом новом эвенте он забывает, что картинка уже прогружена и грузит ее снова. Откачивали дизайнера два дня.

МЕСЯЦ ТРЕТИЙ – АПОКАЛИПСИС

Неделя первая: Настроение стремительно ухудшается. Стали поступать живые данные от серверной части проекта. Диспатчер и парсер Backbase явно не справлютса с выводом таблицы больше чем на 15 строк. Если кроме таблицы в верстке еще несколько активных компонентов (поля, кнопки, сворачивающиеся заголовки) то даже в такой таблице начинает страшно тормозить подсветка. Клики проходят только со второй, третьей попытки. Начинается депрессия.
Неделя вторая: Неделя оптимизации, все силы брошены на увеличение производительности проекта. Выкинули и сократили из кода все, что можно сократить и выкинуть. Руководствуясь подсказками тех поддержки Backbase – оптимизировали и переписали 50% всего кода. Прогресс минимален. Начали избавляться от структур Backbase  в узких местах.
Неделя третья: Апокалипсис проекта. Первым не выдержал парсер CSS в IE.Видимо мы все-таки переступил какую-то недозволенную черту с количеством подключаемых в компонентах Backbase, CSS файлов (всего около 10, по числу наших виджетов). Это привело к совершенно неожиданным спецэффектам – Интерент Эксплорер начал вылетать с ошибкой выделения памяти, попутно увлекая за собой десктоп операционной системы. Видимо это дала знать о себе старая проблема со слабым парсером CSS.
Неделя четвертая: Живем как на вулкане. Не смотря на то что, изуродовав до неузнаваемости структуру проекта, нам удалось добиться относительной стабильности – от бета тестеров регулярно приходят сообщения, что время от времени проект – продолжает убивать браузер.
Это тупик, невозможно дальше развивать проект и его сервисы, если большую часть времени и нервных клеток мы тратим на борьбу с не чужими багами.
Грядет полная перестройка проекта, перенос его на более простую, а следственно стабильную платформу.

НОВЫЙ ВЗГЛЯД НА FLEX

Нельзя сказать, что я не был знаком с Flex и ActionScript3. Напротив это были старые знакомые. Еще год назад, когда начали появляться первые альфы плеера с АVM2 и ранние сборки Eclipse IDE под Flex я из интереса скачал и немного попробовал на зуб эти новые и красивые игрушки. С того времени запомнилось  две вещи: а) шустренько; b) сыровато. Разбираться, а тем более работать с этими технологиями – не представлялось на тот момент возможным и дистрибутивы осели до лучших времен в архивах.
Но, буквально недавно, вторая встреча с Flex, можно сказать чисто случайная – кардинально изменила все мое представление о быстрой разработке RIA приложений. Если о Ajax, XML /DHTML технологиях и стандартах сложилось стойкое впечатление крайней тормознутости и слабой кросс браузерной совместимости. То, погружение в среду недавно вышедшего Flex 2 – было похоже на хороший глоток кислорода, после которого “в теле такая приятная гибкость образовалась” что меня подкинуло и размазало по потолку, где я и пребываю по сей день, среди розовых пузырей и солнечных зайчиков.

СУТКИ ПЕРВЫЕ – СТАРЫЙ НОВЫЙ ЗНАКОМЫЙ

Крайнее удивление перемежается с приступами déjà vu. Я где-то все это видел только что. Тот же  XML те же объявления пространств имен что и в Backbase, тот же набор стандартных компонентов с одной лишь разницей в BB были префиксы  <s: … > и <b: … >, a здесь <mx: … >.
Когда я открываю документацию с эксплорером компонентов вкрадывается подозрение, что кто-то у кого-то не стесняясь воровал идеи. На лицо полное идентичность не только перечень и мена виджетов, но даже структура документации и ее оформление. Собираю модульную сетку проекта за пять минут. Повторяю начинку из основных компонентов проекта за пол часа.
Вот что получилось в итоге:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

    xmlns:mx="http://www.adobe.com/2006/mxml"

    xmlns:tpl="tpl.*"

    xmlns:loc="loc.*">

    <mx:Style source="css/main.css"/>

    <mx:VBox>

    <mx:ApplicationControlBar>

        <mx:ButtonBar dataProvider="{centralColumn}"/>

    </mx:ApplicationControlBar>

    <mx:HBox>

        <mx:VBox>

            <tpl:Logo/>

            <tpl:AuthorizationForm />

<tpl:LeftPanel/>

</mx:VBox>

        <mx:VBox>

            <tpl:PromoBox/>

            <mx:ViewStack id=”centralColumn”>

                <loc:RulesPage />

                <mx:Canvas><loc:PrizesPage/></mx:Canvas>

                <mx:Canvas><loc:StatisticsPage/></mx:Canvas>

            </mx:ViewStack>

        </mx:VBox>

    </mx:HBox>

    <tpl:BottomMenu/>

    </mx:VBox>

</mx:Application>

Собственно это почти весь проект! Точно так же выглядело то, что мы пытались заставить работать с помощью дорогого навороченного аякс фрейм-ворка Bаckbase – три изнурительных месяца.
<mx: … >  пространство имен родных  flex компонентов
<tpl: … > мое пространство имен под функциональные темплейты (xml-ки в папке tpl)
<loc: … > мое пространство имен под структурные темплейты (xml-ки в папке loc)
Конечно, вещи вроде <tpl:AuthorizationForm /> тоже нужно описать, но они по объему зачастую меньше приведенного здесь отрывка.
На досуге (пока закипал чайник) зачитался документацией – чайник выкипел.

СУТКИ ВТОРЫЕ – КОММПОНЕНТЫ И CSS

После двух часового сна – организм сам подскочил и потянулся к клавиатуре реализовывать приснившиеся идеи. Приступил к клиент-сайд логике, попутно имитируя дизайн основного проекта (на стабильную кросс-браузерную верстку которого наш дизайнер убил полтора месяца жизни  и килограммы драгоценных нервных клеток). Через 16 часов под аккомпанемент “VoodoPeople” был закончен последний “гламурный “ виджет (всего их в проекте около десятка – кнопочки окошки и прочая интерактивная GUI ерунда со сложным и не очень поведением). Настало время цеплять реальные данные из базы.
Но надо вздремнуть – мониторы слились в два мутных пятна.

ТРЕТЬИ СУТКИ – ЕКСПОНЕНЦИАЛЬНАЯ ЕЙФОРИЯ

Начал с самого больного места aякса – таблиц.
10 записей – никаких проблем все в порядке, с этим справляется даже aякс
50 записей – (здесь Backbase издох) никаких измений  в работе
100 записей – не вижу разницы
300 записей – ноль реакции, все в порядке
1000 записей! – mysql задумался на 1.5 секунды, возвращая запрос, в скорости работы никаких изменений!
Две таблицы по 3000 записей в каждой – задержка запроса 3 секунды, скроллбар сжался в черточку в остальном вообще не вижу разницы от таблицы с 10ю записями, сортировка работает практически мгновенно
В шоке от контрастов, дышу свежим воздухом у форточки.
Отдышавшись, начинаю переписывать серверный API под flex, попутно выкидывая весь бэкбейзовский мусор. Наверное со стороны я похож на изголодавшуюся пиранью, случайно оказавшуюся в аквариуме с золотыми рыбками – воздух вокруг кипит.
К утру третьих суток была готова полнофункциональная, идельно работающая флэш версия проекта, включающая наброски запланированных, но таки и не реализованных в корневом проекте фич.
Осталась одна небольшая проблема – по ТЗ в этом проекте нет флэша, только аякс…
Курим…

ОБЩИЕ ВПЕАЧАТЛЕНИЯ

Браузеры не готовы пока, самостоятельно и в полном масштабе взять на себя задачи, решаемые при разработке RIA. И основная причина, на мой взгляд, в том, что на плечи JavaScript machine  свалена задача не по годам. Не смотря на то, что ходят слухи о выпуске Микрософтом вместе с IE 7 новой ускоренной JSM,  ява скрипт, а следовательно фреймворки основанные на Аяксе, подобны экскаваторам из фанеры, – красивы и эффектны но только до первой траншеи.
Скорость встроенных в браузеры XML парсеров также оставляет желать лучшего, даже обвешанные XPath, XSLT и прочими X игрушками, своей неполной (и зачастую отличной в разных браузерах) реализацией они не сколько облегчают, сколько усложняю  решение конкретной прикладной задачи.
Разработчикам FP9 / AVM2 удалось приблизить производительность ActionScript3  к  Java (не путать с Java Script), сохранив при этом простоту языка и миниатюрный размер плагина, тем самым практически поставив себя вне конкуренции в области  RIA технологий.
Но самое главное преимущество Flex + AS3 + Flash технологий кроется не в производительности, а в том, что выполняясь на своей собственной VM машине ваш проект будет выглядеть и работать точно также в любом браузере имеющем FP (а это по заверениям adobe 75% аудитории).

Пеко, gasubasu crew
ночь с 30 на 31 октября 2006

Ajax технология асинхронной подгрузки и модификации содержимого HTML документа
JavaScript скриптовый язык для выполнении несложных программных задач в пределах среды документа
Widget – визуальный компонент, подозреваю, что произошел от gadget
Backbase – коммерческий Ajax Фреймворк стоимостью 8 000 зеленых президентов
Include – включение в исходный код внешних файлов
Template – кусок часто повторяющейся верстки
Event – события, механизм сообщать коду, что пользователь что-то сделал
Client side logic – несложная логика на стороне клиента, например проверка полей формы
XPath – родственная XML нотация для быстрой адресации узлов структуры
InternetExplorer – браузер, 80% аудитории.
Bug – ошибка в коде
Dispatcher – код передающий события их обработчикам
Parser – код занимающийся преобразованием мета тэгов в конечную верстку
Click – событие, нажатие элемента на экране мышкой
ActionScript virtual machine