Gerenciando bibliotecas de scripts no Visual Studio 2015

Veja neste artigo como gerenciar pacotes client-side em projetos ASP.NET 5 criados no Visual Studio 2015, utilizando para isto as ferramentas Bower, Grunt e npm.

O advento de frameworks baseados em JavaScript como AngularJS, Node.js e Knockout tem transformado a forma como aplicações Web são construídas. O desenvolvimento de soluções client-side sofisticadas é uma tendência crescente, sendo que este tipo de atividade tem priorizado questões como responsividade, produtividade e facilidade de manutenção.

Considerando especificamente o quesito produtividade, diversas ferramentas foram concebidas por desenvolvedores e comunidades com o intuito de simplificar a manipulação de arquivos de script e folhas de estilo CSS. A utilização de tais recursos vem aumentando significativamente dentro da programação client-side, com inúmeras opções gratuitas agilizando o processo de implementação de aplicações.

Não deixe de conferir o Checklist Programador .NET. A forma mais fácil de se tornar um expert em .NET.

Ao invés de se restringir à simples cópia de arquivos, algumas destas soluções foram bem além. Existe hoje todo um processo de build envolvendo scripts e arquivos CSS, sendo que o mesmo engloba tarefas como:

Dentre as ferramentas mais populares na atualidade para a manipulação de arquivos de scripts e CSS, é possível destacar:

Algumas das funcionalidades aqui citadas foram incorporadas de forma nativa ao framework ASP.NET MVC 4, tais como Bundling, Minification e meios para determinar qual versão de uma biblioteca de scripts específica será utilizada (não existia porém uma funcionalidade para download automático dos arquivos correspondentes). Há casos inclusive em que bibliotecas de script poderiam ser baixadas e incorporadas a um projeto a partir do próprio utilitário NuGet.
Como não é difícil imaginar, a Microsoft observou com atenção a toda esta movimentação que vem acontecendo no desenvolvimento front-end. O Visual Studio 2013 conta com extensões que tornam possível o uso das ferramentas Bower, Grunt e npm, de maneira a facilitar o gerenciamento de recursos client-side em aplicações ASP.NET. Já no Visual Studio 2015 Preview este suporte é nativo, com a IDE incorporando estas soluções open source no controle de arquivos CSS e de scripts.

O objeto deste artigo é a utilização conjunta do Bower, Grunt e npm na manipulação de bibliotecas de scripts a partir do Visual Studio 2015, apresentando para isto um exemplo que será detalhado na próxima seção. Importante frisar que o mecanismo de Bundling existente em versões anteriores não está mais disponível com o lançamento do ASP.NET 5 e do ASP.NET MVC 6, dada a capacidade das ferramentas de automação mencionadas em substituir plenamente as funcionalidades oferecidas originalmente.

Exemplo envolvendo o gerenciamento de scripts no Visual Studio 2015

Para implementar a solução demonstrada nesta seção foram utilizados os seguintes recursos:

O projeto TesteVS2015Scripts será do tipo “ASP.NET Web Application” (Figura 1), sendo gerado a partir da seleção do template “ASP.NET 5 Starter Web” (Figura 2). Nesta aplicação MVC um usuário poderá informar seu peso e altura, com estes dados servindo de base para o cálculo de seu IMC (Índice de Massa Corpórea).

A intenção com este exemplo é detalhar de que forma acontece o gerenciamento de scripts no Visual Studio 2015, empregando para tanto os utilitários de automação aqui discutidos (Bower, npm e Grunt). Através destas ferramentas a biblioteca autoNumeric será incorporada ao projeto TesteVS2015Scripts, sem que isto implique na necessidade de uso do NuGet ou, mesmo, no download manual do plugin e posterior inclusão do mesmo na solução.

Figura 1. Criando a aplicação de testes no Visual Studio 2015

Figura 2. Selecionando o template para a criação da aplicação ASP.NET 5

Analisando a estrutura do projeto criado via Solution Explorer (Figura 3), é possível observar a presença dos seguintes elementos:

Figura 3. Estrutura do projeto TesteVS2015Scripts

