{"id":3009,"date":"2020-03-09T22:57:25","date_gmt":"2020-03-10T01:57:25","guid":{"rendered":"https:\/\/www.itexto.com.br\/devkico\/?p=3009"},"modified":"2020-03-09T22:57:30","modified_gmt":"2020-03-10T01:57:30","slug":"explorando-o-react-native","status":"publish","type":"post","link":"https:\/\/devkico.itexto.com.br\/?p=3009","title":{"rendered":"Explorando o React Native"},"content":{"rendered":"\n

React Native \u00e9 uma das tecnologias que mais me empolgaram nos \u00faltimos tempos. Neste post conto pra voc\u00eas minha experi\u00eancia de aprendizado, o que gostei e tamb\u00e9m o que n\u00e3o gostei tanto.<\/p>\n\n\n\n

Tamb\u00e9m aproveito pra lhes mostrar nosso novo projeto: o “\/dev\/All Mobile”.<\/p>\n\n\n\n

Como cheguei no React Native<\/h2>\n\n\n\n

Era quest\u00e3o de tempo: se voc\u00ea ouviu o \u00faltimo podcast da itexto<\/a>, React era uma das tecnologias que j\u00e1 estavam em nosso radar por um tempo. O interessante \u00e9 que quem estava no radar de fato era o React, n\u00e3o o React Native. Sendo assim come\u00e7o pelo primeiro.<\/p>\n\n\n\n

Come\u00e7ou pelo React<\/h3>\n\n\n\n
\"Resultado<\/figure><\/div>\n\n\n\n

Na itexto<\/a> quando o assunto \u00e9 front-end somos uma equipe bastante ecl\u00e9tica: sempre aparece um framework que n\u00e3o conhecemos vindo de um sistema legado que precisamos evoluir, o que implica em aprender como este opera, dominar suas entranhas e inclu\u00ed-lo em nosso cinto de utilidades. <\/p>\n\n\n\n

Curiosamente React nunca havia aparecido, mas os clientes sempre comentavam a respeito. E dado que no mercado h\u00e1 hoje essencialmente tr\u00eas frameworks front-end (Angular, Vue.js e React), faltava esta pe\u00e7a em nossa caixa de ferramentas.<\/p>\n\n\n\n

Iniciamos ent\u00e3o nossa pesquisa para que pud\u00e9ssemos atender esta demanda quando chegasse. As pesquisas normalmente come\u00e7am por mim: neste caso fui a pessoa que iniciou o processo de levantamento bibliogr\u00e1fico, implementa\u00e7\u00e3o das primeiras provas de conceito (POCs) e escrita dos guias internos que guiar\u00e3o nosso aprendizado (preciso escrever sobre este processo um dia).<\/p>\n\n\n\n

O aprendizado do React<\/h3>\n\n\n\n

N\u00e3o foi f\u00e1cil<\/strong>: na realidade foi o framework mais dif\u00edcil que aprendi at\u00e9 agora<\/strong>. E confesso a voc\u00eas que ficou muito mais dif\u00edcil de aprender devido ao fato de j\u00e1 dominarmos Vue.js e Angular. Minha impress\u00e3o \u00e9 que enquanto nestes frameworks mesclamos JavaScript nos templates, no React o oposto \u00e9 que ocorre: o template HTML entra no JavaScript<\/em>. E a primeira impress\u00e3o foi simplesmente p\u00e9ssima.<\/p>\n\n\n\n

(determinismo lingu\u00edstico<\/a> puro)<\/p>\n\n\n\n

A primeira impress\u00e3o que tinha do React \u00e9 que o c\u00f3digo abaixo parecia uma gambiarra terr\u00edvel!<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

\u00c9 incr\u00edvel como o preconceito t\u00e9cnico opera. Levei semanas<\/strong> pra conseguir aceitar o JSX (esta sintaxe na qual voc\u00ea inclu\u00ed o template HTML no JavaScript (ou TypeScript)). Entender que aquelas tags na realidade eram c\u00f3digo JavaScript foi algo muito dif\u00edcil neste primeiro contato. Eu simplesmente n\u00e3o conseguia ler este c\u00f3digo. E pra piorar as coisas, tomei o caminho errado no aprendizado.<\/p>\n\n\n\n

Meu grande erro<\/strong> foi ter come\u00e7ado pelo tutorial<\/a> presente no site oficial do React. Se voc\u00ea est\u00e1 come\u00e7ando s\u00f3 tenho um conselho para lhe dar: ignore este tutorial<\/strong>. Voc\u00ea simplesmente vai escrevendo o c\u00f3digo que v\u00e3o te passando e no final tem um jogo da velha. O problema \u00e9 que finalizado o tutorial, eu at\u00e9 conseguia modificar o c\u00f3digo e brincar com ele, mas ainda n\u00e3o entendia como o React funcionava.<\/p>\n\n\n\n

Foi quando resolvi prestar aten\u00e7\u00e3o nos links que estavam na se\u00e7\u00e3o “Principais Conceitos”…<\/p>\n\n\n\n

\"\"
COMECE POR AQUI, N\u00c3O POR AQUELE TUTORIAL S\u00c1DICO!!!<\/figcaption><\/figure><\/div>\n\n\n\n

Segue ent\u00e3o a dica pra quem est\u00e1 come\u00e7ando. Comece pelo primeiro link<\/a> do guia “Principais Conceitos” e siga de cima pra baixo. Se voc\u00ea j\u00e1 tiver experi\u00eancia com outros frameworks, minha sugest\u00e3o \u00e9 outra: comece pelo \u00daLTIMO link: Pensando do jeito React<\/a>.<\/p>\n\n\n\n

ESTE \u00e9 o caminho. Ali \u00e9 que voc\u00ea vai entender a fundo como o JSX funciona (e ele ir\u00e1 imediatamente deixar de lhe parecer estranho, como m\u00e1gica!), como pensar de fato como componentes, lidar com eventos, entender o conceito de state e todo o resto para que finalmente voc\u00ea possa iniciar suas primeiras provas de conceito.<\/p>\n\n\n\n

Com isto implementei minha primeira prova de conceito: essencialmente reescrevi o front-end do \/dev\/All<\/a> em React. Aprendi muito ali, mas queria ver outros desenvolvedores programando. Ent\u00e3o comprei este curso no Udemy do Maximilian<\/a>. Valeu cada centavo (foi bem barato, 22 Reais se n\u00e3o me engano), por que vendo outra pessoa codificando com o framework me passou diversas dicas que aceleraram MUITO meu aprendizado, o que me possibilitou criar mais provas de conceito.<\/p>\n\n\n\n

A\u00ed o React Native caiu no meu colo<\/h3>\n\n\n\n

Um cliente muito especial me procurou e disse: “Kico, voc\u00ea pode dar manuten\u00e7\u00e3o em um app que fizeram pra n\u00f3s? Ele \u00e9 feito em um framework chamado expo<\/strong>…”.<\/p>\n\n\n\n

E o que era o tal do Expo<\/em>? Era o React Native!!!<\/p>\n\n\n\n

Meu processo de aprendizado neste caso foi muito mais r\u00e1pido<\/strong>. Em uma semana j\u00e1 estava produtivo. Segui uma metodologia um pouco diferente: desta vez li toda<\/strong> a documenta\u00e7\u00e3o do Expo (falarei sobre ele mais \u00e0 frente) e, na sequ\u00eancia, a do React Native. E a\u00ed, sabem o que fiz? Comprei o outro curso do Maximilian de React Native que voc\u00ea pode acessar neste link<\/a>.<\/p>\n\n\n\n

O resto \u00e9 hist\u00f3ria, mas antes \u00e9 importante que ataque um mito aqui.<\/p>\n\n\n\n

O mito que pode destruir sua experi\u00eancia de aprendizado do React Native<\/h3>\n\n\n\n

“React \u00e9 uma coisa, React Native \u00e9 outra. S\u00e3o coisas completamente diferentes”<\/p>Senhor Cruel<\/cite><\/blockquote>\n\n\n\n

\"Resultado<\/figure><\/div>\n\n\n\n

Voc\u00ea n\u00e3o vai conseguir aprender React Native se n\u00e3o souber o essencial do React. Os mesm\u00edssimos princ\u00edpios que aprendi s\u00e3o fundamentais para se aprender React Native. A diferen\u00e7a est\u00e1, em sua ess\u00eancia, naquilo que \u00e9 renderizado.<\/p>\n\n\n\n

Ent\u00e3o n\u00e3o caia nesta: React Native \u00e9 uma aplica\u00e7\u00e3o do React, logo voc\u00ea tem de saber a base.<\/p>\n\n\n\n

O que amei no React Native<\/h2>\n\n\n\n
\"Resultado<\/figure><\/div>\n\n\n\n

A solu\u00e7\u00e3o arquitetural do React Native<\/h3>\n\n\n\n

Uma das coisas que mais me impressionou no React Native (RN) foi a beleza da solu\u00e7\u00e3o. \u00c9 o mesmo React que aprendi para escrever aplica\u00e7\u00f5es web, usando o mesmo JSX que aprendi a entender. No entanto a diferen\u00e7a est\u00e1 no qu\u00ea<\/strong> \u00e9 renderizado.<\/p>\n\n\n\n

Enquanto no React renderizo sempre tags HTML que ser\u00e3o renderizadas pelo navegador, aqui tenho algo diferente por\u00e9m muito familiar pra quem j\u00e1 programou aplica\u00e7\u00f5es desktop em Java usando SWT<\/a> (algu\u00e9m lembra disto?). No caso deste toolkit gr\u00e1fico (SWT), nossas classes que representam componentes visuais quando executadas renderizam widgets nativos do sistema operacional. Em teoria temos interfaces mais pr\u00f3ximas do usu\u00e1rio final e tamb\u00e9m mais responsivas.<\/p>\n\n\n\n

\"\"
SWT em a\u00e7\u00e3o no mundo Java<\/figcaption><\/figure><\/div>\n\n\n\n

No caso do React Native, temos um conjunto de componentes padr\u00e3o<\/a> que tamb\u00e9m s\u00e3o renderizados usando seus relativos nativos. Quando vi a lista dos componentes pela primeira vez fiquei chocado com qu\u00e3o poucos eram, mas conforme fui experimentando ficou n\u00edtido que com estas poucas primitivas eu poderia fazer praticamente qualquer coisa.<\/p>\n\n\n\n

Entre estes componentes e o sistema operacional nativo existe o que chamam de “JavaScript Bridge”: \u00e9 o componente arquitetural respons\u00e1vel por fazer este meio de campo e acessar as APIs de baixo n\u00edvel do sistema nativo. Naturalmente isto ir\u00e1 ter seu custo de desempenho, mas ao menos em teoria temos aqui uma solu\u00e7\u00e3o multi plataforma que nos oferece um desempenho superior ao do webview.<\/p>\n\n\n\n

Essencialmente o c\u00f3digo \u00e9 o mesmo que aquele que vimos no React, por\u00e9m com outras tags. Ao inv\u00e9s de <div>, temos o <View>, ao inv\u00e9s de <p>, temos <Text> e assim por diante… Sendo assim voc\u00ea escreve c\u00f3digo similar ao apresentado a seguir:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

O interessante destas abstra\u00e7\u00f5es \u00e9 que apesar delas serem voltadas inicialmente apenas para Android e iOS teoricamente podem ser aplicadas a qualquer plataforma. No link “Out-of-Tree platforms<\/a>” voc\u00ea pode ver algumas op\u00e7\u00f5es bastante interessantes, tais como Windows, macOS, Linux, tvOS… N\u00e3o s\u00e3o oficialmente suportadas, entretanto \u00e9 bom saber que elas existem.<\/p>\n\n\n\n

Desenvolvedores experientes entretanto reclamam que muitas vezes voc\u00ea precisar\u00e1 mesclar c\u00f3digo nativo ao do seu projeto. Ainda n\u00e3o ocorreu conosco, mas quando rolar, tenha certeza, ir\u00e1 ter post aqui contando a experi\u00eancia.<\/p>\n\n\n\n

O “tal do Expo<\/a>“<\/h3>\n\n\n\n
\"Resultado
Expo \u00e9 muito lindo!<\/figcaption><\/figure><\/div>\n\n\n\n

Quando voc\u00ea cria um novo projeto com React Native h\u00e1 dois caminhos a seguir:<\/p>\n\n\n\n