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

https://github.com/react-brasil/empresas-que-usam-react-no-brasil

https://github.com/react-brasil/showcase-app-react-native

React Native - Showcase

Facebook

Instagram

Pinterest

Facebook ADS Manager

Facebook Analytics

React Native - Showcase

Skype

Uber

Walmart

Discord

Wix

http://bit.ly/l2018_LL

Obrigado!

Linguágil 2018

By Luciano Lima

Made with Slides.com

Linguágil 2018

Por que o React Native é uma boa escolha como ferramenta de criação de apps para dispositivos móveis.

  • 702

More from Luciano Lima