Издательский дом ООО "Гейм Лэнд"ЖУРНАЛ ХАКЕР 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 ты найдешь необходимые средства веб-разработки.

Содержание
загрузка...
Журнал Хакер #151Журнал Хакер #150Журнал Хакер #149Журнал Хакер #148Журнал Хакер #147Журнал Хакер #146Журнал Хакер #145Журнал Хакер #144Журнал Хакер #143Журнал Хакер #142Журнал Хакер #141Журнал Хакер #140Журнал Хакер #139Журнал Хакер #138Журнал Хакер #137Журнал Хакер #136Журнал Хакер #135Журнал Хакер #134Журнал Хакер #133Журнал Хакер #132Журнал Хакер #131Журнал Хакер #130Журнал Хакер #129Журнал Хакер #128Журнал Хакер #127Журнал Хакер #126Журнал Хакер #125Журнал Хакер #124Журнал Хакер #123Журнал Хакер #122Журнал Хакер #121Журнал Хакер #120Журнал Хакер #119Журнал Хакер #118Журнал Хакер #117Журнал Хакер #116Журнал Хакер #115Журнал Хакер #114Журнал Хакер #113Журнал Хакер #112Журнал Хакер #111Журнал Хакер #110Журнал Хакер #109Журнал Хакер #108Журнал Хакер #107Журнал Хакер #106Журнал Хакер #105Журнал Хакер #104Журнал Хакер #103Журнал Хакер #102Журнал Хакер #101Журнал Хакер #100Журнал Хакер #099Журнал Хакер #098Журнал Хакер #097Журнал Хакер #096Журнал Хакер #095Журнал Хакер #094Журнал Хакер #093Журнал Хакер #092Журнал Хакер #091Журнал Хакер #090Журнал Хакер #089Журнал Хакер #088Журнал Хакер #087Журнал Хакер #086Журнал Хакер #085Журнал Хакер #084Журнал Хакер #083Журнал Хакер #082Журнал Хакер #081Журнал Хакер #080Журнал Хакер #079Журнал Хакер #078Журнал Хакер #077Журнал Хакер #076Журнал Хакер #075Журнал Хакер #074Журнал Хакер #073Журнал Хакер #072Журнал Хакер #071Журнал Хакер #070Журнал Хакер #069Журнал Хакер #068Журнал Хакер #067Журнал Хакер #066Журнал Хакер #065Журнал Хакер #064Журнал Хакер #063Журнал Хакер #062Журнал Хакер #061Журнал Хакер #060Журнал Хакер #059Журнал Хакер #058Журнал Хакер #057Журнал Хакер #056Журнал Хакер #055Журнал Хакер #054Журнал Хакер #053Журнал Хакер #052Журнал Хакер #051Журнал Хакер #050Журнал Хакер #049Журнал Хакер #048Журнал Хакер #047Журнал Хакер #046Журнал Хакер #045Журнал Хакер #044Журнал Хакер #043Журнал Хакер #042Журнал Хакер #041Журнал Хакер #040Журнал Хакер #039Журнал Хакер #038Журнал Хакер #037Журнал Хакер #036Журнал Хакер #035Журнал Хакер #034Журнал Хакер #033Журнал Хакер #032Журнал Хакер #031Журнал Хакер #030Журнал Хакер #029Журнал Хакер #028Журнал Хакер #027Журнал Хакер #026Журнал Хакер #025Журнал Хакер #024Журнал Хакер #023Журнал Хакер #022Журнал Хакер #021Журнал Хакер #020Журнал Хакер #019Журнал Хакер #018Журнал Хакер #017Журнал Хакер #016Журнал Хакер #015Журнал Хакер #014Журнал Хакер #013Журнал Хакер #012Журнал Хакер #011Журнал Хакер #010Журнал Хакер #009Журнал Хакер #008Журнал Хакер #007Журнал Хакер #006Журнал Хакер #005Журнал Хакер #004Журнал Хакер #003Журнал Хакер #002Журнал Хакер #001