25 out 2016

React Native vs IONIC

O principal propósito deste artigo, é mostrar as diferenças entre essas duas ferramentas, e lhe dar maiores informações para que possa ser feita uma melhor escolha quando for necessário criar um projeto mobile para iOs e Android.

Hibrido vs Nativo

Antes de se aprofundar nas diferenças, precisamos lembrar a diferença entre um app híbrido e um nativo. Apps híbridos são basicamente websites que são inseridos em um componente que chamamos de webview. Eles são desenvolvidos usando apenas HTML, CSS e Javascript, sendo o mesmo código reutilizado para ambas plataformas. Com ferramentas como PhoneGap/Cordova, nos permite usar as features nativas de cada dispositivo, como GPS, Bluetooth e câmera, porem com algumas restrições.

Por outro lado, apps nativos são desenvolvidos na linguagem especifica de cada plataforma, sendo Objective-C ou Swift para iOs e Java para Android. O código que se é desenvolvido para uma plataforma, não é possível reutiliza-la na outra, e as mesma oferecem features nativas das plataformas sem nenhuma restrição

picture1

Round 1: Desenvolver Nativo ou Híbrido?

Ionic
Ionic é um framework desenvolvido para se criar apps híbridos. Ele faz uso de tecnologias web para renderizar a aplicação, para isso requer PhoneGap/Cordova para que se possa ter acesso as features nativas do dispositivo. A principal desvantagem em se desenvolver apps híbridos é a perca da experiência do usuário que é especifica para cada plataforma.

React Native
React Native é um framework para se criar apps nativos. É feito principalmente com javascript, podendo reutilizar o mesmo código entre as plataformas. Entretanto, enquanto apps híbridos renderizam usando HTML e CSS, React Native vai renderizar usando os componentes nativos da plataforma, ou seja, a experiência do usuário vai estar muito perto de outros apps nativos desenvolvidos na linguagem da plataforma, sem contar que com isso, uma melhor performance e animações mais suaves são alcançadas. A desvantagem de se utilizar o React Native, é a necessidade de se ter componentes para fazer a ponte com a plataforma, vale lembrar que muitos componentes já são providos por default, porém possa ser que acabe precisando de um componente que ainda não foi realizada a portabilidade.

E o vencedor é:
React Native, enquanto podemos criar apps nativos com React Native, ele requer uma espécie de ponte para cada plataforma para que se possa desenvolver, porém ele consegue trazer o mais perto possível de criar aplicativos nativos para cada plataforma.

Round 2: Write once, run everywhere vs Learn once, write everywhere

Ionic
O ionic segue a filosofia do “Escreva uma vez, rode em qualquer lugar”, ou seja, uma aplicação híbrida vai utilizar o mesmo código indiferente da plataforma, e isso é o que o Ionic é capaz de fazer. Entretanto, com o intuito de ser mais “nativo”, o ionic se adapta a alguns comportamentos específicos de cada plataforma, se for utilizar abas, elas serão mostradas igual o que se é recomendado para cada plataforma, ou seja, na parte de baixa da tela quando se estiver no iOs, e na parte superior no Android.

React Native
O React Native segue a filosofia do “Aprenda uma vez, escreva em qualquer lugar”, ou seja, eles querem que os desenvolvedores usem os componentes que melhor segue o conceito nativo de cada plataforma, como por exemplo, o Android tem uma barra de ferramentas que é possível realizar diversas customizações, já o iOS não. Pode se utilizar a barra de ferramentas para o Android, mas já no iOS, terá que utilizar algo diferente, mas não se preocupe, existem diversos componente equivalentes para se utilizar.

E o vencedor é:
React Native, pois com ele conseguimos prover uma melhor experiência do usuário, escrevendo aplicações que se encaixam em cada OS da forma padrão.

Round 3: Linguagem

Ionic
O ionic é um framework baseado no Angular. Ele usa templates HTML para as suas views, seguindo o padrão Model-View-Controller, onde as views e a lógica são claramente separadas.

screen-shot-2016-10-25-at-9-02-42-am

React Native
O React Native é baseado no React, que usa um código Javascript que se assemelha ao HTML mas, essencialmente, não é. Eles chamam isso de JSX, a lógica de exibição é misturada com a lógica de negócios Ultimamente, isso não é um problema já que a maioria dos desenvolvedores senten-se confortáveis em usar JSX, porém quando se esta trabalhando em uma equipe com desginers colaborando, não vai ser tão simples para eles ajudar a criar os templates com HTML/CSS, porém nada que uma estudada básica, ou mesmo um outro desenvolvedor explicando que JSX não é HTML, já seria de grande ajuda.

