Prototipagem com React VR
As vantagens do React e seu ecossistema multiplataforma
No AirBnB, usamos React para criar interfaces de usuário para o nosso site desde 2014. O React mudou radicalmente a nossa abordagem para a criação de UI, e fomos colaboradores ativos da comunidade de código aberto com projetos como Enzyme, Hypernova, react-sketchapp, react-with-styles, react-dates, e react-native-maps.
O React VR proporcionou uma oportunidade única para aproveitar nossa experiência para testar e iterar rapidamente muitas das idéias que temos sobre VR. Para fazer isso, reunimos uma pequena equipe de especialistas em React e VR no nosso laboratório de VR do Samara no AirBnB, para ver o que poderíamos realizar nas 3 semanas que antecederam o lançamento do React VR no F8. Aqui está uma visão geral da tecnologia que impulsiona o React VR e as semelhanças entre React, React Native e React VR.
E porque React?
Uma das maiores inovações que React permite aos desenvolvedores, é descrever um sistema, seja uma UI de uma aplicação web ou aplicativo móvel, como um conjunto de componentes declarativos. O poder desta abordagem declarativa é que a descrição da UI é desacoplada da sua implementação, permitindo que os autores criem “renderizadores” personalizados que visem mais plataformas do que apenas navegadores da Web, como hardware, aplicativos de terminal, sintetizadores de música e Sketch.app.
React, como um paradigma, é perfeito para abstrair a complexidade das APIs de plataformas subjacentes e fornecer ferramentas consistentes e suaves aos desenvolvedores que as usam.
- Jon Gold, “Painting with Code” http://airbnb.design/painting-with-code
Abrindo o capô do React Native
Porque o React VR é construído em cima do React Native, vamos começar abrindo o capô do React Native e verificando como ele funciona. O React Native é construído em um renderizador que controla a UI nativa no iOS e no Android. O código da aplicação React é executado em uma máquina virtual JavaScript em uma thread em segundo plano no dispositivo móvel, deixando a thread principal livre para renderizar a UI nativa. O React Native fornece uma ponte para a comunicação entre a camada nativa e a camada de JavaScript do aplicativo. Quando os componentes React na sua aplicação são renderizados, o renderizador do React Native serializa todas as mudanças de UI que precisam acontecer em um formato baseado em JSON e enviam esses dados de forma assíncrona através da ponte criada. A camada nativa recebe e deserializa essa requisição, atualizando a UI nativa de acordo com os dados.
No ano passado, no AirBnB, investimos fortemente em React Native porque reconhecemos o poder de compartilhar conhecimento, engenheiros e código entre plataformas. Em Novembro, lançamos nossa nova plataforma, Experiences, que está em grande parte escrita em React Native em nossos aplicativos iOS e Android, e formamos uma equipe de infra-estrutura de React Native, em tempo integral para continuar esse investimento.
Aprenda uma vez, escreva em qualquer lugar.
- Tom Occhino, React Native: Bringing modern web techniques to mobile
React VR é construído com React Native
A arquitetura do React VR reflete a do React Native, com o código do aplicativo React sendo executado em um thread em segundo plano — neste caso, um Web Worker no navegador web. Quando os componentes React da aplicação são renderizados, o React VR utiliza a ponte do React Native para serializar as alterações necessárias da UI e passá-las para a thread principal, que neste caso é a thread de execução principal do JavaScript no navegador. Aqui, o React VR utiliza uma biblioteca criada pela Oculus, chamada OVRUI, para traduzir os dados e atualizações pendentes da UI em comandos Three.js, representando uma cena 3D usando o WebGL.
Finalmente, o React VR utiliza a nova aplicação navigator.getVRDisplays() da WebVR para enviar a cena 3D para o monitor montado na cabeça do usuário, como um Oculus Rift, HTC Vive ou Samsung Gear VR. WebVR, um novo padrão liderado pela Mozilla, é suportado nas versões recentes dos principais navegadores da Web. Confira webvr.info para obter as informações e suporte de navegadores.
Como o React VR implementa muitas das mesmas APIs públicas que o React Native implementa, temos acesso ao mesmo vasto ecossistema de padrões, bibliotecas e ferramentas. Ele será familiar para qualquer desenvolvedor que criou aplicativos React ou React Native. Conseguimos obter um protótipo VR em funcionamento rapidamente; Em pouco tempo, nós construímos uma aplicação de React básica, configuramos o Redux e começamos a usar a nossa API JSON de produção para dados de amostra.
Com o hot module reloading e a debugging com Chrome DevTools, nós iteramos quase tão rápido quanto no desenvolvimento com React na web ou React Native, o que nos permitiu criar várias idéias de UI na parede proverbial para ver no que dava.
Usar o React (JavaScript) resultou em uma grande vantagem para o desenvolvimento de aplicativos VR, mais do que eu esperava — O desenvolvimento de UI é bem mais rápido do que o Unity.
- John Carmack, Oculus CTO e criador original do Quake.
Flexbox em VR
React VR herda o mecanismo de layout e design baseado em Flexbox do React Native, com alguns ajustes para permitir transformações em 3 dimensões.
O suporte para Flexbox no React Native é fornecido pela Yoga, um mecanismo de layout multiplataforma criado pelo Facebook para simplificar o desenvolvimento de dispositivos móveis ao traduzir as diretrizes do Flexbox em medidas de layout. Como está escrito em C, Yoga pode ser incorporado de forma nativa em aplicativos móveis em Objective-C e Java. React VR também usa Yoga para layouts em flexbox.
“Mas como?”, você pergunta: “Está escrito em C!”. A equipe do React VR realizou isso usando o Emscripten para compilar de uma forma que o código Yoga em C, seja compilado em JavaScript. Bem maneiro, né?
Esta é uma característica poderosa do React VR: os desenvolvedores podem usar o mesmo estilo e sistema de layout em toda a web, React Native e VR, o que abre as portas para compartilhar diretamente estilos de layout em todas essas plataformas.
Compartilhando primitivos
Assim como React Native, React VR fornece um conjunto de primitivos básicos para serem usados para construir UI — , , , Stylesheet — além da adição de suas próprias primitivas específicas de VR, como e , além de outros. Isso nos permitiu usar alguns de nossos componentes React Native existentes, em VR, renderizados em uma superfície 2D.
Isso é extremamente empolgante porque construímos o nosso sistema de componentes de UI, através do react-primitives, uma biblioteca que desenvolvemos para compartilhar componentes React, disponibilizando os básicos , , etc, primitivos em uma variedade de plataformas, incluíndo web, nativo e Sketch.app (através do nosso projeto react-sketchapp).
Isso significa que podemos usar os botões, linhas, ícones e muito mais diretamente em VR, mantendo o idioma de design Airbnb consistente, sem ter que reescrever tudo a partir do zero.
Confira a palestra do engenheiro Leland Richardson no React Europe para conhecer mais sobre react-primitives:
<CylindricalLayer />
Como você poderia imaginar, colocar conteúdo 2D em um plano espaço 3D, muitas vezes, não possui uma ótima experiência de visualização. Atualmente, muitos aplicativos de VR solucionam isso, fazendo com que a interface do usuário 2D se encontre em um plano cilíndrico curvado na frente do visualizador, dando-lhe uma sensação de “2.5D”.
React VR disponibiliza o componente para isso, que achamos bem eficaz para exibir menus e outros conteúdos interativos em nosso aplicativo e foi a maneira perfeita de integrar os componentes 2D React existentes da nossa biblioteca UI no ambiente VR.
Com a capacidade de alavancar o nosso sistema existente de conhecimento, ferramentas e sistema de componentes UI, nós conseguimos ser produtivos no React VR quase que imediatamente. Junte isso com a magia do hot module reloading, o que nos permitiu ajustar a orientação dos objetos no espaço 3D e receber feedback instantâneo de alguém imerso no ambiente VR, conseguimos gerar um grande número de protótipos de baixa fidelidade, testá-los com os usuários, e rapidamente aprender quais de nossas idéias deram certo em VR e quais não.
E esse tipo de experimentação ampla é necessária para pessoas que mergulharem primeiro no desenvolvimento de VR — encontramos, uma vez ou outra, que uma idéia de UX que soa bem no papel pode muito bem sentir-se estranha quando o fone de ouvido VR está ativado e muitas das metáforas da UI que funcionam bem em 2D não se traduzem bem em 3D. Uma das principais soluções do nosso sprint de 3 semanas foi que devemos começar a desenvolver uma nova compreensão das práticas recomendadas de UX para a VR, e só podemos usar o que aprendemos em web e aplicativos como fallback, de forma limitada. Felizmente, há pesquisadores que criaram esses novos caminhos, como as pessoas que estão por trás da UX da VR, e podemos aprender com seu trabalho árduo.
Também é importante notar que o hardware React VR, WebVR e VR são tecnologias bem recentes. A instabilidade inerente ao trabalho de vanguarda pode tornar o processo de desenvolvimento frustrante. Por outro lado, é incrivelmente excitante a rapidez com que o ecossistema está progredindo, e React VR, em particular, amadureceu rapidamente nos três meses desde que usamos a versão pré-lançamento para nossa prototipagem.
Por último, gostaríamos de agradecer as equipes do Facebook e Oculus que nos apoiaram durante esta exploração e estamos animados em contribuir e ajudar a avançar essa plataforma!
Créditos
- Prototyping with React VR, escrito originalmente por spikebrehm