Para incorporar a biblioteca autoNumeric ao projeto será necessário, primeiramente, alterar o arquivo bower.json de maneira que no mesmo conste o pacote correspondente. A execução do Bower será possível graças a tarefas configuradas para processamento via Grunt, além da utilização desta última ferramenta estar atrelada ao npm.

Na Listagem 1 está o conteúdo do arquivo package.json, com os pacotes que serão gerenciados via npm.

Listagem 1. Arquivo package.json

{ "version": "0.0.0", "name": "TesteVS2015Scripts", "devDependencies": { "grunt": "^0.4.5", "grunt-bower-task": "^0.4.0" } }

Já as instruções que definem o arquivo gruntfile.js encontram-se na Listagem 2. Dentre as ações a serem executadas está a instalação do Bower, além do carregamento de scripts que serão obtidos a partir desta ferramenta. Nas configurações para uso do utilitário Bower também está o diretório para onde serão copiados os pacotes de scripts da aplicação (wwwroot/lib).

Listagem 2. Arquivo gruntfile.json

module.exports = function (grunt) { grunt.initConfig({ bower: { install: { options: { targetDir: "wwwroot/lib", layout: "byComponent", cleanTargetDir: false } } } }); grunt.registerTask("default", ["bower:install"]); grunt.loadNpmTasks("grunt-bower-task"); };

OBSERVAÇÃO: O código dos arquivos package.json, gruntfile.js e bower.json é gerado automaticamente durante a criação de um projeto ASP.NET 5.

A inclusão de novos packages no arquivo bower.json é facilitada graças ao suporte oferecido pelo IntelliSense. Acessando informações de um repositório que contém os plugins suportados pelo Bower este recurso irá listar os diversos pacotes disponíveis, bem como as versões mais recentes dos mesmos (como indicado na Figura 4). Este mesmo tipo de funcionalidade existe para a edição do arquivo package.json, o qual contém as configurações a serem definidas para o utilitário npm.

Na seção exportsOverride do arquivo bower.json será necessário listar ainda quais arquivos do plugin autoNumeric serão carregados dentro da pasta wwwroot (no caso específico desta biblioteca, apenas o script autoNumeric.js). Na Listagem 3 encontram-se todas as mudanças realizadas em bower.json; outras dependências como o Bootstrap e jQuery já haviam sido registradas anteriormente, durante a criação do projeto TesteVS2015Scripts.

Figura 4. Utilizando o IntelliSense durante a edição do arquivo bower.json

Listagem 3. Arquivo bower.json

{ "name": "TesteVS2015Scripts", "private": true, "dependencies": { "bootstrap": "~3.0.0", "jquery": "~1.10.2", "jquery-validation": "~1.11.1", "jquery-validation-unobtrusive": "~3.2.2", "autoNumeric": "~1.9.26" }, "exportsOverride": { "bootstrap": { "js": "dist/js/*.*", "css": "dist/css/*.*", "fonts": "dist/fonts/*.*" }, "jquery": { "js": "jquery.{js,min.js,min.map}" }, "jquery-validation": { "": "jquery.validate.js" }, "jquery-validation-unobtrusive": { "": "jquery.validate.unobtrusive.{js,min.js}" }, "autoNumeric": { "js": "autoNumeric.js" } } }

OBSERVAÇÃO: as versões de pacotes manipulados através do utilitário Bower seguem um conceito conhecido como versionamento semântico (em inglês “semantic versioning”), com três seções que se dividem em major version, minor version e patch (cada uma destas partes é separada por um ponto). O uso do símbolo “^” (circunflexo) antes de um número de versão (como em “^1.10”) é uma instrução para se utilizar um release que corresponda no mínimo à minor version especificada, além da obrigatoriedade de se coincidir com o valor da major version. Já o uso do símbolo “~” (til) como em “~1.10.2” determina a utilização de qualquer patch igual ou superior a 2 (considerando as versões 1.10 de uma biblioteca). A indicação de um valor como “1.10.2” sem nenhum símbolo precedente representa o uso específico de uma versão (desconsiderando assim futuros releases).

Verificando a estrutura do projeto TesteVS2015Scripts dentro do Solution Explorer, será possível constatar que o plugin autoNumeric ainda não foi instalado (Figura 5). A fim de realizar este procedimento, acionar com o botão direito do mouse o item “Bower” em “Dependencies” e selecionar a opção “Restore Packages” (Figura 6).

