Runtime, Hot Reload e compilação no desenvolvimento móvel: o que são, conceitos-chave e como funcionam

Runtime e Reflection: iOS Runtime, Method Swizzling e despacho dinâmico

Runtime (ambiente de execução) é o software que gerencia a execução do aplicativo. No contexto do iOS Runtime, é o sistema dinâmico do Objective-C que permite enviar mensagens a objetos, criar classes dinamicamente e substituir métodos durante a execução. Isso é possível porque Objective-C é uma linguagem de tipagem dinâmica sobre C.

Reflection é a capacidade de um programa examinar e modificar sua própria estrutura durante a execução. No iOS Runtime, isso é implementado por funções como class_getInstanceMethod, method_exchangeImplementations e objc_getAssociatedObject. Em Kotlin/Java, a reflexão usa KClass / java.lang.reflect.

Na IT Sectr, usamos Runtime muito raramente — apenas para tarefas específicas onde não há alternativa. Por exemplo, Method Swizzling para registro centralizado de análises ou correção de bugs em bibliotecas. No entanto, Runtime é uma ferramenta poderosa que requer profundo conhecimento e cautela.

Method Swizzling

Method Swizzling é uma técnica para substituir a implementação de um método Objective-C por outra durante a execução. É um caso particular de Programação Orientada a Aspectos (AOP) para iOS. Swizzling permite adicionar registro, análises ou cache a métodos existentes sem alterar seu código fonte.

Um exemplo típico: substituir viewWillAppear: em UIViewController para adicionar registro automático de telas. Importante: o swizzling deve ser executado no método +load ou +initialize para garantir a execução antes do uso da classe. Swizzling incorreto pode causar comportamento indefinido e bugs difíceis de depurar.

// Method Swizzling para registrar viewWillAppear:
@implementation UIViewController (Tracking)

+ (void)load {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        Class class = [self class];
        SEL originalSelector = @selector(viewWillAppear:);
        SEL swizzledSelector = @selector(xxx_viewWillAppear:);
        
        Method originalMethod = class_getInstanceMethod(class, originalSelector);
        Method swizzledMethod = class_getInstanceMethod(class, swizzledSelector);
        method_exchangeImplementations(originalMethod, swizzledMethod);
    });
}

- (void)xxx_viewWillAppear:(BOOL)animated {
    [self xxx_viewWillAppear:animated]; // chamada ao método original
    [Analytics logScreen:NSStringFromClass([self class])];
}

@end

Este código substitui viewWillAppear: em todos os UIViewController via swizzling. Após method_exchangeImplementations, a chamada ao viewWillAppear: original resulta na chamada de xxx_viewWillAppear:, que chama o método original (via chamada recursiva) e adiciona análises. DispatchOnce garante a execução única do swizzling.

Ferramentas web (Transpilation, Polyfill, Bundler, Webpack, Metro)

O desenvolvimento web moderno e o desenvolvimento móvel com React Native ou Flutter são impossíveis sem ferramentas de compilação. Transpilation é a conversão de código de uma linguagem para outra. O exemplo mais popular: TypeScript → JavaScript. Um transpilador (Babel, tsc) converte código moderno em uma versão compatível com versões anteriores.

Polyfill é código que adiciona funcionalidade ausente a navegadores antigos. Por exemplo, Promise.allSettled() não funciona no Internet Explorer, mas um polyfill adiciona essa capacidade. Ao contrário do Runtime nativo, que gerencia a execução do código diretamente no dispositivo, polyfills e transpiladores operam no nível de abstração da linguagem — eles adaptam a sintaxe e APIs, mas não interferem no ambiente de execução.

Webpack é o bundler mais popular (usado em 72% dos projetos segundo State of JS 2024). Metro é o bundler do Facebook, usado por padrão no React Native. Reflection em JavaScript existe através de Object.getPrototypeOf, Proxy e Reflect API — esses mecanismos permitem examinar e modificar objetos durante a execução, o que é fundamentalmente diferente da análise estática de módulos em bundlers. Webpack usa um arquivo de configuração que descreve o ponto de entrada, saída, loaders (para processar diferentes tipos de arquivo) e plugins (para funcionalidade adicional).

