DEV Community: Taise Soares

Resumo do Livro: O Programador Pragmático de aprendiz a mestre (Capitulo 2)

Taise Soares — Thu, 10 Aug 2023 11:35:03 +0000

Olá pessoas, vamos continuar mergulhando no mundo da codificação com o resumo do incrível livro O Programador Pragmático, hoje iremos abordar o segundo capitulo, bora la?

Capitulo 2: Entropia de software

Já parou pra pensar como o desenvolvimento de software é como um universo próprio? Mesmo que não siga as leis físicas, ele não está imune ao caos. É aí que entra a tal da entropia, que é basicamente a bagunça que se acumula. Quanto mais bagunça, mais o software parece que está se desgastando, tipo uma camiseta velha que vai ficando surrada com o tempo. E essa deterioração pode acontecer por várias razões, mas uma das maiores é a psicologia da galera que tá trabalhando no projeto. Mesmo que seja um projeto solo, a mentalidade por trás dele é crucial. Até aqueles projetos mega planejados, com os melhores profissionais, podem acabar indo pro buraco se a bagunça começar a se multiplicar.

Aqui entra a "Teoria da Janela Quebrada". Imagine que você tem uma casa bonitona, aí quebra uma janela e você deixa por isso mesmo, sem consertar. O que acontece? Quem mora lá começa a sentir que ninguém tá nem aí pra casa, aí outra janela quebra. E a coisa vão piorando, com lixo acumulando, pichações aparecendo, até que o lugar vira um verdadeiro caos. O mesmo vale para software: um probleminha não resolvido leva a outros, e logo você tá no meio de uma confusão que parece que não tem mais fim. É por isso que a ideia é consertar logo as "janelas quebradas", mesmo que seja um quebra-galho, porque isso impede a bagunça de se espalhar. Até mesmo se você botar um "band-aid" no código ruim, tipo um comentário dizendo "Não Implementado" ou substituindo por dados falsos, já ajuda a mostrar que você está de olho na situação e não está deixando o caos se instalar.

E aí vem uma lição importante, tipo um alerta de incêndio. Imagina que você tem um amigo com uma casa chiquérrima, cheia de coisas caras e valiosas. Um dia, pega fogo numa tapeçaria, e os bombeiros chegam correndo pra salvar a situação. Mas antes de botarem água no fogo, eles estendem uma esteira pra não sujar o carpete. Ou seja, mesmo no meio do caos, eles tão cuidando dos detalhes. No mundo do software, é a mesma coisa. Uma parte quebrada, um pedaço de código mal feito ou uma decisão furada da chefia, pode ser o estopim pro desastre. Se a gente não cuidar logo disso, a bagunça se espalha e o projeto inteiro vai pro ralo. Então, a moral da história é: não dá pra deixar as "janelas quebradas" de lado. A gente tem que ser o bombeiro que não deixa o fogo se alastrar, senão a entropia ganha e a coisa fica feia de vez.

Vamos imaginar

Vamos imaginar meu pequeno gafanhoto, você está na no momento do desenvolvimento de um software, tudo fluindo, código bem organizado, tudo nos trinques. Aí, de repente, você encontra um probleminha, tipo um bug esquisito que faz o programa dar uma travada chata. O que você faz? Ah, decide deixar pra lá, porque, sei lá, é só um probleminha pequeno, não vai afetar muito, né? Aí você volta pra escrever mais código novo, empolgado com as ideias, mas o bug tá lá, quietinho, esperando pra virar o centro da atenção.

Passam uns dias, e aí começa a acontecer coisa estranha no programa. Outros bugs aparecem, tipo formigas seguindo um rastro de migalhas. Aí o pessoal da equipe começa a notar que as coisas tão ficando meio confusas, mas todo mundo tá tão focado nas novidades que ninguém para pra pensar que talvez o problema seja o tal bug lá do início. Aí acontece o clássico: um programador olha pro código problemático e pensa "Aff, tá uma bagunça mesmo, mas não vou mexer agora, tô ocupado demais". E pronto, a tal "janela quebrada" tá ali, aberta, deixando a confusão entrar de mansinho.

Aí o projeto continua, mas a coisa vai ficando cada vez mais doida. O pessoal começa a jogar código em cima de código, sem muita organização, e parece que tá todo mundo correndo atrás do próprio rabo. E o bug inicial? Virou um monstro de sete cabeças, uma confusão tão grande que ninguém nem sabe por onde começar a consertar. E o resultado final? Um software todo bagunçado, cheio de bugs, e aquela sensação de que o trem saiu dos trilhos e ninguém sabe como voltar pro caminho certo.

Então, a moral da história é: não deixa a "janela quebrada" lá no cantinho. Quando você encontra um probleminha, mesmo que seja bobo, meta a mão na massa e conserta logo. Assim, você evita que a bagunça se espalhe feito fogo em capim seco. Porque a verdade é que, se você deixa pra lá, o problema só vai crescer e aí o estrago é certo. É como arrumar a bagunça da sua casa: se você deixar uma coisa fora do lugar, logo o resto começa a ficar bagunçado também. Então, bora ser o bombeiro do você próprio código e não deixar a entropia dominar a parada!

Conclusão:

Portanto, meu pequeno gafanhoto, seja no mundo do software ou na vida real, a moral é clara: não dá pra deixar os problemas de lado, porque uma janela quebrada, seja no código ou na rotina, pode se transformar num tsunami de caos. A solução é botar a mão na massa desde o começo, resolver os bugs na hora e não dar brecha pra bagunça se espalhar. Assim, a gente mantém a ordem, evita o desgaste e garante que o nosso sossego, seja no código ou na vida, continue nos eixos. Então, bora encarar os desafios de frente e não deixar a entropia ganhar essa!

Até o proximo capitulo :)

Resumo do Livro: O Programador Pragmático de aprendiz a mestre (Capitulo 1)

Taise Soares — Tue, 08 Aug 2023 00:23:47 +0000

Olá pessoas, se você é um(a) entusiasta da programação ou alguém que está mergulhando no mundo da codificação, prepare-se para uma jornada transformadora rumo à excelência no desenvolvimento de software. Imagine ter em mãos um guia repleto de insights práticos e dicas valiosas dos mestres da programação.

Bem-vindo(a) ao resumo por capítulo do livro "O Programador Pragmático", onde vamos explorar, de forma descontraída e direta, como cada capítulo deste livro revolucionário pode levar suas habilidades de codificação para um novo patamar.

Prepare-se para adquirir conhecimentos que vão muito além do código em si, abrangendo desde a gestão de projetos até a otimização do seu fluxo de trabalho. Vamos embarcar nessa jornada rumo à maestria na programação, um capítulo de cada vez!

Capitulo 1: O gato comeu meu código-fonte

O texto fala sobre aquele tipo de programador que não só sabe escrever código, mas tem uma atitude especial. Sabe aquela galera que olha para um problema e não vê só o problema em si, mas como ele se encaixa no cenário geral? Pois é, esses são os "programadores pragmáticos". Eles pensam no quadro completo, levam em conta o contexto, não ficam só no imediato.

Mas olha, não para por aí! Eles também não ficam de braços cruzados esperando que as coisas se resolvam sozinhas. Não, não! Eles botam a mão na massa, são responsáveis pelo que fazem e não deixam os projetos irem ladeira abaixo. Eles encaram os problemas de frente, não importa o tamanho, e buscam sempre aprender com os erros. Além disso, eles sabem que, às vezes, a mudança é necessária e não têm medo de encará-la.

E sabe o que é massa? Eles não ficam dando desculpas esfarrapadas quando algo dá errado. Assumem a responsabilidade. Se algo sai dos trilhos, eles não ficam apontando dedos ou inventando histórias malucas. Eles têm a ética de encarar a situação, ser honestos sobre os perrengues e propor soluções, entende? E nem é só isso, eles não têm medo de pedir ajuda quando precisam e estão sempre ligados nas opções, em como podem melhorar as coisas. E, eles nem deixam os outros na mão, se comunicam bem e tão sempre dando uma força. Programação pragmática é um estilo de vida, é encarar as barreiras de frente, sem desculpinhas e buscando sempre melhorar.

Vamos imaginar...

