React | Universal | Flux

Boas práticas, HTML, Javascript, Uncategorized Leave a reply

Olá, tudo bom?

A pegada de hoje é React.

Estou brincando com essa criança há algum tempo, mas criando coragem para escrever algo aqui.

Pra começar, vamos conhecer o bichinho:

 

Sério, no começo dá muito susto: “Ah Deus!? O que esse DIV está fazendo no meio do meu Javascript?”

Bom, é essa a pegada mesmo. A minha visão é bem simples: Se está tudo junto, fica mais fácil manter. (Mas é opinião totalmente pessoal).

Bom, eu gosto de usar o Webpack e realmente é um tédio configurar tudo

Certo, mas o que é o React? Um novo framework tipo Angular? NOOOOOOOOOOOO.

O React é uma biblioteca e o objetivo não é fazer muita magia. Basicamente, o pessoal do Facebook pegou o JSX (que nem é assim tão novo), juntou com o conceito de componentes, máquina de estados com um lifecycle definido e abstraiu o DOM, para oferecer uma ferramenta de grande performance no desenvolvimento de aplicações web.

Mas sozinho o React é só uma lib que ajuda a fazer componentes. A pegada monstro é justamente o conjunto de coisas que usamos com ele.

Como ele é abstrato, 100% em JS, todo o processamento pode correr solto do DOM e, portanto, do navegador. Isso significa que o seu Node.js rodando no servidor pode processar uma página inteira em React e cuspir tudo no output direto no HTML. o.O pode isso mesmo produção? Sim, chamam-se universal apps. A pegada é você renderizar o elefante no server-side e o front-end assume daí, melhorando a experiência da primeira carga e ajudando no SEO.

Bom, se ele pode rodar no servidor, então entramos no universo dos isomórficos, que são utilitários em JS que foram pensados para se comportar de maneira compatível com o navegador e com um ambiente back, tipo Node. Um exemplo disso é o isomorphic-fetch, uma lib que porta o fetch da W3C para a filosofia e permite requisições http com a mesma API dos dois lados.

Certo, então vamos sumarizar: O React é uma biblioteca para fazer componentes em JSX e que pode rodar no servidor.

Ok, mas com isso ainda não dá para fazer uma aplicação realmente atraente. Então, de novo o pessoal do Facebook idealizou o Flux, que também não é um framework, mas sim uma filosofia de arquitetura para a estruturação de uma aplicação web (Ahn?!).

Diagrama do Flux

(fonte: Site do Flux)

O Flux é a forma com a qual a sua aplicação trafega os dados. Assim como o Angular tem todo aquele way-of-life e filosofia, com o Flux você arquiteta a sua aplicação de forma transparente os dados em apenas uma direção.

Basicamente, não tem two way data binding (tá, tem, mas vamos colocar que não, pois é melhor assim). Os dados são consumidos de Stores pelos componentes e, quando uma ação for modificar o estado da aplicação, ela envia uma mensagem para uma função que irá cuidar de atualizar a Store… dessa maneira, todo o estado da aplicação fica seguro e mais fácil de ser mantido, já que não está em uma festa distribuída de objetos, largados no seu app.

Mas pera pera pera… e o tal estado da máquina de estados do componente? A idéia é que, com o Flux, você abstraia o estado do componente no estado que ele irá receber. (Isso é muita adrenalina de uma vez só).

Para ficar ainda mais bonito, a gente enfim encontra o ES2015, cheio de habilidades superpoderosas, que irão ajudar no desenvolvimento.

Assim,

– O React ajuda a fazer componentes;
– Com o Node eu renderizo minha aplicação no servidor;
– Os dados trafegam de maneira segura e são armazenados segundo a filosofia do Flux;
Tudo isso bonitinho com ES2015.

Isso!

Conclusão

Sua aplicação fica mais performática (não espera mágica tá… depende de você seguir direitinho a pegada), você tem uma grande variedade de componentes que já existem e facilidade de criar os seus e, enfim, fica mais rápido desenvolver na web e até mobile e desktop.

Até mais.

Ps. E olhe, React é bonito, mas ficar configurando o ambiente acaba ficando bem chato, então, se você quer começar a programar nisso, é bom que encontre um bom projeto base ou use um gerador #ficaadica

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *