Главная > Adobe AIR, AJAX, Flash, ActionScript, Open Source, Silverlight, web2.0, веб-обзоры, Разное > На чем строить веб-приложения будете, господа? Статья для журнала Хакер

На чем строить веб-приложения будете, господа? Статья для журнала Хакер

10 июня 2009

121Статья написана специально для журнала Хакер и опубликована в бумажной версии (в несколько сокращенной и отредактированной версии). Редакторскую версию из бумажной версии можно прочитать на сайте журнала, ниже я публикую свой оригинальный вариант,  без правок или ограничения на объем материала.

Простые веб-странички с серыми HTML-формами - это отстой и прошлое. Сегодня в моде веб-приложения с графикой, видео и мультимедией, да побольше. Если хочешь узнать, как работают такие приложения и что для этого нужно - читай обзор!

Веб-приложения и  RIA -  две (не)большие разницы

Для начала давай все же разберемся, что это за термины и что за ними стоит (или ничего). RIA расшифровывается как Rich Internet Application и означает, что приложения очень тесно связаны с сетью, и для своей работы требуют постоянного, а часто и еще высокоскоростного соединения. Кроме этого, такие приложения обязательно имеют насыщенный графикой, анимацией и визуальными эффектами интерфейс, а не обычные убогие серые рамки и кнопочки, которыми нас раньше мог порадовать HTML. Часто они имеют доступ к ресурсам клиентского компьютера, выходя уже за рамки предоставляемой браузером среды. Такие приложения используют файловую систему, не ограничиваясь только теми файлами, что указывает пользователь для загрузки, используют мощности процессора, а зачастую и другие сторонние программы, установленные на компьютере, например, кодеки. То есть, в сумме получается, что с одной стороны - это обычная веб-страница, с другой - она очень отличается от обычного сайта и по всей своей сущности выглядит и ведет себя как самое настоящее приложение! Но при этом обычным приложением не являясь!

А что же такое тогда "веб-приложение"? Разве это не одно и то же, просто привычный перевод на русский язык? Оказывается так, но не совсем. Сейчас разберемся. Обычно, веб-приложение, это некоторый сайт, доступный через браузер, реализующий некий сервис, например, обработку фотографий, при чем все функции сервиса доступы прямо в браузере и оформлены в виде интерфейса, напоминающего обычную ОС (доступны операции копирования/вставки, перетаскивания мышью объектов). При этом все происходит в рамках браузера, такое приложение обычно не имеет возможности получить доступ к ресурсам компьютера за пределами той области, что отвел для него браузер. Поэтому можно считать, что веб-приложение это немного урезанная версия RIA, как более общей технологии, ее частный случай.

Однако технологии не стоят на месте. Сначала текущие возможности давали разработчиками в руки только инструменты для создания веб-приложений, однако, когда все поняли, что такая модель очень удобна и понравилась как пользователям, так и самим разработчикам, стали видны ее ограничения. Поэтому на рынке появились средства, расширяющие возможности браузера. Первыми были технологии ActiveX от Microsoft и Java-апплеты, однако они оказались слишком сложны, ограничены в функциональности и, по сути, провалились на рынке. А вот Flash, который теперь собственность Adobe, предложил то, от чего мир не смог отказаться и по сей день - векторная графика, анимация, доступ к аудио и видео функциям, развитые возможности программирования и API, внутренние компоненты, призванные упростить разработку мощных приложений. Поэтому сейчас, когда мы упоминаем RIA или веб-приложения, во многих случаях это означает одно и то же - Flash (сейчас уже 10-й версии).

Не имея возможности обеспечить своим проектам работу вне рамок браузера, разработчики  решили, что если врага нельзя победить, его можно обойти или хоть бы скрыть от пользователя. Таким образом, в браузерах появились возможности создавать веб-приложения (которые, на самом деле, никакие не приложения, просто так выглядят) - в Google Chrome для любой страницы доступна команда "Создать ярлык приложения", которая действительно создает ярлык на Рабочем столе или в меню запуска программ, а по клику - открывается в реальности то же окно браузера, только без всяких опознавательных знаков вроде панели инструментов, закладок или адресной строки.

Точно так же поступает и конкурирующий проект, Mozilla Prism, который позволяет создавать окна браузера без дополнительных элементов и таким образом имитировать обычные приложения. В 3.0 версии браузера Mozilla Firefox такой функционал доступен, если установить плагин (раньше это была отдельная программа). По сообщениям, в Safari также встроили подобные механизмы. Но ты же понимаешь, что это в реальности никакое не RIA и даже не веб-приложения, просто маркетинговый термин. Ведь код сервиса все равно выполняется в браузере, со всеми его ограничениями и ресурсами, часто даже разделяя ядро с запущенным рядом браузером для просмотра страниц (а они имеют противное свойство иногда падать, закрывая по ошибке весь браузер полностью). Более того, такое "приложение" не может работать без интернета, ведь должен же браузер, сокрытый там внутри, подключиться к сайту и загрузить скрипты и графику.

