Trabalhar bem com JavaScript

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Descrever três pontos a serem observados ao escrever JavaScript para seus componentes do Aura.
  • Citar três navegadores que funcionam bem com os componentes do Aura um que não funciona bem. Explicar porque este navegador apresenta problemas.
  • Implementar um padrão permitido para incluir código da biblioteca JavaScript em seus componentes.

Dicas e armadilhas

Se os dois módulos anteriores desta trilha foram muito abstratos, ou lentos demais, você está no lugar certo. Na verdade, previmos que muitos desenvolvedores experientes em Visualforce pulariam direto para este módulo.

E tudo bem! Os outros módulos são importantes se você deseja se tornar um especialista em componentes do Aura. Mas este módulo foi feito para ser independente e para que você pudesse dar apenas uma passada de olhos. Esperamos que ele seja útil para você imediatamente e que você volte a ele regularmente.

Vamos aos detalhes.

JavaScript diferencia maiúsculas de minúsculas

Deslizador! Nada vai causar mais sofrimento que essa diferença principal entre o Visualforce e o Apex. Se o nome da API de seu objeto for Expense__c e o de um campo for Amount__c, e você tentar referenciá-lo como expense__c.amount__c (que funciona no Visualforce), isto não funcionará em JavaScript.

Pior que isso: às vezes você não recebe uma mensagem de erro que seja útil. Você pode gastar um bom tempo sem ver o problema. Acredite em alguém que já passou por isso.

O Apex e o Visualforce deixam que você fique à vontade com os nomes de oBjEtOs, CAMPOS, cHAMADAS de mÉTODOS etc. Você não consegue escapar com isso em JavaScript. Caixa alta ou baixa tem importância em todos os lugares. Queríamos que isso não fosse verdade, mas esta linguagem de programação não é nossa.

Escada! Recomendamos que você use maiúsculas e minúsculas com precisão e em qualquer lugar, mesmo em códigos nos quais você tenha essa liberdade, como em Apex ou SOQL. Se você adotar uma disciplina rigorosa, nunca terá erros de caixa para assombrá-lo.

Isto também significa que você precisará aprender os nomes corretos dos campos do sistema, como Id e Nome. Escada! Lembre-se que você sempre pode procurar os nomes corretos dos campos de um objeto em Configuração.

O Lightning Locker e as leis da física

Permitir a execução de JavaScript com segurança em um ambiente complexo e compartilhado como o Salesforce (no qual nosso código, seu código e o código de pacotes gerenciados todos são executados no mesmo contexto) é um grande desafio.

Portanto, desenvolvemos um mecanismo de isolamento inovador chamado Lightning Locker. (É uma ótima solução para um problema difícil, tanto que os novos padrões para navegadores estão se aprofundando nos aspectos da solução.) Com a versão Summer ‘17, você controla a ativação do Lightning Locker definindo o componente para a API de versão 40.0 ou superior.

Incentivamos que você faça todo seu desenvolvimento de componentes do Aura com o Lightning Locker ativado (isto é, com seus componentes definidos para a API 40.0 ou superior). O Lightning Locker muda as “leis da física” para seu código JavaScript. Descobrimos que é muito mais fácil escrever um código novo com a nova física do que adaptar o código escrito em um universo paralelo.

O que o Lightning Locker faz, exatamente? Aqui está uma lista de alto nível de seus efeitos.
  • O Lightning Locker aplica o JavaScript ES5 Strict Mode.
  • O Lightning Locker restringe o acesso a referências globais.
  • O Lightning Locker garante o isolamento do componente DOM.
  • O Lightning Locker bloqueia o acesso a métodos da estrutura de componente do Lightning privados ou incompatíveis.
  • O Lightning Locker se combina com uma Política de segurança do conteúdo (CSP) mais rígida para evitar ataques de script entre sites. Isso é controlado por uma configuração da organização.

Abordamos alguns destaques nesta unidade. Para mais detalhes, consulte a seção Recursos.

JavaScript ES5 Strict Mode

Quando o Lightning Locker é ativado, ele ativa o JavaScript ES5 Strict Mode para todos os seus códigos JavaScript. O efeito é o mesmo que o de iniciar todos os seus códigos JavaScript com “use strict”. Se você não está familiarizado com o modo estrito, agora é uma boa hora para ler sobre isto.

Deslizador! É provável que a primeira mudança que precisará ser feita seja a declaração de suas variáveis locais usando var. Veja um exemplo em um método de ação.

myAction : function(component, event, helper) {
    ...
    counter = 1;       // NO!!!!!
    var counter = 1;   // YES!
    counter++;
    ...
}

Escada! “Estrito” pode soar assustador, mas na verdade isto é incrível. Pense no modo estrito como aquele professor que te assustava quando você era jovem, mas que lhe ajudou mais do que você percebia naquele momento. O modo estrito aplica muitas das melhores práticas do JavaScript. Ele é uma escada para todos os seus códigos JavaScript.

Dica

Dica

