JS - Desconstruindo o Destructuring (Arrays)

 Continuando a nossa série sobre novos recursos implementados na linguagem Javascript nos últimos anos, teremos a segunda parte sobre Destructuring, dessa vez, falaremos sobre Arrays, que traz em si muitas coisas similares mas também recursos únicos em comparação aos Objetos. Caso você não tenha visto a primeira parte, clique aqui para acessá-la.

Bem, em alguns pontos, o Destructuring com Arrays funciona de forma muito similar a com Objetos, mas veremos abaixo o que muda de um para o outro. Por exemplo, para quem não sabe, Arrays, diferente de Objetos, possuem um ordenamento, então ele começa com um índice que vai de 0 a N, sendo 0 o seu primeiro item. Então, nesse caso, o Destructuring irá respeitar essas posições.

Exemplo:
const personagens = ["Mario", "Sonic", "MegaMan"];
const [ pNintendo, pSega ] = personagens;

console.log(pNintendo); // "Mario"
console.log(pSega); // "Sonic"

Como vimos, a escolha não é aleatória, ela respeita as primeiras posições do Array e, claro, sem modificar o Array em si.
Caso necessário, há a possibilidade de omitir itens caso tenha algum deles que não nos seja interessante.

Então é possível fazer dessa maneira:
const personagens = ["Mario", "Sonic", "MegaMan"];
const [ pNintendo, , pCapcom ] = personagens;

console.log(pNintendo); // "Mario"
console.log(pCapcom); // "MegaMan"

Ou seja, utilizando esse "espaço" em branco, podemos ignorar um determinado elemento do Array.

Também há a alternativa de modificar o valor de alguma variável que já tenha sido previamente atribuída utilizando o Destructuring, além de podermos, assim como em Objetos, passar valores padrões.

Exemplo:
// Nosso Array de personagens
const personagens = ["Mario", "Sonic", "MegaMan"];
// Variáveis já atribuídas previamente
let pNintendo = "Luigi", pSega = "Alex Kid";
// Reatribuindo e passando um valor Default para uma variável não existente
[ pNintendo, pSega, pKonami = "Snake" ] = personagens;

console.log(pNintendo); // "Mario"
console.log(pKonami); // "Snake"

Outra coisa muito legal é que temos a escolha de utilizar o Destructuring com Arrays juntamente com outro recurso muito útil que veio inserido no Ecmascript 2015: os parâmetros Rest, que merecem um artigo só para eles depois. Mas, em resumo, é uma forma de incluir todos os itens de um Array ou uma determinada parte dele, em outro Array ou Objeto. Também tem outras funcionalidades, em funções, por exemplo, mas fica para outro post.

Então, é possível utilizar os parâmetros Rest, simbolizados pelos símbolos de reticências [...] Destructuring para copiar parte do Array para outro Array.

Exemplo:
const personagens = ["Mario", "Sonic", "MegaMan"];

// Utilizamos o parâmetro Rest para copiar o resto dos personagens para um outro array chamado restPersonagens
let [ pNintendo, ...restPersonagens ] = personagens;

console.log(pNintendo) // "Mario";
console.log(restPersonagens[0]) ]] // "Sonic";
console.log(restPersonagens[1]) ]] // "MegaMan";

// Clonando todo o Array
const [ ...personagensClones ] = personagens;
console.log(personagensClones) // ["Mario", "Sonic", "MegaMan"];

Bom, por hoje é só. Na próxima e última parte, veremos como misturar Arrays e Objetos com Destructuring.

Valeu!

O que é RxJS?

O que é RxJS?

Nesse artigo eu procuro esclarecer um pouco sobre essa biblioteca voltada para a programação funcional e que, hoje em dia, tem crescido exponencialmente em termos de adoção.

Então, de que se trata o RxJS?

Bem, como disse antes, o RxJS é uma biblioteca para uso em projetos que utilizam Javascript (incluindo JSX e TypeScript), que faz parte do projeto de Programação Reativa, daí que vem o Rx, de Reactive Extension. Além dela, existem também outros projetos voltados para a linguagem Java, Python, C++, etc.

E para quê serve? Qual sua finalidade?

Nós desenvolvedores, cedo ou tarde, trabalhamos em algum projeto de complexidade sem tamanho e que lida com inúmeras fontes de dados assíncronas, chamadas de Stream. Essas Streams precisam ser tratadas para que sejam mostradas para o usuário, na tela de um Smartphone, por exemplo, e isso demanda muito trabalho pois precisamos verificar informação por informação e mostrar somente o que importa naquele momento.
O RxJS trouxe o conceito de Observable justamente para lidar com Streams e com alto volume de informação, de forma a facilitar esse tratamento, debugs, testes, etc.

Observable Pattern

