10.09.2014 admin

FlexJS: выход MXML и AS3 за рамки Flash

FlexJS: выход MXML и AS3 за рамки Flash

 

FlexJS — это название следующего поколения Flex SDK. Его цель — дать MXML- и ActionScript-приложениям возможность работать не только в Adobe AIR и Flash, но и в браузерах без Flash, на мобильных устройствах, под PhoneGap/Cordova, во встраиваемых средах JS (например, Chrome Embedded Framework, используемой в Adobe Common Extensibility Platform). 

Это расширяет использование MXML- и ActionScript-кода до большего количества платформ, чем есть у Flash в настоящее время.

Причина появления FlexJS — желание использовать готовые библиотеки кода. В то время, как флэш работает тольков в стандартных десктоп-браузерах, многие клиенты хотят, чтобы их Flex-приложения работали и там, где нет Flash или AIR, т.к. для их пользователей планшет является единственным компьютером. А стоимость переписывания приложения с нуля высока, как и сопутствующие риски потери качества, особенно при переходе к JavaScript как менее строгому языку. Здесь и приходит на помощь кросс-компилятор следующего поколения FlexJS.

Как работает FlexJS?

В основе FlexJS лежит концепция параллельных фреймворков. Компоненты имеют как AS-, так и JS- версию, а компилятор Falcon переводит MXML- и АS-код в JS. Для генерирования готового JS-кода связываются между собой не AS-, а JS-"классы".
 
А поскольку ActionScript и JavaScript основаны на ECMAScript, то большая часть AS-кода хорошо переводится в JS. Чаще всего большая часть готового кода Flex-приложения на самом деле не очень зависит от объектной модели Flash. Да, основные компоненты, типа Button и DataGrid зависят, но в HTML и JS для них есть эквиваленты. И так как код состоит из набора UI-элементов, управляемых AS-логикой видов, связанной с AS-логикой моделей, то можно компилировать в SWF элементы для Flash, а в веб-приложении — элементы для HTML, уже встроенные в браузер. 
 
Смотрите презентацию по FlexJS и схему работы FlexJS на сайте Apache Flex JS Wiki.
 

Пример FlexJS-приложения

Вот простое приложение для проверки концепции — позволяет смотреть биржевые курсы. Кликните на нем правой кнопкой мыши и выберите пункт "View Source". Вы увидите MXML и ActionScript для этого примера. Файл MyInitialView.mxml содержит UI, использует states, байндинг и CSS, как обычное Flex-приложение. 

Затем перейдите на Javascript-версию этого же приложения и посмотрите, как это работает в браузере без Flash. Это результат кросс-компиляции из того же исходного кода, что и код для SWF-файла. Кликнув правой кнопкой мыши на этой версии, вы не увидите Flash в контекстном меню. Но там вы тоже можете выбрать пункт View Source и увидеть минимизированный JS- код от FlexJS-компилятора Falcon.
 
Обратите внимание, что как SWF-, так и HTML-версии весят намного меньше, чем любая другая, которую вы можете создать в текущей версии Flex SDK (поэтому они стартуют намного быстрее).
 

Скачать FlexJS

Свежая версия FlexJS SDK появилась в июле 2014 года и имеет номер версии 0.0.2. Скачать ее можно здесь: http://flex.apache.org/download-flexjs.html
 
Если вы хотите создать свое FlexJS-приложение, то следуйте этим инструкциям для FlexJS и Flash Builder.