sabe aquele amigo que é daqueles "programadores pragmáticos"? Deixa eu te contar uma história real que ilustra bem isso. Imagina o João, lá no escritório, trabalhando no seu projeto de desenvolvimento. O chefe chega e diz que tem um bug chato que está deixando o sistema todo travado. O João não pira, né? Ele já conhece a filosofia pragmática. Ele não só olha para o bug em si, mas também para o contexto geral do sistema. Ele sabe que só resolver o bug pode não ser suficiente, então já começa a pensar em como isso se encaixa na estrutura toda.

E aí, o João não fica esperando que a coisa se resolva sozinha. Ele não é daqueles que ficam empurrando problemas para debaixo do tapete. Ele põe a mão na massa, investiga a fundo, encontra a causa raiz do bug e ainda documenta o processo todo pra ninguém ter dor de cabeça depois. E não para por aí! Ele também não é de jogar a culpa nos outros ou nas circunstâncias. Ele chega pro chefe e fala na lata: "Olha, deu ruim aqui, mas já fiz uma análise e vou consertar. E pra evitar que isso aconteça de novo, vou implementar umas medidas de segurança extras".

Aí, imagina o chefe perguntando se o João tinha tentado isso ou aquilo antes de chegar à conclusão. O João não fica na defensiva, ele sabe que é normal esse tipo de pergunta. Ele responde normal, porque já tinha imaginado essa cena na cabeça, tinha antecipado as possíveis questões. E não vem com desculpa esfarrapada, ele mostra os testes que já fez e as opções que considerou, explicando o porquê de ter escolhido aquela solução.

Isso, meu pequeno gafanhoto, é programação pragmática. É saber encarar os perrengues com atitude, assumir a responsa, pensar no cenário geral e sempre buscar soluções. E a moral da história é: se você quer se dar bem nesse mundo da programação, fica esperto com essa mentalidade pragmática, porque ela é o pulo do gato pra mandar bem.

Conclusão

Então, meu pequeno gafanhoto, ser um programador pragmático é olhar alem do código, sabe? É não ficar só olhando pro próprio umbigo, mas entender o contexto completo. É botar a mão na massa, assumir a bronca quando algo dá errado, e não ficar de mimimi. É não só resolver os bugs, mas também deixar o sistema melhor do que estava antes. É ter uma boa comunicação, ser honesto sobre os bugs e propor soluções em vez de só jogar a culpa nos outros. Se você quer ser o ninja da programação, essa é a chave: pensamento pragmático é a chave pro sucesso nesse mundão digital.

Até o proximo capitulo :)

Série React Hooks: useRef

Taise Soares — Mon, 07 Aug 2023 13:27:09 +0000

Olá pessoas, bora continuar nossa séria sobre os hooks do nosso querido ReactJS, e hoje, vamos mergulhar no maravilhoso mundo do useRef hook no ReactJS. É como ter um superpoder que permite gerenciar valores mutáveis em seus componentes. Então, se prepare e prepare-se para elevar o seu jogo no React!

Caso queriam ver os outros artigos sobre essa série, segue links de artigos anteriores e nosso github:

github

Afinal, o que é o Hook useRef? 🤔

O useRef é um gancho (ou hook) que permite que você acesse e manipule diretamente elementos do DOM em seus componentes. Parece interessante? Então continue lendo, pois vamos mergulhar nesse conceito de forma descontraída e profissional. Ele é como uma ferramenta mágica que ajuda você a armazenar e acessar valores mutáveis em componentes funcionais. É como ter um bilhete adesivo que lembra as coisas para você, mas muito mais poderoso!

Quando usar o useRef?

Você pode estar se perguntando: "Quando devo usar o hook useRef?". Bem, meu pequeno gafanhoto, aqui estão algumas situações em que ele é útil:

Referenciando elementos do DOM: Quando você precisa pegar um elemento do DOM, o useRef está lá para te ajudar. Ele permite que você acesse e manipule esse elemento como um verdadeiro mestre. Diga adeus ao antigo document.getElementById()!
Gerenciando valores persistentes: Às vezes, você deseja que um valor persista entre as renderizações sem desencadear uma renderização em si. É aí que o useRef brilha. Ele mantém o valor e você pode acessá-lo sempre que precisar, sem interferir no ciclo de renderização do seu componente.

Exemplos de código para te ajudar!

Agora, vamos colocar a mão na massa com alguns exemplos de código. Mas espere! Vamos incrementar as coisas com TypeScript, para que você tenha o melhor dos dois mundos: segurança de tipos e a magia do useRef.

Exemplo 1: Referenciando um Elemento Textarea

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

export const AutosizeTextarea = () => {
  const textareaRefElement = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRefElement.current) {
      textareaRefElement.current.style.height = 'auto';
      textareaRefElement.current.style.height = `${textareaRefElement.current.scrollHeight}px`;
    }
  }, []);

  const handleChange = () => {
    if (textareaRefElement.current) {
      textareaRefElement.current.style.height = 'auto';
      textareaRefElement.current.style.height = `${textareaRefElement.current.scrollHeight}px`;
    }
  };

  return <textarea ref={textareaRefElement} onChange={handleChange} />;
};

Neste exemplo, utilizamos o useRef para criar uma referência ao elemento textarea. O useEffect é usado para ajustar automaticamente a altura do textarea quando o componente é montado. Definimos a altura inicial como 'auto' e, em seguida, atualizamos para o valor de scrollHeight do textarea, ajustando a altura com base no conteúdo. A função handleChange é acionada sempre que o valor do textarea é alterado, recalculando a altura para acomodar o novo conteúdo.

Exemplo 2: Foco no Carregamento

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

export const AutoFocusInput = () => {
  const inputRefElement = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRefElement.current) {
      inputRefElement.current.focus();
    }
  }, []);

  return <input ref={inputRefElement} type="text" />;
};

Neste exemplo, usamos o useRef para criar uma referência ao elemento de input. O useEffect é usado para dar foco ao input quando o componente é montado. Se inputRefElement.current não for nulo, ou seja, se o elemento de input existir no DOM, chamamos o método focus()para trazer o foco para o campo de input. Isso permite que o input seja focado automaticamente assim que o componente for renderizado.

Exemplo 3 e ultimo: Acompanhamento do Redimensionamento da Janela

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

export const WindowResizeTracker = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const [windowHeight, setWindowHeight] = useState(window.innerHeight);
  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    const handleResize = () => {
      if (resizeTimeoutRef.current) {
        clearTimeout(resizeTimeoutRef.current);
      }

      resizeTimeoutRef.current = setTimeout(() => {
        setWindowWidth(window.innerWidth);
        setWindowHeight(window.innerHeight);
      }, 300);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      if (resizeTimeoutRef.current) {
        clearTimeout(resizeTimeoutRef.current);
      }
    };
  }, []);

  return (
    <div>
      <p>Width: {windowWidth}px</p>
      <p>Height: {windowHeight}px</p>
    </div>
  );
};

este exemplo, além de rastrear o redimensionamento da janela, exibimos as dimensões da janela na tela. Criamos dois estados: windowWidth e windowHeight, que armazenam a largura e a altura da janela, respectivamente. Dentro da função handleResize, atualizamos esses estados quando ocorre o redimensionamento da janela.

Na parte de renderização, exibimos as dimensões da janela usando

. Assim, sempre que a janela for redimensionada, as dimensões serão atualizadas e exibidas na tela.

Esses exemplos demonstram casos adicionais de uso do useRef no TypeScript. Seja ajustando a altura de um textarea automaticamente, acompanhando o redimensionamento da janela ou dando foco a um input no carregamento, o useRef fornece um mecanismo poderoso para lidar com valores mutáveis e acessar elementos do DOM em componentes React.

Conclusão

Em resumo, o useRef é uma ferramenta poderosa no ReactJS que permite a manipulação direta de elementos do DOM em seus componentes. Use-o quando precisar interagir diretamente com o DOM, como focar um campo de entrada ou obter valores de um elemento. No entanto, se você estiver lidando apenas com o estado interno do componente ou atualizações do ciclo de vida, o useRef pode não ser necessário.

Espero que este artigo descontraído e profissional tenha ajudado você a entender melhor o uso do useRef no ReactJS. Agora você está pronto para explorar e utilizar esse gancho incrível em seus projetos. Divirta-se codificando!

