React Native - Desenvolvendo aplicações nativas com JavaScript

Anunciado na conferência React realizada no escritório do Facebook em Menlo Park (California), React Native é uma versão da biblioteca React JavaScript tendo como alvo os desenvolvedores mobile. Superficialmente o React Native é muito parecido com o React, com declarações JavaScript de interfaces de usuário reativas, mas nos bastidores as interfaces do React Native são suportadas por controles específicos da plataforma ao invés de elementos DOM.

Originalmente desenvolvido e, posteriormente, de código aberto pelo Facebook, React é um framework JavaScript do lado do cliente para construir interfaces de usuário. O React usa uma sintaxe declarativa e uma extensão JavaScript chamada JSX para descrever os layouts HTML. Cada componente React é suportado e configurado por propriedades e estado, as alterações desencadeiam atualizações por meio de um fluxo de dados unidirecional. Estas atualizações são otimizadas através de um DOM virtual, que compara os componentes para assegurar que somente aqueles alterados pela mudança de estado são atualizados.

Um exemplo típico de um componente React é exibido a seguir:

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
React.render(<HelloMessage />, mountNode);

No exemplo anterior um componente customizado chamado HelloMessage é definido. Conforme é padrão no React, o componente HelloMessage declara uma função render que retorna uma árvore de elementos HTML para renderizar o DOM. O uso das definições de elementos de estilo é habilitado pelo JSX, que por sua vez são pré-processados e traduzidos em chamadas de funções React que produzem os elementos HTML associados.

Do mesmo modo que o React Native usa a abordagem declarativa para definir interfaces de usuários nativas, mas ao invés de se ligar a elementos HTML, expõe uma série de classes customizadas que são uma ponte para os componentes de interface de usuário nativos. Tomemos por exemplo o seguinte trecho de amostra da ChecklistApp que mostra como o React Native se liga aos componentes de interface de usuário nativos, como views e text fields editáveis:

render() {
    return (
        <View style={{marginTop: 20}}>
           <Text>Checklist</Text>
           <TextInput
               style={styles.input}
               autoFocus={true}
               onSubmitEditing={this.handleSubmit}
            />
           <View style={styles.list}>
              {this.renderItems()}
           </View>
       </View>
    );
}

Na sequência do anúncio na quarta-feira (28/01/2015), Christopher Chedeau (Desenvolvedor de software no Facebook) fez uma palestra inusitada intitulada "A Deep Dive into React Native (Um mergulho profundo no React Native)". Nessa palestra Christopher identificou três áreas que o React Native pode melhorar a experiência no desenvolvimento de aplicações em relação a abordagem web ou nativa:

1. Manipulação do toque - aplicações móveis construídas sobre tecnologias como HTML5/JavaScript são frequentemente criticados por não parecerem responsivos - evitando essas tecnologias em favor da renderização nativa, o React Native pode parecer mais responsivo;
2. Componentes Nativos - componentes escritos em HTML5/JavaScript frequentemente são insuficientes quando comparados aos componentes nativos e 'nunca parecem tão bons quanto os nativos', o React Native evita isso fornecendo acesso aos componentes de interface do usuário nativos;
3. Estilo e Layout - as aplicações em iOS, Android e baseadas na web, todas tem diferentes mecanismos para aplicar os estilos e layout. O React Native fornece um mecanismo simples e consistente para aplicar os estilos e layout em todas as plataformas móveis (com um motor de layout baseado no FlexBox).

Comentado em uma discussão sobre o anúncio no Hacker News, Peter Hung (contribuidor no React) forneceu uma visão sobre o funcionamento interno do React Native:

• Motor JS em uma thread em segundo plano;
• Comunicação em lote, protocolo de mensagens assíncronas para um servidor nativo (objc ou android) executando na thread principal (basicamente create_view(), update_view(), destroy_view(), on_event(), entre outros);
• Plugin para o React que entende esse protocolo;
• Ferramentas para tornar o desenvolvimento multi-plataformas um pouco mais fácil (componente de texto padrão, sistema de layout flexbox multi-plataforma);
• Concebido para tirar vantagem sobre views nativas, não para ser o próximo Java Swing.

Mais informações sobre o Reactive Native podem ser encontradas em http://facebook.github.io/react-native/.