React Native no desenvolvimento de aplicativos para dispositivos móveis
Sobre mim
- Formação em Sistemas para Internet pela Unifacs
- Pós-graduação em Componentes Distribuídos pela Ruy Barbosa
- Desde 2009 trabalhando com web (PHP, MySQL, Apache, Nginx, Wordpress, Elgg, Slim, CodeIgniter, CakePHP...)
- Desde 2012 com mobile (Cordova, Sencha Touch, Objective-C, Java, React Native)
- SetWeb, ConvergenceWorks, App2Sales, Editora Sanar.
Sobre mim

React Salvador

React Brasil

ReactSSA

lucianomlima

React Native Brasil
ReactJS e React Native
Biblioteca criada pelo Instagram para viabilizar o uso de componentes na interface de aplicações web.
V-DOM
ReactJS e React Native
Biblioteca criada pelo Instagram para viabilizar o uso de componentes na interface de aplicações web.
V-DOM
Composição de componentes
ReactJS e React Native
Biblioteca criada pelo Instagram para viabilizar o uso de componentes na interface de aplicações web.
V-DOM
Composição de componentes
JSX
ReactJS e React Native
Biblioteca criada pelo Instagram para viabilizar o uso de componentes na interface de aplicações web.
V-DOM
Composição de componentes
JSX
O V do MVC
ReactJS e React Native
Framework para criação de aplicativos para dispositivos móveis (celulares, tablets, TVs) que usa o JavaScript como linguagem de programação.
V-DOM -> Bridge
Composição de componentes
JSX
O V do MVC
ReactJS e React Native
Framework para criação de aplicativos para dispositivos móveis (celulares, tablets, TVs) que usa o JavaScript como linguagem de programação.
V-DOM -> Bridge
Composição de componentes
JSX
O V do MVC
Views nativas de cada SO
React Native
// ReactJS
<div></div>
<p></p>, <span></span>
<img />
<ul><li></li></ul>
<input />
<button></button>
// React Native
<View>
<Text>
<Image>
<ListView>, <FlatList>
<TextInput>
<Button>
<TouchableHighlight>
<TouchableOpacity>
<TouchableNativeFeedback> * Android
<TouchableWithoutFeedback>

Comparação
Ionic
- Cordova (WebView) = HTML + CSS + JavaScript
- Suporte maior a plataformas
- Pode-se desenvolver testando no browser
- Performance prejudicada para apps complexos
- Diferença na renderização de acordo com a plataforma
Comparação
Xamarin (Microsoft)
- OpenSource
- Linguagem C#
- Performance nativa
- Necessidade de aprender a usar o Visual Studio, C#, Xamarin e o seu ecosistema
- Comunidade e documentação menor
Comparação
NativeScript (Telerik)
- JavaScript -> Native Code
- XML para template
- Suporta Windows Phone
- Performance nativa
- Pode-se usar Angular2 + TypeScript
- Comunidade pequena (projeto de 2010)
- Documentação, tutoriais e casos de uso escassos
React Native - Vantagens
- JavaScript como linguagem de programação
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
- Simplifica a busca por desenvolvedores
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
- Simplifica a busca por desenvolvedores
- Curva de aprendizado reduzida
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
- Simplifica a busca por desenvolvedores
- Curva de aprendizado reduzida
- Produtividade multiplataforma
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
- Simplifica a busca por desenvolvedores
- Curva de aprendizado reduzida
- Produtividade multiplataforma
- Performance de aplicativo nativo
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
- Simplifica a busca por desenvolvedores
- Curva de aprendizado reduzida
- Produtividade multiplataforma
- Performance de aplicativo nativo
- Desenvolvimento baseado em componentes
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
- Simplifica a busca por desenvolvedores
- Curva de aprendizado reduzida
- Produtividade multiplataforma
- Performance de aplicativo nativo
- Desenvolvimento baseado em componentes
- Maior reutilização de código
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
- Simplifica a busca por desenvolvedores
- Curva de aprendizado reduzida
- Produtividade multiplataforma
- Performance de aplicativo nativo
- Desenvolvimento baseado em componentes
- Maior reutilização de código
- Comunidade ativa e em crescimento
React Native - Vantagens
- JavaScript como linguagem de programação
- CSS para estilização
- NPM / Yarn para gerenciamento de dependências
- Simplifica a busca por desenvolvedores
- Curva de aprendizado reduzida
- Produtividade multiplataforma
- Performance de aplicativo nativo
- Desenvolvimento baseado em componentes
- Maior reutilização de código
- Comunidade ativa e em crescimento
- Suporte do Facebook
React Native - Desvantagens
- Ainda está em desenvolvimento
React Native - Desvantagens
- Ainda está em desenvolvimento
- Aprender o React way
React Native - Desvantagens
- Ainda está em desenvolvimento
- Aprender o React way
- Aplicativos maiores
React Native - Desvantagens
- Ainda está em desenvolvimento
- Aprender o React way
- Aplicativos maiores
- Necessidade de desenvolver código nativo
React Native - Desvantagens
- Ainda está em desenvolvimento
- Aprender o React way
- Aplicativos maiores
- Necessidade de desenvolver código nativo
- Uso de muitas dependências externas
React Native - Desvantagens
- Ainda está em desenvolvimento
- Aprender o React way
- Aplicativos maiores
- Necessidade de desenvolver código nativo
- Uso de muitas dependências externas
- Liberdade para estruturar aplicações
React Native - no Brasil






React Native - no Brasil




React Native - Showcase




Facebook ADS Manager

Facebook Analytics
React Native - Showcase
Skype
Uber
Walmart
Discord
Wix





Obrigado!
Linguágil 2018
By Luciano Lima
Linguágil 2018
Por que o React Native é uma boa escolha como ferramenta de criação de apps para dispositivos móveis.
- 800