17 de abr de 2018

React Native do zero ao profissional: como funciona e como aprender esta tecnologia

Udacity Brasil

O uso de dispositivos móveis vem crescendo numa velocidade surpreendente e, com ela, há também um grande avanço nas tecnologias utilizadas neles. Neste artigo, você aprenderá os principais conceitos e vantagens de uma dessas ferramentas, o React, e porque vale a pena aprender React Native, sua versão para aplicativos mobile.

O que é React?

React é uma biblioteca escrita em JavaScript, desenvolvida e disponibilizada pelo Facebook para criação de interfaces gráficas. O projeto é de código aberto, disponível no GitHub e mantido por milhares de desenvolvedores ao redor do mundo que contribuem de forma voluntária com o projeto.

Por sua vez, o React Native é a versão dessa biblioteca para ser utilizada em dispositivos móveis. A mesma permite a criação de aplicativos com interface nativa utilizando apenas JavaScript. Além disso, o código criado não é convertido para linguagens nativas e sim entendido pelo dispositivo móvel através de uma ponte criada pelo React Native entre o código nativo e o JavaScript.

Essa abordagem faz com se possa gerar aplicações nativas tanto para plataforma Android quanto para iOS sem a necessidade da escrita de dois códigos diferentes.

Mais detalhes sobre como o React funciona podem ser encontrados neste artigo aqui: React: o que é e como funciona essa ferramenta?

React vs JavaScript

JavaScript é uma linguagem de programação bastante popular na web sendo, em março de 2018, a oitava linguagem mais utilizada no mundo segundo o índice Tiobe. React é uma biblioteca escrita em JavaScript e usada para construção de interfaces gráficas.

Dado que React é escrito em JavaScript, ao escrever aplicações usando essa tecnologia você estará escrevendo código JavaScript – daí a importância de conhecer esta linguagem.

Isso não significa que você precisa dominar JavaScript antes de começar com React: você pode aprender as duas coisas em conjunto. Porém, se já conhece a linguagem, provavelmente terá mais facilidade no aprendizado.

Inscreva-se na newsletter da Udacity e fique por dentro das novidades

React vs AngularJS vs Vue.JS

O AngularJS é um Framework MV (suporta as camadas Model e View e deixa você livre para escolher qual arquitetura prefere) para desenvolvimento do front-end de aplicações web que estendem o vocabulário HTML para uso em páginas dinâmicas.

Com essa breve descrição podemos ver que AngularJS e React tem funções similares, embora sejam bastante diferentes. O AngularJS é um framework e abrange muitas outras funções, além das que o React, que é uma biblioteca, se propõe, inclusive por cobrir duas camadas (Model e View) enquanto o React é apenas View.

Apesar disso, o React oferece uma melhor performance devido à implementação de um DOM virtual. Este link fala mais sobre isso e faz uma boa comparação entre eles.

React e Vue.JS também compartilham muitas similaridades. Ambos utilizam a abordagem de DOM virtual e provêm componentes visuais reativos e combináveis. Ao mesmo tempo, existem certas diferenças entre as duas ferramentas.

Por exemplo, muitos desenvolvedores mencionam sua ampla infraestrutura de suporte e muitas ferramentas de visualização entre os benefícios do uso do React. Além disso, os desenvolvedores de aplicativos da web dizem que o React Native é mais simples de usar para criação de aplicativos.

Infográfico mostra as principais diferenças entre Angular e React

React, Flux, Redux, MobX?

React fornece soluções nativas para comunicação entre componentes que têm alguma ligação hierárquica. Porém, para fazer a comunicação entre componentes distantes um do outro, você precisa criar seu próprio sistema de gerenciamento de estado ou utilizar uma solução pronta, como Flux, Redux ou MobX.

Como toda tecnologia, cada uma dessas bibliotecas traz suas vantagens e desvantagens. Não existe uma solução definitiva para gerenciamento de estado: a escolha depende do tipo de aplicação que você está desenvolvendo e das habilidades de seu time.

Na maioria dos projetos, muitas vezes o uso de uma biblioteca de gerenciamento de estado não é necessário. Por isso, sempre avalie se seu projeto precisa mesmo adicionar a complexidade de ter outra biblioteca ou se o React já resolve seu problema.

Este post no GitHub traz uma boa discussão sobre o assunto e este aqui explica como verificar uma biblioteca desse tipo é mesmo necessária em seu projeto.

Quem usa React?

O React tem se popularizado cada vez mais e uma lista atualizada dos maiores nomes que usam a biblioteca pode ser acessada aqui. Seus principais nomes hoje em dia são:

  • Facebook
  • Instagram
  • Skype
  • Airbnb
  • Walmart

