Como desenvolvemos um App novo em apenas 16 dias

Antes de você ler essa história, preciso te explicar rapidamente o que é a Nutripad. A Nutripad é uma plataforma online para nutricionistas onde o mesmo não precisa mais entregar suas dietas em PDF ou impressas, se você já foi em um nutricionista sabe que geralmente funciona assim, ele desenvolve o plano alimentar do paciente e o paciente baixa o aplicativo da Nutripad e tem a dieta sempre em mãos. As vezes o paciente tem alguma dúvida e envia uma mensagem para o nutricionista, que responde pelo chat no aplicativo web.

Bem, muitos nutricionistas começaram a pedir um aplicativo para poderem: Ver sua agenda, marcar consultas e conversar com os seus pacientes.

Nosso aplicativo para os pacientes é nativo, Swift para iOS e Java para Android, testamos o Ionic e não gostamos por alguns motivos (não irei entrar em detalhes).


Começamos o desenvolvimento deste novo app para o nutricionista, porém desenvolver nativo é um trabalho duplo, não existe compartilhamento de código, afinal são duas linguagens diferentes. O tempo de desenvolvimento que este aplicativo levaria acabou nos fazendo dar prioridade a outras tarefas com um ROI maior.

Então em um belo dia, alguém me falou do React Native, pra você pode não ser novidade, mas pra mim era. Fiz o Getting Started da página e achei simplesmente fantástico. Vi ali uma ótima oportunidade de ter velocidade e um compartilhamento de código incrível e o melhor nativo!

Comecei a estudar a fundo como funcionava e decidi comprar um curso na Udemy para "pular" alguns passos desnecessários do aprendizado. Depois de ter feito o curso começamos a desenvolver o aplicativo para os nutricionistas como uma experiência com esta nova tecnologia e a experiência foi fantástica em apenas 16 dias nós tínhamos um aplicativo funcional, com chat e uma agenda simples para o nutricionista, mas era o que ele precisava para agora (e nós também).


Como tivemos esta ótima experiência, queria deixar aqui algumas vantagens de utilizar o React Native para seu próximo App.

  • A linguagem utilizada para desenvolver é Javascript. Sim, você não precisa de muito conhecimento em Swift/Objective C ou Java para desenvolver um app. É javascript, aquele que você já sabe. Aproveitamos para utilizar o ES6 (Gosto bastante deste link: https://github.com/alexmoreno/ES6-para-humanos/blob/master/readme.md), suas novidades são fantásticas.
  • Sua aplicação pode compartilhar até 100% do código. Porém escrever componentes específicos para Android ou iOS é muito simples. Você pode desde verificar em um ponto do app se a plataforma utilizada é android ou iOS, até mesmo criar um componente separado para as duas plataformas.
  • O facebook criou, continua desenvolvendo e o melhor, eles utilizam o React Native nos seus projetos. Isso é fantástico!
  • Eu nunca tinha feito um "Hello World" com ReactJS para web e mesmo assim a curva de aprendizado foi excelente. (O que me fez decidir a utilizar o ReactJS para os próximos projetos na WEB :) )
  • 100% dos serviços que utilizamos tinham suporte para o React native.
  • Por último, porém não menos importante, os Layouts. Se você já fez um App nativo sabe o quanto é um "pesadelo" desenvolver os layouts da sua app e o quanto este processo é lento. Com o React Native, você utiliza algo muito semelhante ao bom CSS que já conhecemos. Quer arredondar as bordas de uma View é simples, utilize um borderRadius. O suporte para flex também é excelente.

Em todas estas vantagens, vi algumas desvantagens, porém vale a pena utilizar:

  • É uma ferramenta relativamente nova, você pode não encontrar respostas para alguns erros no bom amigo do programador: O stackoverflow.
  • As releases podem vir com algumas "breaking changes", pois a versão ainda está na 0.41.

Se você ficou curioso sobre como ficou o app, segue algumas screenshots:

Aplicativo no iOS
Aplicativo no Android

Resumindo: React Native é um ótimo framework e pode agilizar muito o seu desenvolvimento da parte mobile.

Segue alguns links que nos ajudaram a dar este passo:

Getting started do React Native: https://facebook.github.io/react-native/docs/getting-started.html

The complete react native and redux course: https://www.udemy.com/the-complete-react-native-and-redux-course/learn/v4/

ES6 para humanos: https://github.com/alexmoreno/ES6-para-humanos/blob/master/readme.md

Encontre um nutricionista: https://www.nutripad.com.br/nutricionistas