Revisão de habilidades fundamentais

Objetivos de aprendizagem

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

  • Avaliar se você realmente está pronto para os componentes do Aura.
  • Descrever o que são os componentes do Aura.
  • Identificar onde e por que usar os componentes do Aura.

Componentes do Aura para o desenvolvedor do Visualforce

Este módulo e os outros nesta trilha são para pessoas experientes com o Visualforce e que desejam usar seus conhecimentos da Lightning Platform para acelerar o aprendizado sobre os componentes do Aura. Talvez você tenha dado uma olhada no módulo Noções básicas dos componentes do Aura (unidade nove!) e pensado: “Tenho um trabalho a fazer e não é Trailhead. Não existe algo mais rápido?”

Este módulo, e esta trilha, foram feitos pra você.

Antes de começarmos, um alerta. O modelo de programação dos componentes do Aura é maior, mais sofisticado e mais complexo que o Visualforce. Isto significa que há mais a aprender e que seu conhecimento em Visualforce nem sempre lhe dará uma vantagem.

Nota

Nota

A partir da versão Spring ‘19 (API versão 45.0), é possível criar componentes do Lightning usando dois modelos de programação: o modelo de componentes Web do Lightning e o modelo original de componentes do Aura Os componentes Web do Lightning e os componentes do Aura podem coexistir e operar em conjunto em uma página. Este conteúdo aborda os componentes do Aura. Para mais informações sobre os componentes Web do Lightning, confira Apresentação dos componentes Web do Lightning.

Vamos fazer isto de forma visual. Você já jogou Escadas e Escorregadores (originalmente chamado Cobras e Escadas) quando era criança? A meta é chegar ao topo de um tabuleiro em zig-zag. Ao se mover, você pode chegar em uma escada, que lhe fará avançar até o topo, ou em escorregadores, que te levarão de volta ao início. Para chegar ao topo rapidamente, você deve chegar às escadas e evitar os escorregadores.

Então, vamos imaginar que o aprendizado sobre os componentes do Aura seja realizado em um tabuleiro similar. As escadas são seu conhecimento sobre a Lightning Platform e o Visualforce, e os escorregadores são coisas que você ainda não sabe, ou áreas nas quais suas habilidades no Visualforce não são transferíveis. Como você já conhece a Lightning Platform, você provavelmente esperaria que o tabuleiro fosse todo com escadas para ajudá-lo a subir.

Com o que você acha que o aprendizado sobre os componentes do Lightning se parece

Infelizmente, muitas das coisas que você sabe sobre o Visualforce não são escadas. Os componentes do Aura são bem diferentes. Se você fizer suposições com base no Visualforce, as coisas que você já conhece podem se tornar escorregadores. Isto torna o tabuleiro um pouco mais desafiador para encontrar seu caminho até o topo.

Com que realmente se parece o aprendizado sobre os componentes do Lightning

A meta deste e de outros módulos desta trilha é ajudar você a evitar alguns destes escorregadores. Para ser específico: 22 deles, marcados com este ícone: Deslizador!.

Mas tenha em mente que o módulo Noções básicas dos componentes do Aura lhe ajudará a evitar muitos mais. Se você se vir preso em coisas aparentemente pequenas, descendo pelos escorregadores, talvez seu tempo seja melhor aproveitado fazendo o módulo mais longo. É só uma ideia. (Temos um ícone para mais 26 dicas como esta: Escada!.)

Princípios básicos: O que são componentes do Aura?

Quando nos perguntam o que são componentes do Aura, normalmente dizemos algo assim:

O modelo de programação dos componentes do Aura é uma estrutura de interface de usuário para o desenvolvimento de aplicativos da web destinados a dispositivos móveis e desktops. É uma estrutura moderna para construir aplicativos de página única com interfaces de usuário dinâmicas e responsivas para aplicativos da Lightning Platform. Ela usa JavaScript no lado do cliente e Apex no lado do servidor.

Vamos parar um momento e apreciar a maravilha verborrágica desta descrição…

OK, chega. O que isto significa em palavras que realmente façam sentido para os desenvolvedores Visualforce? O segredo é que você escreve código JavaScript do lado do cliente e o processamento da interface de usuário acontece, até onde for possível, no lado do cliente, até que você precise obter dados do Salesforce ou salvá-los nele.

Vamos aprofundar esse conceito no módulo Conceitos fundamentais dos componentes do Aura, o próximo módulo desta trilha. E se você estiver interessado em algumas das motivações ocultas por quê projetamos os componentes do Aura desta forma, consulte “Considerações de desenvolvimento da interface de usuário”, no módulo Desenvolvimento do Lightning Experience (links na seção Recursos)

Princípios básicos: JavaScript

Com o Visualforce, o JavaScript era opcional. Isto não acontece com os componentes do Aura. O modelo de programação dos componentes do Aura foi projetado especificamente para você fazer mais trabalho no lado do cliente, em JavaScript. Quanto a isso, ele é deliberada e enfaticamente diferente do Visualforce. (Estamos guardando os detalhes para o próximo módulo desta trilha.)