Escada! Se estiver convencido dos benefícios da disciplina, você pode usar uma ferramenta de validação, como o ESlint, para lhe fornecer ainda mais orientação que o modo estrito. O ESlint pode lhe ajudar não apenas com a sintaxe do JavaScript, ele pode lhe indicar uma ampla variedade de melhores práticas. E pode ser usado até para garantir especificações de codificação específicas para sua equipe. Uma boa ferramenta como esta certamente é uma escada.

Uso de bibliotecas de JavaScript de terceiros

O Lightning Locker aplica restrições a referências globais. Você perceberá a restrição com o objeto janela, para seu próprio código e qualquer código de biblioteca de terceiro que você use. O Lightning Locker fornece versões seguras de objetos não intrínsecos, como janelas. Como resultado, você precisa fazer alguns pequenos ajustes na forma como você adiciona bibliotecas de JavaScript a seus aplicativos.

Escada! Para criar uma biblioteca reutilizável com a qual seja fácil de trabalhar em seus componentes. Atribua explicitamente a biblioteca ao objeto janela. Esta atribuição torna a biblioteca disponível a todos os componentes que usam a biblioteca. Podemos ilustrar a técnica geral em algumas poucas linhas de código. Para criar uma biblioteca com funções direcionadas a serem usadas em seu código (como Util.logHere(‘Começando download’), por exemplo), em um recurso estático, declare a biblioteca usando uma execução de função invocada imediatamente (IIFE).
window.Util = (function() {
    return {
        logHere: function(msg){
            console.log('Got here.');
            if(msg) console.log(msg);
        }
    }
})();

Esta construção, que talvez não seja familiar, conecta sua “biblioteca” ao objeto janela, tornando-a disponível a todos os nossos componentes. Depois que você tiver o recurso estático, use <ltng:require> para incluir a biblioteca em seu componente.

Para mais detalhes, incluindo como adaptar esta técnica a bibliotecas complexas ou de terceiros, consulte Como modularizar código em componentes do Lightning, no blog de desenvolvedores do Salesforce.

Diferenças da Política de segurança do conteúdo (CSP) para o Visualforce

O contêiner do Visualforce é isolado de todos os outros contêineres de aplicativos do Salesforce, assim, ele pode ter um CSP bastante liberal. Seu código Visualforce pode carregar JavaScript, gráficos e outros recursos de qualquer URL. E você pode tratar qualquer string como JavaScript, usando eval().

Os componentes do Aura não são executados em um contêiner isolado, por isso, o modelo de programação tem um CSP mais rígido. Você pode carregar gráficos, estilos e outros recursos não executáveis a partir de sites não Salesforce, mas somente após ter criado um Site confiável CSP para cada domínio. Deslizador! Você só pode carregar JavaScript a partir de um recurso estático no Salesforce.

Controlado por um par de atualizações críticas, o CSP ativo no Lightning Locker é cada vez mais rígido. Este CSP não permite as palavras-chaves unsafe-inline e unsafe-eval para scripts inline (script-src). Esta restrição é adicional às restrições gerais do CSP dos componentes do Aura. Não é permitido usar o JavaScript inline, ou eval() uma string como JavaScript. Consequentemente, é necessário atualizar seu JavaScript de terceiros para versões modernas que não dependam destas técnicas antigas e bem menos seguras.

Nota

Nota

Nem todos os navegadores são compatíveis com CSP. Em particular, o IE11 é… problemático. Em navegadores que não são compatíveis com CSP, como o IE11, o Lightning Locker é desativado. Recomendamos enfaticamente que, para uma segurança aprimorada, você use um navegador moderno, como as versões mais recentes do Chrome, Safari, Firefox ou Microsoft Edge.

Há casos de uso válidos quando as restrições citadas são uma barreira. Escada! Em tais situações, recomendamos que você coloque os códigos que precisam acessar a recursos externos em um “worker iframe”, usando o Visualforce. A técnica é mais ou menos esta.
<aura:component ...>
    <aura:attribute name="message" type="String"/>
    <aura:attribute name="vfHost" type="String"/>
    <!-- Input field for message "data" -->
    <lightning:input type="text" label="Message:"
        value="{!v.message}"/>
    <lightning:button label="Send to Visualforce"
        onclick="{!c.sendToVF}"/>
    <!-- The Visualforce page to send data to -->
    <iframe aura:id="vfFrame"
     src="{!'https://' + v.vfHost + '/apex/myvfpage'}"/>
</aura:component>

A página do Visualforce faz o trabalho que não é permitido nos componentes do Aura. Você pode passar mensagens (solicitações e respostas) entre o iframe do Visualforce e seu componente do Aura usando a API window.postMessage(), em código JavaScript que você adiciona a sua página Visualforce e ao controlador de seu componente.

Para saber mais, incluindo ver uma amostra de código bastante completa, consulte Como comunicar entre componentes do Lightning e as páginas do Visualforce no blog de desenvolvedores do Salesforce.