Do not speak Portuguese? Translate this site with Google or Bing Translator
Dominando React Native

Posted on: March 13, 2020 06:52 PM

Posted by: Renato

Views: 577

Você já imaginou usar a mesma tecnologia de ponta que gigantes como Facebook, Instagram, Uber, Wallmart, Tesla, Skype (dentre outros) utilizam para criar Apps nativos para Android e iOS de forma simples, rápida e divertida?

“O cara” — React Native.

O React Native é uma poderosa biblioteca stack criada pelo Facebook para desenvolver Apps nativos para Android e iOS, utilizando praticamente o mesmo código para executar em ambas as plataformas, utilizando a linguagem Javascript.

Como funciona o React Native?

Dentro do seu dispositivo existem 2 núcleos: um núcleo nativo (Java para Android e Objective-C para iOS) e um núcleo de Javascript, chamado JavaScript Core (ou para os íntimos como eu, JSC).

Ao contrário de stacks como Ionic, Cordova, Phonegap que criam uma camada Webview (baseado em Html, Css e Javascript), o React Native compila seu App (escrito com Javascript) para executar diretamente no núcleo JSC. Isso dá acesso aos componentes nativos do aparelho (câmera, GPS, bluetooth, wifi, etc).

Exemplo de “HelloWorld” em React Native:

Captura de tela_2020-03-13_15-39-15.png

Mas porque usar React Native?

Imagina só a seguinte situação…

" Sua missão: Você foi desafiado a desenvolver um App de delivery (tipo iFood) para Android e iOS, no menor tempo possível."

  • Missão dada é missão cumprida

Eis então que você sabiamente resolve criar os Apps de modo nativo para cada plataforma, afinal você já conheçe um pouco de cada mundo… Porém é aqui que literalmente começa a enorme dor de cabeça!

tenor.gif

Se liga só o trampo que isso vai dar…

Partindo para o Android você precisa escrever o código (milhares de linhas) usando a linguagem Java ou Kotlin. E para sua surpresa precisa replicar (re-escrever) todo o código para iOS usando Swift (trabalho em dobro, problema em dobro).

Percebeu o quanto de tempo e habilidade você precisa dominar para fazer um mesmo App para ambas as plataformas? Novamente: Trabalho em dobro, problemas em dobro. 🤦‍♂

Sem tirar o comportamento de cada App, que pode conter diversos bugs, e as ações esperadas pode não se comportar de forma igual. Poutz! 🤦‍♂

Então como resolver esse problema?

Depois de várias aspirinas e noites mal dormidas, você agora repensa e resolve partir para o desenvolvimento híbrido (que contempla as duas plataformas ao mesmo tempo). Meus parabéns jovem padawan! Mas a ficha cai e vem a próxima pergunta:

"Que ferramenta utilizar? 🤔"

Se você partir para stacks como Ionic, Cordova ou Phonegap você terá um grande pepinão 🥒em suas mãos…

Eles não criam Apps nativos (eita lelê). Eles criam uma camada Webview com componentes Html, Css e Javascript (igual a um navegador).

Nem preciso dizer que além da queda de performance, você ainda tem sérios riscos de não ter acesso aos componentes nativos do dispositivo (câmera, GPS, bluetooth, etc).

Eis então que surge a solução para essa dor de cabeça (não, não é doril)…

O REACT NATIVE, como já mencionado no início do artigo, consegue através de Javascript, ter ACESSO NATIVO ao dispositivo tanto em Android quanto iOS. (eureka!)

1ios-android-react-native-design-patterns-7-1560547783070.png

"Com um único código você escreve o App uma única vez e compila nativamente para Android e iOS. Simples assim. 😁"

Na grande maioria dos casos você consegue aproveitar até 100% do código (em alguns casos, basta criar um bloco de condição para cada plataforma, nada complicado).

1ios-android-react-native-design-patterns-3-1560547782072.png

Percebeu o quanto você economiza de tempo e custo e skills no seu projeto?

A comunidade do React Native cresce a cada dia, empresas gigantes já utilizam essa stack e o mercado de trabalho procura cada vez mais por pessoas com habilidades nessa tecnologia (o mundo está cada vez mais digital). 😎

E não para por ai não… Tem muito mais!

Uma vez você dominando React Native você de quebra pode facilmente aumentar suas skills usando ReactJS para criar projetos Web (site). Segue a mesma lógica (javascript), só que voltado para projetos web. 😱

E se quiser ir mais afundo, pode se aventurar no Node.js para criar APIs backend para se comunicar com seu front (web e mobile).

Ai filhote, você já se tornou um Jedi FULLSTACK e oportunidades no mercado faltar não irá. Deu pra perceber agora a OPORTUNIDADE que está nas suas mãos?

react-app1.png


2

Share

Donate to Site


About Author

Renato

Developer

Add a Comment
Comments 0 Comments

No comments yet! Be the first to comment

Blog Search


Categories

