Издательский дом ООО "Гейм Лэнд"ЖУРНАЛ ХАКЕР 120, ДЕКАБРЬ 2008 г.

Десктоп web-кодера: cобираем рабочее место для AJAX и Web 2.0 кодера

Александр Лозовюк (aleks.raiden@gmail.com)




Разработка мало-мальски серьезного веб-проекта – дело непростое. И если раньше вполне можно было обойтись обычным блокнотом, то в нынешних условиях без продуманной среды с системой контроля версий, редактора с автодополнением кода и интерактивного отладчика не обойтись!

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

На чем будет кодить?

Еще каких-то лет пять назад под словом «веб-разработка» большинство понимали только одно – программированное на Perl (в связке с технологиями CGI и SSI). Далее была массовая PHP-истерия, которая продолжается и сегодня, но все же стихает под напором все новых средств, наступающих ей на пятки. К чему это я? А к тому, что, прежде всего, нам нужно разобраться, на чем именно мы будем программировать. Сразу хочу предупредить, что платформы ASP и ASP.Net трогать не будем. И вовсе не потому, что это плохая идея (скорее, наоборот – в чем лично я не раз убеждался), а банально потому, что лучшей среды, чем родная Microsoft'овская Visual Studio не найти. Добавим к этому совершенно бесплатные версии Visual Studio Express, которая мало чем отличается для начинающего разработчика от своей старшей и более «упитанной» сестренки, – и получаем практически идеальный вариант. Построим нашу среду таким образом, чтобы можно было программировать на любом из популярных веб-языков и платформ - будь то PHP, Ruby, Python или JavaScript.
Задача непростая, ведь необходимо собрать среду, которая позволяет работать со всеми языками и платформами современного веба, будет бесплатной и открытой, желательно кросс-платформенной и способной интегрироваться с другими инструментами. Еще одна важная деталь – связь с базами данных и работа с FTP и SVN для удобного развертывания приложений. Не говоря уже о таких мелочах жизни, как подсветка синтаксиса, форматирование, встроенная документация и автодополнение кода для всех языков и популярных библиотек, поддержка рефакторинга и еще тысячи и одной детали, из которых состоят нелегкие будни программиста. И да, это возможно!

Aptana Studio - основа основ

Превратить компьютер в универсальную среду для веб-разработки поможет Aptana Studio IDE, построенная на платформе легендарного Eclipse. В это IDE по умолчанию входит множество самых разнообразных инструментов, специально заточенных под создание сложных и навороченных веб-аппликаций на разных языках программирования. Более того, Eclipse сама по себе является мощнейшей платформой с продуманной системой плагинов, позволяющей подогнать платформу для работы с любыми языками программирования. И если когда-нибудь ты вдруг переквалифицируешься в Java или C++ программиста, то единственное, что придется сделать – это установить еще один добротный плагин. Не помеха и переход на другую ОС: любимый Эклипс работает и одинаково выглядит на всех платформах, включая Win32, Linux и MacOS. Сама Aptana доступна в двух вариантах. Первый – открытый и совершенно бесплатный (Community-версия), второй – платный и адресован профессиональным программистам. Для большинства кодеров различия едва ли будут критичными.

Главная особенность этой среды, за которую мы, собственно, ее и выбрали, – отличная работа со всеми клиентскими технологиями. CSS, DOM, HTML, JavaScript – словом, всем тем, что составляет основу современных проектов. Одна из уникальных фишек – поддержка всех популярных AJAX-библиотек с сопутствующими мануалами, автоматическими подсказками для тегов и выражений, уведомлениями о поддержке того или иного метода в различных браузерах. Создавая новый проект, ты можешь сразу выбрать нужные AJAX-фреймворки -- они будут добавлены в проект, а описания всех функций сразу появятся в подсказках. Надо ли говорить, что освоение нового фреймворка ускоряется в разы.

Надо сказать, что Aptana изначально создавалась вокруг идеи предоставить в среде Eclipse веб-разработчикам качественный и мощный интегрированный HTML/CSS/JavaScript-редактор. И у создателей это действительно получилось. Поверь, другие средства не дадут такого удобства и функциональности в одном пакете. К тому же, в окне Aptana можно просмотреть, как будет отображаться проект во всех установленных на компьютере браузерах. Пожалуй, если и есть лучшее средство для верстки HTML/CSS, то это только платный Adobe Dreamvewer CS 4.

Что касается отладки AJAX-приложений, то в Aptana встроен мощный анализатор запросов, который отслеживает и показывает всю сетевую активность твоего проекта, позволяя на лету контролировать общение приложения с сервером. Кстати, о серверах - проекты можно отлаживать и запускать как во встроенной среде на основе собственного сервера приложений Jaxer (о нем стоит поговорить отдельно), так и использовать любой внешний HTTP-сервер: я, к примеру, использую обычный пакет Denwer.

Ни один современный проект не обходится без поддержки баз данных. С недавнего времени Aptana поддерживает работы с SQL и прямое подключение к базам данных с возможностью создавать и тестировать запросы, заливать и получать полный дамп базы данных для проекта и многое другое. Все эти возможности доступны в режиме Database Explorer (то есть, при активировании этой перспективы, – так в мире Eclipse называется специфический набор открытых окон и плагинов, сгруппированных под определенную задачу) и могут быть использованы с любой SQL СУБД, для которой у тебя есть JDBC-драйвер.

Облегчает работу (а также просто изучение новых средств) и встроенный каталог готовых примеров (панель Samples), ну и набор некоторых готовых примеров и решений Snippets, содержащий разные готовые решения для CSS, HTML и JavaScript-кода.

Следуя современным тенденциям, Aptana стала первой средой разработки, где появилась встроенная поддержка платформы для AJAX-приложений Adobe AIR (она была доступной одной из первых, когда только о проекте объявили) а также дополнительные инструменты для работы с проектами, оптимизированными для Apple iPhone. В частности, при разработке страниц ты можешь сразу просмотреть, как они будут отображаться и исполнятся на iPhone, даже не имея его в наличии.
С самой средой и клиентской частью мы вроде как разобрались, – все есть, все поддерживается и все отлично, а что же насчет поддержки серверных языков программирования?

Рубин на рельсах, или RubyOnRails