Figura 5. Plugin autoNumeric ainda não instalado

Figura 6. Instalando o plugin autoNumeric através do Bower

Na janela “Output” aparecerão então as diversas ações executadas pela ferramenta Bower, de forma a incorporar a biblioteca autoNumeric a esta aplicação de exemplo (Figura 7). Analisando novamente a estrutura do projeto TesteVS2015Scripts, já será possível constatar que o plugin autoNumeric foi corretamente instalado (Figura 8).

Figura 7. Instalando o plugin autoNumeric através do Bower

Figura 8. Plugin autoNumeric já instalado

Os scripts dos quais uma aplicação depende também podem ser atualizados ou, mesmo, restaurados a partir da funcionalidade Task Runner Explorer. Para visualizar a janela correspondente clicar com o botão direito do mouse sobre o arquivo gruntfile.js, acionando em seguida a opção “Task Runner Explorer” (Figura 9). Este recurso também pode ser acessado a partir do menu View > Other Windows > Task Runner Explorer.

Figura 9. Acessando o Task Runner Explorer

Com a janela “Task Runner Explorer” ativa, clicar desta vez com o botão direito mouse sobre o item “bower” e selecionar a opção Run (Figura 10). As tarefas configuradas para a ferramenta Bower serão então executadas (com base nas instruções definidas no arquivo gruntfile.js), com um prompt exibindo o resultado deste processo (Figura 11).

Figura 10. Restaurando packages via Task Runner Explorer

Figura 11. Resultado da execução de uma tarefa no Task Runner Explorer

É possível ainda vincular a execução de tarefas especificadas no arquivo gruntfile.js a eventos que aconteçam na IDE do Visual Studio. Uma possibilidade seria executar a restauração de pacotes do Bower antes do build do projeto TesteVS2015Scripts: para que isto aconteça acionar a task “bower” com o botão direito do mouse, selecionando em seguida a opção “Bindings” e, por último, o item “Before Build” (Figura 12).

A realização deste procedimento fará com que a cada novo build os diversos pacotes configurados em bower.json sejam restaurados/atualizados. Este tipo de comportamento é extremamente útil quando da utilização de pré-processadores como LESS e SASS, uma vez que permitirá a geração dos arquivos CSS no formato esperado para o deployment de uma aplicação.

Figura 12. Atrelando a execução de uma tarefa a um evento da IDE

Como último passo será necessário alterar a View Index.cshtml, de forma a implementar a funcionalidade para cálculo do IMC. Conforme mencionado anteriormente, serão criados campos para preenchimento do peso e altura utilizando máscaras geradas pelo plugin autoNumeric.

Na Listagem 4 está o código referente à View Index.cshtml, sendo possível notar no mesmo:

Listagem 4. View Index.csthml

<div class="jumbotron"> <h1>ASP.NET 5</h1> <p class="lead"> Exemplo de aplicação MVC baseada no ASP.NET 5. </p> <p> <a href="http://asp.net/vnext" class="btn btn-primary btn-lg">Saiba mais »</a> </p> </div> <h2> Teste envolvendo o uso das ferramentas Bower, Grunt e nmp. </h2> <div > <p class="lead"> Peso (kg): <input id="peso" class="form-control text-right" /> </p> <p class="lead"> Altura (m): <input id="altura" class="form-control text-right" /> </p> <a class="btn btn-primary btn-lg" onclick="calcularIMC();">Calcular IMC »</a> </div> @section scripts{ <script type="text/javascript" src="~/lib/autoNumeric/js/autoNumeric.js"></script> <script type="text/javascript"> function calcularIMC() { var peso = $("#peso").val().replace(",", "."); if (peso == "") { alert("Informe um valor para o Peso!"); return; } var altura = $("#altura").val().replace(",", "."); if (altura == "") { alert("Informe um valor para a Altura!"); return; } var IMC = peso / (altura * altura); IMC = Math.round(IMC * 100) / 100; var status; if (IMC < 18.5) status = "Abaixo do Peso Ideal"; else if (IMC > 25) status = "Acima do Peso Ideal"; else status = "Peso Normal"; alert("Valor do IMC: " + IMC + "\n\n" + "Status: " + status); } $(document).ready(function () { $("#peso").autoNumeric({ aSep: '', aDec: ',', mDec: '1', vMin: '0.1', vMax: '1000.0' }); $("#altura").autoNumeric({ aSep: '', aDec: ',', mDec: '2', vMin: '0.01', vMax: '9.99' }); }); </script> }