MBA Arquitetura: Diferença entre Enterprise architecture vs solution architecture

Taise Soares — Thu, 13 Jul 2023 12:05:53 +0000

Olá pessoas, continuando minha jornada no MBA de Arquitetura de Software, bora falar sobre a diferença entre Enterprise architecture vs solution architecture.

Caso queriam ver os outros artigos sobre essa jornada, segue links de artigos anteriores:

Enterprise Architecture (EA)

Pra começar, vamos falar sobre a Enterprise Architecture. A EA é uma abordagem que ajuda a organizar e alinhar os processos de negócio, a tecnologia e a estratégia de uma empresa. É como se fosse um mapa que mostra como tudo se conecta e funciona junto. A ideia é garantir que a empresa esteja preparada para enfrentar os desafios do mercado e possa se adaptar às mudanças.

O principal objetivo da arquitetura empresarial é entender como todos os componentes do sistema se encaixam e se comunicam entre si. Ela olha para os processos, os dados, as aplicações e a infraestrutura existentes na empresa e tenta otimizá-los. A arquitetura empresarial também está preocupada em alinhar a tecnologia aos objetivos estratégicos da organização.

Solution Architecture (SA)

Agora, vamos falar sobre a Solution Architecture. A SA é mais específica e foca em resolver um problema ou desafio de negócio particular. Ela define a estrutura, os componentes e as interações entre eles para criar uma solução que atenda às necessidades do projeto.

A SA é responsável por garantir que a solução seja tecnicamente viável, alinhada com a estratégia da empresa e que possa ser integrada aos sistemas existentes. Ela também ajuda a identificar riscos e a planejar a implementação da solução.

Então, qual é a diferença?

A principal diferença entre a EA e a SA é o escopo. A EA é uma abordagem mais ampla que engloba toda a organização, enquanto a SA é focada em resolver um problema específico.

A EA ajuda a criar uma visão geral de como a empresa funciona e como os diferentes componentes se conectam. Ela é mais estratégica e ajuda a garantir que a empresa esteja preparada para enfrentar os desafios do mercado.

Já a SA é mais tática e foca em resolver um problema ou desafio específico. Ela define a estrutura e os componentes necessários para criar uma solução que atenda às necessidades do projeto.

Resumindo

Em resumo, a diferença entre arquitetura empresarial e arquitetura de soluções está no escopo e no foco. A arquitetura empresarial olha para a organização como um todo e visa otimizar a estrutura tecnológica, alinhando-a aos objetivos estratégicos. Já a arquitetura de soluções concentra-se em projetos específicos, projetando e implementando sistemas que atendam a requisitos detalhados.

Ambas as áreas são essenciais no mundo da tecnologia. A arquitetura empresarial garante que a empresa tenha uma base sólida e eficiente, enquanto a arquitetura de soluções traz soluções específicas para problemas ou necessidades específicas.

Então, da próxima vez que ouvir falar de arquitetura empresarial ou arquitetura de soluções, lembre-se: uma cuida do todo e a outra cuida dos detalhes. Juntas, elas ajudam a construir um futuro tecnológico brilhante para as empresas.

MBA Arquitetura: TCO (Total Cost of Ownership): Compreendendo e Utilizando o Custo Total de Propriedade

Taise Soares — Tue, 11 Jul 2023 11:28:43 +0000

Olá pessoas, continuando minha jornada no MBA de Arquitetura de Software, bora falar sobre TCO.

Caso queriam ver os outros artigos sobre essa jornada, segue links de artigos anteriores:

Entendendo o TCO: O que é e como usar na prática

No mundo dos negócios e da tecnologia, é essencial tomar decisões informadas, especialmente quando se trata de implementar soluções e sistemas. Uma ferramenta valiosa para essa análise é o TCO (Total Cost of Ownership), ou Custo Total de Propriedade em português. O TCO é um conceito que permite avaliar os custos envolvidos em todas as fases do ciclo de vida de uma solução, indo além do custo inicial de aquisição ou desenvolvimento. Se você já se perguntou como calcular todos os custos envolvidos em um projeto ou solução tecnológica, esse artigo é pra você! Vamos descomplicar o TCO e mostrar como ele pode ser útil no dia a dia.

Afinal o que é TCO

TCO significa Total Cost of Ownership, ou em bom português, Custo Total de Propriedade. É uma forma de calcular todos os custos relacionados à aquisição, implantação, operação e manutenção de um produto ou sistema durante sua vida útil. O TCO ajuda a entender e comparar os custos diretos e indiretos de uma solução, permitindo uma análise mais completa antes de tomar decisões de investimento em tecnologia. Em essência, o TCO fornece uma visão abrangente dos custos totais ao longo do tempo, permitindo uma análise financeira mais precisa.

Por que o TCO é importante?

Sabe quando você compra um celular novo e depois percebe que precisa gastar mais dinheiro com capinha, película e outros acessórios? Pois é, o TCO é como se fosse uma versão mais elaborada dessa situação, só que aplicada a projetos e soluções tecnológicas.

Ao considerar o TCO, você consegue ter uma visão mais ampla dos custos envolvidos em um projeto, evitando surpresas desagradáveis no futuro. Além disso, o TCO ajuda a comparar diferentes soluções e escolher a que melhor se encaixa no seu orçamento e objetivos.

Quais custos fazem parte do TCO?

O TCO inclui uma série de custos, como:

Aquisição de hardware e software
Instalação e configuração
Treinamento de funcionários
Suporte e manutenção
Atualizações e expansões
Custos de energia e espaço físico (quando aplicável)
Custos de migração ou desativação do sistema
Entre outros.

Legal, e como faz para calcular o TCO?

Calcular o TCO pode ser um pouco complicado, já que envolve muitos fatores e variáveis. Mas não se preocupe, vamos te dar algumas dicas para facilitar esse processo:

1 - Identifique e quantifique os custos relevantes: O primeiro passo é identificar e listar todos os custos associados à solução. Isso inclui custos diretos, como aquisição de hardware e software, e custos indiretos, como treinamento de funcionários e perda de produtividade durante a implementação.

2 - Estabeleça o período de análise: Determine o período de tempo que você deseja analisar. O TCO pode ser calculado para curto, médio ou longo prazo, dependendo das necessidades da organização e da solução em questão.

3 - Estime os custos futuros: Considere os custos futuros, como manutenção, atualizações, suporte técnico e possíveis melhorias. Leve em conta as projeções de crescimento da empresa e as tendências tecnológicas que podem afetar os custos no futuro.

4 - Calcule o TCO: Some todos os custos identificados ao longo do período de análise para obter o Custo Total de Propriedade. Isso inclui custos iniciais, custos operacionais, custos de manutenção, custos de suporte, custos de atualização, custos de treinamento, entre outros.

5 - Compare alternativas: Utilize o TCO para comparar diferentes soluções ou abordagens arquiteturais. Calcule o TCO para cada opção e leve em consideração não apenas o custo inicial, mas também os custos totais ao longo do tempo. Isso permitirá uma análise mais precisa da viabilidade e rentabilidade de cada alternativa.

Dicas para reduzir o TCO

Agora que você já sabe o que é TCO e como calcular, vamos te dar algumas dicas para reduzir esses custos:

Negocie com fornecedores: Tente negociar melhores preços e condições com os fornecedores de hardware e software.
Capacite sua equipe: Invista em treinamento para que seus funcionários possam usar a solução de forma eficiente e evitar problemas que gerem custos adicionais.
Escolha soluções escaláveis: Opte por soluções que possam ser facilmente expandidas ou atualizadas, evitando a necessidade de substituição completa do sistema.
Considere soluções em nuvem: Muitas vezes, soluções baseadas em nuvem têm um TCO menor, já que eliminam custos com infraestrutura física e manutenção.

Benefícios do uso do TCO:

Tomada de decisão informada: O TCO fornece uma base sólida para tomar decisões informadas ao levar em consideração todos os custos envolvidos em uma solução.
Identificação de oportunidades de economia: Ao analisar os custos detalhadamente, é possível identificar oportunidades de redução de despesas, como a substituição de uma solução mais cara por uma alternativa mais econômica.
Planejamento financeiro: O TCO auxilia no planejamento financeiro, permitindo que as organizações prevejam e reservem recursos para cobrir os custos ao longo do ciclo de vida da solução.
Avaliação de ROI: O TCO é um componente essencial para calcular o retorno sobre o investimento (ROI) de uma solução, fornecendo uma perspectiva realista dos custos envolvidos em relação aos benefícios esperados.