Новомодная платформа Rails на старом языке Ruby. Язык этот начал разрабатываться еще в 1993 году, а первая версия вышла в 1995. Однако основную популярность в вебе сыграл выпуск в 2004 году фреймворка RubyOnRails (www.rubyonrails.org), позволяющего собрать готовые веб-приложения из заранее подготовленных заготовок. Для комфортной разработки на Рубине-на-рельсах понадобится плагин, который является составной частью Aptana Studio и называется RadRails (http://www.aptana.com/rails). Он поддерживает, в отличие от конкурентов, все три реализации Ruby - Ruby, JRuby и Rubinius. Для настоящих хакеров в среду встроена полноценная отладка и профилирование кода (в версии Pro) и визуальные редакторы со всеми наворотами для YML, RHTML/ERb, XML. Я умолчу обо всех стандартных возможностях редактора кода (подсветка синтаксиса, анализатор кода на лету, подсказки и автодополнение, тестер для регулярных выражений, «умное» автоформатирование кода, поддержка множества методов рефакторинга) – эти и другие мелочи в 21 веке уже стали стандартными для любой среды и платформы. Хотя вот коммерческий аналог RadRails3rdRail – не умеет ни анализировать код, ни его форматировать, а также не обладает функциональностью рефакторинга кода. Поддержка юнит-тестирования, автотестов и фреймворка RSpec обеспечит твоему коду максимальное качество (конечно, если не лениться и писать тесты). Похоже, что RadRails среди открытых платформ – пока самая мощная и функциональная, пригодная как для начального освоения языка, так и профессиональной разработки ПО.

Яндекс и Google дружат с Python

Не зря поисковые гиганты столь активно используют для своих разработок именно Python. Этот язык появился в 1990 году, намного раньше Ruby, и сейчас занимает серьезную позицию среди платформ для веб-разработки. И все благодаря своей мощности, гибкости, поддержке множества парадигм разработки, развитой многопоточности. Использование крупными гигантами не остается незамеченным: программисты из того же Google выкладывают в репозитории огромное количество готовых модулей на все случаи жизни, избавляя коллег по ремеслу от необходимости изобретать велосипед. Кстати говоря, это официальный язык для сервиса Google App Engine. Представители Яндекса также неоднократно заявляли, что используют Python в некоторых своих проектах.

Поддержка этого языка появилась совсем недавно. В августе нынешнего года представители Aptana заявили, что расширение PyDev, ранее доступное как самостоятельный продукт, теперь будет включено в их среду. В дальнейшем разработчики будут трудиться как над полной интеграцией и поддержкой Python, так и над улучшением проектов, где совмещается серверная сторона на питоне и клиентская на AJAX.

Из ключевых особенностей редактора кода для Python-а стоит отметить автодополнение тегов. Кроме того, исправлена поддержка режима отладки и совместимость отладчика с Jython (реализация Python’а на Java-платформе, www.jython.org), интегрированный менеджер пакетов, поддержка Mylyn (впрочем, она имеется во всех расширения для языков в Aptana). В помощь начинающим программистам будут пошаговые помощники для создания новых проектов, заявлена поддержка всех синтаксических конструкций версий 2.4 и 2.5 (именно поддержка 2.5 считается одной из отличительных фич пакета), а также интерактивная консоль и другие средства, уже классические для редакторов кода.

Pydev, да и все остальные языковые плагины, ценны именно интегрированностью в инфраструктуру Aptana и полноценным отладчиком с унифицированным Eclipse-интерфейсом. Это значит, что разрабатывая проект на любом из языков, будь то клиентская часть на JavaScript или серверная на PHP/Ruby/Python, ты всегда будешь иметь дело с одинаковым стандартным интерфейсом и возможностями. Конечно, будут и отличия, обусловленные особенностями языка, но именно интегрированность в единый комплекс всех возможностей превращает, казалось бы, стандартные редакторы и утилиты в единую среду, IDE. К этому я бы добавил и сквозную поддержку общих модулей, например, Mylyn, представляющий собой единый интерфейс для управления Todo-списками, тикетами и открытыми багами. Он позволяет подключаться прямо из среды к удаленным хранилищам кода, багтрекерам и другим источникам данных. А это, в свою очередь, еще более упрощает разработку и унифицирует рутинный труд. В дереве проекта отображаются и открытые тикеты, и незавершенные задачи, и данные с SVN-а – и другая полезная информация. А стоит в комментарии пометить особым образом участок кода и указать, что он требует доработки, как эта метка автоматически перенесется в список задач и будет видна всем участникам проекта (которых ты наверняка позвал).

А как же всеми любимый PHP?

К сожалению, а может и счастью, с PHP не все так радужно. Плагин для поддержки РНР в Aptana появился не так давно и пока предоставляет только самые базовые возможности. Им можно пользоваться и вполне успешно, но на базе Eclipse сейчас есть более продвинутые решения.

Самым старым и заслуженным является пакет PHPEclipse (www.phpeclipse.net), недавно обновившийся до версии 1.2.1. Пакет добавляет как расширенный редактор кода с автоматическим сворачиванием участков кода (Folding), так и автодополнение, автоподстановку параметров функций, возможности создавать собственные шаблоны кода для быстрой вставки одинаковых кусков. Но главное – это встроенные средства отладки, которые работают с двумя самыми популярными и мощными отладчиками для PHP - DBG и Xdebug (Zend Debugger не поддерживается). Вместе с PHPEclipse удобно использовать внешний сервер для развертывания и отладки проекта в локальных условиях - он изначально настроен на поддержку среды XAMPP и дополняет панель инструментов кнопками быстрого запуска и остановки сервера. Останется только настроить Aptana на использование внешнего сервера при предпросмотре страниц и настроить профили отладки - ты всегда одним кликом сможешь запустить свое приложение и отлаживать его, будь то JavaScript или PHP, в одинаковом и стандартном интерфейсе среды Eclipse.

Отсутствие открытой среды для разработки под РНР на основе Eclipse озаботило и компанию Zend, которая выпускает коммерческие решения для мира РНР. Поэтому она стала родоначальницей двух новых и претендующих на профессиональный рынок решений - открытой среды PDT и собственной коммерческой, Zend Studio for Eclipse, которая пришла на смену платформе Zend Studio (там также поняли преимущество решения, основанного на платформе Eclipse). И если платный вариант нам как-то не по душе (хотя он, без сомнения, имеет более широкие возможности в плане отладки кода), то PDT -- это «наше все». PDT (www.eclipse.org/pdt) или PHP Development Tools - это плагин, реализующий все основные инструменты для работы с РНР проектами в среде Eclipse. К уже ставшим стандартными возможностям того же PHPEclipse он добавляет еще и расширенную поддержку средств отладки (так как корни проекта с Zend, то их фирменный отладчик поддерживается в числе первых, а Xdebug появился лишь недавно). Также в среду входят собственные версии РНР-интерпретаторов последних версий, однако в следующем релизе будет и поддержка пока тестовых версий РНР 5.3 – наверное, чтобы разработчики уже готовились к обновлениям.

Управление исходным кодом

Сегодня разрабатывать что-либо и не использовать системы контроля версий – это почти что преступление. Ведь так намного удобнее, безопаснее и, если тебе понадобится пригласить друга дописать вот здесь и здесь пару фич в вашем мега-проекте, то вы не станете конфликтовать, внося изменения в один и тот же файл. Поэтому использование современных систем контроля версий вроде CVS, SVN или Git является обязательным для любого веб-разработчика, претендующего на звание профессионала. И хотя в последнее время критика обычных систем вроде SVN стала нарастать и привела к созданию новых средств, вроде распределенных систем Git или Mercurial, мы все же будем использовать старый добрый SVN. Он пока что удовлетворяет всем нашим нуждам.

Любая уважающая себя среда разработки содержит встроенную поддержку SVN, или же имеет для этого плагин. Eclipse/Aptana – не исключение. Для Eclipse есть два плагина, которые обеспечивают работу с репозитарием кода прямо в самой IDE: это Subeclipse и Subversive. Какой из них выбрать, по большому счету, не так важно – весь базовый функционал, нужный в 99% обычной работы, присутствует в обоих плагинах, поэтому ты можешь установить любой. Вместе с Aptana теперь поставляется собственный плагин, и тебе вообще может не понадобиться что-либо устанавливать. Просто зайди в Plugin Manager и нажми кнопку «Установить» возле этого плагина (более того, при первом запуске тебе предложат автоматически установить поддержку SVN).

Но! По собственному опыту я могу рекомендовать... поставить отдельную программу для работы с SVN на уровне файловой системы. Если у тебя Win32-платформа, то лучшим выбором будет TortoiseSVN (tortoisesvn.tigris.org). Почему, спрашивается, не встроенные средства? Смотри, среда Eclipse сама по себе достаточно громоздкая, и каждый раз ее запуск будет отнимать много времени. А если ты все сделал, отправил изменения на сервер, закрыл и пошел пить пиво, а потом вспомнил, что не добавил новую иконку к текущему проекту? Что делать - загружать многомегабайтного монстра ради того, чтобы послать один килобайтный файл?

Сомнительное удовольствие. Зато используя внешнюю программу, можно работать с репозитарием когда и как угодно, открывая только «Проводник» или файловый менеджер вроде Total Commander. Не проблема сделать копию проекта в другой папке, или, например, вытащить один файл предыдущей версии, не затрагивая весь проект – все это можно делать независимо от основной среды. Конечно, придется работать с несколькими программами сразу и добавлять/обновлять исходные коды проекта отдельно от среды разработки, но в случае небольших проектов выгоды такой работы более очевидны, чем сложности при внесении небольших поправок. Ведь можно просто открыть блокнот и поправить строку-другую, если что-то не работает на сервере (ну, допустим, забыл поменять пароли для доступа к базе данных – самая частая ошибка при выкладке проектов с локального сервера на рабочий), не тратя еще минут пять на загрузку основного инструментария.

Как начать?

Теория теорией, а все-таки нужно попрактиковаться и правильно все настроить. Не будем много говорить, просто рассмотрим несколько вариантов нашей среды.

1. Первый вариант – установить пакет Aptana Studio с сайта www.aptana.com/studio. Во время первого запуска нас спросят, нужна ли нам поддержка SVN, и я советую согласиться и сразу установить этот плагин. Потом, после перезапуска среды, откроется окно MyAptana, где ты можешь увидеть установленные плагины и при необходимости дополнительно установить все необходимое. Среди списка плагинов можно выбрать поддержку тех AJAX-библиотек, которые будут использоваться, а также прямо оттуда установить Pydev, RadRuby или PHP или даже все вместе.

2. Есть и другой вариант: если ты любитель новенького и рассчитываешь в основном использовать РНР и AJAX. В этом случае сначала загрузи самую последнюю версию PDT (я имею в виду ветку 2.0, которая к моменту выхода журнала должна стать если и не релизом, то, по меньшей мере, RC). При этом загружай сразу весь пакет со всеми зависимостями (PDT-all-in-one), иначе замучаешься доставлять пакеты и следить за совместимостью версий. Далее, после первого запуска, добавь адрес сайта с обновлениями (http://update.aptana.com/update/3.2/policy.xml). Официально это и не заявлено, но Aptana работает с Eclipse вплоть до текущих сборок версии 3.5. PDT 2.0 также будет работать на этой версии, хотя некоторые функции или обновления могут сообщать о несовместимости платформ. После этого зайди в меню обновления программ и установи базовый пакет Aptana Studio, а потом уже заинсталь нужные плагины. Важно сначала скачать Eclipse в сборке под запуск PDT, а уже поверх установить Apatanа. Последним этапом будет установка самостоятельной программы для работы с SVN или активация встроенного плагина.

Еще одно замечание. При установке бесплатной версии Aptana Studio ты получаешь триальный ключ для активации Pro-возможностей. Это действительно может пригодиться, поэтому попробуй зайдите в Help -> Aptana License и там нажми valid для проверки ключа и потом Install. После этого сможешь месяц наслаждаться расширенными функциями и окончательно решить, нужны они тебе или нет. А если хочешь еще сильнее расширить возможности среды, добавив, например, поддержку UML-моделирования или другие возможности - посмотри на проект Eclipse Plugin Central (www.eclipseplugincentral.com), где ты найдешь тысячи плагинов на любой вкус. Разобравшись один раз с Eclipse, ты сможешь собрать собственную рабочую среду под любую задачу!

Aptana VS. Aptana Pro

Для большинства программистов разница между бесплатной и профессиональной версией Aptana несущественна, однако для некоторых она может быть принципиальна. В частности, только в версии Pro есть поддержка развертывания проектов на удаленном сервере по протоколу SFTP, а также «самое вкусное» - полностью интегрированный в саму среду отладчик JavaScript для Internet Explorer! Да, это единственное такое решение на рынке, которое может полноценно использоваться для отладки под этот браузер любых AJAX-приложений. В обычную бесплатную редакцию входит такой же отладчик, но для Mozilla Firefox (там он не так нужен, если есть Firebug). Можно добавить еще визуальный редактор JSON-данных, однако за несколько лет постоянной работы с бесплатной и Pro-версиями Aptana потребности в нем я так и не испытал. Среди других отличий Pro-версии стоит отметить встроенный Reporting Engine для составления отчетов по проекту (читай – красивых бумажек для менеджеров и заказчиков); возможность создавать проекты на основе удаленных хранилищ (SFTP, FTP, FTPS); продвинутый анализатор производительности для RubyOnRails веб-приложений (Ruby Performance Profiler) и WSYIWYG-редактор для конфигурационных XML-файлов при создании проектов на платформе Adobe AIR. Цена вопроса – $99. Стоят ли эти дополнительные возможности своих денег - решать тебе.

INFO

Для Eclipse можно загрузить уже настроенные дистрибутивы (http://www.eclipse.org/downloads), позволяющие начать разработку на Java, Java EE, C++, – или просто саму платформу с основными плагинами, поверх которой можно начать собирать собственную среду.

WWW

По правильной идеологии MVC с использованием модного языка Ruby и самого продвинутого веб-фреймворка RubyOnRails можно творить чудеса. ][ уже писал об этом языке и самой платформе.

DVD

На нашем DVD ты найдешь необходимые средства веб-разработки.

Содержание
ttfb: 263.2269859314 ms