Monday, February 19, 2018

Programação Reativa

A programação reativa é uma das formas mais modernas de desenvolvermos aplicações com partes visuais, interativas, na web, seja em desktops ou smartphones, onde todos os navegadores suportam versões modernas do javascript.

Esse artigo é uma transcrição do vídeo disponível no Youtube que eu gravei há algum tempo.  Assista ao vídeo, se preferir.


Olá,  pessoal.  Vamos hoje falar um pouco sobre a programação reativa. Esse novo paradigma de programação, que não é nem tão novo assim, está muito em voga, especialmente no uso de programação de páginas web interativas, ou aplicações web. Isso também val para os celulares, os smartphones.

Qual a vantagem dessa programação reativa? Vejamos. Todo mundo aqui já teve algum contato com planilhas (spreadsheets). As planilhas funcionam da maneira seguinte: digamos que numa determinada célula eu coloque uma expressão matemática a = b + c, ou seja, a célula "a" (não precisa ser essa letra extamente, só para simplificar) depende da letra "b" e da letra "c". Quando a letra "b" se alterar, ou quando a letra "c" se alterar, a célula com a letra "a" estará errada, precisa ser atualizada. É exatamente esse o princípio da programação reativa. Criamos as dependências. A célula "A", no caso, reagiria à qualquer alteração na célula "b" e "c". Isso pode ser implementado de muitas maneiras, inclusive por eventos, que é uma forma tradicional de implementarmos em javascript. Então vamos elaborar um pouco mais sobre isso.

Os desenvolvedores resolveram criar um manifesto sobre a reatividade. Então esse manifesto tem 4 princípios básico de reatividade, que qualquer biblioteca que for escrita deve seguir para manter a compatibilidade. Esses princípios seriam a responsividade, ou a interatividade, porque a responsividade significa a velocidade com que a aplicação deveria reagir a qualquer evento, podemos dizer assim, mas qualquer modificação feita pelo usuário. (O usuário clicou em determinado lugar.) Se espera que a aplicação responda rapidamente. Então isso é a responsividade.

A resiliência que seria ele ser tolerante a determinados erros e responder da maneira esperada, àquele erro que aonteça. Por exemplo, digamos que pedimos uma determinada aplicação que não está disponível (o servidor dessa aplicação) então ela deve ficar lá quieta, e não "sujar" a página toda ou deixar de funcionar por causa daquele módulo (digamos que fosse um módulo de tempo/clima). Então o resto da página está funcionando, mostrando notícias ou outras coisas, mas aquela parte que mostraria o clima, a temperatura, a pressão, a previsão nas próximas horas, etc, o servidor pode estar fora do ar o que não impede que o resto da página funcione. Então isso seria  resiliência.
Ele deve ser escalável, se a gente fizer uma ágina mais complexa ou uma aplicação web mais complexa, com mais recursos, ele não deve ficar mais lento só porque está mais complexo. Ou se a quantidade de dados aumentar porque nós estamos "pescando" dados de vários servidores ao mesmo tempo, então isso não deve oferecer resistência na velocidade, ou seja, a velocidade deve permanecer alta.

E o princípio básico, gerenciado por mensagens, ou por eventos. Significa o que? O usuário clica, a aplicação responde. O usuário bate uma tecla, a aplicação responde. E assim por diante.
Um outro princípio interessante, embutido nesses quatro aí, mas a gente não falou ele explicitamente, é que o mundo é assíncrono.  Vamos pegar um exemplo. A genta vai fazer um cafezinho, pega o pó do café, bota na máquina, ou na cafeteira elétrica, aí descobrimos logo depois que não tem açúcar.  Tem duas maneiras da gente fazer isso.  Ah! Não tem açṹcar então não iremos fazer café. Primeiro vou comprar o açúcar, depois quando voltar, eu ponho o pó do café na cafeteira, ligo a máquina, espero que ela termine, ao terminar o café está pronto, eu ponho o açúcar e tomo. Isso aí vai me fazer gastar mais tempo.  Seria mias natural, daí a gente dizer que o mundo é assíncrono, se eu digo: não, vou colocar o pó do café, vou ligar a cafeteira, vou no supermercado comprar o açúcar e enquanto isso a cafeteira está lá funcionando, ao mesmo tempo que eu estou comprando o açúcar. Quando eu voltar, o café já deve estar pronto, ou quase pronto, eu aguardo só um pequeno intervalo de tempo a mais para que ele seja concluido, adoço e tomo o café.  Então vou ficar muito mais satisfeito com essa segunda alternativa.
Isso também é uma explicação de como o mundo é assíncrono.

 Outra maneira de pensar em reatividade é com streams. O que são streams? Uma espécie de array, só que dinâmicos. Uma fila que tem cabeça, cauda, onde se inserem na cabeça os novos dados, e da cauda vai se retirando os dados já inseridos. Por exemplo, seu eu tivesse uma série de eventos que eu quisesse ordena-los, colocar nessa stream e do outro lado, ficar processando evento por evento, mantendo o histórico, inclusive a órdem que eles ocorreram. Isso é muito prático.  Digamos que eu tenha um arquivo muito grande na memória. Não vamos pensar em eventos diretament, mas digamos que eu tenha um arquivo bastante grande na memória e minha memória inteira não daria para colocar os dados contidos nesse arquivo. Então eu teria que ler por partes ele, e ir processando, depois ler outra parte e processar.  Em vez de ficar quebrando ele em pedaços, eu transformo ele numa stream, quer dizer, "venha um parte dele" e enquanto está vindo eu já estou processando. Então eu estou processando de uma forma reativa. Enquanto estão vindo os dados eu estou lendo filtrando esses dados, fazendo alguma ordenação, digamos por exemplo, eu poderia estar contando a ocorrência de caracteres, a frequência com que cada caractere acontece naquele texto (letra a, tantas vezes...). Então eu estaria contando, guardando estados (status) desse texto, mesmo que o texto seja maior que a minha memória, porque eu estou lendo à medida que eu estou necessitando. Então, transformando ele numa stream, eu posso processar de uma maneira como se fosse sequencial a leitura disso aí. Eu não tenho que parar, ler um pedaço, marcar onde eu li, etc.