Teste da aplicação criada

Na Figura 13 é apresentada a tela inicial da aplicação TesteVS2015Scripts.

Figura 13. Tela inicial da aplicação TesteVS2015Scripts

Uma vez informados o peso e a altura, acionar a opção “Calcular IMC”. Será exibida então uma janela com o resultado, como indicado na Figura 14.

Figura 14. Mensagem exibida após o cálculo do IMC

O objetivo deste artigo foi demonstrar as principais mudanças envolvendo o uso de recursos client-side no Visual Studio 2015 e no ASP.NET 5. Ao deixar de lado o mecanismo de Bundling e simplificar a integração com ferramentas de terceiros (como Bower, Grunt e npm), a Microsoft buscou não apenas estar em sintonia com o aquilo que se encontra em voga no desenvolvimento Web. Tal iniciativa também procurou atrair mais profissionais de front-end para a plataforma ASP.NET, partindo do suporte a soluções utilizadas extensivamente pelos mesmos em outros projetos.

Importante ressaltar que ao aprofundar os conhecimentos sobre o funcionamento de soluções como Bower, Grunt e npm, um desenvolvedor terá ainda um maior controle na customização do processo de build em aplicações ASP.NET.

Espero que o conteúdo aqui apresentado possa ser útil.

Até uma próxima oportunidade!

Links

ASP.NET vNext
http://www.asp.net/vnext

JSHint
http://jshint.com/

JSLint
http://www.jslint.com/

LESS
http://lesscss.org/

SASS
http://sass-lang.com/

Bower
http://bower.io/

Grunt
http://gruntjs.com/

Gulp
http://gulpjs.com/

npm
https://www.npmjs.com/

AutoNumeric
http://www.decorplanit.com/plugin/

O advento de frameworks baseados em JavaScript como AngularJS, Node.js e Knockout tem transformado a forma como aplicações Web são construídas. O desenvolvimento de soluções client-side sofisticadas é uma tendência crescente, sendo que este tipo de atividade tem priorizado questões como responsividade, produtividade e facilidade de manutenção.

Considerando especificamente o quesito produtividade, diversas ferramentas foram concebidas por desenvolvedores e comunidades com o intuito de simplificar a manipulação de arquivos de script e folhas de estilo CSS. A utilização de tais recursos vem aumentando significativamente dentro da programação client-side, com inúmeras opções gratuitas agilizando o processo de implementação de aplicações.

Não deixe de conferir o Checklist Programador .NET. A forma mais fácil de se tornar um expert em .NET.

Ao invés de se restringir à simples cópia de arquivos, algumas destas soluções foram bem além. Existe hoje todo um processo de build envolvendo scripts e arquivos CSS, sendo que o mesmo engloba tarefas como:

Dentre as ferramentas mais populares na atualidade para a manipulação de arquivos de scripts e CSS, é possível destacar:

Algumas das funcionalidades aqui citadas foram incorporadas de forma nativa ao framework ASP.NET MVC 4, tais como Bundling, Minification e meios para determinar qual versão de uma biblioteca de scripts específica será utilizada (não existia porém uma funcionalidade para download automático dos arquivos correspondentes). Há casos inclusive em que bibliotecas de script poderiam ser baixadas e incorporadas a um projeto a partir do próprio utilitário NuGet.
Como não é difícil imaginar, a Microsoft observou com atenção a toda esta movimentação que vem acontecendo no desenvolvimento front-end. O Visual Studio 2013 conta com extensões que tornam possível o uso das ferramentas Bower, Grunt e npm, de maneira a facilitar o gerenciamento de recursos client-side em aplicações ASP.NET. Já no Visual Studio 2015 Preview este suporte é nativo, com a IDE incorporando estas soluções open source no controle de arquivos CSS e de scripts.

O objeto deste artigo é a utilização conjunta do Bower, Grunt e npm na manipulação de bibliotecas de scripts a partir do Visual Studio 2015, apresentando para isto um exemplo que será detalhado na próxima seção. Importante frisar que o mecanismo de Bundling existente em versões anteriores não está mais disponível com o lançamento do ASP.NET 5 e do ASP.NET MVC 6, dada a capacidade das ferramentas de automação mencionadas em substituir plenamente as funcionalidades oferecidas originalmente.

Exemplo envolvendo o gerenciamento de scripts no Visual Studio 2015

Para implementar a solução demonstrada nesta seção foram utilizados os seguintes recursos:

O projeto TesteVS2015Scripts será do tipo “ASP.NET Web Application” (Figura 1), sendo gerado a partir da seleção do template “ASP.NET 5 Starter Web” (Figura 2). Nesta aplicação MVC um usuário poderá informar seu peso e altura, com estes dados servindo de base para o cálculo de seu IMC (Índice de Massa Corpórea).

A intenção com este exemplo é detalhar de que forma acontece o gerenciamento de scripts no Visual Studio 2015, empregando para tanto os utilitários de automação aqui discutidos (Bower, npm e Grunt). Através destas ferramentas a biblioteca autoNumeric será incorporada ao projeto TesteVS2015Scripts, sem que isto implique na necessidade de uso do NuGet ou, mesmo, no download manual do plugin e posterior inclusão do mesmo na solução.

Figura 1. Criando a aplicação de testes no Visual Studio 2015

Figura 2. Selecionando o template para a criação da aplicação ASP.NET 5

Analisando a estrutura do projeto criado via Solution Explorer (Figura 3), é possível observar a presença dos seguintes elementos:

Figura 3. Estrutura do projeto TesteVS2015Scripts

Para incorporar a biblioteca autoNumeric ao projeto será necessário, primeiramente, alterar o arquivo bower.json de maneira que no mesmo conste o pacote correspondente. A execução do Bower será possível graças a tarefas configuradas para processamento via Grunt, além da utilização desta última ferramenta estar atrelada ao npm.

Na Listagem 1 está o conteúdo do arquivo package.json, com os pacotes que serão gerenciados via npm.

Listagem 1. Arquivo package.json

{ "version": "0.0.0", "name": "TesteVS2015Scripts", "devDependencies": { "grunt": "^0.4.5", "grunt-bower-task": "^0.4.0" } }

Já as instruções que definem o arquivo gruntfile.js encontram-se na Listagem 2. Dentre as ações a serem executadas está a instalação do Bower, além do carregamento de scripts que serão obtidos a partir desta ferramenta. Nas configurações para uso do utilitário Bower também está o diretório para onde serão copiados os pacotes de scripts da aplicação (wwwroot/lib).

Listagem 2. Arquivo gruntfile.json

module.exports = function (grunt) { grunt.initConfig({ bower: { install: { options: { targetDir: "wwwroot/lib", layout: "byComponent", cleanTargetDir: false } } } }); grunt.registerTask("default", ["bower:install"]); grunt.loadNpmTasks("grunt-bower-task"); };

OBSERVAÇÃO: O código dos arquivos package.json, gruntfile.js e bower.json é gerado automaticamente durante a criação de um projeto ASP.NET 5.

A inclusão de novos packages no arquivo bower.json é facilitada graças ao suporte oferecido pelo IntelliSense. Acessando informações de um repositório que contém os plugins suportados pelo Bower este recurso irá listar os diversos pacotes disponíveis, bem como as versões mais recentes dos mesmos (como indicado na Figura 4). Este mesmo tipo de funcionalidade existe para a edição do arquivo package.json, o qual contém as configurações a serem definidas para o utilitário npm.

Na seção exportsOverride do arquivo bower.json será necessário listar ainda quais arquivos do plugin autoNumeric serão carregados dentro da pasta wwwroot (no caso específico desta biblioteca, apenas o script autoNumeric.js). Na Listagem 3 encontram-se todas as mudanças realizadas em bower.json; outras dependências como o Bootstrap e jQuery já haviam sido registradas anteriormente, durante a criação do projeto TesteVS2015Scripts.

