Visual Studio 2012

Что нового для веб-разработки в Visual Studio 2012

Кларк Селл

В этой статье обсуждается предварительная версия Visual Studio 2012. Любая изложенная здесь информация может быть изменена.

Продукты и технологии:
Visual Studio 2012, HTML5, JavaScript, CSS
В статье рассматриваются:

• использование проекта в разных версиях Visual Studio;
• поддержка HTML5, JavaScript и CSS;
• отладка с использованием Page Inspector;
• DOM Explorer.

Вы помните свой первый веб-сайт? Я помню, и, о боже, что за кавардак там был. Но с тех пор многое изменилось — и продолжает меняться! Становится все труднее вспомнить, что представляла собой веб-разработка гол назад, не говоря уж о том, когда была выпущена первая версия Microsoft .NET Framework.

Одновременно развивалась и Visual Studio. Когда-то веб-разработчикам приходилось устанавливать полный сервер только для того, чтобы IIS и SQL Server выполняли их сайты. Потом мы познакомились с облегченной Cassini, а затем и IIS Express. Теперь появился HTML5, и Visual Studio полностью поддерживает его.

Я намерен исследовать, как Visual Studio поддерживает этот новый мир веб-разработки, и посмотреть на новые интересные функции, такие как Page Inspector, DOM Explorer и использование проекта в разных версиях Visual Studio, а также проверить, как эволюционируют базовые средства редактирования.

Использование проекта в разных версиях Visual Studio

Вероятно, вы заметите новые средства Visual Studio при первом же щелчке мыши, открывая файл проекта. В прошлом файлы проектов прямо зависели от используемого редактора. То есть, если у вас был файл проекта, созданный в Visual Studio 2010, а вы его потом попытались бы открыть в Visual Studio 2012, вам было бы предложено обновить его. После этого вы скорее всего уже никогда не смогли бы открыть данный проект в более старой версии. Теперь такого больше нет.

В Visual Studio 2012 RC введена концепция использования проекта в разных версиях Visual Studio (project sharing). Теперь один и тот же файл можно открывать и в Visual Studio 2010 SP1, и в Visual Studio 2012. Исключение требования того, чтобы все использовали одну среду, открывает дверь новым возможностям, особенно при работе над проектами с открытым исходным кодом и при участии нескольких групп.

Конечно, есть некоторые подводные камни. Например, если ваш проект использует локальную базу данных (папка App_Data), вам потребуется убедиться, что вы по-прежнему применяете ту же версию СУБД. Кроме того, есть несколько старых типов проектов вроде ASP.NET MVC 2, с которыми вообще ничего не получится.

Поддержка HTML5

По-видимому, самое важное средство, добавленное в редактор HTML в Visual Studio, — поддержка «Web Accessibility Initiative — Accessible Rich Internet Applications» (WAI-ARIA). WAI-ARIA (w3.org/WAI/intro/aria) — это веб-стандарт, ориентированный на то, чтобы сделать веб-сайты и веб-приложения более доступными людям с ограниченными возможностями. В этой спецификации определяется два типа атрибутов для разметки. К HTML-элементам применяются роли, описывающие тип используемого виджета или структуру веб-страницы. Как видно на рис. 1, поддержка в Visual Studio ARIA-ролей включает IntelliSense.

Рис. 1. ARIA-роли

Другой тип атрибутов помечается префиксом «aria-», например aria-busy или aria-valuemin, как показано на рис. 2. Эти атрибуты aria-* используются для описания элемента пользователю.

Рис. 2. Свойства ARIA-*

В HTML5 введено более 25 новых семантических тегов. В Visual Studio уже есть поддержка IntelliSense для этих тегов, но Visual Studio 2012 упрощает и ускоряет написание разметки, добавляя некоторые соответствующие фрагменты наподобие тех, которые используются для тегов audio и video. На рис. 3 показан такой фрагмент для тега video. Хотя эти теги несложны, в них имеются кое-какие тонкости, например добавление корректных переключений между кодеками.

Рис. 3. Фрагмент для элемента video

Последние несколько веб-сайтов я построил с применением новых HTML5-тегов. На каждом из этих сайтов я в конечном счете так или иначе перерабатывал свою разметку, даже если это было просто семантическое изменение, например замена div на section. В Visual Studio 2012, когда вы изменяете элемент, редактор также изменяет соответствующий начальных или концевой элемент. Это автоматическое переименование — еще один способ, благодаря которому редактор помогает вам избегать все эти ошибки, сажаемые поздно ночью.

Разработчики часто расходятся во мнении, что следует использовать для форматирования — табуляторы или пробелы. Независимо от того, что предпочитаете лично вы, Smart Indent поможет вам в единообразном форматировании. После набора элемента и нажатия клавиши Enter вы оказываетесь на новой строке с желательным для вас отступом. Как и следовало бы ожидать, в IntelliSense добавлена не только фильтрация того, что вы набираете, но и фильтрация на основе регистра букв в словах, используемых вами при операциях поиска, что ускоряет и облегчает вставку элементов. А в сочетании со Smart Indent независимо от того, где находится курсор, после нажатия клавиши Tab ваша новая разметка автоматически позиционируется в корректном месте документа, как показано на рис. 4.

Рис. 4. Интеллектуальная фильтрация и формирование отступов

Наконец, в редактор HTML в Visual Studio 2012 введен ряд отличных дополнений, поддерживающих ASP.NET, например Smart Tasks, пользовательский элемент управления extract и автоматическое связывание с событиями. Подробнее об этих средствах см. в документе «What’s New in ASP.NET 4.5 and Visual Studio 2012» по ссылке bit.ly/MXcIbG.

Поддержка JavaScript

Редактор JavaScript в Visual Studio 2012 совершенно новый и поддерживает ECMAScript 5. В нем появились некоторые великолепные возможности вроде сворачивания функций и проверки наличия парных скобок. А если вы все еще прокручиваете текст в поисках определения какой-то функции, не делайте этого. Просто нажмите F12 и вы перейдете прямо в определение нужной функции (или переменной) (рис. 5).

Рис. 5. Редактор JavaScript

В этом редакторе также улучшена поддержка IntelliSense для разработок на JavaScript, а также поддержка Document Object Model (DOM). Поскольку HTML5 становится мейнстримом, такая поддержка IntelliSense важна не только для новых базовых DOM API, но и при их расширении, как показано на рис. 6.

Рис. 6. IntelliSense для JavaScript

Всегда удобно иметь под рукой документацию, особенно когда она находится в окне IntelliSense. Поддержка VSDoc не нова в Visual Studio, но теперь она включает новый элемент signature для объявления перегруженных версий JavaScript-функций, что позволяет создавать детализированные IntelliSense-комментарии. Проигнорируйте качество моего кода и посмотрите на рис. 7, где показана функция, принимающая либо два, либо три аргумента. Как видите, в коде присутствует ряд <signature> для каждой перегруженной версии, что дает результат, отраженный на рис. 8.

Рис. 7. JavaScript-функция, использующая элемент signature

function myAwesomeFunction(a, b, c) {
    /// <signature>
    ///   <summary>This is my awesome function</summary>
    ///   <param name="a" type="String">Clearly you should pass A in here.</param>
    ///   <param name="b" type="String">Clearly you should pass B in here.</param>
    ///   <returns type="String" />
    /// </signature>
    /// <signature>
    ///   <summary>This is my awesome function</summary>
    ///   <param name="a" type="String">Clearly you should pass A in here.</param>
    ///   <param name="b" type="String">Clearly you should pass B in here.</param>
    ///   <param name="c" type="String">Clearly you should pass C in here.</param>
    ///   <returns type="String" />
    /// </signature>
    return "yea pretty awesome";
  }

Рис. 8. Комментарии, добавляемые в IntelliSense

На этом простом примере вы можете увидеть, как IntelliSense отображает подобную документацию.

Поддержка CSS3

Для меня CSS по-прежнему остается мистическим искусством и некоей тайной, по которой мне никогда не удавалось получить достаточную помощь. К счастью, в Visual Studio 2012 поддержка CSS расширена. Регионы (элементы region), IntelliSense и фрагменты (snippets) — новые средства, которые помогут улучшать стили. Начнем с регионов. Чтобы создать регион, достаточно вставить специальный комментарий. На рис. 9 показан простой регион, разворачиваемый и сворачиваемый для стилизации таблицы.

Рис. 9. Регионы

Как вы знаете, в мире Web приходится поддерживать множество браузеров. В случае CSS это подразумевает учет всех префиксов поставщиков браузеров. Редактор CSS в Visual Studio 2012 теперь включает префиксы поставщиков как в стандартный список свойств, так и во встроенные фрагменты (built-in snippets) (рис. 10).

Рис. 10. Свойства для префикса поставщика –moz

Конечно, свойств CSS много и необходима фильтрация. Как и в случае IntelliSense для C# и Visual Basic, вы можете фильтровать длинный список CSS-свойств, просто набирая текст. Пример для поиска border-radius приведен на рис. 11.

Рис. 11. CSS IntelliSense

Это прекрасно, но border-radius на самом деле нужно поддерживать для всех префиксов поставщиков. Если вы внимательно посмотрите на значок border-radius, вы поймете, что это фрагмент. Дважды нажмите Tab: первый раз, чтобы автоматически заполнить свойство, и второй — чтобы вставить фрагмент (рис. 12).

Рис. 12. CSS-фрагмент

