Visual Studio 2012
O que há de novo no desenvolvimento da Web no Visual Studio 2012
Você se lembra do primeiro site que desenvolveu? Eu me lembro com certeza. Nossa, era uma grande confusão. Mas muita coisa mudou desde então — e continua mudando! Está cada vez mais difícil lembrar como era o desenvolvimento da Web há um ano, nem sequer de quando o Microsoft .NET Framework foi lançado pela primeira vez.
O Visual Studio também evoluiu. Lembra-se de quando os desenvolvedores da Web precisavam instalar um servidor completo como um simulador de carga do desenvolvedor apenas para fazer com que o IIS e o SQL Server executassem seus sites? Em seguida, foi introduzido o mundo mais leve do Cassini e, em seguida, o IIS Express. Agora chegou o HTML5, e o Visual Studio o adotou.
Vou explorar como o Visual Studio dá suporte a esse novo mundo do desenvolvedor da Web, com uma análise dos novos empolgantes recursos, como o compartilhamento de projetos, o Page Inspector e o Explorador do DOM e também com uma análise de como a experiência básica de edição continua a evoluir.
Compartilhamento de projetos
Você deverá notar os novos recursos do Visual Studio quando clicar com o mouse pela primeira vez ao abrir um arquivo de projeto. No passado, os arquivos de projetos eram diretamente dependentes do editor que você usava. Isso significava que se você tivesse um arquivo de projeto criado com o Visual Studio 2010 e tentasse abri-lo com o Visual Studio 2012, seria solicitado a atualizá-lo. Depois que fazia isso, você nunca mais podia abrir o projeto novamente na versão antiga. Bem, não é mais assim.
O Visual Studio 2012 release candidate (RC) introduziu a noção de compartilhamento de projetos. Agora você pode usá-lo de maneira intercambiável com o Visual Studio 2010 SP1 no mesmo código-fonte. Eliminar o requisito de que todos precisem usar a mesma configuração abre as portas para novas experiências, principalmente em equipes diversas e em projetos de software livre ou mesmo durante atualizações de software em seu local de desenvolvimento.
Naturalmente, há algumas limitações. Por exemplo, se seu projeto usar um banco de dados local (a pasta App_Data), você precisará ter certeza de que está usando a mesma versão do mecanismo do banco de dados. Também existem alguns tipos de projetos mais antigos, como o ASP.NET MVC 2, que não funcionarão com ele.
Como com qualquer coisa nova, você desejará criar uma bifurcação para realizar algumas verificações de conceito. A última coisa que você deseja é ser pego quebrando o processo de compilação.
Suporte ao HTML5
Provavelmente, o recurso mais significativo a ser adicionado ao editor de HTML no Visual Studio é o suporte ao Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA). O WAI-ARIA (w3.org/WAI/intro/aria) é um padrão da Web focalizado em tornar sites e aplicativos da Web mais acessíveis para pessoas com deficiências. A especificação define dois tipos de atributos para sua marcação. As funções são aplicadas a elementos HTML para descrever o tipo de widget que está sendo usado ou a estrutura da página da Web. Como você pode ver na Figura 1, o suporte do Visual Studio para as funções do ARIA inclui o IntelliSense.
Figura 1 Funções do ARIA
Os outros tipos de atributos são prefixados com aria-, como aria-busy ou aria-valuemin, conforme mostrado na Figura 2. Esses atributos aria-* são usados para ajudar a descrever o elemento para um usuário.
Figura 2 Propriedades de ARIA-*
O HTML5 introduziu mais de 25 novas marcas semânticas. O Visual Studio já tinha suporte do IntelliSense para essas marcas, mas o Visual Studio 2012 acelera e facilita a escrita de marcação adicionando alguns snippets correspondentes, como os snippets para marcas de áudio e vídeo. A Figura 3 mostra um snippet para a marca video. Embora essas marcas não sejam complicadas, elas apresentam algumas pequenas sutilezas, como a adição dos fallbacks de codec corretos.
Figura 3 Um snippet do elemento video
Os últimos sites que criei tiraram proveito das novas marcas HTML5. Com cada um desses sites, acabei refatorando minha marcação de alguma maneira, mesmo que fosse uma simples alteração semântica, como a alteração de uma div para uma section. No Visual Studio 2012, quando você altera um elemento, o editor também altera o elemento inicial ou final correspondente. Essa renomeação automática é outra maneira do editor ajudar você a evitar aqueles erros noturnos.
Normalmente, os desenvolvedores diferem sobre se usar marcas ou espaços para formatação. Seja qual for sua preferência, o Recuo Inteligente estará disponível para manter a consistência. Independentemente de sua escolha, depois de digitar um elemento e pressionar Enter, você é levado para a próxima linha, que é recuada conforme sua preferência. Como era de se esperar, o IntelliSense adicionou filtragem não apenas enquanto você digita, mas também baseada na capitalização do título das palavras em suas pesquisas, acelerando e facilitando a inserção de elementos. E quando combinado com o Recuo Inteligente, independentemente de onde você solta o cursor, depois de pressionar a tecla tab, sua nova marcação será posicionada corretamente no documento, conforme mostrado na Figura 4.
Figura 4 Filtragem e recuo inteligentes
Finalmente, o editor de HTML do Visual Studio 2012 tem várias excelentes adições que dão suporte ao ASP.NET, como Tarefas Inteligentes, extração de controle de usuário e ligação de eventos automática. Você pode encontrar mais informações sobre esses recursos na página "O que há de novo no ASP.NET 4.5 e no Visual Studio 2012" em bit.ly/MXcIbG.
Suporte a JavaScript
O editor do JavaScript no Visual Studio 2012 está completamente novo e dá suporte a ECMAScript 5. Ele introduz bons recursos, como funções de recolhimento e correspondência de chaves. E se você ainda está procurando uma função usando rolagem, esqueça. Basta pressionar F12 e você será direcionado para a definição daquela função ou variável (consulte a Figura 5).
Figura 5 O editor do JavaScript
O editor também melhora o desenvolvimento do IntelliSense para JavaScript e, junto com isso, dá um melhor suporte ao Document Object Model (DOM). Com o HTML5 se tornando uma tendência predominante, é ótimo ter esse suporte avançado, não apenas para as novas APIs de DOM básicas, mas também para quando você decide estendê-las, conforme mostrado na Figura 6.
Figura 6 IntelliSense para JavaScript
Sempre é uma boa coisa ter uma documentação, principalmente quando se trata da documentação que reside na janela do IntelliSense. O suporte a VSDoc não é uma novidade no Visual Studio, mas agora ele inclui um novo elemento signature para declarar sobrecargas de funções do JavaScript, que permite criar comentários detalhados do IntelliSense. Ignorando a qualidade do meu código por um segundo, dê uma olhada na Figura 7, que mostra uma função que utiliza dois ou três argumentos Como você pode ver, o código tem uma série de <signatures> para cada sobrecarga, com os resultados mostrados na Figura 8.
Figura 7 Uma função do JavaScript que usa o elemento 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";
}
Figura 8 Comentários adicionados ao IntelliSense
Com esta simples documentação disponível, você pode ver na Figura 8 como o IntelliSense a usou para o conteúdo exibido.
Suporte ao CSS3
Para mim, o CSS continua a ser uma arte mística e uma arte para a qual eu nunca obtenho ajuda suficiente. Felizmente, o Visual Studio 2012 melhorou o suporte para CSS. Regiões, IntelliSense e snippets são apenas alguns dos recursos que podem ajudar a melhorar seu estilo. Vamos começar analisando as regiões. Tudo o que é necessário é um comentário especial para criar uma região. A Figura 9 mostra uma região simples expandida e recolhida para o estilo de uma tabela.
Figura 9 Regiões
Como você sabe, no mundo da Web, você precisa dar suporte a vários navegadores. Com o CSS, isso significa levar em conta os prefixos de todos os diferentes fornecedores. O editor do CSS do Visual Studio 2012 agora inclui os prefixos dos fornecedores na lista padrão de propriedades e também nos snippets internos, conforme mostrado na Figura 10.
Figura 10 Propriedades para o prefixo de fornecedor -moz
É claro que existem muitas propriedades de CSS à sua disposição e a filtragem é essencial. Como com o IntelliSense para C# e Visual Basic, você pode filtrar essa longa lista de propriedades do CSS apenas digitando, conforme mostrado na Figura 11 na pesquisa de borr (raio de borda).
Figura 11 CSS IntelliSense
Isso é excelente, mas para raio de borda você precisa realmente dar suporte aos prefixos de todos os fornecedores. Se você examinar mais atentamente o ícone de raio de borda, verá que, na verdade, ele é um snippet. Pressione a tecla tab duas vezes, uma vez para preenchimento automático da propriedade e mais uma vez para inserir o snippet (consulte a Figura 12).
Figura 12 Um snippet do CSS
Você pode ver que os prefixos de todos os fornecedores foram adicionados, e o valor agora é realçado para você alterar. Conforme você digita o valor desejado do raio, todos os valores específicos ao fornecedor são alterados de maneira correspondente. Mas e sobre algo mais avançado, como uma consulta de mídia? Digite @ e você verá uma lista de snippets avançados, como @media. Selecione @media e pressione a tecla tab, e o snippet de consulta de mídia será inserido. Agora você pode apenas digitar a nova largura, pressionar a tecla tab e ajustar a altura (consulte a Figura 13).
@media Snippet" title="The @media Snippet" />
**Figura 13 O snippet de @media**
Os snippets são uma maneira fantástica de economizar pressionamentos de teclas. Assim como no C# ou no Visual Basic, você pode criar novos snippets ou modificar snippets existentes por meio do Gerenciador de Trechos de Código do Visual Studio, que você encontra em Ferramentas | Gerenciador de Trechos de Código.
O Visual Studio também tem um novo seletor de cores para as propriedades que exigem cor. Ele substitui as cores nomeadas em versões anteriores. Como você pode ver na Figura 14, optei por selecionar uma cor com um pouco de transparência, portanto o seletor de cores foi alterado de uma cor hexadecimal padrão para rgba.
Figura 14 O novo seletor de cores do CSS
Finalmente, verifique o suporte para recuo hierárquico e hacks do CSS em bit.ly/MXcIbG.
Depurando com o Page Inspector
"Ei, isso funciona em meu computador!" Garanto que você disse ou ouviu essa frase mais de uma vez durante sua carreira. No desenvolvimento da Web, é quase certo que você ouvirá essa frase mais cedo ou mais tarde, por que? Bem, em parte porque o local onde implantamos não é idêntico ao local onde desenvolvemos.
Deixando de lado as coisas óbvias, como segurança e farms de servidores, isso se resume no que o navegador executará e renderizará. Ao longo dos anos, as tecnologias, como HTML5, CSS3 e JavaScript, avançaram, e nós usamos uma grande variedade de estruturas, incluindo algumas que podem ser executadas apenas no navegador (como knockout.js e backbone.js). Os desenvolvedores da Web precisam lidar com dois mundos diferentes: como o aplicativo é desenvolvido e como ele é executado em todos os diferentes navegadores que precisam de suporte.
As ferramentas dos navegadores avançaram de maneira correspondente, o que ajuda muito, mas você ainda pode precisar fazer uma escavação arqueológica para localizar o arquivo de origem. Mesmo que você considere uma simples minimização e carregadores de script do JavaScript, o que pode ser enviado ao servidor poderá ser drasticamente diferente do que você desenvolveu. Felizmente, o Page Inspector, uma das minhas adições favoritas ao Visual Studio 2012, está aqui para ajudar. O Page Inspector introduz ferramentas de diagnóstico de navegador diretamente no Visual Studio. Como isso, ele fornece uma experiência integrada do navegador ao ASP.NET e direto ao código-fonte. Ele faz tudo isso com uma configuração mínima.
Você pode executar o Page Inspector pronto para uso com funcionalidade limitada. Para isso, basta clicar com o botão direito do mouse na página a ser exibida e selecionar Exibir no Page Inspector. Agora, eu sei o que você está pensando: "Não há como isso funcionar em meu projeto do MVC ou com todas as minhas rotas personalizadas". Tenha um pouco de fé.
O Page Inspector fará o melhor para realmente mapear o arquivo para a convenção de URL usada. Quando ele falhar, você pode adicionar o mapeamento manualmente. Para habilitar completamente o Page Inspector e todos os seus recursos, basta adicionar uma nova chave à seção appSettings de seu web.config:
<add key="VisualStudioDesignTime:Enabled" value="true" />
O Page Inspector é a conexão daquela "lacuna" que mencionei anteriormente entre o que foi desenvolvido e o que foi renderizado. Não seria bom poder apenas realçar algo na saída renderizada e localizar o arquivo onde isso se encontra ou, melhor ainda, alterá-lo? Sei que você já pode fazer isso nas ferramentas dos navegadores, mas quero dizer até o fim, direto no código-fonte. Com o Page Inspector você pode fazer isso, uma vez que ele mapeia entre a saída renderizada e os arquivos de origem correspondentes. Quando você inicia o Page Inspector, é apresentada uma janela de navegador dentro do Visual Studio, conforme mostrado na Figura 15.
Figura 15 Page Inspector
Há muita coisa acontecendo aqui, mas vamos separar as coisas:
- O cromado da janela é um quadro do navegador. Você pode ver a barra de endereços na parte superior.
- Na metade superior da página está a página da Web real renderizada para o navegador.
- A parte inferior esquerda é a marcação HTML da página renderizada. Isso é porque o HTML foi selecionado na guia diretamente acima.
- A parte inferior direita é o estilo da página renderizada.
De forma semelhante às ferramentas encontradas no navegador, há um recurso chamado Inspect. Quando você seleciona Inspect, à medida que se mover em torno da página você verá os diferentes elementos do DOM realçados e rotulados. Na Figura 15, o elemento é hgroup com uma classe chamada title. Na janela do HTML, você também verá a marcação correspondente realçada. Isso acontece em tempo real conforme você se move pelo documento. Como se isso não fosse legal o suficiente, dá uma olhada na Figura 16. Selecionei ou focalizei um elemento no Page Inspector e por trás dele você pode ver que ele está realçado no arquivo de origem correto onde esse texto reside. Isso não acontece apenas no nível de elemento, mas até o nível de caractere. É um mapeamento bidirecional ao vivo de caractere por caractere, da origem até a saída renderizada. Independentemente do que você seleciona (origem ou saída renderizada) você verá sua seleção realçada.
Figura 16 Mapeamento entre a origem e a saída renderizada
Minha abordagem dos recursos do Page Inspector foi apenas superficial. Este é um daqueles recursos que você precisa usar para apreciar totalmente a maneira como ele pode facilitar sua vida. Prepare-se para se surpreender. Na próxima vez que você estiver em um projeto da Web, clique com o botão direito do mouse em uma página e selecione Exibir no Page Inspector.
Publicando
O que é um site se você não puder implantá-lo? O Visual Studio tem suporte para implantação de sites há muito tempo, incluindo um recurso chamado Perfil de Publicação. Historicamente, depois que um perfil era criado, ele era apenas um ativo da máquina local. No Visual Studio 2012, esse perfil agora faz parte dos ativos gerais do projeto. Ele é um simples arquivo MSBuild, que será importado para sua cadeia geral do MSBuild. Esta é a aparência que um perfil FTP simples pode ter:
<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>
Você pode localizar esses perfis salvos nas pastas gerais de propriedades do projeto:
- C# — Properties\PublishProfiles
- Visual Basic — MyProject\PublishProfiles
Naturalmente, como esse é um arquivo de projeto do MSBuild, você pode chamá-lo na linha de comando, da seguinte maneira:
msbuild.exe myProject.csproj /t:WebPublish /p:PublishProfile=ProfileName
HTML5 no Windows 8
Na conferência do BUILD do ano passado, a Microsoft anunciou um novo modelo de programação para criar aplicativos nativos no Windows 8. Como foi constatado, esse novo modelo de programação não é realmente novo. Parte da história do desenvolvimento é simplesmente uma nova dependência do HTML5, do CSS3 e do JavaScript para criar aplicativos. Isso significa que qualquer um com experiência em desenvolvimento da Web tem um conjunto de habilidades aplicáveis para escrever aplicativos nativos para o Windows 8. É claro que o Visual Studio está sempre disponível para ajudar.
Várias das melhorias de edição básicas que abordei aqui ainda são aplicáveis para desenvolver aplicativos da Windows Store, com exceção do Page Inspector (porque os aplicativos da Windows Store não são executados em um navegador). Portanto, como você depura aplicativos HTML5 da Windows Store? Com o Explorador do DOM e o Console do JavaScript, conforme mostrado na Figura 17.
Figura 17 O Explorador do DOM
Como com o Page Inspector, você pode selecionar elementos no aplicativo em execução e ir diretamente para o local na origem. Você pode ver os estilos aplicados e alterar valores enquanto o aplicativo está em execução. Deseja colocar um ponto de interrupção em um JavaScript? Vá em frente e, em seguida, faça uma depuração ao vivo. Você pode até disparar o Console do JavaScript e começar a experimentar. Independentemente de você estar criando um site ou um aplicativo para Windows 8, ele é o mesmo, com os mesmos recursos entre as duas plataformas em um excelente editor.
Se você estiver lendo este artigo, há uma grande possibilidade de que você seja um usuário do Visual Studio. Eu o uso há mais de uma década e aprendi com cada versão principal que é bom lembrar-se de explorar todos os novos recursos. Às vezes é mais fácil se restringir ao que você já sabe, mas vá em frente e explore. É bom ver o Visual Studio adotar tecnologias atuais, como o HTML5, o CSS3 e o ECMAScript 5 e, ao mesmo tempo, colocar recursos para atualização conforme os padrões são alterados.
Clark Sell trabalha como divulgador sênior da Web e do Windows 8 para a Microsoft fora de Chicago. Ele mantém um blog em csell.net, podcasts em DeveloperSmackdown.com e pode ser encontrado no Twitter em twitter.com/csell5.
Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Matt Carter e Orville McDonald