Resumindo

Em resumo, o TCO é importante porque oferece uma visão completa e realista dos custos totais de uma solução ao longo de seu ciclo de vida. Ele permite que as organizações tomem decisões informadas, comparem alternativas, planejem financeiramente, identifiquem oportunidades de economia e avaliem o ROI. Ao considerar o TCO, as organizações podem evitar custos inesperados, otimizar seus investimentos e alcançar melhores resultados financeiros.

E aí, curtiu o nosso papo sobre TCO? Esperamos que essas informações te ajudem a tomar decisões mais informadas e a gerenciar melhor os custos dos seus projetos e soluções tecnológicas. Até a próxima!

Série React Hooks: useSyncExternalStore

Taise Soares — Mon, 10 Jul 2023 11:10:06 +0000

Olá pessoas, vamos dar continuidade em nossa série onde desvendando todos os hooks padrões do nosso querido React.js.

Caso queriam ver os outros artigos sobre essa série, segue links de artigos anteriores:

Hoje vamos falar sobre um hook bem interessante do ReactJS chamado useSyncExternalStore. Vamos entender como ele funciona, como utilizá-lo com exemplos em TypeScript e quais são os benefícios e ganhos em utilizá-lo. Bora lá?

O que é o `useSyncExternalStore`?

O useSyncExternalStore é um hook do ReactJS que permite sincronizar o estado de um componente com uma fonte de dados externa. Ele é especialmente útil quando você precisa compartilhar o estado entre vários componentes sem usar um gerenciador de estado global, como o Redux por exemplo, como o armazenamento local (local storage) ou uma API de armazenamento em nuvem. Com esse superpoder, você pode compartilhar o estado em tempo real entre diferentes partes da sua aplicação e até mesmo entre dispositivos distintos. Imagine só, atualizações instantâneas em tempo real em qualquer lugar!

Agora você deve estar se perguntando: Mas como esse hook mágico funciona? É simples! Basta chamar o useSyncExternalStore e passar a chave de identificação do estado e a fonte externa que deseja utilizar.

Como utilizar o `useSyncExternalStore`?

Vamos para um exemplo, externo e interno ao mesmo tempo, vamos começar criando uma função que será nossa fonte de dados externa. Essa função será responsável por armazenar e atualizar o estado. No nosso exemplo, vamos criar uma função que armazena um contador.

typescript
type State = { count: number };

const initialState: State = { count: 0 };

let state = initialState;
let listeners: Set<() => void> = new Set();

function getState(): State {
  return state;
}

function setState(newState: State): void {
  state = newState;
  listeners.forEach((listener) => listener());
}

function subscribe(listener: () => void): () => void {
  listeners.add(listener);
  return () => {
    listeners.delete(listener);
  };
}

Agora que temos nossa fonte de dados externa, podemos criar o hook useSyncExternalStore. Vamos importar o hook do pacote react e criar uma função que utiliza o useSyncExternalStore para sincronizar o estado do componente com nossa fonte de dados externa.

import { useSyncExternalStore } from 'react';

function useCounter(): State {
  return useSyncExternalStore(getState, subscribe);
}

E isso é tudo, está pronto! Agora podemos utilizar o hook useCounter em nossos componentes para sincronizar o estado do contador.

import React from 'react';

const Counter: React.FC = () => {
  const { count } = useCounter();

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setState({ count: count + 1 })}>Incrementar</button>
    </div>
  );
};

export default Counter;

Legal não é mesmo, mas vamos para um outro exemplo utilizando localStorage agora para tentar ficar mais simples:

import { useSyncExternalStore } from 'react';

