JavaScript: fundamentos da linguagem, React Native e desenvolvimento móvel

O que é JavaScript?

JavaScript (JS) é uma linguagem de programação de alto nível com tipagem dinâmica, herança prototípica e funções como objetos de primeira classe. Foi criada por Brendan Eich em 1995 em 10 dias. É uma das três principais linguagens das tecnologias web (HTML, CSS, JS) e a base da plataforma Node.js no lado do servidor (2009), que permitiu ao JS sair do navegador.

No desenvolvimento móvel, JavaScript é usado em três paradigmas: compilação nativa (React Native com Hermes/JSC), contêineres WebView (Ionic, Cordova) e JS no lado do servidor (Node.js + Express para backend de aplicativos móveis). React Native é a tecnologia dominante: segundo Statista (2025), 38% dos projetos multiplataforma usam React Native, perdendo apenas para Flutter (46%).

A principal característica do JavaScript é o modelo de execução de thread única com E/S não bloqueante. O event loop permite processar milhares de operações assíncronas em uma única thread sem criar threads do SO. Isso torna JS eficiente para aplicações com uso intensivo de E/S (requisições de rede, operações de banco de dados), mas requer cuidado com cálculos intensivos de CPU.

Padrões JavaScript: ES5, ES6, ES2025

O padrão ECMAScript (ES) define a especificação do JavaScript. ES6 (2015) introduziu let/const, funções arrow, classes, módulos, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Os motores modernos Hermes (React Native) e V8 (Node.js) suportam ES2022+. React Native Hermes suporta ES2020+ com certas limitações em Proxy e Symbol.

Sintaxe JavaScript: tipos, funções e protótipos

A sintaxe JavaScript é semelhante a C, com tipagem dinâmica. O tipo da variável é determinado pelo valor e pode mudar em tempo de execução. let e const (ES6) substituíram var para escopo de bloco. Tipos primitivos: string, number, boolean, null, undefined, symbol, bigint. Todo o resto é um objeto (object, array, function, date, regexp).

Funções como objetos de primeira classe

JavaScript é uma linguagem com funções de ordem superior. Funções podem ser atribuídas a variáveis, passadas como argumentos, retornadas de outras funções. Funções arrow (=>) não têm seu próprio this — elas herdam this do contexto externo. Um closure é uma função que se lembra das variáveis do escopo onde foi criada.

// Tipos de dados e funções em JavaScript
// Tipos primitivos
const name = 'React Native';
let version = 0.71;
var isActive = true; // var obsoleto

// Objetos e arrays
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// Função de ordem superior
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Closure
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// Operador spread para copiar objetos
const newApp = { ...app, version: 16 };

O operador spread ... cria uma cópia superficial de um objeto. A desestruturação (const { platform, version } = app) extrai campos em variáveis. A função arrow em filterByVersion é mais curta que uma expressão function e não cria seu próprio this — isso é crítico em componentes React Native onde this se refere à classe do componente.

Herança prototípica

JavaScript usa herança prototípica, não clássica como Java ou C#. As classes (ES6) são açúcar sintático sobre protótipos. Cada objeto tem uma referência interna [[Prototype]] para outro objeto. Ao acessar uma propriedade que não existe no objeto, JS a procura na cadeia de protótipos. A sintaxe de classe (extends, super) torna o código mais legível, mas internamente permanecem os protótipos.

// Classes em JavaScript — açúcar sintático
class PlatformService {
  // Campo privado (ES2022)
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // Método estático
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // Getter
  get info() {
    return `${this.name} SDK`;
  }

  // Método assíncrono
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// Herança
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Campos privados #apiKey (ES2022) fornecem encapsulamento real, indisponível com convenções de _. O método estático getPlatforms pertence à classe, não à instância. O getter info é calculado no acesso. async/await torna o código assíncrono linear. React Native Hermes suporta campos privados desde a versão 0.71.

Assincronia em JavaScript: Event Loop e Promise

A assincronia em JavaScript é baseada no event loop — um loop infinito que verifica a pilha de chamadas (call stack) e as filas de tarefas. O call stack lida com código síncrono, a microtask queue lida com Promise.then/catch/finally, a macrotask queue lida com setTimeout, setInterval, E/S. O event loop pega tarefas da microtask primeiro, depois da macrotask. Bloquear o call stack (loop infinito) para toda a UI.

Promise é um objeto que representa um valor futuro. Uma promise pode estar pending (pendente), fulfilled (cumprida) ou rejected (rejeitada). A cadeia .then().catch().finally() lida com o resultado assíncrono. async/await (ES8) é açúcar sintático: uma função async retorna uma Promise, await pausa a execução até a promise ser resolvida sem bloquear a thread.

// Carregamento assíncrono de dados no React Native
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('Falha no fetch:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

O hook useEffect com a função async fetchUser faz uma requisição HTTP ao montar o componente. A flag cancelled impede setState após a desmontagem — um problema comum no React Native. Optional Chaining user?.name e Nullish Coalescing ?? lidam com undefined sem erros. ActivityIndicator é exibido durante o carregamento — um padrão assíncrono familiar a todo desenvolvedor JS.

React Native: JavaScript em plataformas móveis

React Native é um framework da Meta (Facebook) para criar aplicações móveis nativas em JavaScript. Diferente da abordagem WebView, React Native renderiza componentes nativos reais (UIView para iOS, ViewGroup para Android). O código JS é executado em uma thread separada (Hermes ou JSC) e se comunica com a thread nativa de UI através de Bridge (arquitetura antiga) ou JSI (nova arquitetura Fabric).

Arquitetura React Native

React Native consiste na thread JS (seu código), thread nativa (UI) e Bridge/JSI para sua interação. Na arquitetura antiga (Bridge), mensagens JSON são serializadas e transmitidas de forma assíncrona — isso cria atrasos durante animações rápidas. A nova arquitetura Fabric (React Native 0.68+) usa JSI (JavaScript Interface) — interação direta de JS com objetos C++ sem serialização.

// Componente React Native com API nativa
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

O componente LocationTracker demonstra o trabalho com a API nativa de geolocalização. Platform.OS distingue entre Android e iOS. PermissionsAndroid.request é o diálogo nativo de permissões do Android. Geolocation.getCurrentPosition — um módulo do @react-native-community/geolocation, instalado via npm. React Native fornece interfaces JS para câmera, Bluetooth, acelerômetro e outros sensores.

Ionic e Cordova: contêineres WebView

Ionic é um framework para aplicações móveis híbridas que usa WebView para renderizar HTML/CSS/JS. Diferente do React Native, Ionic não cria componentes nativos — a aplicação roda dentro de um contêiner web (WebView) no iOS (WKWebView) e Android (Android WebView). Isso proporciona 100% de reutilização de código web, mas limita o desempenho de animações complexas.

Apache Cordova é a base do Ionic, fornecendo acesso a APIs nativas através de plugins JavaScript. Câmera, GPS, contatos, sistema de arquivos — tudo está disponível via cordova-plugin-*. Ionic 7+ usa Capacitor — o sucessor do Cordova com melhor desempenho, suporte a ESM e acesso direto ao SDK iOS/Android através de Swift e Kotlin.

Ferramentas do desenvolvedor JavaScript

As ferramentas do desenvolvedor JS para aplicações móveis incluem Node.js, npm/yarn, Expo, React Native CLI e Metro bundler. Node.js é um ambiente de execução JS fora do navegador, a base do ecossistema. npm (Node Package Manager) é um gerenciador de pacotes com mais de 2 milhões de bibliotecas. npx é um utilitário para executar pacotes npm sem instalação.

Ecossistema de ferramentas

Expo é uma camada sobre React Native que simplifica o desenvolvimento: não requer Xcode/Android Studio para começar, fornece Managed Workflow com bibliotecas pré-instaladas. Expo Application Services (EAS) — compilação e publicação na nuvem. Metro é o bundler do React Native que monta o código JS e dependências em um único arquivo. Hermes é um motor JS da Meta otimizado para dispositivos móveis com compilação AOT.

// package.json — configuração do projeto React Native
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

O arquivo package.json é a base de qualquer projeto JS. Os scripts start, android, ios iniciam o bundler Metro e a compilação. As dependências são divididas em dependencies (tempo de execução) e devDependencies (testes, linters). React Navigation é o roteador padrão. Jest é um framework de teste. ESLint é um analisador estático que verifica estilo de código e erros potenciais.