JavaScript em toda parte: como escrever código para todas as plataformas de uma vez

Por que JavaScript é o novo "write once, run anywhere"?

Lembra do antigo sonho dos desenvolvedores: escrever o código uma vez e ele funcionar em qualquer lugar? O Java prometia isso com a máquina virtual, mas na prática tudo esbarrava em danças com o pandeiro. Agora olhe para o JavaScript. A linguagem que antes era considerada "de brinquedo" para animar botões, hoje conquistou o mundo. E sabe de uma coisa? Ela realmente cumpre essa promessa.

O desenvolvimento multiplataforma em JavaScript não é apenas uma tendência da moda. É uma forma de reduzir o tempo de lançamento do produto, economizar orçamento e manter na equipe os mesmos especialistas. Neste artigo, vamos analisar como uma única linguagem permite criar aplicações para navegador, dispositivos móveis, desktop e servidor. E sim, teremos exemplos reais de código.

Arquitetura de uma aplicação multiplataforma moderna

Antes de mergulhar no código, vamos entender como funciona o ecossistema moderno. A ideia chave é dividir a lógica da aplicação em três camadas:

• Lógica de negócio — processamento de dados, validação, trabalho com API. Este é o núcleo, que não deve depender da plataforma.
• Camada de UI — a interface. Ela pode ser diferente para web, mobile e desktop, mas frequentemente usa componentes comuns.
• Camada de armazenamento — bancos de dados locais, cache, trabalho com sistema de arquivos.

É exatamente o JavaScript que permite escrever todas as três camadas em uma única linguagem. Vamos ver as principais ferramentas.

Parte do servidor: Node.js como fundamento

Qualquer sistema multiplataforma começa com o backend. Node.js é um ambiente de execução JavaScript fora do navegador, construído sobre o motor V8. Ele é ideal para criar REST APIs, processar conexões WebSocket e trabalhar com bancos de dados.

Aqui está um exemplo simples de servidor em Express, que atenderá tanto a web quanto o aplicativo móvel:

const express = require('express');const app = express();const port = 3000;

// Middleware para processar JSONapp.use(express.json());

// Exemplo de endpoint para obter lista de usuáriosapp.get('/api/users', (req, res) => {  const users = [    { id: 1, name: 'Ana', email: 'ana@example.com' },    { id: 2, name: 'João', email: 'joao@example.com' }  ];  res.json(users);});

// Requisição POST para criar um novo usuárioapp.post('/api/users', (req, res) => {  const newUser = req.body;  // Aqui normalmente vai a gravação no banco de dados  console.log('Novo usuário:', newUser);  res.status(201).json({ message: 'Usuário criado', user: newUser });});

app.listen(port, () => {  console.log(`Servidor rodando em http://localhost:${port}`);});

Este código funcionará da mesma forma no Windows, macOS e Linux. Além disso, você pode executá-lo em um Raspberry Pi ou em um contêiner na nuvem — nenhuma alteração será necessária.

Interface web: React como bloco de construção universal

Quando se trata de desenvolvimento multiplataforma em JavaScript, React é o primeiro candidato. Sua arquitetura baseada em componentes permite reutilizar até 70% do código entre web e aplicativos móveis.

Vamos criar um componente simples para exibir a lista de usuários:

import React, { useState, useEffect } from 'react';

function UserList() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);

  useEffect(() => {    fetch('/api/users')      .then(response => response.json())      .then(data => {        setUsers(data);        setLoading(false);      })      .catch(error => console.error('Erro:', error));  }, []);

  if (loading) {    return <div>Carregando...</div>;  }

  return (    <div>      <h2>Lista de usuários</h2>      <ul>        {users.map(user => (          <li key={user.id}>            {user.name} — {user.email}          </li>