function App() {
  const [count, setCount] = useSyncExternalStore('count', localStorage);

  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

Neste exemplo, estamos utilizando o armazenamento local (localStorage) como a fonte externa. O estado 'count' será sincronizado com o valor armazenado no localStorage e qualquer alteração feita no estado será automaticamente refletida no localStorage e vice-versa. Incrível, não é?

A mágica não para por aí. O hook useSyncExternalStore também permite que você compartilhe o estado entre diferentes abas ou janelas do navegador. Isso significa que se você tiver a mesma aplicação aberta em duas abas diferentes, qualquer alteração feita em uma aba será instantaneamente refletida na outra aba. Isso abre um mundo de possibilidades para colaboração em tempo real e sincronização de dados entre usuários. Bora de outro exemplo:

import { useSyncExternalStore } from 'react';

function App() {
  const [count, setCount] = useSyncExternalStore('count', localStorage, 0);

  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

No exemplo acima, estamos passando 0 como valor inicial para o estado 'count'. Isso significa que, caso não haja um valor previamente armazenado no localStorage, o estado será iniciado com o valor padrão de 0. Isso garante que sua aplicação funcione sem problemas mesmo quando o estado inicial não está disponível.

Benefícios e ganhos em utilizar o `useSyncExternalStore`

Agora que vimos como utilizar o useSyncExternalStore, vamos falar sobre os benefícios e ganhos em utilizá-lo.

Sincronização de estado entre componentes: O useSyncExternalStore permite que você compartilhe o estado entre vários componentes sem a necessidade de um gerenciador de estado global, como o Redux. Isso pode simplificar seu código e torná-lo mais fácil de entender e manter.
Performance: O useSyncExternalStore é otimizado para evitar renderizações desnecessárias. Ele só atualiza os componentes que realmente precisam ser atualizados, melhorando a performance da sua aplicação.
Flexibilidade: O useSyncExternalStore pode ser utilizado com qualquer fonte de dados externa, não apenas com o estado do React. Isso significa que você pode utilizá-lo para sincronizar o estado do componente com outras bibliotecas, APIs ou até mesmo com o LocalStorage.
Escalabilidade: Como o useSyncExternalStore é um hook nativo do React, ele é compatível com todas as funcionalidades e otimizações do React, como o Concurrent Mode e o React Server Components. Isso garante que sua aplicação continuará escalável e performática à medida que o React evolui.

Resumindo

Os benefícios e ganhos ao utilizar o hook useSyncExternalStore são inúmeros. Com ele, você pode facilmente compartilhar e sincronizar o estado da sua aplicação em tempo real entre diferentes partes do seu código, diferentes abas ou até mesmo diferentes dispositivos. Isso proporciona uma experiência do usuário mais rica e colaborativa.

Além disso, o useSyncExternalStore simplifica a recuperação e persistência do estado, garantindo que os dados não sejam perdidos mesmo em situações como atualização da página ou novos acessos à aplicação.

Portanto, se você está em busca de superpoderes para o gerenciamento de estado no ReactJS, não deixe de experimentar o hook useSyncExternalStore. Ele vai revolucionar a forma como você compartilha, sincroniza e persiste o estado da sua aplicação. Aproveite e conquiste o mundo React com esse hook poderoso!

MBA Arquitetura: Arquitetura de Solução e Perfil do Arquiteto.

Taise Soares — Tue, 04 Jul 2023 12:09:46 +0000

Ola pessoas, continuando meus estudos no MBA, hoje vamos falar sobre o que é arquitetura de solução e o perfil de uma pessoa arquiteta de solução... Bora la?

Então bora, você já se perguntou como os sistemas complexos e as aplicações de software são projetados e desenvolvidos? Bem, aqui está um segredo dos bastidores: a arquitetura de solução! Neste artigo, vamos explorar o que é arquitetura de solução, qual o perfil e as habilidades necessárias para se tornar um arquiteto de solução, e quais os princípios fundamentais para arquitetar uma solução eficaz. Prepare-se para mergulhar no mundo fascinante da arquitetura de solução!

Mas afinal o que é arquitetura de solução?

Arquitetura de solução é uma disciplina que envolve o design, planejamento e implementação de soluções tecnológicas para atender aos objetivos de negócio de uma organização. É como construir uma estrutura sólida para um edifício, mas em vez de tijolos e argamassa, estamos lidando com componentes de software e sistemas interconectados. O papel de um arquiteto de solução é garantir que os diferentes elementos de um sistema funcionem em harmonia, atendendo às necessidades de negócio e aos requisitos técnicos.

Perfil de um arquiteto de solução:

Agora que já entendemos o que é arquitetura de solução, vamos falar sobre o perfil e as habilidades de uma pessoa arquiteta de solução. Essa pessoa precisa ter uma visão ampla do negócio e das tecnologias disponíveis, além de ser capaz de se comunicar bem com diferentes áreas da empresa. Algumas soft skills importantes para essa função são:

Comunicação:

A habilidade de comunicação é crucial para uma pessoa arquiteta de solução. Essa pessoa precisa ser capaz de articular ideias e conceitos de forma clara e concisa, tanto com os membros da equipe técnica quanto com os stakeholders do projeto. Além disso, é importante saber ouvir e entender as necessidades e expectativas de todas as partes envolvidas.

Pensamento critico:

Uma arquiteta de solução deve ser capaz de analisar de forma crítica os requisitos e desafios do projeto. Isso envolve a capacidade de avaliar diferentes abordagens, identificar pontos fracos e fortes, antecipar possíveis problemas e tomar decisões informadas com base em dados e informações disponíveis.

Resolução de problemas

A resolução de problemas é uma competência fundamental para um arquiteto de solução. Essa pessoa precisa ser capaz de identificar e analisar problemas complexos, decompondo-os em partes menores e procurando soluções viáveis. Isso requer criatividade, pensamento analítico e uma abordagem sistemática para lidar com desafios técnicos e organizacionais.

Liderança

A liderança é importante para um arquiteto de solução, pois essa pessoa muitas vezes atua como um ponto central na coordenação de equipes multidisciplinares. A capacidade de influenciar, motivar e orientar os membros da equipe é fundamental para garantir a implementação bem-sucedida da solução proposta. Além disso, um líder eficaz deve ser capaz de tomar decisões difíceis, delegar responsabilidades e resolver conflitos.

Flexibilidade

A flexibilidade é uma característica crucial para um arquiteto de solução, pois os projetos de TI muitas vezes exigem adaptação a mudanças nas necessidades dos usuários, nas tecnologias disponíveis ou nos requisitos do negócio. Ser capaz de se ajustar a novas circunstâncias, pensar de forma criativa e encontrar soluções alternativas é essencial para enfrentar os desafios que surgem ao longo do processo.

Esses pontos de comunicação, pensamento crítico, resolução de problemas, liderança e flexibilidade são essenciais para um arquiteto de solução bem-sucedido, pois eles trabalham na interface entre as necessidades do negócio e a implementação técnica, garantindo que as soluções propostas sejam eficazes, viáveis e alinhadas com os objetivos estratégicos da organização.

Resumindo

A arquitetura de soluções desempenha um papel vital na conexão entre as necessidades comerciais e as soluções tecnológicas. Um arquiteto de soluções competente possui um conjunto diversificado de habilidades, incluindo conhecimento técnico, visão de negócios, pensamento analítico e excelentes habilidades de comunicação.

Série React Hooks: useCallback

Taise Soares — Mon, 03 Jul 2023 12:21:59 +0000

Olá pessoas, vamos dar continuidade em nossa série onde desventamos todos os hooks padrões do nosso querido React.js.

Caso queriam ver os outros artigos sobre essa série, segue links de artigos anteriores:

Hoje iremos falar sobre o hook useCallback, então, pegue sua bebida favorita, sente-se e vamos começar!

O Conceito do useCallback:

O useCallback é um hook do React que tem como objetivo otimizar o desempenho de componentes funcionais. Ele é um hook que ajuda a otimizar o desempenho dos seus componentes React. Tudo se resume à memoização (não confundir com memorização 😛). A memoização é uma técnica onde você armazena o resultado de uma função para que não tenha que re-computá-la toda vez que ela é chamada com os mesmos argumentos.

useCallback é perfeito para quando você tem uma função que é passada como prop para um componente filho, e você quer evitar re-renderizações desnecessárias. No entanto, nem sempre é necessário. Se a sua função não está causando problemas de desempenho, você pode não precisar do useCallback.

Comparação rasa ou profunda? 🤨

useCallback usa comparação rasa para verificar se as dependências mudaram. Isso significa que ele verifica apenas se as referências às dependências são diferentes, e não se os valores reais dentro dos objetos mudaram. Bora ver um exemplo para compreender melhor:

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

const ParentComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <h1>Contagem: {count}</h1>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
};

interface ChildProps {
  handleClick: () => void;
}

const ChildComponent: React.FC<ChildProps> = ({ handleClick }) => {
  return (
    <button onClick={handleClick}>Clique Aqui!</button>
  );
};

Neste exemplo, o useCallback é utilizado para envolver a função handleClick dentro do componente "ParentComponent". Não fornecemos nenhuma dependência ao useCallback, o que significa que a função será memoizada e permanecerá a mesma em chamadas subsequentes. Isso é apropriado, pois a função handleClick não possui dependências externas que possam afetar seu comportamento.

Quando é possivel não usar o useCallback:

Embora o useCallback seja uma ferramenta útil para melhorar a performance, nem sempre é necessário utilizá-lo. Em situações em que a função não possui dependências e não é passada como prop para componentes filhos, não há benefício em envolvê-la com o useCallback. Além disso, se a função é recriada em cada renderização, mas não causa problemas de desempenho, também não é necessário utilizar o useCallback.

Bora ver um exemplo:

import React, { useState } from 'react';

const CounterComponent: React.FC = () => {
  const [count, setCount] = useState(0);

const incrementCount = () => {
setCount(count + 1);
};

return (
  <div>
    <h1>Contagem: {count}</h1>
    <button onClick={incrementCount}>Incrementar</button>
  </div>
 );
};

Neste exemplo, a função incrementCount não possui dependências externas e não é passada como prop para nenhum componente filho. Portanto, não há necessidade de envolvê-la com o useCallback. A função é recriada em cada renderização, mas isso não afeta o desempenho do aplicativo.

Uma palavra de cautela

Embora useCallback possa ajudar a otimizar seus componentes, não é uma solução mágica. Ele tem um custo, pois precisa armazenar a função na memória. Portanto, use-o com sabedoria e apenas quando necessário.

Resumindo

O hook useCallback é uma ferramenta poderosa para otimizar a performance de um aplicativo React. Utilizando o conceito de memoização, o useCallback permite armazenar em cache funções e reutilizá-las em chamadas subsequentes, desde que as dependências permaneçam as mesmas. É apropriado utilizar o useCallback quando precisamos passar funções como props para componentes filhos, evitando renderizações desnecessárias. Porém, é importante lembrar que o useCallback não é sempre necessário e deve ser usado com discernimento. Em situações em que a função não possui dependências ou não causa problemas de desempenho, não há necessidade de envolvê-la com o useCallback. Compreender quando utilizar e quando não utilizar o useCallback ajuda a desenvolver aplicativos React mais eficientes e responsivos.

MBA Arquitetura: Software Enterprise e Ecossistema Enterprise

Taise Soares — Fri, 30 Jun 2023 12:36:08 +0000

Olá pessoas, bora falar sobre software enterprise, o que são, do que se alimentam, como sobrevivem ? Nesse artigo iremos explorar um pouco sobre o conceito de software enterprise e o ecossistema enterprise. bora la?

Afinal o que é software enterprise

Software enterprise, também conhecido como software corporativo ou software empresarial, refere-se a um tipo de software desenvolvido e utilizado por organizações para atender às suas necessidades específicas de negócios. Esse tipo de software é projetado para lidar com processos complexos, integração de sistemas, gerenciamento de dados em larga escala e colaboração entre departamentos e equipes.

O software enterprise é caracterizado por sua capacidade de suportar as operações de uma organização em larga escala, abrangendo várias áreas funcionais, como contabilidade, recursos humanos, vendas, marketing, cadeia de suprimentos e produção. Ele fornece uma plataforma centralizada para armazenar e processar dados cruciais, permitindo uma visão abrangente das operações e facilitando a tomada de decisões informadas.

Os sistemas de software enterprise geralmente são altamente personalizáveis e configuráveis para atender às necessidades específicas de uma organização. Eles podem ser implantados localmente, em servidores da empresa, ou na nuvem, oferecendo maior flexibilidade e escalabilidade. Esses sistemas são desenvolvidos com foco na segurança, confiabilidade e integridade dos dados, garantindo que as informações empresariais sejam protegidas contra acessos não autorizados e perdas de dados.

Além disso, o software enterprise geralmente inclui recursos avançados, como relatórios e análises detalhadas, automação de processos, integração com outros sistemas externos, suporte a múltiplos idiomas e moedas, e funcionalidades de colaboração e comunicação interna.

Ecossistema Enterprise

Dentro da definição de software enterprise, o termo "ecossistema enterprise" refere-se à interconexão e interdependência entre pessoas, processos e tecnologia dentro de uma organização. Esses três componentes são fundamentais para o funcionamento eficiente e eficaz de uma empresa que utiliza software voltado para o ambiente corporativo.

Pessoas: No ecossistema enterprise, as pessoas desempenham um papel crucial. Isso inclui todos os membros da organização, desde executivos e gerentes até os funcionários de diferentes departamentos. Essas pessoas são responsáveis por tomar decisões, executar tarefas, colaborar e interagir com o software e outros sistemas dentro do ambiente corporativo. O ecossistema enterprise valoriza a colaboração e a comunicação entre as pessoas para alcançar os objetivos organizacionais.

Processos: Os processos empresariais são os fluxos de trabalho e as atividades estruturadas que ocorrem dentro de uma organização. Eles podem envolver desde processos internos, como gestão de projetos, compras e recursos humanos, até processos externos, como atendimento ao cliente, cadeia de suprimentos e vendas. No ecossistema enterprise, o software desempenha um papel fundamental na automação e otimização desses processos, garantindo maior eficiência, rastreabilidade e conformidade.

Tecnologia: A tecnologia desempenha um papel central no ecossistema enterprise. Isso inclui o software empresarial em si, bem como a infraestrutura tecnológica que suporta sua operação, como servidores, redes, bancos de dados e dispositivos móveis. O software enterprise é projetado para atender às necessidades específicas de uma organização, permitindo a integração com outros sistemas, a manipulação de grandes volumes de dados e a análise de informações para tomar decisões fundamentadas.

Dentro do ecossistema enterprise, a interação entre pessoas, processos e tecnologia é essencial para impulsionar a produtividade, melhorar a eficiência operacional, promover a inovação e alcançar os objetivos organizacionais. Uma abordagem integrada e colaborativa, que reconhece a importância desses três componentes e busca alinhar seus esforços, é fundamental para o sucesso de um software enterprise e para a organização como um todo.

Escalabilidade

Escalabilidade é a capacidade de um sistema se adaptar e lidar com o aumento da carga de trabalho, seja em termos de volume de dados, número de usuários ou complexidade das operações. Um sistema escalável é aquele que pode crescer e se expandir sem comprometer o desempenho ou a qualidade do serviço. Por exemplo, a arquitetura de microsserviços permite que as empresas escalem seus sistemas de forma eficiente, adicionando ou removendo componentes conforme necessário, e utilizando técnicas como balanceamento de carga e autoescalabilidade em ambientes de nuvem.

Disponibilidade

Disponibilidade é a capacidade de um sistema estar acessível e operacional quando necessário. Em um ambiente empresarial, a alta disponibilidade é essencial para garantir a continuidade dos negócios e minimizar o tempo de inatividade. Soluções como redundância de hardware, balanceamento de carga e recuperação de desastres são exemplos de estratégias para aumentar a disponibilidade de um sistema. Além disso, a implementação de monitoramento proativo e manutenção preventiva pode ajudar a identificar e resolver problemas antes que eles afetem a disponibilidade do sistema.

Segurança

A segurança é uma preocupação fundamental no ambiente empresarial, pois envolve a proteção de informações confidenciais, propriedade intelectual e ativos de TI. As empresas devem implementar políticas e tecnologias de segurança robustas para proteger seus sistemas e dados contra ameaças internas e externas. Isso inclui criptografia, autenticação de dois fatores, firewalls e sistemas de detecção de intrusão. Além disso, a conscientização e treinamento dos funcionários em práticas de segurança e a implementação de processos de auditoria e conformidade também são fundamentais para garantir a segurança dos sistemas empresariais.

Customização e Modularização

Customização é a capacidade de adaptar um software às necessidades específicas de uma organização, enquanto a modularização é a prática de dividir um sistema em componentes menores e independentes. Ambos os conceitos são importantes no desenvolvimento de software enterprise, pois permitem que as empresas personalizem e adaptem suas soluções conforme necessário. Um exemplo de customização é a criação de um módulo específico para gerenciar o processo de vendas de uma empresa, enquanto a modularização pode ser vista na arquitetura de microsserviços mencionada anteriormente. A modularização também facilita a manutenção e atualização do software, permitindo que as empresas implementem melhorias e correções de forma mais ágil e eficiente.

Integração

Integração é o processo de conectar diferentes sistemas e aplicativos para que possam trabalhar juntos de forma eficiente. No ambiente empresarial, a integração é essencial para garantir que os dados e processos fluam de forma eficiente entre os diversos sistemas e departamentos. As empresas podem utilizar APIs (Application Programming Interfaces), ETL (Extract, Transform, Load) e outras tecnologias de integração para conectar seus sistemas e garantir a troca de informações em tempo real. Além disso, a integração também pode envolver a utilização de padrões e protocolos comuns, como o REST e o SOAP, para facilitar a comunicação entre sistemas heterogêneos e garantir a interoperabilidade.

Observabilidade

Observabilidade é a capacidade de monitorar e compreender o comportamento de um sistema a partir de suas saídas e métricas. No contexto empresarial, a observabilidade é crucial para garantir a estabilidade, o desempenho e a segurança dos sistemas. As empresas podem utilizar ferramentas de monitoramento, como o Prometheus e o Grafana, para coletar e analisar métricas de desempenho, identificar problemas e otimizar seus sistemas. Além disso, a observabilidade também envolve a análise de logs e a implementação de alertase notificações para garantir que os administradores de sistemas estejam cientes de quaisquer problemas em tempo real.

Concluindo

Em resumo, o Software Enterprise é um software desenvolvido para atender às necessidades complexas de grandes organizações, enquanto o ecossistema Enterprise refere-se ao conjunto de componentes e sistemas interconectados que trabalham em conjunto para suportar as operações e objetivos de uma empresa.

Série React Hooks: useMemo

Taise Soares — Tue, 06 Jun 2023 12:24:00 +0000

Olá pessoas, bora continuar nossa séria sobre os hooks do nosso querido ReactJS, e hoje vamos falar sobre um dos seus hooks úteis chamado useMemo. Se você já trabalha com React há algum tempo, talvez tenha se deparado com situações em que precisa otimizar o desempenho dos seus componentes. Bem, não se preocupe! useMemo está aqui para salvar o dia.

Caso queriam ver os outros artigos sobre essa série, segue links de artigos anteriores:

Mas, afinal de contas, o que diabos o `useMemo` faz? 🤔

Calma, meu pequeno gafanhoto, tem tudo a ver com memoização. Hã?

Primeiramente vamos resumir o que é memoização né ... Memoização é uma técnica de otimização que armazena os resultados de funções caras e os retorna quando os mesmos argumentos são fornecidos novamente, evitando a necessidade de recalcular o resultado.

Sim, eu sei, parece sofisticado, mas é na verdade bem simples. Quando você usa o useMemo, está dizendo ao React para lembrar do valor que uma função retorna e recalcular apenas se as dependências mudarem. Em outras palavras, ele ajuda a evitar cálculos desnecessários e melhora o desempenho do seu aplicativo.

Sabe quando você tem um cálculo super mega pesado acontecendo no seu componente React e isso está deixando tudo mais lento? Pois é meu pequeno gafanhoto, é aí que o useMemo vem para salvar o nosso dia!

Resumindo ele é um hook que te ajuda a otimizar seu componente, memorizando (ou armazenando em cache) o resultado de uma função, para que não precise ser recalculado toda vez que seu componente for renderizado novamente.

OK mas como ele funciona ?

Bom o useMemo tem uma sintexe bem simples de se usar. Você só irá precisa passar uma função e um array de dependências, e ele retornará o resultado memorizado. Se as dependências não mudaram desde a última renderização, o React usará o resultado em cache em vez de chamar a função novamente (ai está a magica). Como falei ela tem uma sintexe bemmm básica, saca só o exemplo:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a,b]);