Agora, muitas bibliotecas existem para a programação reativa em javascript. Algumas delas são famosas porque a maioria (essas famosas) são associadas a GUIs, ou seja, interface gráficas do usuário. Uma delas é a Meteor, automatiza (toma conta de tudo) o desenvolvimento de aplicações web completas, lado servidor e lado cliente. Inclusive, tenho um livro escrito sobre isso (voces podem encontrar aí em baixo).
Outra coisa, aproveitando que estou falando sobre a inclusão, não deixem de dar um "like" no vídeo e também se inscrevam no canal, caso ainda não sejam inscritos.

O Meteor seria uma dessas bibliotecas famosas usando programação reativa. Outra interessante é o React, da Facebook, que é uma biblioteca que só cuida da visão(view), ou seja, da aparência do programa na web, o DOM que é onde a gente desenha o que vai aparecer na tela do navegador. (as caixinhas de entrada, botões, caixas de texto, e por aí...ícones, imagens, parágrafos, etc.)  Bom, então o React que cuida só da parte visual, não cuida da parte de trás, o servidor, etc. E tem muitas, na realidade, eu contei mais de 20 bibliotecas que são um tanto quanto populares, algumas muito modularizadas.  Eu particularmente, gosto muito do Vue.js (acredito que se pronuncie assim porque é meio "francês"). Então essa Vue se dedica só à parte da visão também, a parte do navegador, mas ela é muito flexivel e é bem mais simples do que o Angular. por exempl. O Angular é uma outra reativa também, mas programada pensando de outra maneira.  Normalmente essa reatividade, esse processamento de dados em forma de streams é um fluxo só. Entram os caracteres e eles são processados no caso, são "displayados", colocados na DOM, no caso do React na DOM virtual, no Vue também. A maioria das bibliotecas reativas é assim, elas manem uma cópia do DOM (que é um DOM virtual) e esse DOM exportado, refletido no DOM real (o que está aparecendo realmente), porque esse DOM virtual deixa o acesso mais rápido.

Mas já estamos estendendo muito o nosso vídeo, então vou deixar mais discussões para uma outra oportunidade. Agradeço muito a visualização de vocês.
Até logo.

Thursday, February 15, 2018

Livros publicados

Livros publicados

Tenho alguns livros publicados que podem interessar aos leitores.
Visite minha página de autor na Amazon, ou veja os links abaixo.

Página de autor:  https://www.amazon.com/Rildo-Pragana/e/B01LYZ2TM4

Livros:

Curso Intensivo de JavaScript.  Ideal para principiantes na linguagem.
https://www.amazon.com/Curso-Intensivo-JavaScript-Portuguese-Pragana-ebook/dp/B077Z86X6Y/ref=asap_bc?ie=UTF8

NodeJS: JavaScript no Servidor.  Javascript, dedicado à programação dos servidores utilizando NodeJS, baseado no engenho V8.
https://www.amazon.com/Nodejs-javascript-no-servidor-Portuguese-ebook/dp/B01LZMH242/ref=asap_bc?ie=UTF8

Programando aplicações com AngularJS.  Utilizando o framework Angular (versão 1).
https://www.amazon.com/Programando-aplica%C3%A7%C3%B5es-com-AngularJS-Portuguese-ebook/dp/B0189PK16U/ref=asap_bc?ie=UTF8

Meteor Prático.  Utilizando o framework Meteor, que funciona no lado cliente mas também no servidor.
https://www.amazon.com/Meteor-pr%C3%A1tico-Portuguese-Rildo-Pragana-ebook/dp/B01H7J6NHA/ref=asap_bc?ie=UTF8

Curso Rápido da Lingaugem C.  Bom para complementar os textos utilizados nos cursos de engenharia ou onde C é ensinada a universitários, mas também serve para principiantes em C.
https://www.amazon.com/Curso-r%C3%A1pido-linguagem-C-Portuguese-ebook/dp/B078WKK8KQ/ref=sr_1_1?s=digital-text&ie=UTF8&qid=1518702260&sr=1-1&keywords=curso+rapido+de+C

Tradução do livro do NodeJS acima para o inglês.
https://www.amazon.com/NodeJS-server-side-javascript-Rildo-Pragana-ebook/dp/B01M1NHIE5/ref=asap_bc?ie=UTF8

Vários outros livros têm traduções, todos disponíveis na Amazon.  (dica: Procure por Rildo Pragana.)