Трое суток в раю или краткий дневник разработчика
СЕРЁГИН ВЛАДИМИР AKA PEKO
GASUBASU CREW (PEKO@GASUBASU.COM, WWW.GASUBASU.COM)
ТВОЕМУ ВНИМАНИЮ ПРЕДСТАВЛЯЕТСЯ НЕБОЛЬШАЯ ИСТОРИЯ ИЗ ЖИЗНИ ПИРАТОВ МОРЯ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ. ЭТО ПРЕДОСТЕРЕЖЕНИЕ ДЛЯ ЮНЫХ ИСКАТЕЛЕЙ ПРИКЛЮЧЕНИЙ, ГОЛОВОРЕЗОВ С КЛАВИАТУРОЙ НА ПЕРЕВЕС. ХОЧУ СРАЗУ ОБРАТИТЬ ВНИМАНИЕ НА ТОТ ФАКТ, ЧТО В ЭТОМ ВОССТАНОВЛЕННОМ ПО ПАМЯТИ ЛОГЕ СОБЫТИЙ БОЛЬШЕ ЭМОЦИЙ И ЧАСТНОСТЕЙ, ЧЕМ ОБЪЕКТИВНОСТИ И ЗДРАВОГО СМЫСЛА. АВТОР ЗДЕСЬ НЕ ПЫТАЕТСЯ ДИСКРЕДИТИРОВАТЬ ТЕХНОЛОГИЮ
AJAX, А ЛИШЬ УКАЗЫВАЕТ НА НЕУМЕСТНОСТЬ ЕЕ ПРИМЕНЕНИЯ КАК ЯДРА В КРУПНЫХ ПРОЕКТАХ, КОТОРЫМ НЕОБХОДИМ НАВОРОЧЕННЫЙ ИНТЕРАКТИВ
Три месяца в аду
Начало конца: появился штурман, провел инструктаж – сегодня начинаем разработку нового игрового онлайн-проекта: - «Флэша не будет вообще, все будет на Аяксе, а ты (ткнул в меня пальцем) будешь заниматься клиентским движком, так как лучше всех знаешь
ЯваСкрипт2. Все должно быть гламурно и эффектно!».
Месяц первый – армии мутантов
Неделя первая. Начат поиск достойного фреймворка. Всю неделю рылся в инете, выкачивал примеры, движки, читал восторженные отзывы. Запомнил новое слово «Виджет». Как все прикольно – шевелится, подсвечивается, радует глаз.
Неделя вторая. Прокачал похоже все, что есть об
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», видимо, эвенты не успевают пробраться через дизайн...
Неделя третья. Начали писать клинет-side логику. Для большинства задач вообще не нужно писать код – почти все проблемы решаются с помощью
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 и
ActionScript. Напротив, это были мои старые приятели. Еще год назад, когда начали появляться первые альфы плеера с
АVM2 и ранние сборки Eclipse IDE под Flex, я из интереса скачал и немного попробовал на зуб эти новые и красивые игрушки. С того времени запомнились две вещи: а) шустренько; b) сыровато. Разбираться, а тем более работать с этими технологиями – не представлялось на тот момент возможным, и дистрибутивы осели до лучших времен в архивах.
Но буквально недавно произошла вторая встреча с
Flex, можно сказать, чисто случайная - кардинально изменившая все мое представление о быстрой разработке
RIA-приложений. Если о Ajax, XML-/DHTML-технологиях и стандартах сложилось стойкое впечатление крайней тормознутости и слабой кроссбраузерной совместимости, то погружение в среду недавно вышедшего
Flex 2 было похоже на хороший глоток кислорода, после которого «в теле такая приятная гибкость образовалась», что меня подкинуло и размазало по потолку, где я и пребываю по сей день, среди розовых пузырей и солнечных зайчиков.
Сутки первые – старый новый знакомый
Крайнее удивление перемежается с приступами дежа вю. Тот же
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% аудитории).
ГЛОССАРИЙ
- AJAX - ТЕХНОЛОГИЯ АСИНХРОННОЙ ПОДГРУЗКИ И МОДИФИКАЦИИ СОДЕРЖИМОГО HTML-ДОКУМЕНТА.
- JAVASCRIPT - СКРИПТОВЫЙ ЯЗЫК ДЛЯ ВЫПОЛНЕНИЯ НЕСЛОЖНЫХ ПРОГРАММНЫХ ЗАДАЧ В ПРЕДЕЛАХ СРЕДЫ ДОКУМЕНТА.
- WIDGET – ВИЗУАЛЬНЫЙ КОМПОНЕНТ, ПОДОЗРЕВАЮ, ЧТО ПРОИЗОШЕЛ ОТ
GADGET.
- BACKBASE – КОММЕРЧЕСКИЙ AJAX-ФРЕЙМВОРК СТОИМОСТЬЮ 8000 ЗЕЛЕНЫХ ПРЕЗИДЕНТОВ.
- INCLUDE - ВКЛЮЧЕНИЕ В ИСХОДНЫЙ КОД ВНЕШНИХ ФАЙЛОВ.
- TEMPLATE – КУСОК ЧАСТО ПОВТОРЯЮЩЕЙСЯ ВЕРСТКИ.
- EVENT – СОБЫТИЯ. МЕХАНИЗМ СООБЩЕНИЯ КОДУ, ЧТО ПОЛЬЗОВАТЕЛЬ ЧТО-ТО СДЕЛАЛ.
- CLIENT SIDE LOGIC – НЕСЛОЖНАЯ ЛОГИКА НА СТОРОНЕ КЛИЕНТА, НАПРИМЕР ПРОВЕРКА ПОЛЕЙ ФОРМЫ.
- XPATH – РОДСТВЕННАЯ XML-НОТАЦИЯ ДЛЯ БЫСТРОЙ АДРЕСАЦИИ УЗЛОВ СТРУКТУРЫ.
- INTERNETEXPLORER – БРАУЗЕР, 80% АУДИТОРИИ :).
- BUG - ОШИБКА В КОДЕ.
- DISPATCHER – КОД, ПЕРЕДАЮЩИЙ СОБЫТИЯ ИХ ОБРАБОТЧИКАМ.
- PARSER – КОД, ЗАНИМАЮЩИЙСЯ ПРЕОБРАЗОВАНИЕМ МЕТАТЭГОВ В КОНЕЧНУЮ ВЕРСТКУ.
Содержание
|
 |
|
