Хакер № 01/09 (121)
Строим RIA-приложение. Новые технологии для создания насыщенных веб-приложений
Александр Лозовюк (aleks.raiden@gmail.com)
Простые веб-страницы со скучными формами - это отстой и вчерашний день. В моде - веб-приложения с классными эффектами и мультимедиа, которые ни в чем не уступают обычным прогам. И дело даже не в AJAX! Разве не круто написать админку для бота на самых прогрессивных технологиях?
Веб-приложения и RIA - две (не)большие разницы
Начиналось все с веб-приложений - доступных через браузер сайтов, реализующих некий сервис: скажем, обработку фотографий. Такое приложение можно запускать откуда угодно, не прибегая к установке - но оно и лишено возможности получить доступ к ресурсам компьютера (кроме тех, что предоставил ей браузер). К примеру, нельзя обработать фотки с жесткого диска - их придется через веб-интерфейс загружать на сервер (довольно обломно). Однако технологии не стоят на месте, поэтому на рынке появились средства, расширяющие возможности браузера. Первыми были технологии ActiveX от Microsoft и Java-апплеты, но они оказались слишком сложны, ограничены в функциональности и, по сути, с треском провалились.
А вот Flash предложил то, от чего мир не смог отказаться и по сей день - векторная графика и анимация, доступ к аудио и видео функциям, развитые возможности программирования и продвинутый API, который вкупе с готовыми компонентами призван упростить работу мощных приложений. Одна проблема: веб-сайт с возможностями программы - это все-таки не программа, а некий ресурс, загруженный в браузере, что сильно смущает многих пользователей. Разработчики решили, что если врага нельзя победить, его можно обойти или хотя бы скрыть от пользователя. Таким образом, в браузерах появились возможности создавать веб-приложения (которые, на самом деле, никакие не приложения, а просто так выглядят) - в Google Chrome для любой страницы доступна команда «Создать ярлык приложения», которая действительно создает ярлык на Рабочем столе или в меню запуска программ. По клику открывает то же самое окно браузера, только без всяких опознавательных знаков типа панели инструментов, закладок или адресной строки. Точно так же поступает и конкурирующий проект, Mozilla Prism, используя движок Mozilla Firefox'а (собственно для использования нужно прикрутить к нему специальный плагин). По сообщениям прессы, в Safari также встроили подобные механизмы. Появились также псевдо-приложения, которые просто запускаются в отдельном окне браузера, без дополнительных панелей и меню. Взаимодействие с системой пользователя в основном ограничивается добавлением ярлыков на рабочий стол и доступом к мультимедийным функциям через обычный Flash-плагин. Я говорю об Adobe AIR, который мы уже рассматривали в статье «Воздушная технология от Adobe» (][, #111).
А что дальше? Дальше появилось то, о чем мы собственно и хотим поговорить - RIA-приложения. Аббревиатура RIA расшифровывается как Rich Internet Application и означает, что приложение очень тесно связано с Сетью, и для своей работы требует постоянного (а часто еще и высокоскоростного) соединения. Кроме того, такие приложения, как правило, имеют насыщенный графикой и визуальными эффектами интерфейс – смотрится куда круче, чем убогие кнопочки и рамки, предлагаемые обычным HTML. RIA часто имеют доступ к ресурсам клиентского компьютера, основательно выходя за рамки предоставленной браузером среды - но потому и нуждаются в специальной среде исполнения. Такие приложения используют файловую систему, не ограничиваясь теми файлами, что указывает пользователь для загрузки, юзают мощности процессора, а зачастую и другие сторонние программы, установленные на компьютере, например, кодеки. Получается, что с одной стороны - это обычная веб-страница, с другой - она очень отличается от обычного сайта и выглядит и ведет себя как самое настоящее приложение! И знаешь: технологий для создания RIA-приложений уже предостаточно! Итак, начнем?
Google Gears - шестеренки от Google
- Сайт: gears.google.com
-
Поддержка браузеров: Firefox, Internet Explorer и Safari, мобильные платформы Android и Windows Mobile
Применяется
Gears - это специальный плагин для браузеров, который расширяет доступный функционал для разработчиков AJAX-приложений. Самой главной фичей проекта является поддержка оффлайн режима работы. Другими словами, написанный с использованием Google Gears сервис заранее подгружает себе все необходимое и позволяет продолжить работу с сайтом даже, если интернет временно пропал. Вот, для примера - когда я писал эту статья в Google Docs, внезапно упал мой WiFi-роутер, и интернета не было минут 20. Тем временем я продолжал писать материал, а приложение исправно сохраняло данные в Gears. Сразу после того, как соединение было восстановлено, документ синхронизировался с серверами Google. Одним из известнейших проектов, использующих Gears, не считая, конечно, Google Docs, является популярный движок для блогов Wordpress. Начиная с версии 2.6, он использует в админ-панели возможности Gears-а для оффлайн-работы с постами и комментариями. Поэтому для написания длинной статьи наличие постоянного подключения теперь не требуется, данные сохраняются даже при перезагрузке компьютера. Популярная социальная сеть MySpace также использует возможности плагина - если он установлен, то значительно удобнее загружать множество фотографий в аккаунт (благодаря тому, что в Gears встроен загрузчик изображений, более продвинутый, нежели реализованный возможностями браузера).
Возникает вопрос: а как прикрутить поддержку Google Gears в свой проект? Очень просто. Для разработчиков доступен специальный API, с помощью которого ты можешь адаптировать свое приложение к использованию плагина. Среди «вкусных» фич можно отметить встроенную базу данных (да-да, полноценная SQL-база данных, вместе с полнотекстовым поиском), API для обработки изображений, работа с гео-информацией, возможность вынесения ресурсоемких JavaScript-задач в отдельные потоки. Последнее, кстати, крайне важно: ведь обычный скрипт на веб-странице сильно ограничен и браузер просто зависнет, если на него возложить что-то серьезное. Помимо этого Google Gears позволяет скриптам на странице взаимодействовать с файловой системой и, например, обращаться к файлам. Правда, читать/писать любые файлы на десктопе не получится (иначе было бы реально круто переименовать файл kernal32.dll всем посетителям твоей странички, хе-хе), а вот вызвать диалоговое окно для открытия - это запросто! Встроенная возможность создавать ярлыки для открытия указанного URL простым кликом - первая попытка дополнить веб-приложения взаимодействием с компьютером в обход браузера.
При всех плюсах такого подхода у него есть недостаток: для работы Google Gears у пользователя должен быть установлен плагин. Справедливости ради стоит сказать, что делов тут на несколько минут - зайти на страницу gears.google.com да нажать кнопку установки. В браузере Google Chrome он включен по умолчанию и есть все основания полагать, что вскоре он будет включен и в другие. Но все-таки, Google Gears - это явно не Adobe Flash, который установлен уже у большинства.
Google Gears и фреймворки
Разработчикам будет полезно знать, что большинство популярных AJAX-фреймворков и библиотек давно обзавелись встроенной поддержкой Gears (некоторые еще и ограждают тебя от знания и копания, что же там внутри). Все функции будут доступны, даже если Gears не установлен: библиотека попытается имитировать функционал другим способом, и лишь в крайнем случае уведомит нерадивого пользователя, что хорошо бы установить этот замечательный плагин. Вот список библиотек, которые имеют поддержку Google Gears: Dojo Toolkit и jQuery (проект jquery-offline, http://code.google.com/p/jquery-offline); ExtJS имеет начальную поддержку, а в форме выкладывались примеры – код не включен в официальный дистрибутив, но в примерах присутствует.
Yahoo! Browser Plus - плюсанутый Yahoo браузер
Применяется
-
некоторые проекты Yahoo!, Flickr
Yahoo! Browser Plus - еще один плагин для браузера, который расширяет возможности обычных веб-приложений (написанных на JavaScript). По сравнению с Google Gears, он появился недавно и еще не завоевал такой популярности, но вот что я тебе скажу: «Зря!». В отличие от Gears, BrowserPlus больше ориентирован на расширения визуальных функций и обладает несколькими уникальными фишками. Для примера: поддерживается такая обычная для приложений функция, как drag-n-drop, то есть ты просто можешь перетащить картинку на веб-страницу, и она будет автоматически загружена в открытое приложение. В плагин встроена невероятно мощная библиотека обработки графики ImageMagic с такими возможностями, что при грамотном подходе графический Photoshop Express от самой Adobe на ее фоне покажется детской игрушкой уровня MS Paint. Есть и более экзотические фичи, вроде взаимодействия с внешними приложениями на Ruby, функция доступа к устройствам, определяющим местоположение (аналогичное есть и в Gears, но актуально, по большей части, только на смартфонах и нетбуках) и даже сервис Text-to-Speech (правда, если твоя ОС так не умеет, то никакого текста ты не услышишь). Резюмирую: задумка очень и очень неплохая, правда, ей пока не хватает популярности. Причины, кстати, лежат на поверхности: плагин долгое время был закрытым, и только-только на днях объявили об открытии исходного кода.
Microsoft Silverlight/Moonlight - луч света в темном царстве
Применяется:
- на сайтах Microsoft
- сайт баскетбольной организации NBA
- сервис для подкастов и мультимедии iStreamPlanet
- сервис онлайн-телевидения sky.com
Распространенность Flash-а не дает покоя многим, включая гиганта Microsoft, а потому, доведя до ума (и неплохого, следует отметить, уровня) свою платформу .NET Framework, микрософтовцы обратили внимание на рынок веб-приложений. И вот результат - MS выпускает уже вторую версию Silverlight, а также, совместно с сообществом проекта Mono, открытую реализацию для Linux/Unix - Moonlight, что вообще знаковое событие. Это также плагин к браузеру, но уже другого порядка, нежели Gears или BrowserPLus. Silverlight - основа для исполнения приложений, которые могут использовать большинство возможностей мощной платформы .NET. Они имеют доступ к большому количеству мультимедийных функций (проигрывание HD-видео, работа с DRM-защитой, обработка аудио и видео форматов VC-1, WMV, WMA, MP3), широкие возможности разработки (ведь как основной язык применяется C#, при этом есть возможность использовать любой из .NET-языков), работа с XML и данными в базах данных, многопоточность.
Все дополняется интеграцией с DHTML и JavaScript, а значит, можно не только писать приложения на этой платформе, но и прозрачно внедрять элементы Silverlight на веб-страницу, например, поддержку видео или средств рисования. А при помощи API для работы с сетью реально даже обойти ограничения обычного XMLHTTPRequest, являющегося основой всего AJAX-мира: допустим, реализовать возможность двустороннего обмена данными между клиентом и сервером по инициативе любой из сторон (то, что в AJAX-мире называется server-push или Comet и требует особых извращений для реализации). Здесь уже сложно понять, где кончается браузер и начинается операционная система. Silverlight - с одной стороны, это все же плагин к браузеру и все его возможности доступны на веб-страницах и через JavaScript API, с другой - он опирается на системные библиотеки и возможности, предоставляя разработчику в браузере почти все возможности обычных программ для .NET. Так что, если ты не кривишься при одном упоминании компании Microsoft и хочешь идти в ногу со временем, не стесняя себя в разработке крутых веб-программ, присмотрись к Silverlight 2, это действительно круто! Да, забыл сказать, что вся эта кухня работает как на Windows, так и на Mac, а с некоторыми ограничениями – даже на Linux.
Adobe Flash/Flex и немного алхимии
Применяется
Flash представлять особо не надо, думаю, все и так его знают. Не так известна новая платформа, ориентированная как раз на веб и RIA-приложения - Adobe Flex. Она также базируется на Flash, однако дополнена серверными компонентами, позволяющими обмениваться данными с приложением, а также языком описания интерфейсов MXML, который автоматизирует некогда рутинную работу по созданию разных кнопочек, меню и других GUI-элементов. Более того, Flash и Adobe не намерены отставать от конкурентов. Недавно анонсированная 10-я версия флеша – еще мощнее и интересней в плане основы для веб-приложений. Аналогично другим технологиям, а в особенности Silverlight, она предлагает развитые средства поддержки векторной графики, мультимедийных эффектов и работы с видео-аудио, вплоть до HD, мощные операции по обработке графики и мультимедии через компонент Adobe Pixel Blender!
Но и это не все. Не открою секрет, если скажу, что во Flash встроена аппаратная акселерация. Понятно, что игры вроде FarCry или Crysis на флеше не сделаешь, а вот уровня Quake/Doom - вполне! Проект Adobe Alchemy - это целая алхимия для веб-приложений. Ведь теперь прямо с флеш-плеера можно обращаться и полноценно задействовать в работе сторонние компоненты, написанные на языках, привычных для настольной разработки, например С++. Специальный компилятор берет код любой библиотеки на С++ и превращает в код для виртуальной машины низкого уровня (еще не нативный код для процессора, но уже близко к нему и кроссплатформенно, ведь исполняется он поверх флеша – хоть намного ближе к процессору, чем к браузеру). Берешь C++ библиотеку, например, 3D-движок, компилируешь ее, а потом во флеше просто загружаешь и работаешь, получая таким образом без всяких специальных движков полное 3D со всеми поддержками DirectX или OpenGL! Если раньше гуру писали трехмерные движки на самом флеше, изощряясь и удивляя даже самих адобовцев (не веришь, посмотри - http://alternativaplatform.com/ru), то теперь такой же и даже выше уровень можно получить, просто скомпилировав хороший движок. Кстати - в Doom не хочешь поиграть? Тебе сюда - www.newgrounds.com/portal/view/470460.
А что в осадке?
А результат у нас простой. Для расширения функциональности веб-сайтов и всяких сетевых сервисов придумали и даже воплотили в железе (ой, в коде) сначала плагины для браузеров. Расширяя JavaScript, они добавили возможности, ранее недоступные или ограниченные, для обычных веб-страниц. Поигравшись с новинками, все сказали «вау, круто!». После чего опять продолжились разговоры об ограничениях, сетование на недоступность возможностей и прогресс в настольных платформах, например .NET от Microsoft. И здесь появилась вторая волна средств - плагины-платформы Silverlight и Adobe Flash/Flex/Alchemy, которые принесли в браузер большинство фичей настольного программирования, включая языки (C# и .NET Framework в Silverlight 2, С++ в Alchemy) и расширенную поддержку современной мультимедии. Правда, теперь писать на привычном JavaScript уже не получится, – надо изучать серьезные языки и соответствующие средства разработки. Блокнотом и подсветкой синтаксиса не обойдешься, применяй большие IDE (зря мы, что ли, описывали тебе десктоп веб-кодера в прошлом номере?). Все плавно перекочевало в плагины и теперь, если ты открываешь современное RIA-приложение на этих платформах, то смирись, что страничка - это только обертка, а браузер, скорее, помеха, чем помощник в работе. Тут уже недалеко до кощунственной мысли: а зачем веб-приложению, собственно, браузер? Может, ну его, нафиг? :)
Гоняем в Quake в браузере
Native Client (http://code.google.com/p/nativeclient) - новая технология от Google, представляющая собой открытую среду для запуска родного x86-кода прямо в браузере! Конечно, такой код должен отвечать требованиям безопасности и компилировать его надо специальными инструментами, но это уже серьезно! Так можно и Linux скомпилировать и заставить выполняться в браузере! Ну, или Quake запустить. Сделать это, кстати, несложно - всего в два шага:
- Сначала установить Native Client (http://code.google.com/p/nativeclient);
- Открыть в Google Chrome или Firefox'е страницу http://projects.cocaman.net/quake/quake.html.
На днях вышла интересная технология от Sun, для поклонников Java – JavaFX. Она предназначена для разработки и запуска в браузере RIA-приложений, написанных при помощи специального языка FxScript. Платформа запускается поверх установленной JRE и обеспечивает продвинутые средства воспроизведения мультимедии (правда, им далеко до Silverlight или Flash), рисование, взаимодействие с веб-сервисами, а главное - работу на мобильных устройствах, что флешу дается ой как сложно. Большим плюсом будет то, что под Java есть множество средств разработки, которые пригодятся и при разработке JavaFX. Конечно, это только первая версия, и Sun еще надо реабилитироваться за провальные java-апплеты... Подробности: http://www.javafx.com/about/overview
DVD
На диске ты найдешь хорошую подборку для создания RIA-приложений!
INFO
Titanium (www.titaniumapp.com) - это открытая компонентная среда, которая позволяет при помощи все тех же исконно веб-технологий HTML/CSS/JavaScript строить десктопные и мобильные приложения с базами данных, окнами, меню и кросс-платформенными интерфейсами. Проекту только пару недель отроду.
WWW
Перечень возможностей Silverlight 2 и отличия от предыдущей версии: http://silverlight.net/GetStarted/overview.aspx. А также на сайтах русскоязычного сообщества: www.silverlighter.ru, www.silverlight.ru.
Версию для Unix-систем ты можешь взять отсюда: www.go-mono.com/moonlight. Но ведь нужны еще и средства разработки! Триал-версия MS Expression Studio 2 доступна для загрузки с сайта Microsoft: expression.microsoft.com.
WARNING
Если Google Gears или Yahoo BrowserPlus не требуют новых навыков от разработчика, то при работе с Flash, Silverlight или JavaFX для написания приложений нужно изучать новый язык.
RIA иногда могут работать и без подключения к Сети, но это скорее аварийный режим - на всякий случай.
Содержание
ВИДЕО К ЭТОМУ НОМЕРУLiveCD мощное оружие профи
Возможность создавать дистрибутив для собственных нужд является одним из самых больших плюсов свободного ПО. В результате на сегодняшний день доступно несколько десятков дистрибутивов, упрощающих работу админа и направленных на решение...
API-внедрение
В ролике рассмотрен метод добавления в таблицу импорта PE-файла новой API-функции из сторонней DLL-библиотеки, используя утилиту iidking. Помимо этого мы познакомимся с приемом для запутывания реверсера, заключающийся в модификации кода,...
Самосборные окна
Для создания своего образа системы Microsoft предлагает пакет автоматической установки Windows (AIK). Его основная задача - упрощение установки, настройки и развертывания всего семейства операционных систем Windows, включая Vista и ...
|
 |
|