Как видите, добавлены все префиксы поставщиков, и значение теперь выделено, чтобы вы его могли изменить. По мере набора нужного значения для радиуса (radius), все значения, специфичные для поставщиков, будут соответственно изменяться. А как насчет чего-нибудь более сложного, например запроса media? Введите @ и вы увидите список более сложных фрагментов вроде @media. Выберите @media, нажмите Tab, и будет вставлен фрагмент запроса media. Теперь вы можете просто набрать новую ширину, нажать Tab и подстроить высоту (рис. 13).

@media" title="Фрагмент @media" />
**Рис. 13. Фрагмент @media**

Фрагменты — просто фантастическое средство, которое избавляет от утомительного набора текста. Как и в C# или Visual Basic, вы можете создавать новые фрагменты или модифицировать существующие с помощью Visual Studio Code Snippet Manager, который вы найдете в Tools | Code Snippet Manager.

В Visual Studio также имеется новое средство выбора цветов (color picker) для свойств, требующих указания цвета; он заменяет именованные цвета в предыдущих версиях. Как видно на рис. 14, я выбрал цвет с долей прозрачности, поэтому средство выбора цветов переключилось со стандартных hex-цветов на rgba.

Рис. 14. Новое средство выбора CSS-цветов

Наконец, обязательно посмотрите поддержку автоматического формирования иерархических отступов и кое-какие необычные приемы работы с CSS по ссылке bit.ly/MXcIbG.

Отладка с применением Page Inspector

«Ух ты, она работает на моем компьютере!» — уверен, что подобную фразу вы хотя бы раз за свою карьеру либо произносили, либо слышали. В веб-разработке вы почти гарантированно рано или поздно услышите эту фразу. Но почему? Что ж, отчасти потому, что развертываемое ПО и разрабатываемое нами не идентичны.

Если оставить за бортом очевидные вещи вроде безопасности и серверных ферм, все сводится по сути к тому, что будет выполнять и визуализировать браузер. С годами такие технологии, как HTML5, CSS3 и JavaScript, ушли в своем развитии далеко вперед, и мы используем множество инфраструктур, включая те, которые могут работать только в браузере (например, knockout.js и backbone.js). Веб-разработчикам приходится иметь дело с двумя непохожими мирами: как приложение разрабатывается и как оно выполняется во всех, столь разных браузерах, которые нужно поддерживать.

Соответственно развивались средства браузеров, что здорово помогает, но вам по-прежнему могут потребоваться археологические раскопки в поисках оригинального файла исходного кода. Даже если вы имеете дело с простейшим JavaScript-кодом и загрузчиками скриптов, на сервер может отправляться совсем не то, что вы разрабатывали. К счастью, в этом случае поможет Page Inspector — одно из моих любимых новшеств в Visual Studio 2012. Page Inspector переносит средства диагностики браузера непосредственно в Visual Studio. Благодаря этому он обеспечивает интеграцию отладки от браузера до ASP.NET. Причем все это требует минимальной подготовки.

Page Inspector можно запустить как есть с ограниченной функциональностью. Для этого просто щелкните правой кнопкой мыши страницу, которую вы хотите просмотреть, и выберите View. Page Inspector делает максимум возможного, чтобы сопоставить файл с используемым соглашением URL. Там, где он терпит неудачу, вы можете вручную добавить такое сопоставление. Чтобы активизировать все возможности Page Inspector, просто добавьте новый элемент key в раздел appSettings вашего файла web.config:

<add key="VisualStudioDesignTime:Enabled" value="true" />

Page Inspector как раз и закрывает «пропасть» между тем, что разрабатывалось, и тем, что визуализируется. Было бы неплохо, просто выделив что-то в визуализируемом выводе, найти, в каком файле это находится, или, еще лучше, получить возможность изменить его. Page Inspector способен сопоставлять визуализируемый вывод с файлами-источниками. При запуске Page Inspector в Visual Studio появляется окно браузера, как показано на рис. 15.

Рис. 15. Page Inspector

Здесь много чего происходит, но давайте разобьем это на части:

• окно представляет собой рамку браузера. В верхней части можно увидеть строку адреса;
• верхняя половина — реальная веб-страница в том виде, в каком выполняется ее рендеринг для браузера;
• слева внизу находится HTML-разметка для визуализируемой страницы. Это вызвано тем, что на вкладке (прямо сверху) был выбран HTML;
• справа внизу — стиль визуализируемой страницы.

