DEV Community: Marcelo Cabral Ghilardi

A IA que trabalha enquanto você dorme: Um Linux autônomo?

Marcelo Cabral Ghilardi — Mon, 04 May 2026 12:03:00 +0000

E aí, gurizada! De uns tempos pra cá, tenho percebido uma mudança significativa na forma como a gente interage com a Inteligência Artificial. Não é mais só uma ferramenta que responde perguntas ou gera imagens; a parada tá ficando séria, com a IA assumindo um papel mais ativo, quase como um colega de trabalho. Foi pensando nisso que gravei um vídeo recentemente, e a repercussão me fez pensar: "Cara, isso daria um belo papo no Dev.to!".

A motivação pra esse vídeo (e agora pra este post) veio de uma observação que fiz. Eu me peguei refletindo sobre o potencial da IA em orquestrar tarefas complexas, daquelas que a gente normalmente gasta um tempo danado pra planejar e executar. E aí, me veio a ideia de explorar se a IA já estaria no ponto de "criar um Linux" enquanto eu dormia. Claro, não é um kernel do zero, mas a ideia é provocadora, né? É sobre a IA ter autonomia pra montar um ambiente, configurar infraestrutura, e até desenvolver aplicações dentro de um ecossistema Linux.

No vídeo, que você pode assista no YouTube, eu mergulho nesse conceito da IA como um "funcionário" autônomo. A gente tá falando de um cenário onde a IA não só executa comandos, mas também planeja, otimiza e entrega resultados com pouca ou nenhuma intervenção humana. Pensa comigo: a IA pode automatizar fluxos de trabalho, gerar código e infraestrutura, e até otimizar processos complexos. Isso não é mais ficção científica, gurizada, é o que a gente tá vendo acontecer agora.

Quando eu falo em "criar um Linux", na verdade, estou me referindo à capacidade da IA de:

Configurar um ambiente Linux: Instalar pacotes, configurar serviços, e otimizar o sistema para uma finalidade específica. Tipo, você pede um servidor de banco de dados, e a IA vai lá e monta tudo, do zero, com as configurações ideais.
Desenvolver aplicações no ecossistema Linux: Usar ferramentas de desenvolvimento, gerenciar dependências, e até prototipar partes de um sistema. É quase como ter um dev júnior que não dorme e não reclama!
Integrar diferentes componentes: Criar um sistema funcional a partir de várias partes, como um "mini-OS" ou um ambiente de desenvolvimento completo, tudo orquestrado pela IA.

Eu gravei esse vídeo pra gente refletir sobre o futuro do trabalho. A IA não é mais só uma ferramenta passiva; ela tá se tornando um agente ativo, capaz de tomar iniciativas e tocar projetos. Isso levanta umas perguntas bem importantes, tipo: Como é que a gente vai colaborar com essas IAs autônomas? Quais novas habilidades a gente vai precisar desenvolver? E, claro, como a gente garante que a IA atue de forma ética e responsável? São questões que ainda estamos desvendando, mas o papo já começou.

Se você quiser se aprofundar um pouco mais nesse tema, dá uma olhada no meu blog, marcelocabral.com.br, onde eu publiquei um post complementar com mais detalhes sobre essa IA que "trabalha enquanto você dorme". E, claro, assista ao vídeo pra gente continuar essa discussão. O que vocês acham, gurizada? A IA já está pronta pra ser nossa colega de trabalho?

OpenClaw: O que é e por que está todo mundo falando disso?

Marcelo Cabral Ghilardi — Sun, 03 May 2026 12:00:00 +0000

E aí, gurizada! De uns tempos pra cá, eu percebi um burburinho enorme em torno de uma ferramenta que tem chamado a atenção, e não é por menos: o OpenClaw. Eu, que vivo mergulhado nesse universo de IA e automação, gravei um vídeo recentemente, que está lá no meu canal, assista no YouTube, justamente pra desmistificar essa parada. E hoje, vim aqui no Dev.to pra gente conversar um pouco mais sobre o que é essa tal de OpenClaw e por que ela tá deixando o pessoal tão ouriçado.

Mas afinal, que bicho é esse de OpenClaw?

Quando eu ouvi o nome "OpenClaw" pela primeira vez, minha cabeça de desenvolvedor já foi ligando os pontos. "Open" me remete na hora a código aberto, acessibilidade, comunidade. E "Claw"? Bom, "garra", "captura". Juntando tudo, imaginei algo que "agarra" ou "captura" coisas de forma aberta. E, no contexto que a gente vive de inteligência artificial e desenvolvimento, isso me fez pensar em algumas possibilidades:

Automação na veia: Capturar dados, interagir com interfaces, automatizar tarefas que a gente faz no dia a dia e que são repetitivas. Pensa só no tempo que a gente ganha!
Conectividade Total: Ligar um sistema no outro, sabe? Como se fosse um "gancho" que une diferentes APIs e plataformas.
Tratamento de Dados: Extrair informações de vários lugares e dar aquela organizada, pré-processar pra análise.

