Компиляция C# и XAML в JavaScript

В этой статье мы расмотрим расширение для Visual Studio под наванием 'C#/XAML for HTML5'. Данное расширение позволяет транслировать имеющийся код на C# и XAML в код HTML5+JavaScript. Благодаря подобной трансляции мы сможем создавать на C# приложение, которое после трансляции в JavaScript будет запускаться и на тех платформах, где .NET по умолчанию не поддерживается и где есть поддержка HTML5 и Javascript - Android, iOS, Mac, Chromebooks, Linux, Windows и т.д. То есть по сути у нас получается гибридное приложение.

Также стоит отметить, что данная надстройка пока находится в бета-версии и имеет много ограничений, и сходу на настоящий момент вряд ли можно перевести большое полноценное приложение на JavaScript. Но в то же время функционал расширения динамично развивается, а возможности увеличиваются. Ее возможности и ограничения также можно найти на вышеуказанном официальном сайте. Кроме того, расширение существует в бесплатной и платной версиях, что также накладывает некоторые ограничения на бесплатную версию.

Вначале установим это расширение. Его можно загрузить по адресу http://cshtml5.com/. Установщик расширения представляет собой msi-файл размером не более 4 Мб. Но сразу надо отметить, что мы можем устанавливать расширения и надстройки в версии Visual Studio выше Express - то есть для версий Community, Professional, Ultimate, поскольку Express не поддерживает расширения и надстройки.

После загузки и установки расширения в Visual Studio мы сможем найти новые типы проектов:

• Empty Application: пустое приложение с минимальной разметкой xaml и кодом c#

• Empty Class Library: проект для создания библиотеки классов

• Sample - Calculator App: образец готового приложения - калькулятор

• Sample - Controls Showcase: еще один готовый пример использования некоторых элементов управления и функциональностей

Создадим проект по первому типу Empty Application.

Создаваемый проект имеет структуру, похожую на проекты WPF, Silverlight, Windows Phone, с главной страницей MainPage.xaml и файлом кода на c#.

В коде xaml мы можем использовать те же элементы управления и конструкции, что и в WPF. В частности, привязка прекрасно работает, а также большинство элементов управления.

Также есть визуальное представление, где мы можем сделать предпросмотр страницы в портретном и альбомном режиме при разных расширениях экрана.

При запуске проекта отображается некое подобие эмулятора, где мы можем протестировать приложение:

Если мы перейдем к каталогу bin\Debug\output в папке этого проекта, то сможем увидеть сгенерированные файлы js и html. Файл index.html как раз и будет представлять файл нашего приложения, который можно запустить в браузере:

И в браузере он будет работать точно также, как работало бы приложение на c#.

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