E por que saber quem usa React importa? Para pensar no futuro de sua carreira. Quando grandes empresas como essas fazem uso de uma tecnologia, isso pode impulsionar sua adoção por parte de várias outras companhias e gerar demanda por pessoas capacitadas na área.

Atualmente, tornar-se um desenvolvedor React pode ser um bom caminho para avançar na carreira como desenvolvedor front-end – seja no Facebook, onde React surgiu, ou em qualquer outro lugar.

Leia: UX e UI: quais são as maiores diferenças entre esses campos?

Quais são as vantagens de React Native

Além das vantagens já citadas – principalmente rapidez e facilidade de desenvolvimento –, é bom destacar que React evita que se tenha que escrever código nativo para as duas plataformas (Android e iOS). Isso diminui o custo final do trabalho.

Também podemos listar outras vantagens significativas no desenvolvimento baseado em React Native:

1. Desenvolvimento modularizado e que permite reuso de componentes

O React Native trabalha com componentes. Cada uma das nossas telas é um componente que possui subcomponentes, comportamentos e atributos próprios.

Com a tecnologia, também é possível criar seus próprios componentes, estender os componentes-padrões e assim permitir componentes customizados para as necessidades do seu software. Existem ainda inúmeros componentes prontos criados por usuários e disponíveis na internet através de plugins.

2. Processo de compilação mais rápido

No desenvolvimento nativo, a compilação dos projetos geralmente é um processo demorado. O React Native utiliza uma abordagem chamada "Live Reload" para resolver este problema, através de uma ferramenta chamada Expo que usa um servidor local para facilitar e agilizar o acesso ao aplicativo.

3. É baseado no React, o que significa que há uma grande comunidade online

Uma rápida busca por tutoriais (como "React Redux tutorial" ou "React Native Tutorial") e plugins trará uma infinidade de opções dada a comunidade ativa e a popularidade desse framework.

4. Cria aplicativos com excelente performance para Android e iOS

Um dos maiores problemas dos frameworks híbridos atuais é a performance desses aplicativos pois os mesmo geralmente rodam em um navegador encapsulado dentro de um aplicativo. Ou seja, quando acessamos um aplicativo híbrido no celular, na realidade estamos acessando um site que está armazenado dentro do dispositivo.

O React Native possui uma outra abordagem para resolver este problema: o desenvolvedor programa em código JavaScript e quando o framework gera os aplicativos, ele converte este código para código nativo. Isso significa que os aplicativos gerados pelo React Native são idênticos aos aplicativos gerados utilizando as ferramentas nativas.

Isto torna o React Native uma das ferramentas híbridas com maior desempenho do mercado.

5. Oferece uma experiência nativa para o usuário final

Dado que o mesmo converte o código para a plataforma nativa, conforme explicado no item anterior, a experiência para o usuário é nativa.

6. Seu desenvolvimento é misto

Com o React Native não é preciso recriar aplicações do zero para começar: ele pode ser facilmente integrado em aplicações existentes para o desenvolvimento de novas funções ou ajustes de funcionalidades.

7. É compatível com bibliotecas

A grande maioria das bibliotecas JavaScript existentes são compatíveis com o React, o que proporciona ainda mais recursos aos desenvolvedores.

Todas essas características tornam o desenvolvimento com o uso de React Native bastante fluido e a curva de aprendizado costuma ser bastante rápida.

Leia: O que Facebook e HubSpot buscam em profissionais de tecnologia

Desenvolver para Android e iOS dá dinheiro?

Segundo uma pesquisa realizada pelo Instituto Brasileiro de Geografia e Estatística (IBGE), desde 2014 a quantidade de smartphones nos domicílios brasileiros é maior que a quantidade de computadores.

Outros setores do mercado acompanham esse crescimento. De acordo com o site Congresso Mobile, por exemplo, a previsão de investimento em publicidade para mobile no Brasil era de 1 bilhão de dólares em fevereiro de 2016 – e este valor pode ultrapassar 2,5 bilhões de dólares até 2018.

Esse comportamento é o mesmo no mundo todo e naturalmente se reflete na demanda empregatícia na área de programação.

Uma pesquisa realizada pela trampos.co em parceria com a Umbler aponta que os desenvolvedores mobile já correspondem a 10% das oportunidades de programação na plataforma.

E a tendência é que programadores da área sejam cada vez mais requisitados para explorar um mercado que deseja mais apps. Por ser uma área em ascensão, o salário de desenvolvedor React também tem variado bastante – mas são superiores ao salário de desenvolvedor back-end, por exemplo, segundo a média do site LoveMondays.