В итоге мы имеем следующие варианты веб-приложений (если использовать этот термин как общий):

  • RIA-приложения, имеющие доступ к ресурсам компьютера, исполняющиеся на специальной собственной платформе, обладающие мультимедийным интерфейсом и функциональностью, распространяемые или тесно взаимодействующие с сетью. В большинстве случаев они могут работать и без подключения к Сети, но это аварийный, так сказать, режим работы, в основном все приложения требуют наличия интернета.
  • Веб-приложения, обладающие развитым интерфейсом, работают в браузере и могут требовать наличие дополнительных плагинов (в большинстве случаев, Adobe Flash).
  • Псевдо-приложения, которые просто запускаются в отдельном окне браузера, без дополнительных панелей и меню. Взаимодействие с системой пользователя в основном ограничивается добавлением ярлыков на рабочий стол и доступ к мультимедийным функциям через обычный Flash-плагин.

Честно говоря, третий вариант слишком бедный и ограниченный, чтобы его рассматривать, поэтому сосредоточимся на остальных. Первые представители полноценных платформ только начали появляться на рынке и пока имеют статус экспериментов, ну разве что Adobe AIR, о котором журнал уже писал. Но про реальное применение все же говорить еще очень рано, поэтому мы сосредоточимся на том, что уже реально используется, востребовано и работает. Хотя нужно держать ухо востро, на этом рынке борьба гигантов индустрии только-только начинается.

Что есть для разработки веб-приложений?

Для разработки веб-приложений, которые будут работать непосредственно в браузере, и, вместе с этим, покажут какой ты крут, надо разобраться, какие средства будем применять. Хочу сказать, что все основные функции во всех проектах присутствуют и реализованы более-менее схожим образом, поэтому выбирать основу можно по своему желанию. И так, приступим.

Google Gears.

Сайт: gears.google.com
Поддержка браузеров: Firefox, Internet Explorer и Safari, мобильные платформы Android и Windows Mobile
Применяется:
Google Docs, Google Reader, RememberTheMilk, Zoho Writer, Блог-движок WordPress, встроен в браузер Google Chrome

gears

Gears это специальный плагин для браузеров, который расширяет доступный функционал для разработчиков AJAX-приложений. Самой основной фичей проекта является поддержка офф-лайн режима работы, когда плагин автоматически анализирует страницу, загружает себе все необходимое для работы, и вы можете продолжить работу с сайтом даже если интернет временно пропал. Вот, для примера - когда я писал эту статья в Google Docs, внезапно упал мой Wi-Fi роутер, и интернета не было минут 20, тем временем я продолжал писать материал, а приложение исправно сохраняло данные в Gears. Потом же, когда соединение восстановлено, документ был синхронизирован с серверами Google. Одним из известнейших проектов, использующих Gears, не считая, конечно, Google Docs, является популярный движок для блогов WordPress, который с версии 2.6 использует в админ-панели возможности Gears-а для оффлайн работы с постами и комментариями, не требуя, к примеру, для написания длинной статьи постоянного соединения с интернетом. Конечно же, данные сохраняются даже при перезагрузки компьютера. Популярная социальная сеть MySpace также использует возможности плагина - если он установлен, вы можете значительно удобнее загружать множество фотографий в свой аккаунт, ведь в Gears есть и загрузчик изображений, более продвинутый, чем возможности браузера. Для разработчиков в Gears доступен API и ты можешь адаптировать свое приложение к использованию плагина, если есть такая возможность. Среди "вкусных" фич можно отметить встроенную базу данных (да-да, полноценная SQL-база данных, вместе с полнотекстовым поиском), API для обработки изображений, работы с гео-информацией, возможность вынесения ресурсоёмких JavaScript задач в отдельные потоки, ведь обычный скрипт на веб-странице сильно ограничен и браузер просто зависнет, если на него возложить что-то серьезное.

Также Google Gears позволяет скриптам на странице взаимодействовать с файловой системой, например, открывать файлы, однако это лишь базовый функционал, ты можешь только программно вызвать диалоговое окно открытия файла, но не читать/писать любые файлы на десктопе (иначе это было бы реально круто, переименовать файл kernal32.dll всем посетителям твоей странички, хе-хе). А вот встроенная возможность создавать ярлыки для открытия указанного URL простым кликом - это уже первая попытка дополнить веб-приложения возможностью взаимодействовать с компьютером в обход браузера.

