Tenha suporte de novos recursos de CSS e JavaScript com Polyfill

Nem sempre a evolução das linguagens é seguida à risca pelos os navegadores. E quando isso ocorre, temos que tomar a decisão: se usaremos um novo recurso (sem suporte a determinados navegadores) ou se não usamos esse recurso nativo. O Polyfill é um trecho de código em JavaScript que irá dar suporte a determinado recurso em navegadores sem suporte a esses recursos.

Com isso, você pode utilizar as novas API’s, mesmo em navegadores mais antigos. Isso irá se aplicar tanto para recurso de JavaScript, quanto de CSS.

Infelizmente existirão projetos que você precisará dar suporte e talvez essa seja a maneira mais fácil de manter compatibilidade, sem a necessidade de fazer if’s para verificar se dá suporte ou não.

Um exemplo é API Fetch que você trabalhar com Ajax. Antes era feita pelo XMLHttpRequest, mas agora você tem algo mais enxuto para fazer essa trabalho.

Exemplo Prático com Polyfill

Vamos supor que você deseja fazer uma requisição assíncrona (Ajax) para um arquivo qualquer. Então, vamos utilizar o método fetch para executar essa ação:

<script type="text/javascript">
	var url = 'resposta.html';
	var config = {method : 'get'};
	fetch(url, config).then(function(resposta) { 
			        return resposta.text(); 
			}).then(function(conteudo) { 
				console.log(conteudo);
			});	 
					
</script>

Nesse exemplo, ele faz uma requisição a um arquivo chamado resposta.html e mostra no console do navegador o valor desse arquivo.

Apesar de não ser o foco do artigo, é interessante entender um pouco sobre esse processo criado agora com fetch.

O método fetch retorna uma Promisse, que é um um objeto que representa um valor que pode está disponível em algum momento ou não. É usado em um processo assíncrono.

Quando retornado corretamente (resolvida), é usado o método da Promisse chamado then, para acessar o conteúdo associado a essa Promisse, que neste caso é objeto Response, que por sua vez representa uma resposta de uma requisição, que contém um conjunto de métodos. E um desses métodos é o text(), que retorna também uma Promisse, usando novamente o then para acessar o conteúdo dela. Assim, é mostrado no console do navegador com console.log.

No código, é definido a url da requisição, o método utilizado (que é get) e de acordo com a resposta, ele mostra o valor no console.

O método fetch está disponível para ser utilizado a partir do firefox 39, e no Google Chrome 42, mas ainda não está disponível para o IE (conte uma novidade :D).

Mas existe um Polyfill para resolver essa questão que pode ser acessado aqui: https://github.github.io/fetch

Basta incluir e utilizar o método fetch para trabalhar com Ajax de forma “nativa”.

Considerações

Os Polyfill’s são alternativas, mas claro que o ideal seria que os navegadores dessem suportes a essas opções, permitindo que fôssemos menos dependentes de Frameworks ou bibliotecas. Enquanto isso não ocorre, podemos utilizar esses recursos para nos permitir trabalhar com as novas API’s.

Não há problema em utilizar frameworks, já que eles existem pra otimizar nosso trabalho, mas ter a possibilidade de ter recursos nativos é ainda melhor.

Quem sabe um dia essas novidades e navegadores andarão juntos e poderemos utilizar esse recursos sem precisar dessas alternativas?

Abraços e até a próxima!