Обзор современных средств разработки интерактивных приложений

Silverlight 3 -мощная платформа для создания и предоставления многофункциональных интернет-приложений (Rich Internet Applications, RIA) и мультимедийного интернет-интерфейса. Третья версия Silverlight - это продукт, который предоставляет более 50 новых возможностей, включая выполнение приложений Silverlight без использования веб-браузера, значительное повышение производительности и качества видео, а также функции, способствующие росту производительности разработчиков. Объединяя свои возможности с возможностями передовых средств Microsoft для разработчиков и проектировщиков, Microsoft Visual Studio и Microsoft Expression Blend, Silverlight 3 позволяет создавать современные RIA-приложения и мультимедийные интерфейсы. Благодаря Silverlight RIA-приложения стали полноправными членами современной ИТ-среды.

Microsoft .NET RIA Services упрощают традиционные n-уровневые схемы приложения путем объединения ASP.NET и Silverlight платформ. Насыщенные интернет приложения (Rich Internet Applications - RIA) позволяют создавать функциональный, быстрый, удобный и красивый пользовательский интерфейс.

Основные особенности этих приложений:

• Пользователь может взаимодействовать с элементами страницы (редактирование, drag&drop, управление картой)
• Обновляется только часть страницы
• Более детальная информация доступна без перехода на другую страницу
• Обратная связь, подтверждение действий и сообщения об ошибках в пределах страницы с которой работает пользователь

Обновление части страницы является значительным улучшением по сравнению с необходимостью ее полной перезагрузки или открытия новой. Это позволяет создавать более быстрые приложения, подробнее информировать пользователя и лучше обрабатывать ошибки.

Основным конкурентом Silverlight является платформа Adobe Flash и родственная технология Adobe Flex, на которых уже реализовано немало проектов, особенно мультимедиа. Ниже приведено сравнение двух платформ для разработки "богатых" веб-приложений.

Изначальный релиз медиа-плеера-для-браузера от Microsoft был примечателен в основном отсутствием многих возможностей Flash. Версия 1.0 больше походила на бету, чем на полноценный продукт. Текущий второй релиз уже значительно лучше, однако его по-прежнему с большой натяжкой можно назвать конкурентом Flash.

Silverlight 3.0 наконец стала серьезной заявкой на полноценное соперничество. Версия 3.0 содержит новые API, аудио-кодеки и серьезно развитую видео-часть, включая Smooth Streaming, H264, AAC и поддержку аппаратных графических акселераторов.

Нашей тестовой задачей станет создание галереи картинок, содержащей 40 изображений. Задачка хороша тем, что позволяет отработать загрузку по протоколу XML и применение визуальных эффектов для смены кадров.

Среда разработки и прочий инструментарий

Flash/Flex: Flash Professional и Flex Builder (для нормального создания RIA часто нужны оба), также поддерживается импорт графики из других приложений Adobe, в которых рисовать значительно удобнее, чем в самом Flash. Бесплатной альтернативой является Flash Develop. Вместо Flex Builder можно использовать плагин к Eclipse. Для автоматизации сборки можно использовать утилиту ant. Для автоматизации тестирования можно использовать инструменты вроде Redstone Eggplant FT. Для юнит-тестов, в основном, используется AsUnit или FlexUnit. Средств рефакторинга и анализа кода нет. FlashPlayer - это плагин который позволяет проигрывать swf файлы в браузере клиента.

Flash IDE/Flex Builder - это среда позволяющая создавать swf файлы. Flex framework - это фреймворк позволяющий быстро и эффективно создавать RIA приложения. Flex Builder оптимизирован для работы с Flex framework.

Sliverlight: Visual Studio 2008 + Expression Blend, для рисования в векторе используется Expression Design. Для юнит-тестов можно использовать либо более простые в освоении юнит-тесты от Майкрософт, либо более мощный по функционалу MbUnit. Базовый инструментарий для рефакторинга неплохо расширяется за счет утилиты ReSharper. Для анализа кода используется ReSharper, а также набор утилит "FxCop". Автоматизация сборки через MSBuild.

Естественно, приведены только наиболее популярные продукты. Находящиеся в стадии пре-альфы инструменты не учитываются. Если сравнивать вышеописанные наборы, то очевидно, что Sliverlight впереди Flash/Flex. Если даже в следующей версии Flex Builder'а появятся нормальные юнит-тесты и инструменты для рефакторинга, пройдет не один год, прежде чем они доберутся до уровня, который уже сейчас доступен разработчикам Silverlight. Кроме того, пара Flash/Flex крайне далека от удобства. Flash до сих пор мало приспособлен для работы с кодом (даже интеллисенс работает с нареканиями), форматы файлов и структуры проектов у Flash и Flex различны, а использовать только Flex сложно, поскольку ничего похожего на дизайн-вью в нем просто нет. Единственное, в чем Silverlight уступает паре Flash/Flex, так это в инструментарии для рисования. Expression пока что далек от продуктов Adobe как по возможностям, так и по удобству использования.