OUTROS (16) Variados (109) PHP (133) Laravel (171) Black Hat (3) front-end (29) linux (114) postgresql (39) Docker (28) rest (5) soap (1) webservice (6) October (1) CMS (2) node (7) backend (13) ubuntu (56) devops (25) nodejs (5) npm (3) nvm (1) git (8) firefox (1) react (7) reactnative (5) collections (1) javascript (7) reactjs (8) yarn (0) adb (1) Solid (2) blade (3) models (1) controllers (0) log (1) html (2) hardware (3) aws (14) Transcribe (2) transcription (1) google (4) ibm (1) nuance (1) PHP Swoole (5) mysql (31) macox (4) flutter (1) symfony (1) cor (1) colors (2) homeOffice (2) jobs (3) imagick (2) ec2 (1) sw (1) websocket (2) markdown (1) ckeditor (1) tecnologia (14) faceapp (1) eloquent (14) query (4) sql (40) ddd (3) nginx (9) apache (4) certbot (1) lets-encrypt (3) debian (12) liquid (1) magento (2) ruby (1) LETSENCRYPT (1) Fibonacci (1) wine (1) transaction (1) pendrive (1) boot (1) usb (1) prf (1) policia (2) federal (1) lucena (1) mongodb (4) paypal (1) payment (1) zend (1) vim (4) ciencia (6) js (1) nosql (1) java (1) JasperReports (1) phpjasper (1) covid19 (1) saude (1) athena (1) cinnamon (1) phpunit (2) binaural (1) mysqli (3) database (42) windows (6) vala (1) json (2) oracle (1) mariadb (4) dev (12) webdev (24) s3 (4) storage (1) kitematic (1) gnome (2) web (2) intel (3) piada (1) cron (2) dba (18) lumen (1) ffmpeg (2) android (2) aplicativo (1) fedora (2) shell (4) bash (3) script (3) lider (1) htm (1) csv (1) dropbox (1) db (3) combustivel (2) haru (1) presenter (1) gasolina (1) MeioAmbiente (1) Grunt (1) biologia (1) programming (22) performance (3) brain (1) smartphones (1) telefonia (1) privacidade (1) opensource (3) microg (1) iode (1) ssh (3) zsh (2) terminal (3) dracula (1) spaceship (1) mac (2) idiomas (1) laptop (2) developer (37) api (5) data (1) matematica (1) seguranca (2) 100DaysOfCode (9) hotfix (1) documentation (1) laravelphp (10) RabbitMQ (3) Elasticsearch (1) redis (2) Raspberry (4) Padrao de design (4) JQuery (1) angularjs (4) Dicas (43) Kubernetes (3) vscode (2) backup (1) angular (3) servers (2) pipelines (1) AppSec (1) DevSecOps (4) rust (1) RustLang (1) Mozilla (1) algoritimo (1) sqlite (1) Passport (2) jwt (5) security (2) translate (1) kube (2) iot (1) politica (2) bolsonaro (1) flow (1) podcast (1) Brasil (1) containers (3) traefik (1) networking (1) host (1) POO (2) microservices (2) bug (1) cqrs (1) arquitetura (3) Architecture (4) sail (3) militar (1) artigo (1) economia (1) forcas armadas (1) ffaa (1) autenticacao (2) autorizacao (2) authentication (4) authorization (3) NoCookies (1) wsl (4) memcached (1) macos (2) unix (2) kali-linux (1) linux-tools (5) apple (1) noticias (2) composer (1) rancher (1) k8s (1) escopos (1) orm (1) jenkins (4) github (5) gitlab (3) queue (1) Passwordless (1) sonarqube (1) phpswoole (1) laraveloctane (1) Swoole (1) Swoole (1) octane (1) Structurizr (1) Diagramas (1) c4 (1) c4-models (1) compactar (1) compression (1) messaging (1) restfull (1) eventdrive (1) services (1) http (1) Monolith (1) microservice (1) historia (1) educacao (1) cavalotroia (1) OOD (0) odd (1) chatgpt (1) openai (3) vicuna (1) llama (1) gpt (1) transformers (1) pytorch (1) tensorflow (1) akitando (1) ia (1) nvidia (1) agi (1) guard (1) multiple_authen (2) rpi (1) auth (1) auth (1) livros (2) ElonMusk (2) Oh My Zsh (1) Manjaro (1) BigLinux (2) ArchLinux (1) Migration (1) Error (1) Monitor (1) Filament (1) LaravelFilament (1) replication (1) phpfpm (1) cache (1) vpn (1) l2tp (1) zorin-os (1) optimization (1) scheduling (1) monitoring (2) linkedin (1) community (1) inteligencia-artificial (2) wsl2 (1) maps (1) API_KEY_GOOGLE_MAPS (1) repmgr (1) altadisponibilidade (1) banco (1) modelagemdedados (1) inteligenciadedados (4) governancadedados (1) bancodedados (2) Observability (1) picpay (1) ecommerce (1) Curisidades (1) Samurai (1) KubeCon (1) GitOps (1) Axios (1) Fetch (1) Deepin (1) vue (4) nuxt (1) PKCE (1) Oauth2 (2) webhook (1) TypeScript (1) tailwind (1) gource (2)

New Articles



Get Latest Updates by Email