Para isso, fazemos uso do padrão Observable, ou Observable Pattern, que é formado por:

  • Um Observable, que se trata de uma coleção de futuros eventos que podem ser invocados numa determinada situação ou momento;
  • Um Observer que sabe ouvir e tratar os valores recebidos pelo Observable;
  • Uma Subscription, ela é basicamente a execução de um Observable e também serve para cancelar essa mesma execução;
  • Operators, funções puras escritas sob o conceito de linguagem funcional (tratarei dessas funções num futuro próximo) que servem para lidar com coleções utilizando operadores como map, filter, reduce, etc;
  • Temos ainda o Subject, equivalente a um EventEmitter e que é a única forma de fazer um multicasting para vários Observers.
  • E, por último, Schedulers. Esses servem para lidar com concorrência entre os processos, nos dando a opção de escolher quando as informações serão processadas. Exemplos mais comuns são SetTimeout e RequestAnimationFrame.

Então, em resumo, qualquer tipo de fonte de informação pode ser tratada utilizando-se dessa biblioteca.
Exemplos mais comuns, e os quais eu já utilizei em meus projetos, incluem tratamento de informações vindas de bancos de dados em tempo real. Quem utiliza o AngularFirebase2, a implementação do Firebase utilizada no Angular e Ionic, sabe muito bem da sua utilizada na hora de receber e tratar informações das Collections e com os Subscribers você monitora as mudanças no banco em tempo real.
Mas há também usos em projetos de jogos e animações, por exemplo, já que é necessário 'observar' os comandos de um Joystick, teclado ou mouse. Então pode-se criar um Observable para isso.

Enfim, esse post foi apenas para fazer um resumo de pra quê serve essa biblioteca, mas, em breve, trarei posts práticos de seu uso e talvez tudo fique mais claro.

Valeu!

Nova versão do Babel traz suporte a Typescript


Eis uma grande novidade do time Babel para a comunidade Javascript que realmente vai melhorar e muito a vida de quem gosta, assim como eu, de escrever JS tipado com Typescript mas também adora o Babel.

Pra quem não sabe, Babel se trata de um compilador de Javascript que "traduz" Javascript atual (ES2015+) para Javascript antigo, mantendo assim uma camada de compatibilidade com navegadores legados. Ele é essencial também no desenvolvimento de aplicações com React, já que essa biblioteca se utiliza de uma linguagem específica chamada de JSX e que não é compreendida pelos navegadores. Então o Babel faz essa "tradução", dando um leque enorme de possibilidades para os desenvolvedores.

Um exemplo, utilizando o meu post anterior sobre Destructuring:
// Código escrito com Ecmascript 2015+,
// ainda não compreendido por 100% dos browsers
const person = {
    name: 'Flavio',
    lastName: 'Lima',
    age: 30
}
const { name, lastName, age } = person

// Agora o código compilado pelo Babel
'use strict';
var person = {
    name: 'Flavio',
    lastName: 'Lima',
    age: 30
};
var name = person.name,
    lastName = person.lastName,
    age = person.age;

É possível utilizar uma ferramenta oficial no site do Babel para verificar seus códigos.

Já o Typescript se trata de um SuperType do Javascript, é basicamente um Javascript tipado criado pela Microsoft e que permite utilizar uma sintaxe muito similar a de outras linguagens, como o Java, por exemplo, no sentido de criar tipos, classes, entre outras coisas, ao Javascript. É uma ferramenta muito poderosa e é a linguagem padrão de frameworks como Angular e Ionic e também pode ser utilizada no React.

Como o JSX, o Typescript também não é devidamente compreendido pelo navegador, logo, precisamos utilizar um compilador de typescript para javascript, que já existia, claro, mas agora com o suporte do Babel, vai ampliar mais ainda as possibilidades durante o desenvolvimento.

Bom, sobre a notícia que foi postada no Blog oficial do Typescript, é basicamente o seguinte:

"Over a year ago, we set out to find what the biggest difficulties users were running into with TypeScript, and we found that a common theme among Babel users was that trying to get TypeScript set up was just too hard. The reasons often varied, but for a lot of developers, rewiring a build that’s already working can be a daunting task. Babel is a fantastic tool with a vibrant ecosystem that serves millions of developers by transforming the latest JavaScript features to older runtimes and browsers; but it doesn’t do type-checking, which our team believes can bring that experience to another level. While TypeScript itself can do both, we wanted to make it easier to get that experience without forcing users to switch from Babel. That’s why over the past year we’ve collaborated with the Babel team, and today we’re happy to jointly announce that Babel 7 now ships with TypeScript support!"

Traduzindo para o bom português: desde o ano passado que o time do Babel e do Typescript queriam adicionar uma compatibilidade entre os dois e isso foi feito agora na última versão do Babel, a versão 7. Para quem desenvolve Typescript e, consequentemente, utiliza a ferramenta oficial para sua compilação, tem acesso à checagem de tipo e compilação, já quem usar o Babel só terá como compilar, já que o Babel não checa o código por erros do usuário.