Figura 4. Utilizando o IntelliSense durante a edição do arquivo bower.json

Listagem 3. Arquivo bower.json

{ "name": "TesteVS2015Scripts", "private": true, "dependencies": { "bootstrap": "~3.0.0", "jquery": "~1.10.2", "jquery-validation": "~1.11.1", "jquery-validation-unobtrusive": "~3.2.2", "autoNumeric": "~1.9.26" }, "exportsOverride": { "bootstrap": { "js": "dist/js/*.*", "css": "dist/css/*.*", "fonts": "dist/fonts/*.*" }, "jquery": { "js": "jquery.{js,min.js,min.map}" }, "jquery-validation": { "": "jquery.validate.js" }, "jquery-validation-unobtrusive": { "": "jquery.validate.unobtrusive.{js,min.js}" }, "autoNumeric": { "js": "autoNumeric.js" } } }

OBSERVAÇÃO: as versões de pacotes manipulados através do utilitário Bower seguem um conceito conhecido como versionamento semântico (em inglês “semantic versioning”), com três seções que se dividem em major version, minor version e patch (cada uma destas partes é separada por um ponto). O uso do símbolo “^” (circunflexo) antes de um número de versão (como em “^1.10”) é uma instrução para se utilizar um release que corresponda no mínimo à minor version especificada, além da obrigatoriedade de se coincidir com o valor da major version. Já o uso do símbolo “~” (til) como em “~1.10.2” determina a utilização de qualquer patch igual ou superior a 2 (considerando as versões 1.10 de uma biblioteca). A indicação de um valor como “1.10.2” sem nenhum símbolo precedente representa o uso específico de uma versão (desconsiderando assim futuros releases).

Verificando a estrutura do projeto TesteVS2015Scripts dentro do Solution Explorer, será possível constatar que o plugin autoNumeric ainda não foi instalado (Figura 5). A fim de realizar este procedimento, acionar com o botão direito do mouse o item “Bower” em “Dependencies” e selecionar a opção “Restore Packages” (Figura 6).

Figura 5. Plugin autoNumeric ainda não instalado

Figura 6. Instalando o plugin autoNumeric através do Bower

Na janela “Output” aparecerão então as diversas ações executadas pela ferramenta Bower, de forma a incorporar a biblioteca autoNumeric a esta aplicação de exemplo (Figura 7). Analisando novamente a estrutura do projeto TesteVS2015Scripts, já será possível constatar que o plugin autoNumeric foi corretamente instalado (Figura 8).

Figura 7. Instalando o plugin autoNumeric através do Bower

Figura 8. Plugin autoNumeric já instalado

Os scripts dos quais uma aplicação depende também podem ser atualizados ou, mesmo, restaurados a partir da funcionalidade Task Runner Explorer. Para visualizar a janela correspondente clicar com o botão direito do mouse sobre o arquivo gruntfile.js, acionando em seguida a opção “Task Runner Explorer” (Figura 9). Este recurso também pode ser acessado a partir do menu View > Other Windows > Task Runner Explorer.

Figura 9. Acessando o Task Runner Explorer

Com a janela “Task Runner Explorer” ativa, clicar desta vez com o botão direito mouse sobre o item “bower” e selecionar a opção Run (Figura 10). As tarefas configuradas para a ferramenta Bower serão então executadas (com base nas instruções definidas no arquivo gruntfile.js), com um prompt exibindo o resultado deste processo (Figura 11).

Figura 10. Restaurando packages via Task Runner Explorer

Figura 11. Resultado da execução de uma tarefa no Task Runner Explorer

É possível ainda vincular a execução de tarefas especificadas no arquivo gruntfile.js a eventos que aconteçam na IDE do Visual Studio. Uma possibilidade seria executar a restauração de pacotes do Bower antes do build do projeto TesteVS2015Scripts: para que isto aconteça acionar a task “bower” com o botão direito do mouse, selecionando em seguida a opção “Bindings” e, por último, o item “Before Build” (Figura 12).