Confuso ainda? Bora para um exemplo simples:

import React, { useMemo } from 'react';

const MyComponent: React.FC = () => {
  const expensiveResult = useMemo(() => {
    // Some heavy calculations here
    return someExpensiveFunction();
  }, [dependency1, dependency2]);

  // Rest of your component code
  return (
    // JSX stuff goes here
  );
};

Vamos analisar esse exemplo, nele estamos definindo uma variável chamada expensiveResult usando useMemo. Dentro da função useMemo, a gente realiza alguns cálculos complexos ou chama uma função muito custosa parao nosso projeto (no nosso caso, someExpensiveFunction()), e esse resultado é armazenado em expensiveResult.

O segundo argumento do useMemo é um array de dependências que indica ao React quando recalcular o valor. Se alguma das dependências mudar, a função será reexecutada.

A beleza do useMemo está em permitir que você otimize seus componentes evitando cálculos desnecessários. Vamos para um outro exemplo, digamos que você tem um componente que exibe uma lista de usuários e seus detalhes, mas você só quer mostrar os usuários que estão ativos. Nesse cénario podemos usar o useMemo para filtrar a lista e evitar recalculá-la a cada renderização. Vamos ver como ficaria:

import React, { useMemo } from 'react';

interface User {
  id: number;
  name: string;
  isActive: boolean;
}