No geral, não muda muita coisa na verdade, mas expande as capacidades do Babel e também deve atrair novos usuários para o Typescript. Segue link para a matéria original que, inclusive, ensina a instalar o Babel para Typescript:
https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/

Valeu!

JS - Descontruíndo o Destructuring (Objetos)



O Destructuring foi um recurso incluído nas últimas versões do Javascript e que talvez tenha passado batido por muita gente. Ele, basicamente, te permite escrever códigos mais limpos e menos repetitivos.

O Ecmascript 2015 (ES2015), que define os padrões da linguagem Javascript,  o revolucionou em muitas coisas, tornando-o mais global e elevando-o a patamares mais altos, e isso não é novidade alguma. Mas, mesmo já estando aí há mais de 3 anos, muitas pessoas ainda não conhecem diversos de seus recursos que podem facilitar, e muito, a vida dos desenvolvedores. E sabemos que não são poucas as utilidades do Javascript hoje, a linguagem que, por muito tempo, foi até mesmo ridicularizada por desenvolvedores de linguagens mais 'nobres', por assim dizer, hoje está em praticamente tudo.

Se antes estávamos limitados aos browser, às interações com usuários, alertas e animações, hoje podemos rodar o Javascript num servidor completo e executar basicamente qualquer coisa nele. Podemos ainda executar num app Mobile utilizando frameworks como React-Native, Nativescript e Ionic; Podemos ainda criar um aplicativo multiplataforma para Windows, Linux e Mac  com Electron; e, hoje já está se tornando uma realidade, executar códigos em linguagens como C e C++ direto no browser através da camada de WebAssembly. Enfim, Javascript está em todo o lugar, você pode criar basicamente qualquer coisa com ele e é certo que ainda não atingimos nem 50% do que ele é capaz, longe disso!

Bom, então vamos falar desse recurso incluído nessa versão do Javascript e que ainda gera muitas dúvidas em sua utilização no dia a dia, para quê que serve? o que posso construir utilizando esse recurso? Em quê pode fazer diferença nas minhas tarefas diárias? Enfim, pretendo ao menos tentar responder a algumas dessas perguntas aqui.

Vamos lá! Enfim, Destructuring é basicamente uma técnica que, como disse antes, te faz economizar muito no código e deixar ele mais limpo e fácil de ler. Ele permite criar variáveis a partir de objetos ou arrays. Como? Segue um exemplo:
Antes, quando se precisava atribuir variáveis a partir de objetos, utilizávamos o seguinte código:
// Objeto person apenas para exemplificar
var person = {
    name: "Flávio",
    lastName: "Lima",
    age: 30
    }
// Criando variáveis a partir do objeto:
var name = person.name
var lastName = person.lastName
var age = person.age
// Logando as variáveis no terminal
console.log(name) //Flávio
console.log(lastName) //Lima
console.log(age) // 30

Bom, não parece grande coisa, né? afinal, nosso objeto tem apenas três propriedades. Mas imagine a complexidade disso em objetos maiores. É muita mão de obra e o Destructuring veio justamente pra facilitar nisso.

Segue agora o mesmo código escrito usando Destructuring:
let person = {
    name: "Flávio",
    lastName: "Lima",
    age: 30
}
// Atribuindo as variáveis
const {name, lastName, age} = person
// Logando as variáveis no terminal
console.log(name) // Flávio
console.log(lastName) // Lima
console.log(age) // 30

Viu só? nesse caso, o código ficou bem mais simples de ler e só ocupou uma linha para declarar as variáveis. E isso não é tudo, também é possível utilizar nomes diferentes para as variáveis. Por exemplo:
// Abrasileirando as variáveis
const { name: nome, lastName: sobreNome, age: idade } = person
// Verificando no terminal
console.log(`Nome completo: ${nome} ${sobrenome}; 
    Idade: ${idade}`) // Nome Completo: Flávio Lima; Idade: 30

Também é possível atribuir valores default para variáveis pois caso você inicialize uma variável usando Destructuring e ela não existir no objeto, ela retornará undefined. Então podemos fazer dessa forma:
// Vamos continuar a utilizar o objeto Person, 
// mas dessa vez vou criar uma variável não declarada antes
const { name, lastName, age, favMovie } = person
// Ao tentar logar a variável não existente, receberemos undefined
console.log(name) // Flávio
console.log(favMovie) // undefined

Para evitar isso, definiremos um valor padrão para a variável:
const { name, lastName, age, favMovie = "Forrest Gump" } = person
// Dessa vez, não obteremos undefined mas sim o valor padrão informado
console.log(name) // Flávio
console.log(favMovie) // Forrest Gump

Bom, por hoje é isso mas logo logo trarei mais posts sobre o uso de Destructuring com Arrays e também outras coisinhas mais que podemos fazer com ele.

Valeu!