A realização deste procedimento fará com que a cada novo build os diversos pacotes configurados em bower.json sejam restaurados/atualizados. Este tipo de comportamento é extremamente útil quando da utilização de pré-processadores como LESS e SASS, uma vez que permitirá a geração dos arquivos CSS no formato esperado para o deployment de uma aplicação.

Figura 12. Atrelando a execução de uma tarefa a um evento da IDE

Como último passo será necessário alterar a View Index.cshtml, de forma a implementar a funcionalidade para cálculo do IMC. Conforme mencionado anteriormente, serão criados campos para preenchimento do peso e altura utilizando máscaras geradas pelo plugin autoNumeric.

Na Listagem 4 está o código referente à View Index.cshtml, sendo possível notar no mesmo:

Listagem 4. View Index.csthml

<div class="jumbotron"> <h1>ASP.NET 5</h1> <p class="lead"> Exemplo de aplicação MVC baseada no ASP.NET 5. </p> <p> <a href="http://asp.net/vnext" class="btn btn-primary btn-lg">Saiba mais »</a> </p> </div> <h2> Teste envolvendo o uso das ferramentas Bower, Grunt e nmp. </h2> <div > <p class="lead"> Peso (kg): <input id="peso" class="form-control text-right" /> </p> <p class="lead"> Altura (m): <input id="altura" class="form-control text-right" /> </p> <a class="btn btn-primary btn-lg" onclick="calcularIMC();">Calcular IMC »</a> </div> @section scripts{ <script type="text/javascript" src="~/lib/autoNumeric/js/autoNumeric.js"></script> <script type="text/javascript"> function calcularIMC() { var peso = $("#peso").val().replace(",", "."); if (peso == "") { alert("Informe um valor para o Peso!"); return; } var altura = $("#altura").val().replace(",", "."); if (altura == "") { alert("Informe um valor para a Altura!"); return; } var IMC = peso / (altura * altura); IMC = Math.round(IMC * 100) / 100; var status; if (IMC < 18.5) status = "Abaixo do Peso Ideal"; else if (IMC > 25) status = "Acima do Peso Ideal"; else status = "Peso Normal"; alert("Valor do IMC: " + IMC + "\n\n" + "Status: " + status); } $(document).ready(function () { $("#peso").autoNumeric({ aSep: '', aDec: ',', mDec: '1', vMin: '0.1', vMax: '1000.0' }); $("#altura").autoNumeric({ aSep: '', aDec: ',', mDec: '2', vMin: '0.01', vMax: '9.99' }); }); </script> }

Teste da aplicação criada

Na Figura 13 é apresentada a tela inicial da aplicação TesteVS2015Scripts.

Figura 13. Tela inicial da aplicação TesteVS2015Scripts

Uma vez informados o peso e a altura, acionar a opção “Calcular IMC”. Será exibida então uma janela com o resultado, como indicado na Figura 14.

Figura 14. Mensagem exibida após o cálculo do IMC

O objetivo deste artigo foi demonstrar as principais mudanças envolvendo o uso de recursos client-side no Visual Studio 2015 e no ASP.NET 5. Ao deixar de lado o mecanismo de Bundling e simplificar a integração com ferramentas de terceiros (como Bower, Grunt e npm), a Microsoft buscou não apenas estar em sintonia com o aquilo que se encontra em voga no desenvolvimento Web. Tal iniciativa também procurou atrair mais profissionais de front-end para a plataforma ASP.NET, partindo do suporte a soluções utilizadas extensivamente pelos mesmos em outros projetos.

Importante ressaltar que ao aprofundar os conhecimentos sobre o funcionamento de soluções como Bower, Grunt e npm, um desenvolvedor terá ainda um maior controle na customização do processo de build em aplicações ASP.NET.

Espero que o conteúdo aqui apresentado possa ser útil.

Até uma próxima oportunidade!

Links

ASP.NET vNext
http://www.asp.net/vnext

JSHint
http://jshint.com/

JSLint
http://www.jslint.com/

LESS
http://lesscss.org/

SASS
http://sass-lang.com/

Bower
http://bower.io/

Grunt
http://gruntjs.com/

Gulp
http://gulpjs.com/

npm
https://www.npmjs.com/

AutoNumeric
http://www.decorplanit.com/plugin/

Artigos relacionados