Pull to refresh

Проект Gestalt – пишите на Ruby, Python и XAML прямо в HTML на стороне клиента

Reading time5 min
Views4.7K
imageGestalt – это open source фреймворк, который позволит вам включить в обыкновенный html-код страницы коды на Ruby или Pyhton и даже XAML-разметку. И все это будет работать на стороне клиента! Если вы хотите написать клиентский код подобный следующему,
<script language=«python»> или <script language=«ruby»>
то Gestalt сделан специально для вас. Быстрый старт и простейшую демонстрацию можно посмотреть по адресу http://www.visitmix.com/labs/gestalt/getstarted/.

* внимание, исполняющая среда запускается не мгновенно, при самой первой загрузке стоит подождать пару секунд и все заработает


Что такое Gestalt?


Проект Gestalt – это новое детище креативной команды MIX Online. Ранее они уже отличились выпуском библиотеки микроформатов Oomph, движка для блогов Oxite и необычного проекта Glimmer, который позволяет создавать анимации на базе jQuery.
Разберем этот проект на основе официальных примеров.

Первый пример


Самый первый пример, который предлагает проект – это демонстрация сразу всех способностей фреймворка. Вот как выглядит пример использования кода на Ruby в html:
image
Следующее окно уже демонстрирует пример с использованием Python в html:
image
Как вы видите, в коде html создается обычный Ruby и Python код, который работает с DOM-деревом, в том числе реагирует на события. Разве не великолепно?
Последняя страница показывает совместную работу кода на Python и XAML-анимации написанной во все том же обыкновенном html:
image
Примеры слишком простые? Давайте смотреть далее.

XAML графика


Следующие примеры показывают построение сложных векторных изображений прямо из html с помощью XAML-кода, который вы можете создать, например, в дизайнере Visual Studio или Expression Blend. Все они написаны на XAML и строятся из разметки прямо на клиенте!
image imageimage image image

* www.visitmix.com/labs/gestalt/samples/big.xaml/big.xaml.bedlam.html
* www.visitmix.com/labs/gestalt/samples/big.xaml/big.xaml.cheshire.html
* www.visitmix.com/labs/gestalt/samples/big.xaml/big.xaml.crystal.html
* www.visitmix.com/labs/gestalt/samples/big.xaml/big.xaml.ruffmouse.html
* www.visitmix.com/labs/gestalt/samples/big.xaml/big.xaml.yellowstone.html

Python и анимация


Следующие примеры показывают как Python может работать с графикой, анимацией и управлением со стороны пользователя. Например в примерах с красным глобусом показано как использовать анимацию на базе фреймов и реагировать на события пользователя. В первом примере пользователь может вращать землю, во втором она сама вращается, а пользователь управляет местоположением.
image image

* www.visitmix.com/labs/gestalt/samples/image.sequencer/image.sequencer.simple.python.html
* www.visitmix.com/labs/gestalt/samples/image.sequencer/image.sequencer.advanced.python.html

Python и тригонометрия


Следующие примеры показывают использование Python для расчета в геометрических задачах. Например в первом примере рассчитывается движение элемента по окружности, а во втором самом шикарном примере рассчитывается трехмерная модель связанных сущностей, выглядит она очень эффектно и полностью управляется мышью:
image image

* www.visitmix.com/labs/gestalt/samples/trigonometry/trigonometry.simple.python.html
* www.visitmix.com/labs/gestalt/samples/trigonometry/trigonometry.advanced.python.html

Python и трансформации


Очередные примеры очень эффектны, очень рекомендую на них посмотреть. На первом примере, в зависимости от местоположения мыши меняется ориентация в пространстве трехмерных объектов, они как бы следят за мышью. На втором происходит тоже самое, только трансформируется кусочки исходного изображения. Выглядит очень классно, особенно если учесть что все это – простой код на Python и XAML прямо в теле html.
image image

