A linguagem JavaScript evolui constantemente. Novas propostas para a linguagem aparecem regularmente, são analisadas e, se consideradas válidas, são anexadas à lista em https://tc39.github.io/ecma262/ e depois progridem para a especificação.
As equipes por trás dos mecanismos JavaScript têm suas próprias ideias sobre o que implementar primeiro. Eles podem decidir implementar propostas que estão em fase de rascunho e adiar coisas que já estão dentro das especificações, porque são menos interessantes ou simplesmente mais difíceis de fazer.
Portanto, é bastante comum que um mecanismo implemente apenas parte do padrão.
Uma boa página para ver o estado atual do suporte aos recursos de linguagem é https://compat-table.github.io/compat-table/es6/ (é grande, temos muito que estudar ainda).
Como programadores, gostaríamos de usar os recursos mais recentes. Quanto mais coisas boas – melhor!
Por outro lado, como fazer nosso código moderno funcionar em mecanismos mais antigos que ainda não entendem os recursos recentes?
Existem duas ferramentas para isso:
Transpiladores.
Polifills.
Aqui, neste capítulo, nosso objetivo é entender a essência de como eles funcionam e seu lugar no desenvolvimento web.
Um transpiler é um software especial que traduz o código-fonte em outro código-fonte. Ele pode analisar (“ler e compreender”) código moderno e reescrevê-lo usando construções de sintaxe mais antigas, para que também funcione em mecanismos desatualizados.
Por exemplo, JavaScript antes do ano 2020 não tinha o “operador de coalescência nulo” ?? . Portanto, se um visitante usar um navegador desatualizado, ele poderá não entender o código como height = height ?? 100 .
Um transpilador analisaria nosso código e reescreveria height ?? 100 em (height !== undefined && height !== null) ? height : 100 .
// antes de executar o transpilador altura = altura ?? 100; //depois de executar o transpilador altura = (altura! == indefinido && altura! == nulo)? altura: 100;
Agora, o código reescrito é adequado para mecanismos JavaScript mais antigos.
Normalmente, um desenvolvedor executa o transpilador em seu próprio computador e, em seguida, implanta o código transpilado no servidor.
Falando em nomes, Babel é um dos transpiladores mais proeminentes que existe.
Sistemas modernos de construção de projetos, como o webpack, fornecem um meio de executar um transpiler automaticamente em cada alteração de código, por isso é muito fácil integrá-lo ao processo de desenvolvimento.
Novos recursos de linguagem podem incluir não apenas construções e operadores de sintaxe, mas também funções integradas.
Por exemplo, Math.trunc(n) é uma função que “corta” a parte decimal de um número, por exemplo, Math.trunc(1.23) retorna 1 .
Em alguns mecanismos JavaScript (muito desatualizados), não há Math.trunc , portanto, esse código falhará.
Como estamos falando de novas funções, não de mudanças de sintaxe, não há necessidade de transpilar nada aqui. Precisamos apenas declarar a função que falta.
Um script que atualiza/adiciona novas funções é chamado de “polyfill”. Ele “preenche” a lacuna e adiciona implementações ausentes.
Para este caso específico, o polyfill para Math.trunc é um script que o implementa, assim:
if (!Math.trunc) { // se tal função não existir
//implementa
Math.trunc = função(número) {
// Math.ceil e Math.floor existem até mesmo em mecanismos JavaScript antigos
// eles serão abordados posteriormente no tutorial
número de retorno <0? Math.ceil(número): Math.floor(número);
};
}JavaScript é uma linguagem altamente dinâmica. Os scripts podem adicionar/modificar qualquer função, mesmo as integradas.
Duas bibliotecas polyfill interessantes são:
core js que suporta muito, permite incluir apenas os recursos necessários.
Neste capítulo, gostaríamos de motivá-lo a estudar recursos de linguagem modernos e até mesmo “de ponta”, mesmo que ainda não sejam bem suportados por mecanismos JavaScript.
Só não se esqueça de usar um transpiler (se estiver usando sintaxe ou operadores modernos) e polyfills (para adicionar funções que possam estar faltando). Eles garantirão que o código funcione.
Por exemplo, mais tarde, quando estiver familiarizado com JavaScript, você poderá configurar um sistema de construção de código baseado em webpack com o plugin babel-loader.
Bons recursos que mostram o estado atual do suporte para vários recursos:
https://compat-table.github.io/compat-table/es6/ – para JavaScript puro.
https://caniuse.com/ – para funções relacionadas ao navegador.
PS O Google Chrome é geralmente o mais atualizado em termos de recursos de linguagem, experimente-o se um tutorial de demonstração falhar. A maioria dos tutoriais de demonstração funciona com qualquer navegador moderno.