Você usa React todos os dias… e talvez esteja falando com um programa COBOL de 60 anos.

 

Bellacosa Mainframe apresenta o casamento improvavel React + Cobol

☕ Um Café no Bellacosa Mainframe

☕ React conversa com COBOL?

A arquitetura invisível que conecta Web Apps modernos ao Mainframe

Se você usa internet banking, aplicativo de seguros ou sistemas corporativos modernos, existe uma chance enorme de que, por trás daquela interface elegante construída em React, esteja rodando um programa COBOL em um mainframe.

Sim.

JavaScript moderno conversando com uma tecnologia criada nos anos 1950.

E isso não é exceção — está se tornando arquitetura padrão em grandes empresas.

---

🧭 O mito da substituição do mainframe

Durante décadas surgiu uma narrativa repetida no mercado:

“O mainframe será substituído.”

Mas o que realmente aconteceu foi algo diferente.

O que mudou não foi o core, mas sim a interface.

Hoje, a arquitetura moderna segue um padrão cada vez mais comum:

Frontend moderno (React / Angular / Mobile)
        ↓
API Gateway / Microservices
        ↓
z/OS Connect / MQ / APIs
        ↓
CICS / COBOL / DB2 no Mainframe

Ou seja:

React não substitui o mainframe.
React expõe o mainframe.

---

⚙️ A ponte tecnológica: APIs no z/OS

Ferramentas modernas permitem transformar transações tradicionais em APIs REST.

Entre elas:

• IBM z/OS Connect

• IBM API Connect

• MQ / Event Streaming

• OpenLegacy

• GraphQL gateways

Com isso, um programa COBOL pode virar algo como:

GET /api/account/12345

Que internamente chama:

CICS PROGRAM GETACCT01

Tudo sem reescrever décadas de lógica de negócio.

---

🧩 Onde o React entra na arquitetura

O React se tornou uma escolha popular porque oferece:

• UI altamente responsiva

• arquitetura baseada em componentes

• integração simples com APIs REST

• enorme ecossistema

Uma stack moderna típica pode ser:

React
Node.js / BFF
API Gateway
z/OS Connect
CICS / COBOL
DB2

Resultado:

• UX moderna

• core estável

• risco reduzido

---

📊 Curiosidade pouco conhecida

Estudos frequentemente citados no mercado indicam que:

• cerca de 90% das transações financeiras globais passam por mainframes

• grande parte dessas aplicações hoje é acessada via interfaces web modernas

Ou seja:

Quando você abre um portal moderno em React, pode estar falando com um COBOL rodando há décadas.

---

🥚 Easter eggs do mundo React + Mainframe

🥚 O padrão “Strangler Fig”

Arquitetos chamam essa estratégia de:

Strangler Fig Pattern

A ideia é:

• manter o sistema legado

• expor APIs

• construir novas interfaces ao redor.

Gradualmente, o sistema evolui sem reescrita massiva.

---

🥚 JavaScript rodando dentro do mainframe

Muita gente não sabe, mas hoje existem runtimes de:

• Node.js para z/OS

• Python para z/OS

Ou seja, JavaScript pode rodar dentro do próprio mainframe.

---

🥚 React no ecossistema mainframe

Projetos como Zowe utilizam tecnologias modernas como:

• React

• TypeScript

• APIs REST

para criar interfaces modernas para administração de ambientes z/OS.

---

☕ Comentário Bellacosa

Um erro comum é pensar que modernização significa:

substituir tudo.

Mas a realidade da engenharia de sistemas críticos é outra.

O que vemos hoje é uma arquitetura híbrida:

Interface moderna
+
Core extremamente confiável

E poucas plataformas oferecem um core tão confiável quanto o mainframe.

---

🚀 Conclusão

React e Mainframe não são concorrentes.

São camadas diferentes da mesma arquitetura.

Enquanto React cuida da experiência do usuário, o mainframe continua sendo o motor de processamento que sustenta o negócio.

Talvez o maior segredo da tecnologia corporativa moderna seja exatamente este:

O futuro da web muitas vezes roda em um computador criado há mais de meio século.

E isso diz muito sobre a engenharia por trás do Mainframe.

