Como prometido no artigo “Os 5 melhores frameworks de backend para desenvolvedores .NET“, hoje, vamos dar uma olhada nas ferramentas de frontend mais usadas pelos desenvolvedores .NET do LiveEdu.tv.

Para ver a plataforma .NET em ação, sugerimos que assista ao livecoder Donnie, de Diadema, SP, desenvolvendo um sistema de controle de frotas de ambulâncias.

O desenvolvimento frontend normalmente inclui o HTML, CSS e JavaScript que cria páginas, menus, botões e tudo o mais que forma a base do que o usuário vê em seu navegador. Assim, alguém que trabalha como desenvolvedor de frontend está mais familiarizado com o código usado para criar páginas web e deve ter habilidades de design com ferramentas como o Photoshop.

Enquanto a sintaxe Razor fornecida na camada View para aplicativos .NET seja muito poderosa, nem sempre ela é tão flexível quanto você precisa e nem sempre fornecerá uma marcação amigável no front end. Ao mesmo tempo, pode haver casos em que você gostaria de desacoplar seu front-end do back-end, e nesses casos, você provavelmente não vai querer usar Razor.

Agora, vamos ver quais são os 5 melhores frameworks de frontend para desenvolvedores de .NET.

AngularJS

• Website: https://angularjs.org/
• Código-fonte: https://github.com/angular/angular.js

AngularJS é um framework MVC de código aberto criado pelo Google que lhe permite ampliar rapidamente as capacidades do HTML e criar aplicações web poderosas e altamente testáveis. AngularJS inclui declaração de dados bidirecional que simplifica o desenvolvimento de aplicações complexas, uma vez que a manipulação do DOM é tratada automaticamente pelo framework. É bem documentado e há uma comunidade de suporte ativa no Stack Overflow.

Bootstrap

• Website: http://getbootstrap.com/
• Código-fonte: https://github.com/twbs/bootstrap

Criado Mark Otto e Jacob Thornton no Twitter, Bootstrap lhe dá uma enorme seleção de estilos reutilizáveis, robustos e atraentes para as suas necessidades de estilo cotidiano. Ele inclui um sistema de grade responsivo, estilos de tipografia básica, estilos para elementos comuns como botões e entradas de formulário e muito mais. Bootstrap é perfeito para protótipos rápidos, mas não o use em tudo ou todos os sites que você criar parecerão sempre o mesmo!

Sass

• Website: http://sass-lang.com/
• Source code: https://github.com/sass/sass

Sass (Syntactically Awesome Style Sheets) é uma extensão do CSS. É o CSS como deveria ter sido. Suas principais características são a capacidade de usar variáveis, nidificação e loops dentro do seu código. Isso significa que você pode codificar mais rapidamente e manter seu código limpo, arrumado e fácil de manter. O código Sass ou SCSS que você escreve é então compilado em CSS padrão, pois os navegadores não conseguem (ainda) entender o Sass/SCSS.

Bower

• Website: http://bower.io/

Bower é uma ferramenta de gerenciamento de pacotes de front-end, você pode usá-lo para acelerar o seu fluxo de trabalho. Ele permite que você instale os pacotes e suas dependências em seu projeto usando a linha de comando. Com o Bower, você não precisa mais procurar no Google pela última versão do jQuery, baixar, descompactar, copiar em seu projeto, etc. Apenas escreva: “$ bower install jquery”.

Karma

• Website: http://karma-runner.github.io/
• Source code: https://github.com/karma-runner/karma/

Karma (anteriormente Testacular) é um test runner agnóstico de framework. Você escreve seus testes de unidade juntamente com o código da sua aplicativo e você pode testar automaticamente o seu código conforme você se desenvolve. Karma permite que você teste seu código em navegadores reais em dispositivos reais ou em PhantomJS. Vale a pena assistir ao vídeo de introdução do Karma com seu criador, Vojta Jína.

Se você estiver interessado em aprender mais sobre C# e .NET, confira esta apostila virtual da Caelum que a Comunidade Brasileira de Sistemas de Informação separou.