Язык программирования

Flash/Flex: ActionScript 2.0/3.0.

Silverlight: Любой .Net-совместимый язык + JavaScript.

Silverlight выигрывает у Flash/Flex потому, что он поддерживает значительно более мощные языки .NET. Наиболее популярным из всех .NET-совместимых языков является C#. И если сравнивать C# с ActionScript 3.0, то можно сказать, что сравниваются языки разных эпох. Если C# - это едва ли не самый развитый и в то же время стабильный из всех современных объектно-ориентированных языков программирования, то ActionScript 3.0 - это смесь Object Pascal и JavaScript. Язык не имеет ни типизированных указателей на методы, ни встроенной событийной модели, ни атрибутного программирования. Отдельной строкой хочется сказать об отладчике. Если во Flex Builder он работает, то во Flash им просто невозможно пользоваться - основным методом отладки до сих пор является trace.

Дизайн приложений

Flash/Flex: пакеты Photoshop, Illustrator и Flash

Silverlight: пакеты Microsoft Expression Studio

Дизайнеру, работающему с Photoshop, Illustrator и Flash, предоставляется более "могучие" средства, чем в Microsoft Expression Studio - основное средство для построения интерфейсов Silverlight.

Expression Studio в действительности нужен лишь для подготовки графики для проектов Windows Presentation Foundation (WPF) и Silverlight. Он серьезно уступает средствам редактирования из Photoshop. Единственное преимущество Expression Studio - способность к экспорту в формат XAML, что необходимо для разработчиков Silverlight.

Поддержка ОС и браузеров

Flash/Flex: Windows (IE6/7, Firefox, Safari, Chrome, Opera), MacOS, Linux, Flash Lite на мобильных устройствах.

Silverlight: Windows (IE7, Firefox, Safari, Chrome), MacOS, Linux с помощью Moonlight, Windows Mobile.

Что касается поддержки в различных браузерах, то Flash Player пока что впереди, хотя и не намного. На мой взгляд, все, кроме поддержки в Opera, это лишь вопрос времени. Причем небольшого.

Возможность упаковки в исполняемый файл

Flash/Flex: Adobe AIR for Macintosh and Windows, Adobe AIR for Linux в стадии beta.

Silverlight: Для Windows - Desklighter, для других ОС поддержки нет.

Возможность сменить галочкой в проекте компиляцию с .xap на .exe была бы полезна. Но можно использовать утилиты сторонних производителей. Про создание исполняемых файлов под другие ОС и говорить не приходится. Здесь Flash/Flex хорошо впереди.

Размер

Flash/Flex: Плагин - 1.7 Мб, приложение - часто меньше 100 кБ (не учитывая ресурсы).

Silverlight: Плагин - 5 Мб, приложение - часто больше 100 кБ + ресурсы.

Даже при использовании более эффективных алгоритмов архивации (файл .xap - это zip-архив) размер все равно остается достаточно большим. Размер SWF-файла зачастую меньше, причем в разы. Однако, это только в случае небольших приложений. Если же мы будем создавать большое полноценное RIA с помощью Flex, то суммарный размер всех SWF будет мало отличаться от аналогичного XAP. Впрочем, размер самого приложения часто незаметен на фоне присутствующих в приложении ресурсов (изображений, звуков, видео и т.д.). Что касается размера самого плагина, то вопрос кажется не принципиальным. Закачка и установка делается всего один раз. Однако, в любом случае, незначительное преимущество в вопросах размера на стороне Flash/Flex.

Изображения

Flash/Flex: Поддерживаются форматы JPEG, GIF, PNG. Возможность импорта из psd, al и т.д. Есть возможность попиксельного изменения.

Silverlight: JPEG, PNG. Конвертация векторной графики в xaml.

Здесь есть разница в подходах: Flash/Flex позволяет изменять из кода пиксельную графику, а Silverlight - векторную. Но в общем обе технологии работают с графикой на хорошем уровне.

Аудио

Flash/Flex: Поддерживается формат mp3.

Silverlight: Поддерживаются форматы wma, mp3, AAC.

Silverlight выигрывает большим числом аудиокодеков.

Видео

Flash/Flex: Поддерживается формат flv.

Silverlight: Поддерживаются формат wmv, H264. Поддержка технологии Smooth Streaming.

Безусловно здесь перевес на стороне Silverlight, но безоговорочную победу технологии Silverlight принесла бы поддержка и flv. Т.к. существует огромное количество роликов, сжатых в flv, и было бы крайне удобно уметь их проигрывать. Обе технологии позволяют передавать HD качество телевидения высокой четкости.

