Author: Fabricio Reche

Server Render – a nova proposta de uma moda antiga

Server Render, ou renderização pelo servidor em uma “xula” tradução livre, é considerado uma má prática, ou pelo menos me ensinaram assim, e devo concordar que nunca vi esse tipo de técnica com bons olhos, todos os códigos que vi na vida que criavam algum script javascript em lado de servidor, ou uma montagem de html no lado do servidor, era de difícil manutenção e de difícil compreensão (normalmente uma gambiarra adaptação técnica para contornar alguma situação bem específica).

Pois bem, em um outro post comentei sobre o ReactJS e como ele vem oferecendo uma nova proposta dessa técnica de uma forma prática e produtiva, o que vem contra muitos conceitos e padrões de desenvolvimentos web que vemos no mercado, pois bem, fiquei devendo uma explicação e uma aplicabilidade desse comentário, e eis-me aqui para pagar essa dívida.

Todo o projeto está disponível aqui.

O README já é bem explicativo, mas irei detalhar os fontes envolvidos.

  • App.js – Fonte com instruções do ReactJS, nada além disso.
  • Browser.js – Fonte com as instruções para integração do browser (front end).
  • Server.js – Fonte com as instruções de renderização do server (sem framework, apenas nodejs puro).

Gostaria de ressaltar o seguinte, aqui não foi usado um builder, ou seja, foi utilizado apenas o ReactJS com javascript puro, assim como no lado do servidor foi utilizado apenas NodeJS, sem utilizar um framework (como o express) ou gerador de conteúdo estático (como o middleman ou o jekyll), obviamente a produtividade vai além abrangendo outras tecnologias, mas como o objetivo é apenas denotar a forma de utilização da renderização no lado do servidor, foi optado utilizar dessa forma.

// <![CDATA[