E o melhor de tudo, gurizada? A promessa de ser "FREE PARA SEMPRE". Isso, pra quem vive de código e tá sempre buscando soluções robustas sem ter que estourar o orçamento, é música pros ouvidos!

Por que o OpenClaw tá bombando?

O título do meu vídeo, "O Mundo está Maluco com o OpenClaw! Aprenda a Instalar FREE PARA SEMPRE", não é exagero. Ferramentas que causam esse tipo de comoção geralmente têm características em comum. Eu percebo que elas oferecem:

Facilidade de uso: Ninguém quer passar horas e horas pra entender como uma ferramenta funciona, né? Quanto mais intuitiva, melhor. Uma curva de aprendizado baixa é essencial.
Poder de fogo: Resolver problemas complexos de um jeito simples, ou fazer coisas que antes eram um baita desafio. Isso é ouro!
Comunidade engajada: Um ecossistema onde a gurizada troca ideia, ajuda, contribui. Isso faz toda a diferença pra evolução da ferramenta e pra gente aprender junto.

No vídeo, eu mostro direitinho como fazer a instalação e configuração do OpenClaw, e dou umas dicas de como aplicar ele em situações reais. A ideia de "instalar FREE PARA SEMPRE" é justamente essa: uma ferramenta de código aberto ou uma licença que não expira, pra gente usar sem preocupação.

Como o OpenClaw pode ser útil pra ti?

Se o OpenClaw realmente entrega o que promete, e eu acredito que sim, ele entra pra lista daquelas ferramentas que todo mundo deveria ter no arsenal. Pensa comigo:

Pra desenvolvedores como eu: É uma mão na roda pra prototipar rapidinho, automatizar testes e integrar sistemas de um jeito muito mais ágil.
Pra quem trabalha com dados: Coletar e pré-processar dados de várias fontes fica bem mais fácil.
Pra quem curte IA: É uma oportunidade de ouro pra experimentar, criar projetos e mergulhar de cabeça sem se preocupar com custos de licença.

Então, gurizada, meu convite é: dá uma olhada no meu vídeo pra ver a demonstração prática e descobrir como tu podes começar a usar o OpenClaw. É uma baita oportunidade de colocar uma ferramenta poderosa no teu cinto de utilidades, e o melhor: de graça! E se quiser se aprofundar mais, eu também escrevi um post sobre isso lá no meu site, marcelocabral.com.br. Deixa um comentário aqui embaixo me contando o que tu achou ou se já usou o OpenClaw! Ficarei feliz em trocar uma ideia contigo. Abraço!", tags=[

Agentes de IA Open Source: A Alternativa Gratuita que Supera o ClaudeCode

Marcelo Cabral Ghilardi — Sat, 02 May 2026 03:00:00 +0000

Gurizada, beleza? Outro dia eu tava fuçando umas paradas de IA aqui no meu canto, pensando em como a gente tá sempre correndo atrás de ferramentas que resolvam nossos pepinos de desenvolvimento, né? E aí me deparei com um assunto que me deixou pilhado: os agentes de IA open source. Sabe, aqueles que a gente pode mexer, adaptar e, o melhor de tudo, usar de graça.

A motivação pra falar disso veio forte depois que gravei um vídeo novo lá pro meu canal no YouTube (o link tá mais pra baixo, gurizada!). Nele, eu testo uns três agentes open source que, na minha humilde opinião e nos testes que fiz, tão dando um banho em soluções mais famosinhas e pagas, tipo o ClaudeCode. Fiquei impressionado com o que vi, e pensei: "Preciso contar isso pro meu povo!".

A real é que o movimento open source na IA tá cada vez mais forte. Enquanto as gigantes tão aí com seus modelos fechados e caríssimos, uma galera fera tá desenvolvendo ferramentas incríveis e abrindo o código pra todo mundo. E isso é demais por vários motivos:

Grana no bolso: Quem não gosta de economizar, né? Nada de pagar licença maluca. A gente pode testar, usar à vontade e até brincar de modificar o código.
Liberdade pra mexer: Se o agente não faz exatamente o que tu precisa, a chance de adaptar é enorme. O código aberto é um convite à customização.
Comunidade unida: Bateu uma dúvida? Tem um bug chato? A comunidade open source tá aí pra ajudar, trocar ideia e, quem sabe, até melhorar a ferramenta junto contigo.
Inovação a mil: O desenvolvimento colaborativo costuma ser mais rápido. Novas ideias e correções pipocam na hora.

No vídeo que gravei, eu me empolguei e até sugeri pra galera parar de usar o ClaudeCode e dar uma chance pra essas alternativas. A ideia não é desmerecer ferramenta nenhuma, mas sim mostrar que existem opções gratuitas e que, na minha experiência, mostraram um desempenho superior em várias tarefas. Seja na geração de código, automação de tarefas de desenvolvimento ou até na interação com APIs, esses agentes open source tão mostrando um potencial gigantesco.