Smooth Streaming ("плавный поток") позволяет получать и отображать видеопоток в Silverlight 3.0, изменяя при этом качество изображения в зависимости от скорости интернет-соединения и загрузки процессора. Если скорость соединения понижается (например, вы подключились к медленному общественному WiFi), сервер понизит качество картинки чтобы просмотр не прерывался для накопления данных в буфере.

Шрифты

Flash/Flex: Имеет три встроенных шрифта, поддерживается импорт символов из шрифтов ТТF, ограниченно поддерживаются шрифты, установленные в системе.

Silverlight: Поддерживается возможность использования как шрифтов, установленных в системе, так и подкачка необходимых шрифтов с сервера.

Основная разница между Silverlight и Flash/Flex в работе со шрифтами в том, что Flash/Flex использует не сами шрифты, а полученные в результате конвертации символы. Формально, не импортированные шрифты поддерживаются. Однако, с текстом, напечатанным таким шрифтом, почти ничего нельзя делать: ни поворачивать, ни масштабировать, ни использовать в качестве маски. Здесь преимущество у Silverlight.

Работа с файлами

Flash/Flex: Есть возможность загрузки файлов с сервера и на сервер. Окно открытия файлов поддерживает выбор нескольких файлов или каталогов.

Silverlight: Есть возможность загрузки файлов с сервера и на сервер. Окно открытия файлов поддерживает выбор нескольких файлов или каталогов, а также позволяет получить доступ к содержимому файла через поток.

Принципиальное преимущество Silverlight - это возможность считать содержимое файла и работать с ним без отправки на сервер. Это может быть полезно и для предпросмотра картинок перед отправкой их на сервер, и для редактирования xml-файла, и для дописывания mp3-тэгов, и много еще для чего.

Хранение данных на клиенте

Flash/Flex: Максимальный объем формально неограничен. По умолчанию - 100кб.

Silverlight: Максимальный объем формально неограничен. По умолчанию - 10Мб.

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

Разметка

Flash/Flex: MXML (только во Flex).

Silverlight: XAML + code-behind

C точки зрения внешнего вида, один подвид xml-разметки мало чем отличается от другого. И там и там поддерживается встраивание кода, создание любых объектов, заполнение коллекций и т.д. Однако XAML все же имеет два преимущества перед MXML. Во-первых, XAML можно редактировать с помощью Expression Blend. Во-вторых, существует возможность изменить генерируемый на основе XAML файл с кодом (Flex просто обрабатывает MXML "за кадром"). Здесь выигрывает Silverlight.

Рисование в коде приложения

Flash/Flex: Имеется несколько стандартных методов для рисования линий и заливки. Есть возможность изменять объекты с помощью матрицы преобразований, скрывать часть объекта (DisplayObject) с помощью маски (альфа-канал поддерживается для режима cacheAsBitmap), которая сама является DisplayObject.

Silverlight: Имеется возможность рисовать как с помощью методов, так и в XAML. В качестве кисти для рисования любых объектов, линий, заливок, а также маски прозрачности можно использовать просто цвет, градиентную заливку, изображение или видеоролик.

Самый, пожалуй, сложный на данный момент вопрос для сравнения. Поэтому вывод о том, где с рисованием ситуация лучше, делать трудно. Возможность представлять векторную графику как часть разметки - это конечно большой плюс Silverlight по сравнению с Flex (в нем нечто похожее появится только в Gumbo). Трансформация объектов в Silverlight устроено несколько удобнее, чем во Flash/Flex. А вот с Opacity Mask все не так однозначно. В Flash/Flex маска - это такой же DisplayObject, как и то, что она скрывает. Если не выбирать режим cacheAsBitmap (маска не будет поддерживать полупрозрачность), то и в маске, и в маскируемом объекте можно производить любые программные изменения (изменять дерево потомков, рисовать с помощью методов, проигрывать видео и т.д.). В Silverlight ситуация иная. Там маска - это объект типа Brush. На данный момент существуют SolidBrush, GradientBrush, ImageBrush и VideoBrush. Т.е. в качестве маски можно использовать различные заливки, картинки или видео, однако программно управлять маской по сути нельзя. С другой стороны, те же самые кисти используются для рисования линий, фонов, текста и т.д. Таким образом, получается, что, например, задав тексту для рисования VideoBrush, мы получим тот же эффект, как если бы во Flash/Flex разместили в маске текст, а в маскируемом объекте - видеоролик (аналогичная ситуация с картинкой). Однако, маскировать один векторный рисунок другим Silverlight не умеет. Класс HostingRenderTargetBitmap хоть и оставили в релизе, но пользоваться им все равно нельзя.