Но если ты не любишь или не хочешь утруждать себя установкой каких-то плагинов (хотя это дело пары минут, просто зайди на страницу gears.google.com и нажми кнопку установки), то попробуй использовать браузер Google Chrome, о котором подробно мы уже писали [ссылка на статью] - в нем уже встроена поддержка Gears, поэтому ничего делать не надо, открыл страницу и работаешь!

Врезка. Для разработчиков будет полезно знать, что большинство популярных AJAX-фреймворков и библиотек давно обзавелись встроенной поддержкой Gears, а некоторые даже ограждают тебя от знания и копания, что же там внутри - все функции будут доступны, даже если Gears не установлен, просто в таком случае библиотека попытается имитировать функционал другим способом, и лишь в крайнем случае уведомит нерадивого пользователя, что хорошо бы установить этот замечательный плагин. И так, список библиотек, которые имеют поддержку Google Gears: Dojo Toolkit и jQuery (проект jquery-offline), ExtJS имеет начальную поддержку, а в форме выкладывались примеры, правда, код не включен в официальный дистрибутив (но присутствует в примерах).

Yahoo! Browser Plus - ещё один плагин для браузера, который расширяет возможности обычных веб-приложений (написанных на JavaScript). По сравнению с Google Gears, он появился недавно и еще не завоевал такой популярности. Ну и зря! В отличие от Gears, BrowserPlus более ориентирован на расширения визуальных функций и обладает несколькими уникальными фишками. Для примера, поддерживается такая обычная для приложений функция, как drag-n-drop, то есть вы просто можете перетащить картинку на веб-страницу, и она будет автоматически загружена в открытое приложение. В плагин встроена невероятно мощная библиотека обработки графики ImageMagic, хотя ее возможности не использованы сейчас и на 1% - доступен только функционал изменения размера изображений и наложения эффектов, а ведь если сделать весь интерфейс ImageMagic доступным для AJAX-приложений, то онлайновый Photoshop Express от самой Adobe покажется детской игрушкой уровня MS Paint!

1

Есть и более экзотические возможности, вроде взаимодействия с внешними приложениями на Ruby, функция доступа к устройствам, определяющим местоположение (аналогичное есть и в Gears, но актуально, по большей части, только на смартфонах и нетбуках) и даже сервис Text-to-Speech, правда, если ваша ОС так не умеет, то никакого текста вы не услышите. В общем, задумка очень неплохая, но еще бы популярности добавить, да и сам плагин ранее был закрытым, и только на днях объявлено об открытии исходного кода.

Сайт: browserplus.yahoo.com
Поддержка браузеров: Firefox, IE 6/7,Safari, Chrome, платформы Mac и PC
Применяется:   некоторые проекты Yahoo!, Flickr

Microsoft Silverlight/Moonlight

Сайт: microsoft.com/silverlight/
Поддержка браузеров: Firefox, IE 6/7, Safari, платформы Mac, PC и Linux/Unix
Применяется:
на сайтах Microsoft
сайт баскетбольной организации NBA
сервис для подкастов и мультимедии iStreamPlanet
сервис онлайн телефиденья sky.com


Распространенность Flash-а не дает покоя всем, включая гиганта Microsoft, поэтому, развив и доведя до ума (и неплохого, следует сказать, уровня) свою платформу .NET Framework, микрософтовцы обратили внимание и на рынок веб-приложений, выпустив, сейчас уже вторую (о первой мы уже писали) версию 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 и требует особых извращений для реализации). Забыл сказать, что это все добро работает как на Windows, так и на Mac, а с некоторыми ограничениями, даже на Linux. Здесь уже сложно понять, где кончается браузер и начинается операционная система и Silverlight - с одной стороны, это все же плагин к браузеру и все го возможности доступны на веб-страницах и через JavaScript API, с другой - он опирается на системные библиотеки и возможности, предоставляя разработчику в браузере почти все возможности обычных программ для .NET. Так что если ты не кривишся при одном упоминании компании Microsoft, и хочешь идти в ногу со временем, не стесняясь в разработке крутых веб-программ, присмотрись к Silverlight 2, это действительно круто!

Врезка: отличный перечень возможностей Silverlight 2 и отличия от предыдущей версии ты можешь найти здесь. Версию для Unix-систем ты найдешь здесь. Но ведь нужны и средства разработки! Триал-версия MS Expression Studio 2 доступна для загрузки.  Есть и русскоязычное сообщество - просто зарегистрируйся на сайте http://silverlighter.ru или посети форум http://silverlight.ru

