ES6 e o suporte dos navegadores

A Web teve um início, mas não terá um fim.

ES6 não é suportado por navegadores mais antigos, que foram desenvolvidos antes do seu lançamento. Esses navegadores mais antigos foram desenvolvidos para se adaptar à versão do JavaScript naquela época (que era a ES5.1). Se você tentar rodar seu código ES6 em um navegador antigo, ele não funcionará.

Uma função arrow é executada e causa erro de sintaxe no Safari 9. Fechar
Uma função arrow é executada e causa erro de sintaxe no Safari 9.

Faz sentido que um código que não funcione em navegadores antigos, desenvolvidos em uma época anterior ao ES6, mas existem navegadores desenvolvidos após essa melhoria do JavaScript que também não suportam essa nova sintaxe e funcionalidade ainda.

Continuar lendo ES6 e o suporte dos navegadores

Javascript Transpiling

Você provavelmente já ouviu o termo “compilador”. Um compilador pega um programa escrito numa linguagem de código-fonte, por exemplo C++ e converte para outra linguagem, como código de máquina. Passar um código pelo compilador muda o nível de abstração dele. Ele aproxima um código lido por humanos a um lido por máquinas. Isto é compilar: pegar uma linguagem fonte e convertê-la a uma de nível mais baixo.

Transpiling é um subconjunto da compilação. O código fonte é convertido em código-alvo. É como o compilador, mas o código-fonte e código-alvo são do mesmo nível de abastração. Se o código-fonte for lido por humanos, a linguagem de saída também será lida por humanos.

Mas por que iríamos querer isso?

Navegadores antigos não têm suporte total ao ES6, mas suportam ES5. Assim podemos escrever o Javascript usando a sintaxe e as funcionalidades do ES6 e depois usar um Transpiling para convertê-lo de ES6 para ES5.

Programamos o que há de melhor e mais novo e convertemos para rodar em toda parte.

O transpiler JavaScript mais popular é chamado Babel.

Continuar lendo Javascript Transpiling

O que é um Polyfill?

Um polyfill é um arquivo de Javascript que preenche um buraco replicando atributos nativos para navegadores que não os possuem.

Criado por Remy Sharp (https://remysharp.com/2010/10/08/what-is-a-polyfill), um polyfill, ou polyfiller, é um pedaço de código (ou plugin) que fornece a tecnologia que o desenvolvedor espera que o navegador implemente.

Um exemplo de polyfill

O código abaixo é um polyfill para o novo método de string do ES6, startsWith():

if (!String.prototype.startsWith) {
 String.prototype.startsWith = function (searchString, position) {
   position = position || 0;
   return this.substr(position, searchString.length) === searchString;
 };
}

Continuar lendo O que é um Polyfill?

Aplicações somente com JavaScript – MEAN Stack

Recentemente decidi conhecer mais do mundo JavaScript (EcmaScript), pois está se tornando a hype do momento e o que eu conhecia da linguagem era muito pouco (chato e nunca funcionava como eu queria) comparado com a quantidade de informação que obtive nessas semanas de estudo.

Percebi que existem diversos frameworks e bibliotecas da comunidade apoiadas por grandes empresas como por exemplo Facebook (ReactJs) e Google (AngularJs) entre outros.

Continuar lendo Aplicações somente com JavaScript – MEAN Stack