Se tu é dev, trabalha com IA, ou só tem curiosidade sobre o futuro da tecnologia, dá uma olhada no vídeo. Ele tá aí pra gente questionar o que tá estabelecido e explorar o que o mundo open source tem de melhor a oferecer. Não se prenda a soluções pagas se tem tanta coisa boa e gratuita esperando pra ser descoberta.

Pra conferir tudo isso na prática, assista no YouTube.

E aí, gurizada? Já usaram algum agente de IA open source? Qual a tua experiência? Me conta aí nos comentários! Adoraria saber o que vocês pensam.

IA de Graça em 2026: O Guia Definitivo da Infraestrutura Gratuita

Marcelo Cabral Ghilardi — Fri, 01 May 2026 12:30:00 +0000

Gurizada, outro dia me perguntaram se dá pra fazer IA de graça. Minha resposta, como sempre, foi um sonoro "Depende!". Mas se tu tá aqui, é porque, assim como eu, curte explorar o universo da Inteligência Artificial sem precisar vender um rim, né? Esse post é um desdobramento do meu vídeo onde eu mergulhei fundo nas opções de infraestrutura de IA gratuita que a gente tem em 2026.

A gente sabe que é tentador pensar em criar projetos de IA de ponta sem gastar nada. E a boa notícia é que o ecossistema de IA evoluiu tanto que hoje temos acesso a muita coisa bacana de graça: GPUs, ambientes de desenvolvimento, modelos pré-treinados... é um prato cheio pra quem tá começando ou quer experimentar.

Em 2026, a coisa tá ainda mais interessante. Pensa comigo:

Notebooks Colaborativos: O Google Colab e o Kaggle Kernels continuam sendo reis. São a porta de entrada pra muita gente, com acesso a GPUs de graça por um tempo.
Free Tiers de Cloud: AWS, Google Cloud, Azure... todas elas têm aquelas camadas gratuitas. Se tu planejar direitinho, dá pra treinar e até colocar uns modelos pra rodar sem custo.
Open Source é Rei: A comunidade open source é um tesouro! Modelos, bibliotecas, frameworks... tudo disponível pra gente usar e abusar, muitas vezes com um suporte da comunidade que é de cair o queixo.

Mas, gurizada, vamos ser sinceros: o "grátis" tem sempre um "porém". A gente tem que ficar esperto com as limitações de recursos, seja tempo de uso, poder de processamento ou armazenamento. Projetos que precisam escalar rápido ou lidar com muito dado podem rapidamente estourar esses limites. E, claro, algumas ferramentas gratuitas podem exigir um pouco mais de conhecimento técnico pra gente configurar e otimizar.

Minha dica de ouro pra tirar o máximo proveito? Otimiza teu código pra ele ser o mais eficiente possível. Reutiliza modelos pré-treinados sempre que der – pra quê reinventar a roda? E, fundamental: gerencia teus recursos! Fica de olho no consumo e desliga o que não tá usando.

Esse post é só um gostinho do que eu detalho lá no vídeo. Se tu quer realmente entender as entrelinhas e as melhores estratégias pra usar IA de graça em 2026, dá uma olhada no meu post original lá no marcelocabral.com.br ou, melhor ainda, assista ao vídeo completo no YouTube.

E aí, gurizada, já usaram alguma dessas infraestruturas gratuitas? Contem aí nos comentários o que acharam!

O que acontece QUANDO você clica na Internet? Desvendando a mágica!

Marcelo Cabral Ghilardi — Thu, 30 Apr 2026 17:27:09 +0000

Gurizada, outro dia me peguei pensando na quantidade de mágica que a gente consome sem nem piscar. Sabe aqueles cliques que a gente dá na internet sem pensar duas vezes? Pois é, por trás de cada um deles existe um universo de tecnologia que, se não fosse pelo vídeo que gravei recentemente pro canal Marcelo Cabral, eu mesmo ia continuar achando que era bruxaria. Esse post aqui no meu blog, "Decifrando a Internet: O que acontece quando você clica?", é uma tentativa de colocar no papel o que eu tentei explicar no vídeo "Como a Internet Funciona - Tu clica num botão — o que acontece?".

A real é que a gente se acostuma com a velocidade e a aparente simplicidade da web. Mas, gurizada, a coisa é muito mais complexa e fascinante do que parece. Quando você clica num link, não é só o seu dedo que se move. É uma cadeia de eventos que atravessa o mundo (literalmente, em alguns casos!) antes de trazer a resposta de volta pra sua tela.

Pensa comigo: seu navegador, que é tipo o seu embaixador na internet, manda um pedido. Esse pedido viaja por uma infraestrutura gigantesca, passando por roteadores, cabos (sim, tem cabo submarino nisso tudo!) e servidores que tão espalhados pelo planeta. Cada pedacinho dessa jornada é orquestrada por protocolos como o TCP/IP e o HTTP. São eles que garantem que a sua mensagem chegue inteira e no lugar certo, como um sistema de correios super avançado.

