Entendimento das ferramentas essenciais

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Instalar e usar ferramentas de depuração baseadas em navegador essenciais para a criação de componentes do Aura.
  • Instalar e executar a melhor IDE para criação de componentes do Aura.

COMEÇAR AQUI

Se a unidade anterior foi uma espécie de palestra, ou pareceu um dever de casa, vamos começar.

A coisa mais difícil quando você começa a aprender uma tecnologia totalmente nova é saber por onde começar. Como configuro? Com o que eu escrevo o código? Onde eu o coloco? Como faço para vê-lo e testá-lo? Pequenas questões como estas podem ser uma verdadeira barreira para dar o primeiro passo.

Então, vamos fazer algo útil agora. Vamos começar aqui.

Conjunto de ferramentas para desenvolvimento de componentes do Aura

A primeira coisa que faremos é equipá-lo. As ferramentas que você precisa para o desenvolvimento de componentes do Aura podem ser exatamente as mesmas que você já está usando. Mas há alguns aspectos únicos nas ferramentas de componentes do Aura, então vamos ter certeza disso.

Navegador: Google Chrome

Escada! Muitos desenvolvedores de aplicativos da web usam o Google Chrome por causa de suas excelentes ferramentas para desenvolvedores. Se você se encaixa nesta descrição, você já está pronto. Próximo item.

Caso contrário, planeje mudar para o Chrome para desenvolver componentes do Aura. Vamos dizer o motivo nos dois itens a seguir.

Depurador de navegador: Chrome DevTools

Escada! Se você ainda não se sentir confiante em usar o Chrome DevTools, recomendamos enfaticamente os incríveis documentos disponíveis. Comece com o Getting Started (Introdução), e depois passe para o treinamento, começando com o DevTools Overview (Visão geral de DevTools). Cada minuto que você investir em aprender a usar o DevTools, lhe poupará 10 minutos na hora de usá-lo. (A relação é superior a 50 para 1, mas vamos ser conservadores.)

Sim, o Firefox e o Safari também têm ferramentas de desenvolvedor muito boas. Mas você mudará de qualquer forma por causa do próximo item.

Extensão DevTools: Salesforce Lightning Inspector

Escada! Desenvolver para componentes do Aura sem o Salesforce Lightning Inspector é como acender um fogo esfregando dois gravetos. Você pode conseguir, mas é trabalhoso. E quem quer mais trabalho?

O que há de especial no Lightning Inspector? Com este plug-in para o DevTools, você pode navegar pela estrutura do componente, inspecionar seus atributos e ter o perfil de desempenho do componente. Você pode observar e inspecionar chamadas para ações no lado do servidor e suas respostas. E ele lhe ajuda a entender a sequência de acionamento e manipulação do evento. (Explicamos todos estes termos no próximo módulo desta trilha: Conceitos fundamentais dos componentes do Aura.)

Estas tarefas são fundamentais quando você está desenvolvendo algo mais complicado que “Hello Word!”. Sim, você pode fazer isto manualmente com qualquer boa ferramenta de desenvolvedor de JavaScript, mas não é simples. O Lightning Inspector facilita isso, o que faz a diferença entre uma experiência dolorosa ou prazerosa para o desenvolvedor.

Editor: Visual Studio (VS) Code com o Pacote de extensões do Salesforce

O Salesforce oferece dois editores com ferramentas dedicadas para componentes do Aura. Embora o Developer Console seja adequado para edições rápidas e projetos didáticos em pequena escala, incluindo este módulo, ele não é a melhor ferramenta para desenvolvimento de componentes e aplicativos reais.

Escada! A melhor ferramenta é o VS Code. Depois de instalar o VS Code, adicione a CLI do Salesforce e as Extensões do Salesforce para VS Code para adicionar navegação dedicada, destaque de sintaxe e outros recursos específicos de componentes do Aura ao VS Code. A combinação proporciona um ambiente de desenvolvimento de nível mundial para o trabalho com componentes do Aura.

Se você não tem esta ferramenta, ou tem uma versão mais antiga, pare agora para instalar a versão atual. Início Rápido: Visual Studio Code é o projeto que percorre o processo com você.

Ir além das noções básicas

Há dois motivos para recomendarmos que você evite o Developer Console para trabalhar com componentes do Aura.

Primeiro: você vai escrever mais código do que com o Visualforce. O “próximo nível” de abstração ainda não está disponível com os componentes do Aura, então você escreve código para fazer coisas que eram fáceis de fazer ou podiam ser feitas de forma automática com o Visualforce. Você vai querer um editor que facilite editar, mover as coisas, refatorar, entre outras. O VS Code tem recursos integrados incríveis para edição de código. O VS Code lida com o JavaScript melhor do que o Developer Console. Já contamos que você escreverá muito JavaScript?

E segundo: você terá muitos recursos de código diferentes abertos ao mesmo tempo, principalmente no começo. Você vai vasculhá-los para comparar, copiar e colar, etc. Os recursos de gerenciamento de guias e janelas do VS Code são fantásticos.

Mais uma observação. Você não tem que usar o VS Code. Há outras excelentes ferramentas de terceiros com suplementos que suportam os componentes do Aura, como o SublimeText. Elas também funcionam muito bem e, da mesma forma, são um grande avanço com relação ao Developer Console. Caso uma destas ferramentas seja sua preferida, use-a de todas as formas que puder! Veja os Recursos para obter alguns indicadores.

Recursos