По аналогии со средствами в браузере, есть такая функция, как Inspect. Выбрав Inspect, при перемещении по странице вы будете видеть, как выделяются и помечаются различные DOM-элементы. На рис. 15 таким элементом является hgroup с классом title. Кроме того, вы увидите, что в окне HTML подсвечивается соответствующая разметка. Все это происходит в реальном времени при перемещении по документу. А теперь взгляните на рис. 16. Я выбрал в окне Page Inspector элемент (можно было бы просто задержать курсор мыши над ним), и теперь за этим окном выделен файл исходного кода, в котором находится данный текст. Это происходит не только на уровне элементов, а на любом другом вплоть до уровня символов. Это активное двухстороннее сопоставление источника с визуализируемым выводом. Независимо от того, что именно вы выбираете (источник или визуализируемый вывод), вы увидите подсветку в соответствующем месте.

Рис. 16. Сопоставление между источником и визуализируемым выводом

Я лишь поверхностно рассмотрел некоторые возможности Page Inspector. Это функционал такого типа, которым нужно некоторое время попользоваться, чтобы в полной мере оценить, насколько он облегчает жизнь. Готовьтесь к приятным сюрпризам. В следующий раз, когда вы будете снова заниматься каким-нибудь веб-проектом, щелкните правой кнопкой мыши страницу и выберите View в Page Inspector.

Публикация

Что хорошего в веб-сайте, если вы не можете развернуть его? Visual Studio уже давно поддерживает развертывание сайтов, включая такую функцию, как Publish Profile. Исторически сложилось так, что после создания профиль был ресурсом только на локальном компьютере. В Visual Studio 2012 этот профиль теперь является частью общих ресурсов проекта. Это простой файл MSBuild, импортируемый в общую цепочку MSBuild. Вот как мог бы выглядеть несложный профиль FTP:

<Project ToolsVersion="4.0"
  xmlns="https://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <WebPublishMethod>FTP</WebPublishMethod>
    <SiteUrlToLaunchAfterPublish>http://thatconference.com
      </SiteUrlToLaunchAfterPublish>
    <publishUrl>ftp://thatConference.com</publishUrl>
    <DeleteExistingFiles>True</DeleteExistingFiles>
    <FtpPassiveMode>True</FtpPassiveMode>
    <UserName>foooooo</UserName>
    <_SavePWD>True</_SavePWD>
  </PropertyGroup>
</Project>

Вы найдете эти профили в папке общих свойств проекта:

• для C# — в Properties\PublishProfiles;
• для Visual Basic — в MyProject\PublishProfiles.

Так как это файл проекта MSBuild, то, конечно, вы можете вызывать его из командной строки, например:

msbuild.exe myProject.csproj /t:WebPublish /p:PublishProfile=ProfileName

HTML5 в Windows 8

На прошлогодней конференции BUILD компания Microsoft объявила новую модель программирования для создания неуправляемых приложений в Windows 8. Как оказалось, эта новая модель на самом деле никакая не новая; в ней предполагается, что в создании приложения разработчик полагается на новую смесь технологий: HTML5, CSS3 и JavaScript. А значит, любой программист с навыками веб-разработки может писать неуправляемые приложения для Windows 8. Разумеется, Visual Studio готов помочь и в этом.

Фрагменты — просто фантастическое средство, которое избавляет от утомительного набора текста.

Целый ряд базовых усовершенствований в редактировании, которые мы обсудили здесь, доступны и для разработки приложений Windows Store — за исключением Page Inspector (потому что такие приложения не выполняются в браузере). Как же тогда отлаживать HTML5-приложения Windows Store? С помощью DOM Explorer и JavaScript Console, как показано на рис. 17.

Рис. 17. DOM Explorer

Как и в случае Page Inspector, вы можете выбирать элементы в выполняемом приложении и переходить прямо в нужный участок исходного кода. Вы можете видеть применяемые стили и изменять значения в процессе выполнения приложения. Хотите вставить точку прерывания в JavaScript-код? Пожалуйста, и вы переключитесь в режим активной отладки. Можно даже запустить JavaScript Console и начать эксперименты с кодом. Независимо от того, что именно вы создаете — веб-сайт или приложение для Windows 8, все одинаково, и вам доступны те же функции на обеих платформах в одном отличном редакторе.

Если вы читаете эту статью, все шансы за то, что вы пользуетесь Visual Studio. Я сам работаю с этой средой уже более десяти лет и давно научился тому, что при выпуске каждой значимой версии имеет смысл исследовать все новые возможности. Это великолепно, что Visual Studio поддерживает текущие технологии вроде HTML5, CSS3 и ECMAScript 5, в то же время предусматривая возможность обновлений по мере изменения стандартов.

Кларк Селл (Clark Sell) — старший идеолог Windows 8 и веб-разработок в Microsoft, работает за пределами Чикаго. Ведет блог csell.net, готовит подкасты на DeveloperSmackdown.com и пишет заметки в twitter.com/csell5.

Выражаю благодарность за рецензирование статьи экспертам Мэту Картеру (Matt Carter) и Орвиллу Макдональду (Orville McDonald).