INFO
Если Google Gears или Yahoo BrowserPlus не требуют новых навыков от разработчика, то  Flash, Silverlight или JavaFX требуют для написания приложений изучать  новый язык.


Adobe Flash/Flex  и немного алхимии

Сайт: http://www.adobe.com/products/
Поддержка браузеров: Firefox, IE 6/7, Safari, платформы Mac, PC и Linux/Unix
Применяется:
на сайтах Adobe
интерактивные векторные карты www.orbismap.com
аукцион eBay
Google Analytics
Еще список Flex-приложений

Flash представлять особой нужды не надо, думаю все и так его знают. Не так известна новая платформа, ориентированная как раз на веб и RIA-приложения - Flex, которая также базируется на Flash, дополненная как серверными компонентами, позволяющими обмниваться данными с приложением, так и языком описания интерфейсов MXML, который автоматизирует некогда рутинную работу по созданию разных кнопочек, меню и других GUI-элементов. Более того, смотря на конкурентов, Flash и Adobe никак не сдаются. Недавно анонсированная 10-я версия флеша еще более мощная и интересная в плане основы для веб-приложений. Аналогично другим, а в особенности Silverlight, она предлагает развитые средства поддержки векторной графики, мультимедийных эффектов и работы с видео и аудио, вплоть до HD, мощные операции по обработке графики и мультимедии через компонент Adobe Pixel Blender.

4

Но и это не все! Хотя поддержка аппаратной акселерации и есть уже давно во Flash, но всем понятно, что это немного не то, и FarCry или Crysis на флеше никак не сделаешь... хотя... А вот что-то уровня Quake/Doom вполне! Проект Adobe Alchemy это для веб-приложений действительно целая алхимия. Ведь теперь прямо с флеш-плеера можно обращаться и полноценно задействовать в работе сторонние компоненты, написанные на других языках, привычных для настольной разработки, например С++. Специальный компилятор берет код любой библиотеки на С++ и превращает его в код для виртуальной машины низкого уровня (это еще не нативный код для процессора, но близко к нему, а, кроме того, кроссплатформенно, ведь исполняется он поверх флеша, хоть намного ближе к процессору, чем к браузеру). То есть, берёшь C++ библиотеку, например, 3D движок, компилируешь её, а потом во флеше просто загружаешь и работаешь, получая таким образом без всяких специальных движков полное 3D со всеми поддержками DirectX или OpenGL. Если раньше гуру писали трехмерные движки на самом флеше, изощряясь и удивляя даже самих адобовцев (не веришь, посмотри.), то теперь такой же и даже выше уровень можно получить, просто скомпилировав хороший движок и получив более быстрый и качественный результат.

Врезка. Подробнее про алхимию можно почитать на английском на сайте Adobe, а в качестве примера - Doom во флеш-плеере.

2

А что в осадке?

А результат у нас простой. Для простого расширения функциональности веб-сайтов и всяких сетевых сервисов придумали и даже воплотили в железе (ой, нет в коде) сначала плагины для браузеров, который расширяя JavaScript, добавили возможности, ранее недоступные или ограниченные для обычных веб-страниц. Таким образом, Google Gears и Yahoo! BrowserPlus это плагины, позволяющие расширить вполне обычные веб-страницы новым функционалом, не требуя от разработчиков изучения других языков, кроме привычного JavaScript. И это только начало. Поигравшись с новыми возможностями, все сказали "вау, круто!", но продолжыли разговоры, что все это убого, в частности, кивая на богатства языковых возможностей и прогресс в настольных платформах, например .NET от Microsoft. И здесь появилась вторая волна средств - плагины-платформы, Silverlight и Adobe Flash/Flex/Alchemy, которые принесли в браузер большинство возможностей настольного программирования, включая языки (C# и .NET Framework в Silverlight 2, С++ в Alchemy) и расширенную поддержку современной мультимедии. Правда, теперь писать на привычном JavaScript уже не получится, надо изучать серьезные языки и соответствующие средства разработки - здесь блокнотом и подсветкой синтаксиса не обойдешься, применяй большие IDE (не даром мы как раз описывали тебе десктоп веб-кодера? ссылка на статью). Все плавно перекочевало в плагины и теперь, если вы открываете современное RIA-приложения на этих платформах, то смиритесь, что страничка это только обертка, а браузер скорее помеха, чем помощник в работе. А так уже не далеко до кощунственной мысли - а зачем веб-приложению, собственно, сам браузер? Может, того, ну его, нафиг?

Врезка. Titanium - это открытая компонентная среда, которая позволяет при помощи все тех же исконно веб-технологий HTML/CSS/JavaScript строить десктопные и мобильные приложения с базами данных, окнами, меню и кросс-платформенными интерфейсами. Но этому проекту только пару недель отроду, так что что-то определенное сказать сложно, но глядя на примеры - круто! Мы уже писали об этой платформе.

Врезка. Google Native Client, открытая среда для запуска родного x86 кода прямо в браузере! Конечно, такой код должен отвечать требованиям безопасности и компилировать его надо специальными инструментами, но это уже серьезно! Так можно и Linux скомпилировать и заставить выполнятся в браузере!

Врезка. Хочешь поиграть в Quake?
1. Тебе понадобится Python 2.4 или 2.5, GNU make и набор утилит SCons, который входит в пакет Native Client
2. Конечно же, исходный код и ресурсы от игры
3. Запускаем подготовительный скрипт - python run.py и всё!
4. Идём в директорию с готовой игрой - install_dir/nacl/staging

Врезка
На днях вышла интересная технология от Sun, для поклонников Java - JavaFX, предназначенная для разработки и запуска в браузере RIA-приложений, написанных при помощи специального языка FxScript. Платформа запускается поверх установленной JRE и обеспечивает продвинутые средства воспроизведения мультимедии (правда, им далеко до Silverlight или Flash), рисование, взаимодействие с веб-сервисами, а главное - работа и на мобильных устройствах, что флешу дается ой как сложно. Большим плюсом есть то, что под Java есть множество средств разработки, которые пригодятся и при разработке JavaFX. Конечно, это только первая версия, и Sun ещё надо реабилитироваться за провальные java-апплеты...

  1. haspadar
    10 июня 2009 в 16:57 | #1

    Надо бы сильно сократить количество слов «версия» в первух 2 предложениях

  2. kostya
    11 июня 2009 в 09:58 | #2

    о JavaFX написано не верно. появилась еще в прощлом году и предназначена не для «ля разработки и запуска в браузере RIA-приложений», а for creating and delivering rich Internet applications that can run across wide variety of connected devices. The current release (JavaFX 1.2, June 2009) enables building applications for desktop, browser and mobile phones. TV set-top boxes, gaming consoles, Blu-ray players

    • 11 июня 2009 в 11:06 | #3

      правда, учитывайте, что и статья писалась примерно тогда-же, да и релизная версия появилась гораздо позже

  3. Андрей
    20 июня 2009 в 12:54 | #4

    Каша какая-то,…извините.
    Плохая классификация перспектиных технологий. Например, Gears — акцентируется на поддержке offline. flash and silver — на мультимедийности и анимированном интерфейсе.

    Ria-приложения, веб-приложения, псевдо приложения. Гирс не попадает в такую классификацию в принципе.

    Они конечно движуться в сторону друг друга…., но …

    В такой обзорной статье хотелось бы видеть авторские оценки верности акцентов создетелей фрэймворков.

  4. 20 июня 2009 в 12:57 | #5

    У RIA есть своя темная сторона. Для того чтобы концепция стала успешной, необходимо решить проблемы информационной безопасности, администрирования и масштабируемости. При работе RIA будет возникать перегрузка по обмену сообщениями и числу устанавливаемых сессий, поскольку для снабжения клиентов данными серверам приходится работать более интенсивно.

  5. Chosen1
    10 июля 2009 в 15:56 | #6

    Сегодня Silverlight 3 от Microsoft вышла. Русскоязычный пресс-релиз Серьезный удар по flash ИМХО.

  6. 7 сентября 2009 в 21:55 | #7

    Согласен с Андреем, многие самые перспектвные технологии освещены неточно, Java апплеты дают много преимуществ, как основное — высокая безопасность (поэтому применяется в банках), SilverLight за пояс легко заткнет Flash, просто на данный момент flash очень сильно распространен — в нем есть огромная бреш в безопасности, любым декомпилятором его легко превратить в исходный код и получить нужные данные. Кроме того согласен с sbsgame, RIA приложения бывают очень перегружены AJAX технологиями, что приводит не к Riсh приложению а просто перегруженному и неудобному приложению.

  7. Дмитрий
    24 сентября 2009 в 00:47 | #8

    \…специальных движков полное 3D со всеми поддержками DirectX или OpenGL…\ полный бред… откуда возьмёться во флеше OpenGL? Алхимия вообще Си в АкшенСкрипт компилирует потом в байткод для AVM2. А то что программа на Си — не значит, что она автоматом может делать всё, что и программа на Си под винду… тут платформа роль играет, а не язык.

Комментирование отключено.
Developers.org.ua