E pra saber pra onde mandar essa mensagem? Aí entra o DNS, o "catálogo telefônico" da internet. Ele traduz aquele endereço que a gente entende, tipo marcelocabral.com.br, pro número IP que os computadores usam pra se comunicar. Sem ele, a gente ia ficar perdido tentando decorar sequências de números.

No vídeo, eu tentei desmistificar justamente essa jornada. A ideia do canal é essa: pegar a tecnologia que parece de outro mundo e mostrar que ela é acessível, que a gente pode entender como funciona. Aquele clique simples é a ponta do iceberg de uma engenharia incrível.

Entender essa engrenagem toda não é só pra quem trabalha com TI, gurizada. É pra todo mundo que usa a internet no dia a dia. Ajuda a sacar porque uma página carrega rápido e outra não, o que pode estar rolando quando a conexão falha, e até a ter uma noção melhor de segurança. É o conhecimento básico pra quem quer ir além de só usar.

Se tu quer entender o que rola por trás de cada interação online e ver a internet com outros olhos, dá uma olhada no vídeo. É uma viagem pela complexidade que faz a nossa vida digital acontecer. E pra quem quiser se aprofundar um pouco mais, o post lá no blog também detalha esses pontos: assista no YouTube.

E aí, o que tu acha dessa complexidade toda? Comenta aí embaixo ou cola no vídeo pra gente trocar uma ideia!

Architecture and Technologies of Acertpix

Marcelo Cabral Ghilardi — Sun, 16 Jul 2023 12:05:15 +0000

Hey guys, I created a page with the architecture and technologies of Acertpix, I love talking about it, both to learn and to help!

linkedin.com/posts/marceloc…

(Survey) Which framework is your favorite?

Marcelo Cabral Ghilardi — Tue, 28 Dec 2021 15:49:11 +0000

https://www.linkedin.com/posts/marcelocabralghilardi_deeplearning-machinelearning-keras-activity-6881619202071953408-mjkY

Por que e quando usar Promise?

Marcelo Cabral Ghilardi — Mon, 30 Mar 2020 21:15:02 +0000

Oi Pessoas

Neste post vou explicar por que e quando devemos usar Promise, para isso, dividi nos seguintes tópicos:

Fluxo de código
old-style
Poder do Assíncrono
Promises
THEN encadeado para tratar os dados
O Poder do assíncrono com Promise

Fluxo de Código

Todos devemos saber que boa parte de nosso código JS é assíncrona, principalmente chamadas ao servidor. Isto é, não podemos garantir o fluxo de nosso código.
Por exemplo:

console.log("INICIO");

$.ajax('http://domain/service-1')
    .done(function (data) {
        console.log("chamada 01", data);
    })

$.ajax('http://domain/service-2')
    .done(function (data) {
        console.log("chamada 02", data);
    })

$.ajax('http://domain/service-3')
    .done(function (data) {
        console.log("chamada 03", data);
    })

console.log("FINAL");

No exemplo acima o resultado na tela, após o "INICIO", pode ser qualquer um, deve aparecer algo como:

INICIO
chamada 03
FINAL
chamada 01
chamada 02

Um trecho de código que está localizado após uma função assíncrona pode ser executado antes da mesma ter sido realizada, e quando temos mais de uma função assíncrona, não podemos garantir seu fluxo ordenado.

old-style

Para garantir o fluxo, podemos adotar várias alternativas, uma das alternativas mais usadas é encadear as chamadas, por exemplo:

console.log("INICIO");

$.ajax('http://domain/service-1')
    .done(function (data) {
        console.log("chamada 01", data);

        $.ajax('http://domain/service-2')
            .done(function (data) {
                console.log("chamada 02", data);

                $.ajax('http://domain/service-3')
                    .done(function (data) {
                        console.log("chamada 03", data);

                        console.log("FINAL");
                    })
            })
    })

No exemplo acima, podemos garantir o fluxo, mas o problema, nesta modelo, é que perdemos o poder do assíncrono.

Poder do Assíncrono

O que chamo de Poder do Assíncrono é o fato que quando fazemos chamadas para um servidor, muitas vezes podemos ter vários retornos simultâneos, deixando a leitura de nossa página muito mais rápida.

Veja a imagem abaixa, são 4 chamadas assíncronas ao servidor, a primeira levou 393ms, a segunda 1.53s, a terceira 1.55s e a última 1.51s. O tempo total para as 4 chamadas foi de menos de 2s, isso porque foram chamadas assíncronas.

Agora, neste mesmo exemplo acima, se as chamadas não fossem assíncronas, o tempo total seria de 4.98s, mais que o dobro, este é o Poder do Assíncrono.

Promises

Promise é um método para executar processos assíncronos. Um Promisse possui os estados pendente, realizado, rejeitado, finalizado.

A sintaxe padrão de um Promisse é:

     var novaPromessa = new Promise((resolve, reject) => { ... });

     novaPromessa
        .then( (data) => {...} )
        .catch( (erro) => {...} )

Onde:

ao criar, a situação equivale a pendente
se preencher resolve, a situação equivale a realizado e executa o then
se preencher reject, a situação equivale a rejeitado e executa o catch
se adicionar mais um then após o catch, a situação equivale a finalizado, podendo adicionar then e catch encadeados.

Vamos para o primeiro exemplo, no exemplo abaixo, simulamos a chamada de leitura de clientes (poderia ser uma chamada $ajax ou fetch), o retorno da chamada atribuímos a resolve, neste caso o método em then recebe os dados informados no resolve.

console.log("Inicio");

var processos = new Promise((resolve, reject) => {

    setTimeout(() => {
        console.log("leituraClientes: simulação de chamada em 1 segundo");
        var dadosRetornados = "cliente JOÃO"

        resolve(dadosRetornados);
        //reject("Deu erro");
    }, 1000);

}).then((dados) => {
    console.log("then:",dados);

}).catch((erro) => {
    console.error("catch:", erro);
});

Resultado:

Inicio
leituraClientes: simulação de chamada em 1 segundo
then: cliente JOÃO

Poderia ter dado um erro na chamada, os dados poderiam ser inválidos, para simular podes comentar a linha do resolve e descomentar a linha do reject.

console.log("Inicio");

var processos = new Promise((resolve, reject) => {

    setTimeout(() => {
        console.log("leituraClientes: simulação de chamada em 1 segundo");
        var dadosRetornados = "cliente JOÃO"

        //resolve(dadosRetornados);
        reject("Deu erro");
    }, 1000);

}).then((dados) => {
    console.log("then:",dados);

}).catch((erro) => {
    console.error("catch:", erro);
});

Resultado:

Inicio
leituraClientes: simulação de chamada em 1 segundo
catch: Deu erro

Note que, a informação que colocar no resolve ou reject vai para o then ou catch, respectivamente.

THEN encadeado para tratar os dados

As vezes, ao receber dados do servidor, precisamos tratar os dados, filtrar, modificar, etc.... Neste caso, podes fazer um código enorme, ou quebrar o código em partes.

Esta característica não é do Promise, mas achei importante demonstrar.

No exemplo abaixo, ao receber os dados da chamada, passa por vários *then*s até finalizar todo processo.

console.log("Inicio");

var erro ;
//erro = true;

var leituraClientes = new Promise((resolve, reject) => {

    console.log("L01: Buscando clientes");
    dados = "CLIENTE 01; CLIENTE 02; CLIENTE 03";

    setTimeout(() => {

        if (erro)
        reject("DEU ERRO");

        console.log("Dados recebidos: ", dados);

        resolve(dados);
    }, 1000);

}).then((dados) => {
    console.log("");
    console.log("L02 toLower");
    console.log("Dados recebidos: ", dados);

    dados = dados.toLowerCase();
    console.log("Dados enviados: ", dados);

    return dados


}).then((dados) => {

    console.log("");
    console.log("L03 split");
    console.log("Dados recebidos: ", dados);

    dados = dados.split(";")
    console.log("Dados enviados: ", dados);

    return dados

}).then((dados) => {

    console.log("");
    console.log("Resultado Final");
    console.log("Dados recebidos: ", dados);

}).catch((erro) => {
    console.error("ERRO:", erro);
});

Resultado

Inicio
L01: Buscando clientes
Dados recebidos:  CLIENTE 01; CLIENTE 02; CLIENTE 03

L02 toLower
Dados recebidos:  CLIENTE 01; CLIENTE 02; CLIENTE 03
Dados enviados:  cliente 01; cliente 02; cliente 03

L03 split
Dados recebidos:  cliente 01; cliente 02; cliente 03
Dados enviados:  [ 'cliente 01', ' cliente 02', ' cliente 03' ]

Resultado Final
Dados recebidos:  [ 'cliente 01', ' cliente 02', ' cliente 03' ]

Você pode simular um erro descomentando a linha com o texto: //erro = true;. O resultado será:

Inicio
L01: Buscando clientes
Dados recebidos:  CLIENTE 01; CLIENTE 02; CLIENTE 03
ERRO: DEU ERRO

O Poder do assíncrono com Promise

Esta é a parte mais importante deste post, se temos várias chamadas, queremos fazê-las de forma assíncrona, mas ao mesmo tempo, preciso garantir que todas foram finalizadas antes de iniciar um processo (uma tela por exemplo).

Para isso podemos usar o Promisse.all, este método garante que só vai executar o then se todas as chamadas estiverem finalizadas e sem erros. A sintaxe é:

Promise.all([chamadas,...]).then( (retornos) => {...} )*.

A forma de usar é criar todos os Promises necessários, e chamá-los todos a partir do método, exemplo de código:

var clientes = new Promise((resolve, reject) => { resolve("clientes") })
var departamentos = new Promise((resolve, reject) => { resolve("deptos") })
var equipes = new Promise((resolve, reject) => { resolve("equipes") })
var teste = new Promise((resolve, reject) => { resolve("teste") })

Promise.all([clientes, departamentos, equipes, teste]).then( (values) => {
    console.log("Resultados:", values);
}).catch((erro) => {    
    console.error("ERRO", erro)
})

No exemplo acima, após todas as chamadas terminarem, os valores de retornos das chamadas são atribuídas à values no método then do Promise.all. Caso algum método retornasse erro, executaria o catch do Promise.all

Também existe o Promise.race, é exatamente uma corrida entre as chamadas. A primeira chamada que resolver ou rejeitar ganha a corrida, e as demais são ignoradas.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise

Repositório com os códigos: https://github.com/kabrau/publications/tree/master/Promises

Arrow Functions (ou funções de seta)

Marcelo Cabral Ghilardi — Wed, 26 Feb 2020 02:09:40 +0000

Oi Pessoas

A nova (nem tão nova) versão de javascript ES6 trouxe as arrow functions. São uma nova forma de criar funções utilizando setas () => {}.

Poderia dizer que arrow functions substitui as functions, mas é bem mais que isso, é uma forma com sintaxe mais curta e elegante para criar funções. Além disso, nem sempre elas podem ser usadas.

Neste post, além de explicar a sintaxe, vou explicar as diferenças de escopo.

IMPORTANTE: Todos os exemplos podem ser executados no console do Navegador, no Chrome, tecle (Ctrl + Shift + J)

IMPORTANTE: Leia no final deste post onde não devem ser usadas as arrow functions

Sintaxe

A sintaxe para criação de arrow functions possui 3 partes () => {}:

Os parênteses (), que é por onde a função recebe os argumentos (assim como na function tradicional);
A seta =>, responsável pelo nome “arrow” function;
E as chaves {}, o bloco de código que representa o corpo da função.

Em algumas situações os parênteses () as chaves {} são opcionais

Antes, escrito com function tradicional

hello = function() {
  return "Hello World!";
}
hello() // Hello World!

Agora escrito em com arrow function

hello = () => {
  return "Hello World!";
}
hello() // Hello World!

A princípio não parece muita vantagem, apenas a sintaxe mais curta, a keyword function foi suprimida. Mas podemos deixar mais curta ainda

hello = () => "Hello World!";
hello() // Hello World!

No exemplo acima, além de suprimir a keyword function, também foi suprimida a keyword return e as chaves {}

Sintaxe com parâmetros

Exemplo de uma função de soma, recebendo dois parâmetros e retornando a soma

Antes, escrito com function tradicional

sum = function (a, b) {
  return a + b
}
sum(10,20) // 30

Agora escrito em com arrow function

sum = (a, b) => {
  return a + b
}
sum(10,20) // 30

Podemos deixar mais curta ainda

sum = (a, b) => a + b
sum(10,20) // 30

Se tivermos apenas um parâmetro, podemos escrever sem os parênteses (), exemplo:

soma10 = a => a + 10
soma10(20) // 30

Retornar Objetos Literais

As arrow functions podem ser usadas para retornar uma expressão de objetos literais com uma sintaxe bem mais enxuta _(neste caso, o corpo sempre precisa ser colocado entre parênteses).

//Escrito com function tradicional
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

//Escrito em com arrow function
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6 (4, "Kyle"));   // Object {id: 4, name: "Kyle"}

Manipulação de array com map ou reduce

Um caso comum para arrow functions é na manipulação de array, é comum que você precise mapear (map) ou reduzir (reduce) arrays

Assim que der, vou fazer um post sobre manipulação de arrays

Vamos criar um array simples

const smartPhones = [
  { name:'iphone', price:649 },
  { name:'Galaxy S6', price:576 },
  { name:'Galaxy Note 5', price:489 }
];

Agora vamos criar uma matriz de objetos com apenas os preços dos smartphones

//Escrito com function tradicional
var pricesFunc = smartPhones.map(function(smartPhone) {
  return smartPhone.price;
});

console.log(pricesFunc); // [649, 576, 489]


//Escrito em com arrow function
const pricesArrow = smartPhones.map(smartPhone => smartPhone.price);

console.log(pricesArrow); // [649, 576, 489]

Outro exemplo, agora usando o método filter dos arrays

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

//Escrito com function tradicional
var divisibleByThrreeES5 = array.filter(function (v){
  return v % 3 === 0;
});

//Escrito em com arrow function
const divisibleByThrreeES6 = array.filter(v => v % 3 === 0);

console.log(divisibleByThrreeES6); // [3, 6, 9, 12, 15]

Um exemplo com reduce, neste caso a soma de todos elementos

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);  
console.log(sum ); // 66

Promises e Callbacks

Códigos que usam promises e chamadas assincronas (callbacks) geralmente possuem uma grande quantidade de function e return

Assim que der, vou fazer um post sobre Promises

Se escrevermos com funções modernas, nós atribuímos nossas callbacks às promises retornadas, formando uma cadeia de promise:

//Escrito com function tradicional
doSomething().then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);

Os argumentos para then são opcionais, e catch(failureCallback) é uma abreviação para then(null, failureCallback).
Agora, escrevendo o mesmo código com arrow functions:

//Escrito em com arrow function
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => {
  console.log(`Got the final result: ${finalResult}`);
})
.catch(failureCallback);

Particularmente, eu vejo o código em arrow functions muito mais simples para ler, além de mais elegante.

Podemos substituir todas as function por arrow function? NÃO

Poderíamos pensar que sim, mas não é bem assim, um dos principais motivos é o uso da palavra chave this.

Tenho um post onde explico sobre this

Marcelo Cabral Ghilardi

Feb 25 '20

'this' em Javascript

#javascript #webdev #fullstack #beginners

Comments 2

3 min read

Diferente das function tradicionais, você não consegue injetar o this em arrow functions. Isso mesmo!

Se o this for usado dentro de uma arrow functions, esse this vai fazer referência ao objeto que ele já era referência no momento da criação da arrow function.

Vamos comparar, se criarmos um objeto com dois métodos, ambos métodos acessam this, um criado por function tradicional (correrFunc) e outro por arrow function (correrArrow).

pessoa = {
    nome: "Cebolinha",

    correrFunc: function() {
         console.log(this);
    },

    correrArrow: () => console.log(this)
}
pessoa.correrFunc() // => Object {nome: "Cebolinha", correrFunc:, correrArrow: }
pessoa.correrArrow() // => Window

O método correrFunc retorna o próprio objeto e o método correrArrow retorna o objeto window. Isso ocorre porque no momento da criação do objeto, o escopo era do window (mesmo que usasse o 'use strict', veja meu post sobre this).

Arrow functions não tem acesso aos arguments

Pelo mesmo motivo do this, arrow functions não tem acesso aos arguments, isto é, teria acesso a arguments globais e não ao contexto local.

// Traditional function
var crescente = function() {
  return Array.from(arguments).sort((a, b) => a > b)
}
crescente(3,2,5,1,4,8,7,6); // Array [ 1, 2, 3, 4, 5, 6, 7, 8 ]


// Arrow function
var crescente = () => {
  return Array.from(arguments).sort((a, b) => a > b);
}
crescente(3,2,5,1,4,8,7,6); // Exception: ReferenceError: arguments is not defined

Uma solução para usar arrow functions neste caso seria usar o spread operator, para criar uma função com REST params, desta forma

// Arrow function com spread operator
var crescente = (...arguments) => {
  return Array.from(arguments).sort((a, b) => a > b);
}
crescente(3,2,5,1,4,8,7,6); // Array [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Arrow functions não podem ser usadas como constructor

As arrow functions não podem ser usadas como construtores, não pode usar o operador new para criar uma nova instância de objeto.

// Traditional function
const ConstrutorFunc = function () {};
new ConstrutorFunc(); // Object { }

// Arrow function
const ConstrutorArrow = () => {};
new ConstrutorArrow(); // Constructor is not a constructor

Mais um exemplo de quando NÃO devemos usar arrow functions

Outro caso que é bem comum são em eventos, o método addEventListener sempre injeta o this, mas para acessar o this precisamos usar function tradicional.

Veja o exemplo:

const $input = document.querySelector('input[type="text"]')
$input.addEventListener('input', function () {
  console.log('value:', this.value)
}, false)

Assumindo que exista um campo input, ao começar a digitar algo dentro desse campo, podemos ver o valor do campo sendo exibido no console, pois o this dentro da função passada como listener do evento é injetado pelo addEventListener, fazendo referência ao objeto do DOM ao qual o evento foi atrelado.

Agora tente usar uma arrow functions no lugar da function tradicional

const $input = document.querySelector('input[type="text"]')
$input.addEventListener('input', () => {
  console.log('value:', this.value)
}, false)

Nesse caso, veja que o valor exibido no console é sempre undefined (a menos que exista um objeto no escopo em que a função foi criada, e esse objeto tenha uma propriedade value).

Considerações

se a função que você tem não depende de this, você pode substituir por arrow functions sem problemas;
evite usar o this. No caso do exemplo do evento, toda função listener de um evento recebe um objeto de evento, com uma propriedade target, que faz referência ao elemento que recebeu o evento. Use esse objeto se precisar manipular ou fazer qualquer coisa com o elemento que disparou o evento, ao invés de usar this. Dessa forma você evita os problemas vistos acima;
Arrow functions não tem acesso aos arguments como as functions tradicionais.
Arrow functions não podem ser usadas como construtor, não podemos aplicar o operador new;
Exceto pelo this, new e arguments, todas as demais functions tradicionais podem ser trocadas por arrow functions.

Perdi Algo?

Por favor, me diga se eu esqueci de algo!!

Obrigado a Vinicius Da Mata Pickrodt pela correção deste post.

Referências

^{- https://raphaelfabeni.com/es6-arrow-functions/}
^{- https://medium.com/@raphalima8/arrow-functions-declara%C3%A7%C3%A3o-funcionamento-escopos-e-o-valor-de-this-9cb6449bca31}
^{- https://blog.da2k.com.br/2019/01/07/javascript-tudo-sobre-arrow-functions/}
^{- https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/}
^{- https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions}
^{- https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Usando_promises}
^{- https://medium.com/@raphalima8/arrow-functions-declara%C3%A7%C3%A3o-funcionamento-escopos-e-o-valor-de-this-9cb6449bca31}
^{- https://medium.com/frontend-quest/arrow-functions-vs-functions-9048ec12b5c6}

'this' em Javascript

Marcelo Cabral Ghilardi — Tue, 25 Feb 2020 22:13:10 +0000

this em javascript

Oi Pessoas

Muitos programadores se confundem ao usar a keyword this, principalmente porque this em javaScript se comporta diferente de outras linguagens, além de ter modo restrito e não restrito.

Simplificando, this refere-se à um objeto de um determinado contexto, por exemplo, um método.

IMPORTANTE: Todos os exemplos podem ser executados no console do Navegador, no Chrome, tecle (Ctrl + Shift + J)

Para quem é iniciante

O que é um objeto ?

Objeto é uma coleção de dados e/ou funções

Exemplo de objeto

const pessoa = {
    nome: "Cebolinha",
    idade: 80,
    pai: "Mauricui de Sousa",
    melhoAmiga: "Mônica"
 }

O que é um método ?

É uma ação de um objeto

Exemplo de método

const pessoa = {
    nome: "Cebolinha",

    correr: function() {
         console.log(this);
    }
}

No contexto global

Em um contexto global, this refere-se ao objeto global

// Em navegadores web, o objeto window é também o objeto global:
console.log(this === window); // true

// o objeto document é o proprietário de todos os demais objetos da página
console.log(this.document === document); // true

//Neste caso, tanto que podemos referenciar por this ou window 
this.meuValor= 37;
console.log(this.meuValor); // 37
console.log(window.meuValor); // 37
console.log(meuValor); // 37

'use strict'

No exemplo abaixo, sem o uso do 'use strict', ao executarmos a função getThis, criada no escopo global, em algum navegador, vamos ter como retorno o objeto window.

function getThis () {
  return this
}
console.log(getThis()) // Objeto window

Quando usarmos 'use strict', essa diretiva faz com que o this global seja undefined.

'use strict'

function getThis () {
  return this
}

console.log(getThis()) // undefined

No contexto de objeto

Em um contexto de objeto, refere-se a instancia do objeto

Exemplo 1

const pessoa2 = {
    nome: "Cebolinha",

    correr: function() {
         console.log(this);
    }
}

pessoa2.correr(); // => Object {nome: "Cebolinha", correr: }

Exemplo 2

const pessoa = {
    nome: "Cebolinha",
    idade: 80,

    aniversario: function() {
         this.idade += 1;
    }
}

console.log('Idade '+pessoa.idade + "."); // => Idade 80.

pessoa.aniversario(); // += 1

console.log('Idade '+pessoa.idade + "."); // => Idade 81.

Arrow Functions (ou funções de seta)

Nas arrow functions o this é definido pelo contexto da execução.
Não importa como for, o this do foo mantém o valor que recebeu quando foi criado.

Exemplo de **_this** em arrow function_

var objetoGlobal = this; 
var minhaFuncaoArrow = (() => this);

//this assume o objeto global
console.log(minhaFuncaoArrow() === objetoGlobal); // true

//mesmo que seja chamado de outra função
var obj = {MeuMetodo: minhaFuncaoArrow};
console.log(obj.MeuMetodo() === objetoGlobal); // true

Mesmo que seja um método de um objeto mantem o valor no momento da criação

let exampleFunc = {
    f1: function () {
        console.log("exampleFunc f1", this);
        let f2 = function () {
            console.log("exampleFunc f2", this);
        }
        f2();
    }
}


let exampleArrow = {
    f1: () => {
        console.log("exampleArrow f1", this);
        let f2 = () => console.log("exampleArrow f2", this);
        f2();
    }
}

exampleFunc.f1();
exampleArrow.f1();

exampleF.f1();
// Resultado
// Objeto
// Window

exampleA.f1();
// Resultado
// Window
// Window

Se fosse simplificar, Arrow Functions substituem as functions, só que não. Tenho um post onde explico sobre Arrow Functions

Arrow Functions (ou funções de seta)

Marcelo Cabral Ghilardi
Marcelo Cabral Ghilardi

Marcelo Cabral Ghilardi

Follow

Feb 26 '20

Arrow Functions (ou funções de seta)

#javascript #webdev #beginners #fullstack

6 reactions
Comments Add Comment

6 min read

Perdi Algo ?

Por favor, me diga se eu esqueci de algo !!