É inegável que o desenvolvimento para dispositivos móveis é uma das principais vertentes do mundo do software. A importância desses equipamentos não precisa mais ser comprovada, seus números falam por si.

Consequentemente, a programação evoluiu levando em conta os novos anseios de usuários e clientes.

Até bem pouco tempo, o desenvolvimento mobile podia ser explicado dividindo-o em três abordagens principais:

• Desenvolvimento Nativo: a aplicação é criada especificamente para uma plataforma, usando seu SDK (Standart Development Kit), sua loja virtual e as especificidades da linguagem adotada. Por exemplo: desenvolver em Java/Kotlin para Android ou desenvolver em Swift/Objective-C para iOS.
• WebApp: conceitualmente não poderia ser chamado de aplicativo. É uma customização de uma página web para o ambiente móvel. Uma das abordagens usadas é verificar o header user-agent para saber a origem da requisição, entregando uma resposta especializada.
• Aplicativos Híbridos: desenvolvimento com as principais linguagens/tecnologias do mundo web (JavaScript, CSS e HTML). Uma camada adicional, normalmente PhoneGap/Cordova, insere essa “aplicação web” dentro de um componente visual que encapsula o comportamento de um browser, como o WebView, no Android.

Porém, recentemente, surgiram tecnologias que não se encaixam em nenhum dos padrões listados anteriormente. Cito aqui três delas, que vêm ganhando mercado e a atenção de todos os desenvolvedores mobile: Xamarin, Progressive Web App e React Native. Neste pequeno artigo, vou focar nas duas últimas.

O PWA é uma página web que pode, progressivamente, assumir um comportamento de aplicativo e residir no desktop do seu aparelho móvel ou do Chrome. Seu principal chamariz é o custo de desenvolvimento, visto que uma página web já construída pode ser aproveitada, e a criação de uma aplicação nativa não é necessária.

O PWA não exige o download de nenhum SDK, de nenhuma IDE específica, nem de configuração na máquina cliente ou servidor. Tudo o que a aplicação precisa é de uma configuração que define seu comportamento visual no desktop do usuário.

Já o React Native é uma especialização do já conhecido React para uso no mundo mobile. Os adeptos dessa tecnologia destacam dois pontos que o diferem de qualquer solução similar atual. O primeiro é o uso do Virtual DOM, herdado do React para web, e o segundo é a construção de elemento de interface gráfica nativas do dispositivo – diferentemente de soluções como o Ionic, que usa estilos para aproximar o máximo possível o elemento HTML do componente Nativo.

O Virtual DOM, como mostra a Figura 1, é uma cópia fidedigna do DOM original da página. As mudanças são percebidas apenas nos pontos onde elementos foram alterados. A atualização do DOM original ocorre somente nesses pontos, otimizando o tempo de processamento. Essa camada que reside entre a aplicação e o motor de renderização do browser é, para muitos, a grande ideia por trás do React.

Ok, mas estamos falando de mobile, não estamos? Sim, e o React Native utiliza exatamente o mesmo conceito. A diferença é que os componentes codificados na aplicação são mapeados para elementos de interface da aplicação, sendo que ela é atualizada sob demanda e fora da sua thread principal. Novamente, o ganho de performance é o grande fator resultante.

Para o leitor ter o primeiro contato com o React Native, e para elucidar melhor o conceito acima apresentado, veja na listagem abaixo o trecho de um componente básico codificado no JSX (trecho retirado da documentação oficial do React Native):

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
 render() {
   return (
     <View>
       <Text>
         If you like React on the web, you'll like React Native.
       </Text>
       <Text>
         You just use native components like 'View' and 'Text',
         instead of web components like 'div' and 'span'.
       </Text>
     </View>
   );
 }
}

Desculpe a falta de educação e a informalidade. Não apresentei ao leitor o JSX, o JavaScript com XML. A classe WhyReactNativeIsSoGreat é um componente que, ao ser requisitado pelo motor de renderização do dispositivo adjacente, pede à função render que especifique o que deve ser mostrado na interface. Essa descrição pode ser feita com XML e com as tags que serão mapeadas para os elementos nativos do dispositivo.

Posteriormente, qualquer mudança no estado ou propriedades do componente, automaticamente requisitará ao Virtual DOM que atualize o DOM (no caso, a UI do mobile). É importante ressaltar que o React Native fornece algumas tags que são uma associação de-para com componentes específicos de uma plataforma ou outra – como um DatePicker específico para iOS.

Claro que o React Native é muito mais que o Virtual DOM, o JSX e os elementos de UI nativos. Porém, no entendimento do autor, esses são os principais pontos de discordância e evolução em relação às opções tradicionais, como o Ionic.

Independentemente da escolha do desenvolvedor, o que mais importa é percebermos a importância do mobile no mundo. Perceber o quanto a linguagem JavaScript avança terreno também no mobile e, por fim, perceber que estamos cada vez mais servidos de tecnologias/frameworks/plataformas que nos permitem criar grandes aplicativos cross-platform.

***

Artigo publicado na revista iMasters, edição #24: https://issuu.com/imasters/docs/24