* www.visitmix.com/labs/gestalt/samples/transforms/transform.simple.python.html
* www.visitmix.com/labs/gestalt/samples/transforms/transform.advanced.python.html

Python, Ruby и частицы


Следующие примеры показывают работу фреймворка с анимацией частиц. Так первый, самый простой представляет собой падающий снег, второй рисованные мышью осыпающиеся линии, а третий самый сложный демонстрирует сразу несколько техник: рисование, частицы, анимацию, движение, исчезновение частиц. Выглядит эффектно:
image image image

К сожалению, в статике все это не показать, нужно смотреть в динамике. Все примеры написаны на Python, но скачав исходники вы найдете первый пример на Ruby.

* www.visitmix.com/labs/gestalt/samples/particles/particles.simple.python.html
* www.visitmix.com/labs/gestalt/samples/particles/particles.medium.python.html
* www.visitmix.com/labs/gestalt/samples/particles/particles.advanced.python.html

Python и canvas


Для следующего примера вам понадобится что-нибудь отличное от Internet Explorer, поскольку речь пойдет о работе с canvas с помощью Python. Простой пример показывает как рисовать простейшие фигуры.
image

* www.visitmix.com/labs/gestalt/samples/canvas.2d.drawing/canvas.2d.drawing.html

Python и Twitter


И, наконец, последняя демонстрация и это, наверное, самая лучшая из них, поскольку предлагает посмотреть на реализацию работы с Twitter в простом html-коде используя Python для логики и XAML для приятной визуализации.
image

* www.visitmix.com/labs/gestalt/samples/twitter.badge/twitter.badge.python.html

Как все это работает


Конечно, чудес не бывает и все это должно работать с помощью чего-то. Этим “что-то” в данном случае является Silverlight – замечательная технология, не привязанная ни к одному языку, которая позволяет писать приложения хоть на C#, хоть на Python, хоть на Ruby. Когда Gestalt начинает свою работу, он инициализирует элемент Silverlight и использует его чтобы исполнять Ruby и Pyhton код или рисовать XAML-разметку.
Gestalt – это кроссплатформенная технология, работа гарантируется на Windows и Mac. Для пользователей Mac группа разработчиков Gestalt подготовила дополнительный бонус:
  • TextMate Bundles – дополнения для TextMate помогающие работать с Gestalt;

Кроме того, доступны следующие утилиты и средства:
  • XAML Fix-up Tool – утилита которая обрабатывает xaml-код для его правильного понимания Firefox;
  • XAML Playground – целый редактор XAML с визуальным дизайнером и редактором кода, стоит посмотреть.

А как же Linux?


Мигель Де Иказа руководитель разработки Mono и Moonlight уже откликнулся на появления проекта Gestalt. В своем блоге он написал буквально следующее:
All four pieces (Gestalt, the Dynamic Language Runtime, IronRuby and IronPython) are open source technologies that run on either Microsoft's Silverlight or our own open source Moonlight.

Таким образом Мигель подтверждает, что Gestalt доступен и для linux-пользователей. Пробуйте.

Полезные ссылки




Заключение


По данным riastats.com Silverlight установлен уже на треть компьютеров в интернет. Это огромное число клиентов и доля растет с каждым днем. Я очень рад тому, что эта технология позволяет делать такие уникальные вещи, создавать свой Ruby и Python код прямо в разметке. По моему это грандиозный пример того, как смешиваются и дружат технологии сегодня, как разработчики свободные от лишней идеологии могут использовать для своей пользы целый набор техник, чтобы делать потрясающие вещи совершенно новым способом. И, конечно, у вас всегда остается выбор: не нравится XAML используйте canvas, как показано на примере выше.
Так, с помощью проекта Gestаlt уже были подружены Silverlight и Google Wave! Отличное начало классной технологии!

Progg it
Tags:
Hubs:
Total votes 97: ↑80 and ↓17+63
Comments56

Articles