37

Já vi esse termo Polyfill sendo utilizado várias vezes quando se trata de uma nova função que não está disponível em versões antigas de determinadas linguagens e afins.

Mas afinal, Polyfill é simplesmente isso ou é mais abrangente?

Qual é o significado da palavra Polyfill e a que se refere dentro do dia-a-dia da programação especificamente?

Nota: Aparentemente, esse termo está relacionado diretamente à linguagem Javascript. Mas já vi sendo utilizado em outras linguagens também.

5
  • 3
    Se alguém tiver curiosidade para saber sobre o uso do termo em aplicações gráficas (contração de polygon fill), que veio antes do uso em JS, segue uma busca de referência: duckduckgo.com/?q=polyfill+polygon+fill - Mais recentemente, o termo foi adotado em outro contexto, em referência ao polyfill que é tipo a nossa "massa corrida", para tampar buracos na parede: remysharp.com/2010/10/08/what-is-a-polyfill
    – Largato
    Commented 4/04/2017 às 2:09
  • 2
    O termo "polyfill" surgiu nas bibliotecas JavaScript, mas ele é baseado no termo shim que sempre foi amplamente usado em programação. A diferença é que o "polyfill" é orientado ao conceito de forward compatibility, enquanto o "shim" se baseia em backward compatibility. Portanto não se trata de "copiar" o termo, é esse o nome que se dá ao backporting de uma futura API. :) Commented 4/04/2017 às 2:43
  • 3
    @PauloFreitas Ou seja, copiar o termo, visto que de técnico não tem nada em chamar algo de "massa corrida" ;) (diferente de PolyFill em computação gráfica, que realmente tem um significado técnico)
    – Largato
    Commented 4/04/2017 às 2:45
  • 1
    @PauloFreitas a observação do shim é boa, se mandar uma resposta e aproveitar pra comparar as 2 coisas (shim vs polyfill) acho que fica legal e valoriza o post.
    – Largato
    Commented 4/04/2017 às 2:50
  • Apenas para relacionar os conceitos - Shim. Acredito que seja interessante manter relação entre elas. Commented 8/04/2017 às 17:21

3 Respostas 3

49

Explicando de forma prática, para que qualquer um entenda: Você quer usar um recurso muito bom do javascript, por exemplo fetch() ou Promise().

Mas alguns navegadores, como o Internet Explorer, não possuem suporte a estes recursos. De uma forma bem mal feita, você coloca aquele if maroto para saber se o navegador tem suporte e, caso não tenha, você usa alguma forma alternativa, ou até mesmo diz logo ao usuário que ele não pode usar tal recurso.

Usando um pollyfill, este vai detectar que o navegador não tem suporte e vai implementar na hora ali, usando gambiarras funções disponíveis para aquele navegador, e vai fazer com que seja possível usar o recurso com a mesma interface inclusive. No caso é como se o navegador tivesse suporte a tal recurso.

Futuramente, se o navegador passar a ter suporte ao recurso, o pollyfill pode ser desativado para ele, já que a implementação do código é a mesma, nada muda.

2
  • 1
    Muito boa explicação, ainda mais pelos dois exemplos citados, nem imaginava, eu queria pra usar o ajax do jquery com arrow functions, agora vou deixar o ajax e usar fetch! :D Commented 18/06/2019 às 18:26
  • 2
    +1 pela explicação extremamente didática e com o grau de sarcasmo na medida exata
    – Magno C
    Commented 2/06/2022 às 11:55
18

Como já foi dito, o Polyfill é um trecho de código utilizado para "tapar buraco" de navegadores antigos, visando adicionar funcionalidades mais atuais.

Um exemplo disso pode ser visto no site da MDN, para algumas funções como Object.assing e Object.create, que podem não ser suportadas em algumas versões de navegadores mais antigas, mas que podem ser criadas para desenvolver uma funcionalidade similar.

Segundo o Wikipédia, Polyfill, na maioria das vezes, refere-se a uma Biblioteca Javascript que implementa o padrão HTML5, quer seja um padrão estabelecido para todos os navegadores ou não.

Os Polyfills permitem que os desenvolvedores Web usem uma API independentemente de ser suportada por um navegador ou não, e geralmente com sobrecarga mínima. Geralmente, verifica-se primeiro se o navegador suporta tal API para utilizá-la; caso contrário, faz-se então uma implementação "na mão" para poder reproduzir uma funcionalidade similar.

Um Polyfill que já vi sendo muito utilizado é o de usar document.createElement no Internet Explorer, para que ele possa reconhecer corretamente as tags do HTML5.

Referências:

7

Sendo bem simplista, Polyfill seria um jargão técnico restrito ao universo web, javascript, webToolKit e browsers. E no que se refere no dia-a-dia de programação, isto é, quando colocamos a mão na massa mesmo (hands-on) ao implementarem as features de regressão para navegadores antigos, eles estão implementando um shim para o navegador. Após serem liberadas, entregues, pelo senso comum, deixam de ser shim e passam a compor uma lista de Polyfill do referido navegador.

Por qualquer motivo do universo (maldito motivo) temos que implementar o nosso sistema para navegadores antigos, então, devemos assegurar que as features estejam coesas com a lista de Polyfill liberada.

Em algum momento nós nos preocupamos com o degenerado conceito: Cross-browser, mas para não perder o foco da pergunta sugiro assistir: youtube porque tem relação e pode contribuir de forma positiva no entendimento do Polyfill.

Para concluir, podemos definir da seguinte forma:

Um shim que imita uma API futura fornecendo funcionalidade de retorno para navegadores mais antigos. [Paul Irish]

Nota: Remy Sharp, 2010, Referência indicada por @Bacco.

Referência:

[Paul Irish]. Disponível em site pessoal. Acesso: 4 Abr, 2017.
[youtube]. Disponível em youtube - A guerra dos navegadores [Dublado]. Acesso: 4 Abr, 2017.
[Remy Sharp, 2010]. Disponível em remy sharp's blog. Acesso: 4 Abr, 2017.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .