Angular
- Kit de Ferramentas do desenvolvedor
 |
Hoje temos mais uma contribuição de Cláudio Ralha que apresenta o kit de ferramentas do desenvolvedor Angular. |
Kit de ferramentas do desenvolvedor Angular
Toda vez que trocamos de linguagens de
programação ou de framework, saímos da nossa zona de conforto e ficamos com
aquela sensação de que estamos sem chão ou pisando em ovos, não é mesmo?
Pois bem, se você resolveu partir para o mundo Angular agora, este artigo foi
feito justamente para você. Uma dentre as muitas dúvidas que pairam sobre a
nossa cabeça quando estamos começando no framework é que ferramentas usar.
A escolha do editor de código irá depender principalmente da linguagem adotada
para rodar o back-end da sua aplicação, já que é possível combinar Angular com
diferentes linguagens como C#, Visual Basic, Java, PHP, etc.
Assumindo a linguagem C# como a sua escolha, já que esta é a linguagem preferida
da maioria do público alvo do site Macoratti.NET, podemos sugerir de imediato o
uso do Visual Studio Code ou do Visual Studio. Caso você só trabalhe com
front-end, o VS Code é a melhor escolha pois é leve, multiplataforma e oferece
suporte a um grande número de linguagens através de extensões. Caso precise
trabalhar intensamente tanto no código do front-end quanto de back-end, o Visual
Studio é a escolha mais natural. Em um artigo a parte, iremos apresentar os
principais editores de código e IDEs que são usados por desenvolvedores ao
codificar em Angular para que você possa avaliar outras opções gratuitas e
comerciais disponíveis.
Uma lista de ferramentas como ponto de partida
Na lista a seguir, enumeramos as principais ferramentas utilizadas no
desenvolvimento de projetos Angular em conjunto com Web APIs escritas em C#.
Observe:
• Angular CLI (o Angular Console é uma opção para quem não
consegue memorizar os comandos do CLI)
• Node.Js (usamos basicamente o gerenciador de pacotes NPM que acompanha o
Node.js)
• TypeScript (as opções de linguagem para projeto Angular são CoffeeScript e
Dart)
• Protractor
• Karma
• Jasmine
• TSLint
• Git
• SASS (as alternativas são CSS puro, Less ou Stylus)
• Angular Augury
• Postman
• Swagger
• NuGet
• PowerShell (o prompt interno do VS Code é uma boa alternativa)
Antes que esta lista intimide quem está dando os primeiros passos, é preciso
deixar claro que desenvolvedores iniciantes não irão utilizar de imediato todas
essas ferramentas. Sim, dá para viver feliz e contente sem parte delas!
Ferramentas para garantir a qualidade do código como o TSLint ou ferramentas
voltadas para testes como o Protractor, Karma e Jasmine podem ser aprendidas em
um segundo momento, após você ter dominado os conceitos por trás do Angular e o
básico do TypeScript. De modo semelhante, uma ferramenta de depuração avançada
como o Angular Augury só será útil em cenários mais complexos.
Ao examinar esta lista você irá notar que existem algumas ferramentas
relacionadas ao código de back-end em C# que você possivelmente já domina. São
elas: NuGet, Postman e Swagger.
Obviamente cada desenvolvedor terá seu gosto pessoal e irá substituir parte das
alternativas listadas anteriormente por outras ferramentas de sua escolha à
medida que for ganhando experiência no framework Angular e interagindo com
outros profissionais. Tenha em mente, contudo, que a lista que apresentamos
reflete as ferramentas mais solicitadas em vagas do mercado de trabalho, logo
conhecer pelo menos o básico de algumas delas será um diferencial na hora de
participar de processos seletivos.
Vejamos cada ferramenta em mais detalhes nas próximas seções...
Angular CLI
Ferramenta de linha de comando (ng.exe) lançada em 2017 pelo time de
desenvolvimento do Angular para a geração de aplicações em Angular. O Angular
CLI automatiza tarefas de criação de projetos, componentes, serviços, filtros,
módulos e diretivas. A documentação oficial do projeto Angular CLI está
disponível em:
https://angular.io/cli
Site oficial da ferramenta Angular CLI
Angular Console
Ferramenta desktop do tipo GUI (Graphic User Interface) que permite executar a
ferramenta Angular CLI de uma forma amigável, sem ter que memorizar os comandos
de criação e atualização de projetos e seus elementos. Disponível para os
sistemas operacionais Windows, Linux e Mac OS. O site oficial do Angular Console
está disponível em:
https://angularconsole.com/
Site oficial da ferramenta Angular Console
Node.js
Plataforma criada em 2009 sobre a engine de execução do JavaScript do navegador
Google Chrome para a construção de aplicações Web. O Node.Js ou simplesmente
Node, facilita a criação de aplicações de rede rápidas e escaláveis com intensa
troca de dados. Por ser multi-plataforma (roda em Windows, Linux e Mac), foi
usado como base a criação de uma nova geração de ferramentas de desenvolvimento.
Para acessar o site oficial do projeto, visite:
https://nodejs.org/en/
Site oficial da plataforma Node.js
NPM
Acrônimo de Node Package Manager. Um gerenciador de pacotes que acompanha a
plataforma Node.js e que nos permite instalar qualquer pacote criado por outros
desenvolvedores com um mínimo de esforço via linha de comando. Para visitar o
site oficial do projeto, acesse:
https://www.npmjs.com/
Site oficial do gerenciador de pacotes NPM
Nuget
Um gerenciador de pacotes gratuito e de código aberto projetado para a
plataforma de desenvolvimento da Microsoft. Inicialmente chamado de NuPack, o
NuGet é distribuído como uma extensão do Visual Studio desde o VS 2010 e pode
ser utilizado tanto em modo gráfico quanto em modo de linha de comando. O site
oficial do projeto está disponível em:
https://www.nuget.org/
Site oficial do
gerenciador de pacotes NuGet
Para saber mais sobre o NuGet, acesse:
https://docs.microsoft.com/pt-br/nuget/what-is-nuget
TypeScript
Linguagem de programação criada pela Microsoft. É um superconjunto da linguagem
Javascript com recursos não disponíveis na linguagem Javascript (tipos
opcionais, namespaces, classes, enums, interfaces, generics, parâmetros
opcionais, parâmetros default e async/await, dentre outros). A linguagem
TypeScript é a mais usada para a geração de Javascript na plataforma Angular,
embora não seja a única suportada. Como alternativa, é possível utilizar
CoffeeScript e Dart. Para conhecer o site oficial do projeto, acesse:
https://www.typescriptlang.org/
Site oficial
da linguagem TypeScript
Importante: o Angular suporta o desenvolvimento de projetos também nas
linguagens CofeeScript e Dart mas praticamente não existe documentação oficial
ou exemplos de criação de projetos Angular nestas linguagens. Todos os projetos
profissionais feitos em Angular utilizam como linguagem de script o TypeScript.
Protractor
Um framework de teste end-to-end para Angular e AngularJS. Permite rodar testes
na aplicação em execução em um navegador real, interagindo com ela como se fosse
um usuário real. É configurado por padrão em projetos criados usando a
ferramenta de linha de comando Angular CLI. O site oficial do projeto Protractor
está disponível em:
http://www.protractortest.org/
Site oficial da ferramenta de testes
Protractor
Karma
Uma ferramenta de testes unitários para JavaScript que é executada no Node.js e
permite rodar código JavaScript em vários navegadores reais. É configurada por
padrão em projetos criados usando a ferramenta de linha de comando Angular CLI.
O site oficial do projeto Karma pode ser acessado em:
https://karma-runner.github.io/
Site oficial da ferramenta de
testes Karma
Jasmine
Um framework de BDD (Behaviour Driven Development) para testes de JavaScript
para navegadores e Node.js que apresenta uma sintaxe de fácil leitura. Pode ser
executado em qualquer plataforma habilitada para JavaScript, Python ou Ruby. O
site oficial do projeto Jasmine está disponível em:
https://jasmine.github.io/index.html
Site oficial da ferramenta de testes
Jasmine
TSLint
Uma ferramenta de análise estática extensível que verifica o código do
TypeScript em busca de erros de legibilidade, manutenibilidade e funcionalidade.
A ação da ferramenta pode ser personalizada com suas próprias regras,
configurações e formatadores. O site oficial do projeto Tslint está disponível
em:
https://palantir.github.io/tslint/
Site oficial da ferramenta de
análise Tslint
Git
Um sistema de gerenciamento de código aberto criado por Linus Torvalds para
rastrear mudanças em arquivos de texto. Lançado em 2005, o Git foi criado a
partir das lições aprendidas pelo time de desenvolvimento do Kernel do Linux com
a ferramenta BitKeeper. Segundo a documentação oficial do Git, este foi criado
tendo como objetivos principais: velocidade, design simples, suporte robusto a
desenvolvimento não linear, totalmente distribuído e capacidade de lidar
eficientemente com grandes projetos. O Git está disponível para as plataformas
Windows, Linux e Mac. Para baixa-lo, acesse o site oficial em:
https://git-scm.com/
Para os usuários do Windows, existe um site extra
disponível com informações voltadas para a plataforma em:
https://gitforwindows.org/
O Git é utilizado no desenvolvimento de software por
gigantes do mercado como Microsoft, Google, Facebook, Twitter, Netflix e
LinkedIn, dentre outras. Serviços como o GitHub, Azure DevOps e o BitBucket
foram construídos sobre esta tecnologia.
Angular Augury
Uma extensão de ferramenta de desenvolvedor disponível para os navegadores
Google Chrome e Mozilla Firefox, usada para depuração e criação de perfil de
aplicativos Angular. Permite visualizar o aplicativo por meio de árvores de
componentes e ferramentas de depuração visual. O site oficial do Angular Augury
está disponível em:
https://augury.rangle.io/
Site oficial da ferramenta de depuração Angular Augury
SASS
Acrônimo de Syntactically awesome stylesheets. Um pré-processador de CSS que
oferece recursos avançados de sintaxe. Um arquivo escrito em Sass ao ser
processado gera como saída uma folha de estilo CSS regular. Criado em 2006 por
Hampton Catlin e Natalie Weizenbaum. O site oficial do projeto pode ser acessado
em:
http://sass-lang.com/
Site oficial do pré-processador Sass
O Angular ainda oferece suporte aos pré-processadores Sass, Less e Stylus
através da ferramenta Angular CLI. A maioria dos desenvolvedores utiliza
atualmente o SASS.
LESS
Um pré-processador de CSS que oferece recursos avançados de sintaxe, incluindo
variáveis, mixins, operações e funções. Criado em 2009 por Alexis Sellier. O
site oficial do projeto pode ser acessado em:
http://lesscss.org/
Site oficial
do pré-processador Less
Stylus
Um pré-processador de CSS que oferece recursos avançados de sintaxe. Criado em
2010 por TJ Holowaychuk. O site oficial do projeto Stylus pode ser acessado em:
http://stylus-lang.com/
Site oficial do pré-processador Stylus
Postman
O Postman é uma ferramenta de testes de serviços RESTful (Web APIs) por meio do
envio de requisições HTTP e da análise do seu retorno. Com ele é possível
consumir facilmente serviços locais e na internet, enviando dados e arquivos e
efetuando testes sobre as respostas das requisições.
O site oficial da ferramenta Postman pode ser acessado em:
https://www.getpostman.com/
Site
oficial da Ferramenta Postman
Swagger
O Swagger é um conjunto de ferramentas que ajuda os desenvolvedores .NET/.NET
Core a projetar, criar, documentar e consumir serviços da Web RESTful. Ele
permite documentar de forma automática as APIs criadas, além de permitir a
execução e alguns testes diretamente da página de documentação gerada, atuando
neste cenário como uma alternativa para a Postman.
O site oficial da ferramenta Swagger pode ser acessado em:
https://swagger.io/
Site
oficial da Ferramenta Swagger
PowerShell
Uma ferramenta multiplataforma, disponível para Windows, Linux e Mac, voltada
para automação e configuração de sistema via scripts, bem parecido com o Shell
do Linux e Mac. O PowerShell foi criado pela Microsoft inicialmente como um novo
prompt de comando para Windows, mais poderoso que o CMD.
O site oficial do PowerShell pode ser acessado em:
https://docs.microsoft.com/pt-br/powershell/?view=powershell-6
Site oficial da
Ferramenta PowerShell
Conclusão
Agora que você já sabe para que serve cada item do kit de ferramentas do
desenvolvedor Angular e onde achar informações sobre as ferramentas desejadas, é
hora de colocar a mão na massa e criar projetos de teste para aprender esse
framework fantástico. Esperamos que tenha gostado desta lista que preparamos
para você. Bom estudo e até a próxima!
Cláudio Ralha
Referências: