Работаем с ExtJS на языке РНР — библиотека PHP-Ext

Я вряд ли ошибусь, если предположу, что язык РНР достаточно популярен, если не самый популярный в веб-разработке. Мы не будем анализировать причины этого (а тем более, следствия), а сконцентрируемся на одном небольшом аспекте, а именно — как на РНР разрабатывать сложные AJAX веб-приложения. И не просто так разрабатывать, а использовать в своей работе библиотеку ExtJS, которая позволяет создавать интерфейсы для этих веб-приложений. Конечно, все это можно разнести и серверная сторона, на РНР или на любом другом языке, совершенно ничего не будет знать о клиентской части и AJAX-библиотеке, просто оперируя JSON данными и обычным HTML. Но можно сделать и по-другому — этот подход, аналогичен популярной сегодня технологии Google Web Toolkit. Мы ничего не разделяем, а просто пишем приложение, используя одну среду, один язык и все возможности (и языка и среды), а уже сервер самостоятельно генерирует код для клиента, полностью автоматически. Таким образом можно совсем (ну или почти) не знать и не разбираться в верстке, JavaScript и ExtJS, но писать приложения, которые будут использовать этот фреймворк.

Для языка Java подобные решения существуют, а недавно такой проект, EXT GWT, даже перешел под крыло самой компании-разработчика ExtJS, превратившись в вполне серьезное профессиональное решение. Ну а как в других языках? Java, конечно, хорошо и даже отлично, но душа и тело хотят разнообразия, или просто не хотят переучиваться. Для таких случаев есть свои решения. И одно из них, для РНР, так и называется — PHP-Ext.

Эта библиотека представляет из себя набор классов, частично повторяющий классы из ExtJS, которые переписаны на PHP, при этом добавлен механизм генерации выходного JS-кода, которые, собственно и отсылается браузеру для исполнения. Разработчик оперирует только РНР — подключаем библиотеку, инициализируем ее, а потом создаем нужные нам обьекты в виде РНР-классов, задаем им необходимые свойства, а в конце кода просто вызываем генерацию JavaScript и отсылаем ее браузеру.

Конечно же, такой подход позволяет использовать все возможности ваших любимых сред разработки — автодополнение синтаксиса, подсветка кода, встроенные отладчики, другие средства проверки кода. — не секрет, что для РНР таких средств намного больше, чем для JavaScript.

Код самой библиотеки достаточно большой, но текущая версия полностью совместима с РНР 5, в частности, использует все доступные возможности ООП. Сам код достаточно хорошо документирован (хоть и не идеально), а его структура соответствует стандарту Zend Framework PHP Coding Standard, что само по себе уже не так часто встретишь в развивающихся любительских проектах, здесь это показатель серьезности разработки и, наверное, надежд на ее развитие (а вдруг и компания-разработчик ExtJS примет участие в проекте, так же, как это сделано с ExtGWT, в таком случае можно реально говорить о проекте-стартапе, причем, весьма успешном). Для разработчиков есть несколько примеров работы с типовыми обьектами, например, формами — не придумывая собственные примеры, авторы библиотеки просто переделали те, что идут в стандартной поставке ExtJS, переписав их с использованием своей библиотеки. Это отличный способ посмотреть на ее реальные возможности и даже сравнить генерируемый код. Ну а для углубленного изучения есть справка по API, генерируемая по комментариям в коде при помощи phpDocumentator.

Пока, правда, не все еще возможности реализованы, хотя тех, что есть, вполне хватит для построения относительно сложных приложений. В некоторые недостатки, с оговоркой на новизну проекта, я бы записал и использование предыдущей версии ExtJS — 2.0.2 (хотя и с 2.0.1 работает), тогда как сейчас стоит уже ориентироваться на 2.1. Но это будет поправлено, ведь сейчас только второй релиз под номером 0.8.2, поэтому пока считаем, что просто совершенствуем технологию.

Потенциал развития библиотеки очень большой, в частности, как по пути более полного переноса всего ExtJS API на сторону РНР, так и в сторону совершенствования самой платформы. Например, логично было бы иметь в составе генератора кода средства для сжатия кода, удаление неиспользуемых модулей (исходя из используемых классов и их зависимостей, сервер может на лету строить набор необходимых классов и генерировать сборку ExtJS под ваше приложение, пока же это можно сделать вручную при помощи он-лайнового конструктора). Пока проект молодой, но развивается достаточно быстро и, если за его разработкой будут стоять профессионалы и серьезная архитектура, он сможет стать отличным инструментом для разработки современных AJAX-приложений.

На мой же взгляд, вариант все же несколько сложный, вернее, слишком много кода и работы с ним для генерации интерфейса, при этом всеравно необходимо четко себе представлять, как страница генерируется и как будет работать этот JavaScript код, необходимо, мне кажется, даже лучше знать ExtJS и его возможности, чем при обычном варианте разработки, когда серверная сторона совершенно не знает о клиенте. А вот какой-то проект, совмещающий шаблонный движок, например, Smarty или Template Lite (мой любимый) был бы просто фантастикой, если упросить создание и наполнение сложных шаблонов. В то же время, так как все последние версии ExtJS умеют генерировать визуальную часть по JSON-разметке, например, формы или окна, то я вижу очень много путей упрощения серверной части, которая бы генерировала только необходимый минимум JS кода, а основную часть разметки страницы — в виде JSON-данных. Но это уже совсем другая архитектура и подход.

А на последок приведем один пример, для того, чтобы наглядно понять механизм работы PHP-Ext. Следующий пример выводит обычную панель, которая может сворачиваться и разворачиваться, один из самых применяемых и универсальных виджетов библиотеки.

1. Так панель выглядит в браузере



2. Так выглядит код на РНР для генерации этой панели и задания ее параметров.

setTitle("My Panel")
  ->setCollapsible(true)
  ->setRenderTo(PhpExt_Javascript::variable("Ext.get('centercolumn')"))
  ->setWidth(400)
  ->setHtml(PhpExt_Javascript::variable("Ext.example.bogusMarkup"));  

echo PhpExt_Ext::OnReady(
	$p->getJavascript(false, "p")
);
?>

3. Это код, которые РНР-Ext сгенерировал для отображения этой формы (без кода самой страницы и подключения библитек).

Ext.onReady(function(){
var p = new Ext.Panel({title: 'My Panel',collapsible: true,
renderTo: Ext.get('centercolumn'),width: 400,html:
Ext.example.bogusMarkup});
});

4. А это оригинальный код с примеров ExtJS

Ext.onReady(function(){
    var p = new Ext.Panel({
        title: 'My Panel',
        collapsible:true,
        renderTo: 'container',
        width:400,
        html: Ext.example.bogusMarkup
    });
});

P.S. Кросс-пост с моего блога.