// webpack.config.js — configuração mínima
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
        ],
    },
    mode: 'production',
};

Esta configuração define o ponto de entrada (index.js), arquivo de saída (bundle.js) e uma regra para processar JavaScript através do Babel. O modo production ativa otimizações: minificação, tree shaking e detecção automática de ambiente. No estágio Runtime, todas essas otimizações não afetam mais a lógica — o navegador executa o bundle minificado como JavaScript normal.

Otimização de código (Minification, Tree Shaking, Obfuscation)

Minification é o processo de comprimir o código removendo espaços, comentários e renomeando variáveis longas para curtas. Minificadores populares: Terser (JS/TS), CSSNano (CSS), html-minifier-terser. A minificação reduz o tamanho do arquivo em 50–70%. Em produção, Runtime executa o código minificado da mesma forma que o original — a diferença está apenas na legibilidade e tamanho do arquivo, não na semântica.

Tree Shaking é a remoção de código morto que não é usado no aplicativo. Funciona com base na análise estática de módulos ES (import/export). Se uma função é exportada mas nunca importada, o Tree Shaking a remove da compilação final. Tree Shaking analisa o código estaticamente — ao contrário de Reflection, que funciona dinamicamente e pode acessar métodos e propriedades invisíveis em tempo de compilação.

Tree Shaking

Tree Shaking no Webpack é ativado automaticamente no modo produção. Uma condição importante: o código deve usar módulos ES (import/export), não CommonJS (require). Se uma biblioteca for escrita em CommonJS, o tree shaking não funcionará. Para tree shaking ideal, use importações precisas: import { merge } from 'lodash-es' em vez de import _ from 'lodash'. Isso reduz o tamanho do bundle de 500 KB para 10 KB para uma única função.

Hot Reload

Hot Reload é uma tecnologia que permite atualizar o código do aplicativo sem uma recarga completa. No React Native e Flutter, o Hot Reload atualiza o arquivo modificado em tempo real, preservando o estado atual do aplicativo. Isso acelera radicalmente o desenvolvimento: as mudanças são visíveis em 1–2 segundos em vez de 10–30 segundos para uma reconstrução completa. Hot Reload funciona dentro do Runtime: o módulo modificado é injetado no aplicativo em execução sem reiniciar o ambiente de execução.

Hot Restart é uma reinicialização rápida do aplicativo com código atualizado, mas sem preservar o estado. É usado quando Hot Reload não é possível (por exemplo, quando o código nativo ou variáveis globais mudam). Na IT Sectr, usamos Hot Reload em todas as etapas de desenvolvimento de UI — economiza até 50% do tempo em ajustes visuais.

Tabela 3. Comparação de ferramentas de compilação. Webpack é o padrão universal. Metro é especializado para React Native. Vite e esbuild são a nova geração focada em velocidade. Rollup é a melhor escolha para publicar bibliotecas.

Recarga a quente (Hot Reload, Hot Restart)

Hot Reload é uma tecnologia que se originou no desenvolvimento web (React Hot Loader, HMR — Hot Module Replacement) e migrou para o desenvolvimento móvel com Flutter e React Native. A essência: quando um arquivo muda, o bundler envia o módulo atualizado para o aplicativo em execução, que substitui o código antigo sem perder o estado. Ao contrário de uma reconstrução completa, Hot Reload não reinicia o Runtime — o ambiente de execução continua funcionando e o módulo modificado é conectado dinamicamente através de um mecanismo como HMR ou uma atualização de referência semelhante a Reflection.

Hot Reload funciona porque o framework mantém os widgets (Flutter) ou componentes (React) em memória e atualiza apenas as partes modificadas. Hot Restart é um mecanismo mais grosseiro: reinicia completamente o aplicativo, mas é mais rápido que uma reconstrução completa porque não recompila o código nativo. Na IT Sectr, usamos Hot Reload ao desenvolver UI e Hot Restart ao alterar navegação ou gerenciamento de estado.