screen-shot-2016-10-25-at-9-02-59-am

E o vencedor é:
Empate, pois com o Ionic o desenvolvedor estará mais confortável, já que é o clássico HTML e CSS. Com o React Native, o mesmo terá que aprender com usar os estilos e criar as interfaces usando os componentes, que são parecidos com HTML, não é difícil, mas é algo novo.

Round 4: Testando durante o desenvolvimento

Ionic
Quando se esta desenvolvendo um app, acredito ser muito importante estar visualizando em tempo real as modificações que estão sendo feitas. Não há nada mais frustrante do que ter que esperar um tempo para poder ver se os 5 pixels de margem que foram alterados estão bom, ou se é melhor colocar 8 pixels. Com o ionic, essas mudanças podem ser vistas instantaneamente no browser ou no próprio dispositivo, pois automaticamente quando o código que se esta trabalhando é salvo, ele dá um refresh na aplicação.

React Native
Com React Native, a visualização de modificações estão em outro nível, esqueça testes no browser, pois como já foi dito, ele renderiza nativamente, e nesse ponto que deveria estar o problema, mas não, pois para visualizar as modificações não é necessário recompilar a aplicação, o resultado é mostrando imediatamente no emulador do dispositivo, ou onde pode ser feito de duas formas, com Live Reload , onde o app meio que faz um refresh da página, e o Hot Reloading, onde não é feito refresh, as modificações são mostradas instantaneamente, salvou, visualizou.

E o vencedor é:
React Native, pois o mesmo possibilita visualizar as alterações com o refresh da página e também sem o refresh, mostrando as alterações em tempo real.

Round 5: Plugins e comunidade

Quando é decidido usar um projeto Open Source, é importante procurar quão ativa é a comunidade em volta, pois isso impacta diretamente em quão fácil será encontrar informações e repostas para suas dúvidas, ou mesmo arrumas aqueles bugs que aparecem uma vez ou outra.

Ionic
Como ja dito, Ionic usa PhoneGap/Cordova, que estão vivos no mercado a um tempo, logo há uma grande possibilidade de já ter um plug-in que irá resolver o problema, ou fazer com que implemente uma feature mais rapidamente. Eles também têm uma loja virtual onde os desenvolvedores vendem plugins.

React Native
Existem diversos plugins no NPM para React Native. Inclusive tem um plugin para se utilizar os plugins do PhoneGap/Cordova, o que significa que instantaneamente temos a herança de diversos plugins maduros de uma outra comunidade. Sem contar essa página https://react.parts/native, que contem um catálogo enorme de plugins que podem ser utilizados com React Native.

E o vencedor é:
Atualmente, React Native tem mais estrelas no Github do que o Ionic, cerca de 39k vs 26k. Entretanto, o Ionic por estar a mais tempo no mercado, tem mais perguntas no Stackoverflow. Então, é certo dizer que temos um empate, pois ambos tem uma comunidade muito ativa, e continuam crescendo.

Round 6: Plataforma

Empate, pois ambos suportam Android e iOS.

Final Round: Qual é o melhor

É quase impossível de dizer qual é o melhor, pois acredito fortemente que depende de alguns fatores como: sua preferencia, seu projeto, os requerimentos do projeto, as habilidades que você e a sua equipe tem. Ambos são parecidos em alguns pontos, e o que eles se propõem a fazer, fazem bem. Seria como comparar Xbox e Playstation, tão um quanto outro vão ter pontos positivos e negativos, mas no final um não é melhor que o outro.

Entretanto, posso lhe dizer a minha opinião, qual eu prefiro, que é sem sombra de dúvidas o React Native, pois acredito que renderizar nativamente é muito melhor do que exibir o conteúdo em uma webview, por diversos fatores. Acredito que, apps mobile devem ser rápidos e responsivos, e com React Native, é exatamente o que eu encontrei ao desenvolvedor os meus projetos.

O meu conselho é que se ainda existem duvidas referente a qual escolher, experimente cada um deles, faça um projeto básico como um TODO list, acredito que no final, conseguirá escolher com mais clareza.

Comments

  • Leonardo Lima
    novembro 19, 2016 Responder

    Oi WESLLEY,

    Muito bom o post parabéns. Também acho que utilizar webview fica muito ruim para experiência do usuário, por isso também optaria por utilizar React Native. Mas como você fala isso depende de projeto para projeto, porque se o projeto for apenas um protótipo não vale apena gastar tempo de desenvolvimento para ser apenas aprovado o layout do app, então temos que avaliar muito bem qual utilizar e porque utilizar.
    Parabéns novamente pelo post.

Leave a Comment