Além disso, entre dezembro de 2014 e dezembro de 2015, houve um aumento de 40% no número global de instalações de aplicativos desenvolvidos por brasileiros. O ritmo foi superior ao de mercados com maior tradição em apps, como EUA, Alemanha e Inglaterra. Em resumo, o mercado brasileiro está cada vez melhor e mais aquecido.

Todos esses fatos deixam claro o momento do mercado em relação ao desenvolvimento mobile. Consequentemente, o espaço para desenvolvedores React também cresce bastante.

Para quem quer saber mais sobre o panorama profissional do Brasil e comparações com o resto do mundo, a Udacity oferece um webinar gratuito: O mercado de React no Brasil.

4 passos para aprender a programar em React

Agora que você já sabe o que é React e ficou interessado em aprender um pouco mais, segue abaixo algumas dicas de como começar o aprendizado:

1. Comece com o básico e não se desespere

Isso serve não só para o React como para qualquer novo assunto a ser aprendido – uma nova linguagem, uma nova biblioteca, um novo framework. Geralmente queremos avançar muito rápido, já pensando num projeto grande que exige muito esforço. Começar com pequenas coisas vai fazer com que você atinja suas metas e tenha pequenas conquistas. Isso te deixará motivado para continuar.

Começe com o velho conhecido "Hello, world" a vá avançando no código aos poucos. Além disso, não tente entender conceitos complexos logo de cara e esqueça os nomes estranhos que você vê como Redux, Sagas, Thunk, Flux, Flow, etc, etc, etc… Você não precisa desses conceitos agora e no começo todas essas possibilidades vão mais atrapalhar que ajudar.

2. Tenha um plano de estudos

Antes de começar a estudar e consumir os materiais, livros, posts e vídeos sobre o assunto, trace seu plano de estudos. Você pode fazer isso pesquisando sobre quais tópicos você precisa aprender, os termos mais citados, capítulos de livros ou cursos que possam ser úteis.

O importante é que você saiba onde quer chegar e qual o caminho seguirá. Defina metas alcançáveis e coloque a mão na massa desenvolvendo um projeto prático. Se esse projeto for de alguma forma ter utilidade para você no futuro, melhor ainda! Com certeza você ficará mais motivado em seguir em frente. Cuidado apenas com o tamanho desse projeto: seja realista e cresça aos poucos.

3. Busque mentoria e apoio

É fácil se perder na grande quantidade de informações, artigos e tutoriais presentes na internet e buscar mentoria significa ter ajuda para se organizar e inclusive para traçar o seu plano de estudos.

Uma pessoa que já tenha conhecimento de React, por exemplo, com certeza saberá indicar quais tópicos são mais importantes e poderá validar se o caminho traçado por você está na direção certa.

O tipo dessa mentoria pode variar e mentores podem ser professores, amigos, colegas de trabalho ou outras pessoas em um curso React ou curso de React Native. A comunidade mantenedora da tecnologia também é de grande ajuda nesse processo de aprendizagem.

Aqui, desenvolvedores React iniciantes tem um ponto bastante positivo: segundo a pesquisa StackOverflow Survey 2018, React é a segunda tecnologia mais amada pelos desenvolvedores, que são bastante ativos em fóruns e outros canais de discussão e podem tirar dúvidas e dar conselhos.

Isso é muito importante, pois é preciso se sentir bem com a tecnologia escolhida para trabalhar de maneira otimizada em seus projetos e aprender cada vez mais rápido. Falando ainda de motivação, este artigo traz 8 razões para aprender React.

4. Aprenda de maneira estruturada

Se você já possui alguma experiência com JavaScript, HTML e CSS e quer dar o próximo passo em sua carreira, conheça o programa Nanodegree Desenvolvedor React da Udacity. Ao longo de quatro meses, você se tornará proficiente nessa tecnologia e aprenderá React, Redux e React Native do zero ao profissional.

Experimente aprender com um curso estruturado, focado em aprendizados por projetos e que tem mentores e revisores especialistas no assunto para auxiliá-lo em seu desenvolvimento!

Leia: As linguagens de programação mais populares do momento, por indústria

Sobre o autor
Udacity Brasil

A Udacity, conhecida como a "Universidade do Vale do Silício", é uma plataforma online e global que conecta educação e mercado para ensinar as habilidades do futuro – de data science e marketing digital à inteligência artificial e desenvolvimento. Hoje, há mais de 7 mil alunos ativos no país e 50 mil pelo mundo.