function safeStringify(obj) {
return JSON.stringify(obj).replace(/<\/script/g, '<\\/script').replace(/<!–/g, '

Twitter

ReactJs para jovens gafanhotos

Introdução
Há muito vem se falado de como não devemos mesclar o html com nosso código javascript, assim também vemos que não é uma boa prática renderizar o html em lado do servidor.Pois bem, o facebook anda discordando disso e querendo inventar uma nova moda (ou seria voltar uma moda antiga?)

react

O que é ReactJs?
O ReactJs é uma biblioteca para interação com usuário, o dito UI, exclusivamente pensada em atender a necessidade de uma interface interativa esquivando dos terríveis gargalos de desempenho oriundos do DOM (document object model) para as interfaces nesse modelo, de forma que para que isso seja possível, utiliza-se algumas técnicas como unidirectional data flow, ou algo tipo “one-way-data-binding”, e um relativamente conceito novo no mercado, o DOM virtual.

DOM Virtual
O DOM virtual é a representação em memória do DOM que os navegadores interpretam, com a diferença de ser disponibilizado apenas em memória e não no documento real apresentado pelo navegador.

Seu benefício específico é a questão performática em comparação à manipulação direta do DOM representativo (você pode ver esta discussão do stackoverflow que vai bem além nessa história, até porque o DOM Virtual vai merecer um post próprio).

O site oficial é este, e a versão atual, no momento que escrevo este post, é a 0.13.3

Instalação
Por ser apenas uma biblioteca e o nosso escopo é de aprendizado inicial, o código abaixo demonstra sua inclusão utilizando o CDN do facebook mesmo.


<div id=”meu-app”></div>
<script type=”text/jsx”>
//Código ReactJs vem aqui jovem padawan
React.render(
<h2>Olá jovem Padawan, bem vindo ao mundo UI do facebook</h2>,
document.getElementById(‘meu-app’)
);
</script>

See the Pen Instalação básica do ReactJS by Fabricio Eduardo Reche (@fabricioereche) on CodePen.

Veja o código na íntegra por Fabricio Eduardo Reche (@fabricioereche) no CodePen.

Gostaria de ressaltar que o código acima é apenas para aprendizado inicial, nunca use o builder em produção (sério, não faça isso!).

JSX
Você deve ter notado o tal do “text/jsx” no script não é mesmo?Pois bem, o JSX é uma linguagem que mescla javascritp com XML, com o intuito de deixar mais declarativa a forma de declarar os componentes do ReactJS, pois como foi visto antes, não iremos usar o DOM tradicional, mas um DOM virtual e essa linguagem veio para nos ajudar.

Ela é opcional, então se você quiser utilizar o javascript puro, fique a vontade para ver na documentação do React as alternativas utilizando a sintaxe do javascript e não do JSX, porém aqui iremos utiliza-lo.

Quando falamos de atributos, tem algumas sacadas do JSX, como por exemplo, o atributo class dos elementos é className e o atributo for é htmlFor, dá uma lida aqui e fique esperto.

Em versões antigas a 0.12, era obrigatório um comentário específico para utilização do JSX, como no exemplo abaixo:

/** @jsx React.DOM */

Isso não é necessário desde a versão 0.12.

Componentes
Vamos analisar o seguinte código:


<div id=”meu-app”></div>
<script type=”text/jsx”>

var MeuComponente = React.createClass({
render: function(){
return (
<h1>Olá pequeno gafanhoto</h1>
);
}
});

React.render(
<MeuComponente/>,
document.getElementById(‘meu-app’)
);

</script>

See the Pen Exemplo ReactJS – Create Class by Fabricio Eduardo Reche (@fabricioereche) on CodePen.

Veja o código na íntegra por Fabricio Eduardo Reche (@fabricioereche) no CodePen.

Quando utilizamos o método render do React, ele recebe dois parâmetros, um é o nosso componente criado pelo React.CreateClass e o segundo é o único DOM real que vamos utilizar, um contêiner da nossa aplicação, por assim dizer, simples, direto e reutilizável.

Propriedades
Vamos alterar mais um pouco no código para dinamizar a brincadeira:


<div id=”meu-app”></div>
<script type=”text/jsx”>

var MeuComponente = React.createClass({
render: function(){
return (
<h1>Olá {this.props.nome}</h1>
);
}
});

React.render(
<MeuComponente nome=”Pequeno gafanhoto”/>,
document.getElementById(‘meu-app’)
);

</script>

See the Pen Exemplo ReactJS – Create Class by Fabricio Eduardo Reche (@fabricioereche) on CodePen.

Veja o código na íntegra por Fabricio Eduardo Reche (@fabricioereche) no CodePen.

Ao definirmos nosso componente, podemos adicionar acesso a propriedades, criando dinamismo no componente, utilizando a configuração “props”.

Especificações, ciclos de vida e estados
Dentro do componente, a única especificação obrigatória é o render, método que efetua a renderização do componente em si, porém existem várias especificações para serem utilizadas, para gerar mais dinamismo e comportamentos, assim também como métodos de ciclos de vida, as propriedades (props) e os estados (states).
Você pode dar uma olhadinha aqui para ter uma noção de quantas especificações você pode fazer.

Estados
Se fossemos falar quem é a “bola da vez” no react, seriam os estados.

Através deles que são feitos as mudanças na interface, quando chamado o método setState, porque quando esse método é chamado, aí é que acontece a “magia” do React, atualizando a interface, alterando apenas o que foi alterado em seu estado atual.

Vamos ver essa brincadeira na prática:


<div id=”meu-app”></div>
<script type=”text/jsx”>

var Contador = React.createClass({
incrementar: function(){
this.setState({
contagem: this.state.contagem + 1
});
},
getInitialState: function(){
return {
contagem: 0
}
},
render: function(){
return (
<div>
<h1>Contagem: {this.state.contagem}</h1>
<button type=”button” onClick={this.incrementar}>Incrementar</button>
</div>
);
}
});

React.render(<Contador/>, document.getElementById(‘meu-app’));

</script>

See the Pen Exemplo ReactJS – Estados by Fabricio Eduardo Reche (@fabricioereche) on CodePen.

Veja o código na íntegra por Fabricio Eduardo Reche (@fabricioereche) no CodePen.

Veja que no código, utilizamos o evento onClick do botão para alterar o estado do nosso componente “Contador”, cada vez que chamamos a função “incrementar”, o estado é alterado, mas apenas aquilo que foi alterado é que é renderizado novamente, sem decorrer todo o DOM criado.

Fluxo de dados unidirecional
No reactjs o fluxo das informações são unidirecionais, via estados e propriedades, ou seja, ao alterarmos o estado do componente e chamarmos o método setState, estamos enviando informação e informando que houve uma mudança, na prática, teremos um componente pai, que vai falando para seus filhos que houve uma mudança, alterando apenas o que foi alterado e mantendo o que não foi.

Para vermos esse exemplo de fluxo de dados funcionando, abaixo um exemplo de lista filtrada:


<div id="meu-app"></div>
<script type="text/jsx">
var ListaFiltrada = React.createClass({
filtrarLista: function(event){
var listaNova = this.state.itensIniciais;
listaNova = listaNova.filter(function(item){
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({itens: listaNova});
},
getInitialState: function(){
return {
itensIniciais: [
"facebook"
,"twitter"
,"linkedin"
,"google+"
,"flicker"
],
itens: []
}
},
componentWillMount: function(){
this.setState({itens: this.state.itensIniciais})
},
render: function(){
return (
<div className="lista-filtrada">
<input type="text" placeholder="Busca" onChange={this.filtrarLista}/>
<List itens={this.state.itens}/>
</div>
);
}
});

var List = React.createClass({
render: function(){
return (
<ul>
{
this.props.itens.map(function(item) {
return <li key={item}>{item}</li>
})
}
</ul>
)
}
});

React.render(<ListaFiltrada/>, document.getElementById("meu-app"));

</script>

See the Pen Exemplo ReactJS – Create Class by Fabricio Eduardo Reche (@fabricioereche) on CodePen.

Veja o código na íntegra por Fabricio Eduardo Reche (@fabricioereche) no CodePen.

Conclusão
Agora que pudemos ver um pouco do que o ReactJS faz, espero que isso abra a mente para sua utilização, pois talvez, assim como eu, você tenha ficado com um pé atrás por ver código javascript no meio do html e lendo ainda que renderizar html pelo servidor pode ser uma boa coisa (veremos isso em um post futuro, sobre renderização no lado do servidor).

Nota: Se você estava procurando uma forma de comparar o react com o angular, sinto muito, são coisas distintas usadas para atender necessidades distintas, porém eu já vi gente usando e dizendo que dá liga, afinal, o React é para ser a interface. Qualquer coisa, dá uma pesquisada sobre o ngReact e seja feliz.

Fabricio Eduardo Reche

No Code Squad, ministra os seguintes treinamentos: http://code-squad.com/perfil/FaBritze#cursos-ministrados

Entusiasta no desenvolvimento de sistemas web desde 2008, eterno estudante e apreciador de softwares livres. Experiência profissional no desenvolvimento web utilizando .NET, PHP e Ruby On Rails, como back-end e jQuery, ExtJs e AngularJS como front-end, utilizando banco de dados relacionas SQL Server, Postgresql e Mysql.

Twitter

© 2017 Bussola Code Squad

Theme by Anders NorenUp ↑