https://www.linkedin.com/posts/vagnerbellacosa_ibm-mainframe-cobol-activity-7436178528905248768-G-Al?utm_source=share&utm_medium=member_desktop&rcm=ACoAAAF2qx0B5Ef0IGUpO8f7SxDHV-EQ5-EMG54

https://dio.me/articles/voce-usa-react-todos-os-dias-e-talvez-esteja-falando-com-um-programa-cobol-de-60-anos-f1cdaa899115?utm_source=link&utm_campaign=mgm-voce-usa-react-todos-os-dias-e-talvez-esteja-falando-com-um-programa-cobol-de-60-anos-f1cdaa899115&utm_medium=article

 

☕💣 OPERADOR, O SINAL => ACABOU DE INVADIR O DATA CENTER! Arrow Functions: A Revolução das Funções Modernas Explicada para Quem Vem do COBOL Mainframe

 

Bellacosa Mainframe 

☕💣 OPERADOR, O SINAL => ACABOU DE INVADIR O DATA CENTER!

Arrow Functions: A Revolução das Funções Modernas Explicada para Quem Vem do COBOL Mainframe

Se você programa COBOL há anos, provavelmente está acostumado com estruturas como:

PERFORM CALCULA-IMPOSTO.

ou

CALL "PROGRAMA1" USING WS-DADOS.

Quando entra no mundo JavaScript moderno, uma das primeiras coisas que aparecem é um símbolo aparentemente estranho:

() => {}

Essa construção é chamada de Arrow Function (Função Seta).

À primeira vista parece criptografia de hacker.

Mas, na prática, ela representa apenas uma forma mais moderna e compacta de escrever funções.

---

Um Pouco de História

As Arrow Functions foram introduzidas em:

ECMAScript 6 (ES6) - 2015

O ECMAScript é a especificação oficial do JavaScript.

A proposta foi desenvolvida por diversos membros do comitê TC39, responsável pela evolução da linguagem JavaScript.

A inspiração veio principalmente de linguagens funcionais como:

• Haskell

• Scala

• CoffeeScript

• C#

• Java 8 (Lambdas)

O objetivo era:

• Escrever menos código

• Tornar funções mais legíveis

• Resolver problemas com o contexto do this

---

Como Era Antes

Função tradicional:

function soma(a, b) {
   return a + b;
}

Uso:

console.log(soma(10,5));

Resultado:

15

---

A Mesma Coisa com Arrow Function

const soma = (a, b) => {
   return a + b;
};

Resultado:

15

Mesma lógica.

Sintaxe diferente.

---

Traduzindo para a Cabeça de um Coboleiro

Imagine:

CALCULA-SOMA.
    COMPUTE WS-RESULTADO = WS-A + WS-B.

Arrow Function:

(a,b) => a+b

É como se fosse:

ENTRADA -> PROCESSAMENTO

O símbolo:

=>

significa aproximadamente:

"transforma isso em"

ou

"recebe isto e executa aquilo"

---

Anatomia da Arrow Function

Exemplo:

const dobro = (numero) => {
   return numero * 2;
};

Partes:

(numero)

Parâmetro de entrada.

=>

Arrow.

{
   return numero * 2;
}

Bloco executado.

---

Forma Super Compacta

Quando existe apenas um retorno:

const dobro = numero => numero * 2;

Equivale a:

const dobro = function(numero){
   return numero * 2;
}

---

Comparação Lado a Lado

Tradicional

function quadrado(x){
   return x*x;
}

Arrow

const quadrado = x => x*x;

---

Exemplo Prático de Mainframe

Imagine um arquivo contendo salários.

COBOL:

PERFORM VARYING I FROM 1 BY 1
   UNTIL I > TOTAL-REGISTROS

   COMPUTE WS-NOVO-SALARIO =
           WS-SALARIO(I) * 1.10

END-PERFORM

JavaScript:

salarios.map(salario => salario * 1.10);

Observe:

salario => salario * 1.10

é uma Arrow Function.

---

O Que é map()?

O método percorre uma lista.

Para cada elemento executa a função.

Visualmente:

1000
2000
3000

Passa por:

salario => salario * 1.10

Resultado:

1100
2200
3300

---

Por Que Virou Tão Popular?

Antes:

numeros.forEach(function(numero){
   console.log(numero);
});

Depois:

numeros.forEach(numero => console.log(numero));

Menos código.

Mais legibilidade.

---

O Grande Problema Que Ela Resolve

No JavaScript existe algo chamado:

this

Ele gera muita confusão.

Exemplo antigo:

function Pessoa() {

   this.nome = "Bellacosa";

   setTimeout(function() {

      console.log(this.nome);

   },1000);

}

Resultado:

undefined

Porque o this muda de contexto.

---

Com Arrow Function

function Pessoa() {

   this.nome = "Bellacosa";

   setTimeout(() => {

      console.log(this.nome);

   },1000);

}

Resultado:

Bellacosa

A Arrow Function herda o contexto externo.

Isso eliminou milhares de bugs.

---

Vantagens

1. Menos Código

Antes:

function(x){
   return x*2;
}

Depois:

x => x*2

---

2. Melhor Leitura

Especialmente em:

filter()
map()
reduce()
forEach()

---

3. Resolve Problemas de this

Grande vantagem.

---

4. Ideal para Programação Funcional

Muito usada em:

• React

• Angular

• Vue

• Node.js

---

Desvantagens

Não Possui Próprio this

Às vezes isso é ruim.

const pessoa = {
   nome: "João",
   falar: () => {
      console.log(this.nome);
   }
}

Pode não funcionar como esperado.

---

Não Pode Ser Usada Como Construtor

Isto funciona:

function Pessoa(){}
new Pessoa();

Isto não:

const Pessoa = () => {};
new Pessoa();

Erro.

---

Menos Clara em Funções Grandes

Isto:

const calcula = () => {
   ...
   ...
   ...
   ...
}

Às vezes fica menos legível que uma função tradicional.

---

Linguagens que Possuem Conceito Semelhante

Java

x -> x * 2

---

C#

x => x * 2

---

Kotlin

{ x -> x * 2 }

---

Scala

x => x * 2

---

Python

lambda x: x * 2

---

Ruby

->(x) { x * 2 }

---

Como Ler uma Arrow Function

Quando encontrar:

(cliente) => cliente.nome

Leia mentalmente:

Receba cliente
Retorne cliente.nome

---

Outro exemplo:

(a,b) => a+b

Leia:

Receba A e B
Retorne A+B

---

Como Construir Uma

Passo 1

Escreva a função tradicional.

function multiplica(a,b){
   return a*b;
}

---

Passo 2

Remova a palavra function.

(a,b){
   return a*b;
}

---

Passo 3

Adicione a seta.

(a,b) => {
   return a*b;
}

---

Passo 4

Se houver apenas um retorno:

(a,b) => a*b

Pronto.

---

Truque Para Coboleiros

Sempre pense:

ENTRADA => SAÍDA

Exemplos:

x => x*2

"Recebe X e devolve o dobro."

---

nome => nome.toUpperCase()

"Recebe nome e devolve maiúsculo."

---

cliente => cliente.saldo

"Recebe cliente e devolve saldo."

---

Regra de Ouro

Se você enxergar:

=> 

Pergunte:

O que entra?

Está à esquerda.

(cliente)

O que sai?

Está à direita.

cliente.nome

Então:

(cliente) => cliente.nome

significa:

ENTRA CLIENTE
SAI O NOME

Exatamente como uma pequena rotina COBOL que recebe um registro e devolve um campo.

---

Resumo Bellacosa Mainframe

Se fosse explicar Arrow Function para um operador ou programador COBOL em uma única frase:

Arrow Function é uma forma moderna, compacta e mais inteligente de escrever rotinas pequenas em JavaScript, funcionando como um "PERFORM inline" que recebe dados à esquerda da seta e devolve um resultado à direita.

Quando você começar a estudar React, Node.js, APIs REST, automações em N8N ou agentes de IA em JavaScript, verá Arrow Functions em praticamente todo lugar. Entender => é equivalente a aprender PERFORM, CALL e SECTION nos primeiros dias de COBOL: é um dos fundamentos da linguagem moderna.