{"id":10085,"date":"2020-06-07T22:56:06","date_gmt":"2020-06-08T01:56:06","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=10085"},"modified":"2024-09-24T18:00:24","modified_gmt":"2024-09-24T21:00:24","slug":"desenvolvimento-para-mobile-reactnative-flutter-ionic","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/desenvolvimento-para-mobile-reactnative-flutter-ionic\/","title":{"rendered":"Desenvolvimento para mobile: Ionic, React-Native ou Flutter, qual usar?"},"content":{"rendered":"\n

Qual a melhor Cross Platform quando o assunto \u00e9 desenvolvimento para mobile? Ionic, React-Native ou Flutter?<\/strong> <\/p>\n\n\n\n

Mas calma, antes de falarmos sobre estas tr\u00eas plataformas, vamos antes entender um pouco melhor do motivo em termos optado por elas. <\/p>\n\n\n\n

Qual a melhor plataforma para desenvolvimento mobile?<\/h2>\n\n\n\n

Realmente estamos fazendo uma pergunta que nos \u00faltimos anos tem se colocado a frente de v\u00e1rias pessoas envolvidas em um projeto de App Mobile.<\/p>\n\n\n\n

Claro que tamb\u00e9m temos diversas outras solu\u00e7\u00f5es de Cross Platform, como o Xamarim e Phonegap.<\/p>\n\n\n\n

Mas nessa altura, temos que concordar que as tr\u00eas tecnologias discutidas neste artigo encabe\u00e7am as escolhas das maiorias das empresas e grupos que trabalham com apps multiplataforma. <\/p>\n\n\n\n

Podemos dizer ent\u00e3o que a melhor escolha deve estar entre as mais utilizadas na pr\u00e1tica, no dia a dia, certo?<\/p>\n\n\n\n

Ent\u00e3o vamos juntos tentarmos entender o que cada uma tem a nos oferecer e ver se encontramos algo pr\u00e1tico que justifique a sele\u00e7\u00e3o.<\/p>\n\n\n\n

No desenvolvimento para mobile tudo depende da ocasi\u00e3o<\/h2>\n\n\n\n

Realmente n\u00e3o queria come\u00e7ar este artigo dessa forma, mas acho que seria desleal com voc\u00ea leitor, que est\u00e1 procurando justamente esta resposta.<\/p>\n\n\n\n

Mas agora vai uma frase clich\u00ea que voc\u00ea provavelmente j\u00e1 ouviu por a\u00ed em alguma circunst\u00e2ncia onde o autor n\u00e3o gostaria de se comprometer: <\/p>\n\n\n\n

N\u00e3o existe bala de prata no mundo da tecnologia.<\/strong><\/p>\n\n\n\n

E acho que infelizmente esta frase nunca serviu t\u00e3o bem quanto no universo em que estamos lidando. <\/p>\n\n\n\n

Ent\u00e3o o que podemos fazer aqui, \u00e9 tentar ver como cada solu\u00e7\u00e3o se comporta em alguns cen\u00e1rios espec\u00edficos e tentar te ajudar a encontrar o que melhor se enquadra, caso precise.<\/p>\n\n\n\n

Bom, n\u00e3o vou me estender muito na parte te\u00f3rica, pois isso voc\u00ea encontra em diversos materiais na internet, e com certeza falando muito melhor do que eu, mas vamos tentar ao menos definir conceitos b\u00e1sicos de cada uma.<\/p>\n\n\n\n

Ionic<\/a><\/h2>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

Como no pr\u00f3prio site oficial da Ionic se define \u201cCross-platform apps. Built with the web\u201d, ou seja, fa\u00e7a aplicativos como voc\u00ea faz sistemas para Web. <\/p>\n\n\n\n

E n\u00e3o considero como simplesmente um \u201cWebview mais parrudo\u201d como j\u00e1 vi muitos falarem. <\/p>\n\n\n\n

Em suas vers\u00f5es mais atuais, podemos dizer que ele consegue entregar os mesmos recursos de seus concorrentes, acessando fun\u00e7\u00f5es nativas como a c\u00e2mera, e por ser web, integrando uma grande gama de framework\u2019s como o React, Angular e Vue. <\/p>\n\n\n\n

Ele tamb\u00e9m d\u00e1 a possibilidade de entregar uma vers\u00e3o para Desktop e at\u00e9 mesmo utilizar PWA\u2019s. <\/p>\n\n\n\n

E assim podemos pensar: \u201cPronto! Achamos a solu\u00e7\u00e3o perfeita! Afinal \u00e9 tudo feito com web, diminuindo a curva de aprendizagem de uma grande parcela de programadores, integra as principais tecnologias Javascript\u2019s de SPA\u2019s e possibilita criar um App Desktop!\u201d. <\/p>\n\n\n\n

Realmente ele \u00e9 bem vers\u00e1til, mas temos que lembrar que para fazer tudo isso, e ser uma solu\u00e7\u00e3o t\u00e3o alto n\u00edvel, ela tem que \u201cficar longe\u201d do hardware do seu dispositivo, e realmente passar por um Webview e por uma \u201cponte\u201d que \u00e9 feita com a tecnologia do Cordova. <\/p>\n\n\n\n

Assim por mais vers\u00e1til que seja, temos que deixar em mente que performance n\u00e3o est\u00e1 entre suas qualidade, e dependendo da regra de neg\u00f3cio que estamos observando, ele pode trazer uma certa dor de cabe\u00e7a.<\/p>\n\n\n\n

React-Native<\/a><\/h2>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

Aqui temos, o que arrisco em dizer, ser o mais famoso dos 3, tendo como sua base, o pr\u00f3prio ReactJS, framework desenvolvido pelo Facebook para desenvolver plataformas SPA\u2019s que n\u00e3o apenas se tornou o principal concorrente do AngularJS, mas o deixou para tr\u00e1s pelo menos no desenvolvimento de aplica\u00e7\u00f5es Web. <\/p>\n\n\n\n

O React-Native desenvolve apps utilizando Javascript e Typescript, e ao contr\u00e1rio do Ionic, sua Bridge com o dispositivo \u00e9 muito mais perform\u00e1tica.<\/p>\n\n\n\n

E com o Javascript, ele consegue acessar as API\u2019s Nativas do aparelho que est\u00e1 rodando de uma forma muito mais r\u00e1pida que as tecnologias h\u00edbridas. <\/p>\n\n\n\n

Com esse acesso nativo ele consegue entregar os atributos caracter\u00edsticos de cada dispositivo, como bot\u00f5es, input\u2019s, datePickers etc, assim, dando uma maior impress\u00e3o de estar usando um app de desenvolvimento nativo. <\/p>\n\n\n\n

Tirando o fato da sua grande comunidade, e com isso, j\u00e1 existem bibliotecas que possibilitam us\u00e1-lo em ambiente web e desktop. <\/p>\n\n\n\n

Agora sim! Encontramos a solu\u00e7\u00e3o ideal!? Calma\u2026 <\/p>\n\n\n\n

Temos que lembrar que para acessar os componentes nativos ele ainda precisa do JavaScript, pois n\u00e3o sabe \u201cconversar com a m\u00e1quina\u201d como um app nativo sabe, e \u00e9 claro, a nossa curva de aprendizado estar\u00e1 mais restrita, tendo que saber utilizar a tecnologia do React.<\/p>\n\n\n\n

Flutter<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

E por fim, temos o Flutter, a mais nova das 3 solu\u00e7\u00f5es. Mantido pela Google, e trazendo um outro conceito de tecnologias Cross Platform. <\/p>\n\n\n\n

Ele tamb\u00e9m trabalha com o padr\u00e3o de SPA\u2019s utilizado no React-Native, mas no lugar de usar componentes, usa o que \u00e9 chamado de Widgets e a estrutura de seus projetos s\u00e3o formados por uma \u00e1rvore de Widgets. <\/p>\n\n\n\n

E assim podemos pensar qual \u00e9 sua diferen\u00e7a com o React-Native, e est\u00e1 justamente em dois pontos principais: <\/p>\n\n\n\n