É virtualmente impossível escrever um componente do Aura que não tenha algum JavaScript, e a maioria dos componentes não triviais do mundo real tem dezenas ou mesmo centenas de linhas de código JavaScript. Você deve ser proficiente em JavaScript para escrever pelo menos um aplicativo de componentes do Aura despretensioso.

À primeira vista, o JavaScript parece um conjunto de linguagens com as quais você provavelmente esta familiarizado, incluindo o Apex. Uma escada? Não, é um Deslizador!. Há diferenças suficientes, incluindo objetos e heranças, regras de escopo, peculiaridades sobre o que é verdadeiro ou falso, etc., que você realmente precisa estudar.

E o que significa ser “proficiente”? Acreditamos que você deve estar familiarizado com todos os conceitos abordados no primeiro capítulo de Speaking JavaScript, que você pode ler online gratuitamente. Em especial, acreditamos que você deve compreender totalmente o seguinte:

  • Declaração de variáveis e regras de escopo
  • Regras de comparação para igualdade e avaliar se algo é verdadeiro ou falso
  • O que o JavaScript quer dizer com “objeto” e “herança” (não é o mesmo que para o Apex)
  • A diferença entre undefined e null, e como e quando você precisa verificá-los
  • Como tratar funções como variáveis, incluindo passá-las como parâmetros para outras funções (retornos).
  • E, para realmente dominar a estrutura, você precisará entender os fechamentos, pelo menos o suficiente para reconhecer e usar o padrão da expressão de função invocada imediatamente (IIFE)

Vamos direto ao assunto. Se o trabalho com linguagens e peculiaridades JavaScript não se tornar fluído — se você ainda não escreveu algumas centenas de linhas de JavaScript — recomendamos humildemente que estude mais.

Escada! Recomendamos especialmente o excelente curso em vídeo do especialista em Lightning Platform, Dan Appleman, Getting started with JavaScript in Salesforce, da Pluralsight e, depois disso, os livros abaixo.

  • Speaking JavaScript, de Axel Rauschmayer
  • Object-Oriented JavaScript, de Stoyan Stefanov
  • The Principles of Object-Oriented JavaScript, de Nicholas C. Zakas
  • Eloquent JavaScript, de Marijn Haverbeke (disponível gratuitamente)

Princípios básicos: HTML moderno e CSS

A estrutura inclui diversos componentes integrados, que chamamos de componentes básicos do Lightning. Estes componentes são modernos, leves e combinam com o Lightning Experience em termos de projeto.

Mas embora as coleções estejam crescendo rapidamente, ainda não são algo tão completo quanto o Visualforce e você escreverá muitos componentes do zero. Confira se suas habilidades em HTML e CSS estão atualizadas. Você deve se sentir confiante com HTML5, CSS3 e em criar páginas responsivas, otimizadas para uso em dispositivos móveis, acessíveis e compatíveis entre os navegadores. Se você sabe o que é flexbox, consultas de mídia, unidades ARIA e REM, e como usá-las, você está no jogo.

Princípios básicos: Salesforce Lightning Design System

Escada! Uma dica de CSS. Tente usá-lo o mínimo possível para escrever seus componentes. Em vez disso, use o Salesforce Lightning Design System (SLDS).

Usar o SLDS corretamente é, em um nível elevado, simples.

  • Sempre que possível em sua marcação de componentes do Lightning, use os componentes integrados do lightning: namespace, os componentes básicos do Lightning citados anteriormente. Estes componentes são criados com o SLDS e o usam automaticamente.
  • Ao escrever marcação HTML, estilize-a adicionando classes de utilitário SLDS para os elementos adequados.
  • Melhor ainda: copie a marcação diretamente do site do SLDS e depois adicione funcionalidade JavaScript.
  • Apenas como um último recurso, ou em casos especiais limitados, você deve escrever seus próprios estilos CSS para um componente.

Algo que você deve procurar. Se você visitar o site do SLDS, um recurso incrível para aprender a usar o sistema de projeto em detalhe, você perceberá que ele usa muito o termo “componente”. Lá há uma biblioteca completa de “componentes”!

Deslizador! Estes não são componentes do Lightning!

O site do SLDS descreve como usar o SLDS em qualquer contexto de aplicativos da web, seja com o Safesforce, Ruby on Rails, PHP ou qualquer outro. Os “componentes” que o site descreve são formas idealizadas de elemento da interface de usuário de aplicativos da web. Eles são definidos somente em HTML e CSS estáticos, não há aspecto executável em nenhum componente SLDS.

E o mais importante: há muitos mais “componentes” SLDS do que componentes do Lightning integrados. O SLDS descreve o mundo do futuro, uma meta que pretendemos alcançar. Por enquanto, só porque o site do SLDS descreve um “componente” Linha de tempo de atividade, não significa que exista um componente do Lightning que realize essa função. E só porque existe um “componente” SLDS para um emblema, um botão, ou um modal, isto não significa que um componente do Lightning que fornece um emblema, um botão ou modal é igual. (É provável que seja. Mas pode não ser. E ele pode mudar no futuro.)

Resumindo: Os componentes do SLDS não são componentes do Lightning. Se você não encontrar o que precisa em um componente do Lightning integrado, use o site do SLDS como ponto de partida para criar um você mesmo.

Recursos