const UserList: React.FC<{ users: User[] }> = ({ users }) => {
  const activeUsers = useMemo(() => {
    return users.filter((user) => user.isActive);
  }, [users]);

  return (
    <ul>
      {activeUsers.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Nesse novo exemplo, a função de cálculo passada para o useMemo filtra os usuários com base na propriedade isActive, retornando apenas os usuários ativos. A dependência fornecida é o array users, ou seja, sempre que o array de usuários for alterado, a função de cálculo será executada novamente.

O resultado do useMemo é armazenado na variável activeUsers. Essa variável contém o resultado da filtragem dos usuários ativos. Em seguida, é renderizada uma lista não ordenada <ul>, onde cada elemento <li> representa um usuário ativo. O atributo key é definido como o id do usuário para ajudar o React a otimizar a renderização de lista.

A utilização do useMemo neste exemplo é útil para evitar que o cálculo de usuários ativos seja realizado a cada renderização do componente UserList. Como a função de cálculo é executada apenas quando a dependência users é alterada, se a prop users não sofrer alterações, o valor memoizado será retornado, evitando cálculos desnecessários e melhorando o desempenho da aplicação.

Beleza, mas quando você deve usar useMemo? 🤔

Maravilha agora, você pode estar pensando: "Isso é incrível! Vou usar useMemo em todos os lugares!" Mas calma lá pequeno gafanhoto! Com grandes poderes vem grandes responsabilidades

O useMemo é ótimo para otimizar o desempenho, mas nem sempre é necessário. Você deve usá-lo apenas quando estiver lidando com cálculos pesados ou quando quiser evitar renderizações desnecessárias causadas por novas referências de objetos.

Por mais que o useMemo possa ser muito útil, é importante não usá-lo em excesso. Adicioná-lo em todos os lugares pode realmente prejudicar o desempenho de sua aplicação, porque a memorização tem seu próprio custo. Portanto, use-o apenas quando tiver certezade que fará uma diferença notável ok?

Conclusão

Enfim pessoas! O useMemo é um hook bacana que pode te ajudar a otimizar seus componentes React armazenando em cache os resultados de cálculos pesados. Essa é a mágica do useMemo! É uma ferramenta simples, porém poderosa, para otimizar seus componentes React, só lembre-se de usá-lo com sabedoria e apenas quando realmente necessário, pois o uso desnecessário do useMemo pode prejudicar o desempenho do seu aplicativo.

call(), apply() e bind() - Os Três Patetas do JavaScript

Taise Soares — Fri, 02 Jun 2023 00:38:57 +0000

Olá pessoas, como estão? Baummm ? Espero que sim. Hoje vamos falar sobre três amigos inseparáveis do JavaScript: call(), apply() e bind().

Se você já se deparou com esses três, pode ter ficado um pouco confuso, mas não se preocupe, vou tentar aqui clarear as ideias. Vamos lá!

Método `call()`

O método call() é uma verdadeira mão na roda quando você precisa invocar uma função e definir um valor específico para o "this". Ele permite que você chame uma função, passando um objeto para o qual o "this" será definido dentro da função.

Esse método call() é utilizado para invocar uma função com um determinado contexto de execução e uma lista de argumentos passados separadamente. Ele aceita um objeto como primeiro parâmetro, que será o valor de this dentro da função chamada. Em seguida, você pode passar os argumentos da função separadamente como argumentos subsequentes. Bora de um exemplo:

function greeting() {
  console.log(`Olá, ${this.name}! Bem-vindo(a) ao ${this.local}!`);
}

const person = {
  name: 'Ana',
  local: 'restaurante'
};

const otherPerson = {
  name: 'Carlos',
  local: 'hotel'
};

greeting.call(person); // Olá, Ana! Bem-vindo(a) ao restaurante!
greeting.call(otherPerson); // Olá, Carlos! Bem-vindo(a) ao hotel!

Neste exemplo, temos uma função greeting() que imprime uma mensagem de boas-vindas personalizada com base nas propriedades nome e local. Em seguida, temos dois objetos: person e otherPerson, cada um com suas próprias propriedades nome e local.

Ao utilizar o método call() com a função greeting(), passamos como argumento o objeto no qual queremos definir o valor de this. Quando chamamos greeting.call(person), a função greeting() é executada no contexto de pessoa, e a mensagem exibida é "Olá, Ana! Bem-vindo(a) ao restaurante!". Da mesma forma, ao chamar greeting.call(otherPerson), a função é executada no contexto de otherPerson, e a mensagem exibida é "Olá, Carlos! Bem-vindo(a) ao hotel!".

Dessa forma, o método call() permite que você chame uma função e defina o valor de this explicitamente, permitindo a reutilização de funções em diferentes contextos.

Método `apply()`

Já o método apply() é muito parecido com o call(), mas com uma diferença sutil. Enquanto o call() espera os argumentos separados por vírgula, o apply() espera que os argumentos sejam fornecidos como um array. O primeiro parâmetro ainda representa o valor de this dentro da função.
Ele é útil quando você possui uma função que espera receber seus argumentos como um array ou um objeto de argumentos. Vamos ver um exemplo para ficar mais claro:

const person = {
  name: 'João',
  greeting: function(greeting, pointing) {
    console.log(greeting + ' ' + this.name + pointing);
  }
};

const args = ['Olá', '!'];
person.greeting.apply(person, args); // Olá João!

Neste exemplo, o método greeting do objeto pessoa é invocado usando o método apply(). O valor de this é definido como person para garantir que o this.name se refira à propriedade nome do objeto person. Os argumentos são passados como um array['Olá', '!'], resultando na saída "Olá João!".

Método `bind()`

Por fim, temos o método bind(). Diferente dos outros dois, o bind() não invoca a função imediatamente. Em vez disso, ele retorna uma nova função, vinculada ao objeto que você passou como argumento. Dessa forma, você pode chamar essa nova função posteriormente. Ele não executa a função imediatamente, mas permite que você a invoque posteriormente. Além disso, você também pode pré-definir argumentos para a função retornada. Confuso? Vamos ver um exemplo:

const car = {
  brand: "Fiat",
  model: "Uno",
  displayCar: function() {
    console.log(`Brand: ${this.brand}, Model: ${this.model}`);
  }
};

const displayCaptur = car.displayCar.bind(car);
displayCaptur();

Nesse exemplo, temos um objeto carro com um método displayCar(). Usando o bind(), criamos uma nova função displayCaptur que está vinculada ao objeto carro. Quando chamamos a função displayCaptur(), ela exibe a marca e o modelo do carro.

Resumindo....

Então, galera, é isso! Agora vocês estão por dentro das diferenças entre call(), apply() e bind().

Usem esses três patetas do JavaScript com sabedoria e aproveitem ao máximo suas funcionalidades. O call() é perfeito quando você precisa invocar uma função e definir o valor do "this" explicitamente, o apply() é ótimo quando você quer passar os argumentos como um array e definir o valor do "this", enquanto o bind() permite vincular um objeto a uma nova função para ser chamada posteriormente.

Esses métodos podem ser muito úteis em várias situações de programação, especialmente quando você lida com objetos e precisa controlar o contexto do "this" e os argumentos da função. Agora você tem essas poderosas ferramentas no seu arsenal de desenvolvedor.

Então, pessoal, não se preocupem se os métodos call(), apply() e bind() parecerem um pouco confusos no início. Com o tempo e a prática, vocês irão se acostumar a utilizá-los e aproveitar todos os benefícios que eles têm a oferecer. Mãos à obra e continuem explorando as maravilhas do JavaScript!

Série React Hooks: useDeferredValue

Taise Soares — Mon, 22 May 2023 12:06:22 +0000

Olá pessoas, como prometido bora continuar nossa série com os Hooks do ReactJs.

Caso queriam ver os outros artigos sobre essa série, segue links de artigos anteriores:

E hoje vamos falar de um Hook, tecnicamente novo, lançado na versão 18 chamado useDeferredValue. Mas vamos para a definição na doc oficial do react:

useDeferredValue is a React Hook that lets you defer updating a part of the UI. - Doc ReactJS

Não disse muita coisa né? Simplificando o useDeferredValue é um hook do React que permite que você adie a atualização de um valor. Isso pode ser útil quando você quer evitar que a interface do usuário fique lenta ou travada devido a operações pesadas ou demoradas (imagine um filtro enorme ou um campo de pesquisa que retorne muitos dados)

Legal mas como ele funciona ?

O useDeferredValue recebe dois argumentos: o valor que você deseja adiar e um objeto de configuração com a propriedade timeoutMs, que define o tempo máximo de adiamento em milissegundos. O hook retorna o valor adiado, que será atualizado após o tempo especificado.

Vamos a um exemplo sem a utilização do useDeferredValue ok. Neste exemplo, vamos criar de forma genérica uma lista de itens gerada por um loop for com um limite size, a filtragem da lista de itens ocorre a cada renderização, o que pode causar atrasos na entrada de texto se a lista for muito grande.

import React, { useState } from 'react';

interface Item {
  id: number;
  name: string;
}

const generateItems = (size: number): Item[] => {
  const items: Item[] = [];
  for (let i = 0; i < size; i++) {
    items.push({ id: i, name: `Item ${i}` });
  }
  return items;
};

const items = generateItems(1000); // Gera uma lista de 1000 itens

const App: React.FC = () => {
  const [search, setSearch] = useState('');

  const filteredItems = items.filter(item => item.name.includes(search));

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Note que nesse exemplo, estamos usando a função generateItems para gerar uma lista de 1000 itens. A filtragem da lista de itens ocorre com base no valor search sem usar o hook useDeferredValue. Isso pode causar atrasos na entrada de texto se a lista for muito grande ou a filtragem for complexa, já que a filtragem ocorre a cada renderização.

Agora vamos ao mesmo exemplo, porém utilizando o hook useDeferredValue para demonstrar a melhoria na responsividade do componente.

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

interface Item {
  id: number;
  name: string;
}

const generateItems = (size: number): Item[] => {
  const items: Item[] = [];
  for (let i = 0; i < size; i++) {
    items.push({ id: i, name: `Item ${i}` });
  }
  return items;
};

const items = generateItems(1000); // Gera uma lista de 1000 itens

const App: React.FC = () => {
  const [search, setSearch] = useState('');

  const deferredSearch = useDeferredValue(search, { timeoutMs: 200 });

  const filteredItems = items.filter(item => item.name.includes(deferredSearch));

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Agora, criamos uma função generateItems que recebe um parâmetro size e gera uma lista de itens com base nesse tamanho. A função é usada para gerar uma lista de 1000 itens, que é então filtrada com base no valor adiado deferredSearch usando o hook useDeferredValue. Isso permite que o React adie a atualização da lista de itens enquanto o usuário digita no campo de entrada, melhorando a responsividade do componente.

Ah legal mas como eu testo se isso é verdade?

Bora fazer o teste? No primeiro exemplo ao renderizar em seu navegador (vou supor que você esteja utilizando no chrome), abra o seu devTools e vá na aba de Performance. Apos isso click na engrenagem ao lado das opções e altere a CPU para 6x slowdown.

Depois faça o teste com ambos os projetos e notara a diferença de performance entre eles.

Legal mas quando devo usa-lo?

Você pode usar o useDeferredValue em cenários onde a atualização imediata de um valor pode causar lentidão na interface do usuário. Por exemplo, ao filtrar uma lista grande de itens enquanto o usuário digita em um campo de pesquisa.

Conclusão

Ao utilizar o useDeferredValue, você ganha em performance, pois a atualização do valor é adiada, evitando que a interface fique lenta devido a operações pesadas ou demoradas. Por outro lado, ao não utilizar o useDeferredValue, a performance pode ser afetada negativamente, pois a atualização do valor é imediata e pode causar lentidão na interface do usuário.

É importante lembrar que o ganho de performance ao utilizar o useDeferredValue depende do cenário e da complexidade das operações realizadas. Em alguns casos, o ganho pode ser significativo, enquanto em outros, pode ser mínimo.

DEV Community: Taise Soares

Resumo do Livro: O Programador Pragmático de aprendiz a mestre (Capitulo 2)

Capitulo 2: Entropia de software

Vamos imaginar

Conclusão:

Resumo do Livro: O Programador Pragmático de aprendiz a mestre (Capitulo 1)

Capitulo 1: O gato comeu meu código-fonte

Vamos imaginar...

Conclusão

Série React Hooks: useRef

Afinal, o que é o Hook useRef? 🤔

Quando usar o useRef?

Exemplos de código para te ajudar!

Exemplo 1: Referenciando um Elemento Textarea

Exemplo 2: Foco no Carregamento

Exemplo 3 e ultimo: Acompanhamento do Redimensionamento da Janela

Conclusão

MBA Arquitetura: Diferença entre Enterprise architecture vs solution architecture

Enterprise Architecture (EA)

Solution Architecture (SA)

Então, qual é a diferença?

Resumindo

MBA Arquitetura: TCO (Total Cost of Ownership): Compreendendo e Utilizando o Custo Total de Propriedade

Entendendo o TCO: O que é e como usar na prática

Afinal o que é TCO

Por que o TCO é importante?

Quais custos fazem parte do TCO?

Legal, e como faz para calcular o TCO?

Dicas para reduzir o TCO

Benefícios do uso do TCO:

Resumindo

Série React Hooks: useSyncExternalStore

O que é o useSyncExternalStore?

Como utilizar o useSyncExternalStore?

Benefícios e ganhos em utilizar o useSyncExternalStore

Resumindo

MBA Arquitetura: Arquitetura de Solução e Perfil do Arquiteto.

Mas afinal o que é arquitetura de solução?

Perfil de um arquiteto de solução:

Comunicação:

Pensamento critico:

Resolução de problemas

Liderança

Flexibilidade

Resumindo

Série React Hooks: useCallback

O Conceito do useCallback:

Comparação rasa ou profunda? 🤨

Quando é possivel não usar o useCallback:

Uma palavra de cautela

Resumindo

MBA Arquitetura: Software Enterprise e Ecossistema Enterprise

Afinal o que é software enterprise

Ecossistema Enterprise

Escalabilidade

Disponibilidade

Segurança

Customização e Modularização

Integração

Observabilidade

Concluindo

Série React Hooks: useMemo

Mas, afinal de contas, o que diabos o useMemo faz? 🤔

OK mas como ele funciona ?

Beleza, mas quando você deve usar useMemo? 🤔

Conclusão

call(), apply() e bind() - Os Três Patetas do JavaScript

Método call()

Método apply()

Método bind()

Resumindo....

Série React Hooks: useDeferredValue

Legal mas como ele funciona ?

Ah legal mas como eu testo se isso é verdade?

Legal mas quando devo usa-lo?

Conclusão

O que é o `useSyncExternalStore`?

Como utilizar o `useSyncExternalStore`?

Benefícios e ganhos em utilizar o `useSyncExternalStore`

Mas, afinal de contas, o que diabos o `useMemo` faz? 🤔

Método `call()`

Método `apply()`

Método `bind()`