DEV Community: Douglas Pujol

How to Create Global and Dynamic Components with Strategy Pattern in React

Douglas Pujol — Sun, 27 Oct 2024 23:50:47 +0000

We had an interesting challenge in our team: how to develop components globally, where the data and behaviors would vary by country? In one of the discussions with my colleagues, André Peixoto and Guilherme Cardoso, several solutions emerged, and today I’ll share one that perfectly suited our context.

In our case, the first component we implemented with this approach was a dynamic table. This component needed to display columns and data that varied depending on the country, with specific display rules, interactions, and data handling.

The Challenge: A Dynamic Table for Each Country

Imagine having a table that needs to render different types of data for each country, varying the number of columns, data formats, and even user interactions with it. How can we solve this?
You might consider a few options, and let’s discuss some of them:

Create a table for each country. This approach could work but would bring several problems:
- Code duplication: Each table for every country would lead to duplicated logic, increasing maintenance effort.
- Difficulty in synchronizing changes: If a bug is found, you’d need to fix it in multiple places.
- Scalability: As new countries are added, this solution would become unsustainable.
Create a single table with conditionals. Another approach could be to develop a single table with various conditionals to render each type of cell or header based on the country. However, this also presents issues:
- Complex code: As the table grows, the number of conditionals increases, making the code hard to understand and maintain.
- Tight coupling: The code would become highly coupled, complicating the addition of new functionalities.
- Difficult maintenance: Maintenance becomes a nightmare when the project grows and needs adjustments for new scenarios.

Benefits of the Strategy Pattern

A cleaner and more scalable approach we adopted was using the Strategy Pattern. But what is the Strategy Pattern?

The Strategy Pattern is a behavioral design pattern that defines a family of algorithms and encapsulates them so they can be interchangeable. In other words, you can switch between different strategies without modifying the client that uses them.

Benefits of the Strategy Pattern

Implementing a component using the Strategy Pattern brings several important advantages:

Separation of responsibilities: Each country has its own strategy for rendering data, making the code more modular and easier to understand.
Reduction of duplicated code: We don't need to replicate the table logic for each country, as the differences are abstracted into specific strategies.
Scalability: New countries or changes to existing ones can be added easily without impacting the codebase.
Ease of maintenance: If there’s a bug or a new rule for a country, we just need to adjust its specific strategy without affecting the rest of the application.

Downsides of the Strategy Pattern

While the Strategy Pattern is extremely useful, it is not without its disadvantages. One important consideration is the need to configure multiple separate strategies, which can lead to some degree of fragmentation. In larger systems, it may be necessary to ensure that strategies are maintained in an organized and cohesive manner.

Implementation: Our Dynamic Table

Now, let’s see how the table was implemented in practice using the Strategy Pattern.

First, we created a Table component that receives the data and the specific column strategy for rendering:

import React from 'react';

export interface Column<T> {
  key: string;
  label: string;
  render: (row: T) => JSX.Element;
}

export interface TableProps<T = unknown>  {
  data?: T[];
  strategy?: {
    columns: Column<T>[];
  } | unknown ;
}

const Table =<T,>({ data, strategy }: TableProps<T>) => {

  const defaultStrategy = { columns: [] as Column<T>[] };
  const currentStrategy = strategy ? (strategy as { columns: Column<T>[] }) : defaultStrategy;

  return (
    <table>
      <thead>
        <tr>
          {currentStrategy?.columns?.map((col) => (
            <th key={col.key} className="px-4 py-2 border border-dashed border-border">
              {col.label}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {currentStrategy && data && data.length > 0  ? data?.map((row, index) => (
          <tr key={index}
            className="hover:bg-hoverTable"
          >
            {currentStrategy?.columns?.map((col) => col.render(row))}
          </tr>
        )) : (
          <tr>
            <td colSpan={currentStrategy?.columns?.length || 1} className="px-4 py-2 text-center">
              No data available
            </td>
          </tr>
        )}
      </tbody>
    </table>
  );
};

export default  React.memo(Table);

With this basic structure, we ensured that the columns and content are rendered dynamically based on the specific strategy for the country. For each country, we defined a different strategy, as shown in the example below:

export const tableStrategies = {
  BR: {
    columns: [
      {
        key: 'number',
        label: 'Número',
        render: (row: BrazilData): JSX.Element => (
          <td key={`${row.number}-br`} className="px-4 py-2 border border-dashed border-border">{row.number}</td>
        ),
      },
      {
        key: 'name',
        label: 'Nome',
        render: (row: BrazilData): JSX.Element => (
          <td key={`${row.number}-name`} className="px-4 py-2 border border-dashed border-border">{row.name}</td>
        ),
      },
      // ...other columns
    ] as BrazilColumn[],
  },
  ES: {
    columns: [
      {
        key: 'shirtNumber',
        label: 'Número de Camiseta',
        render: (row: SpainData): JSX.Element => (
          <td key={`${row.shirtNumber}-es`} className="px-4 py-2 border border-dashed border-border">{row.shirtNumber}</td>
        ),
      },
      {
        key: 'name',
        label: 'Nombre',
        render: (row: SpainData): JSX.Element => (
          <td key={`${row.name}-name`} className="px-4 py-2 border border-dashed border-border">{row.name}</td>
        ),
      },
      // ...other columns
    ] as SpainColumn[],
  },
};

Moreover, using the render method within the context of the Strategy Pattern adds simplicity. Each table column has a render, function that determines how the cell will be displayed for each specific type of data. This provides great flexibility and clarity for customizing the display without unnecessary complexity.

Now, simply call the Table component with the appropriate strategy and data for each country:

<Table
  strategy={tableStrategies.BR}
  data={brazilData}
/>

A Simple Example with Country Selection

For educational purposes, I created a simulation in the project where users can select different countries through a select dropdown. Depending on the chosen country, the data and the table rendering strategy are updated dynamically:

import React from 'react';
import {  CountryCode } from './types';
import  Table  from './components/Table';
import { americanData, brazilData, southKoreaData, spainData } from './mocks';
import { tableStrategies } from './strategies';

export default function Home() {

  const [strategy, setStrategy] = React.useState<unknown>({});
  const [selectedCountry, setSelectedCountry] = React.useState<CountryCode>('BR');
  const [data, setData] = React.useState<unknown[]>([null])

  const updateDataAndStrategy =React.useCallback((country: CountryCode) => {
    switch (country) {
      case 'BR':
        setData(brazilData);
        setStrategy(tableStrategies[country]);
        break;
      case 'US':
        setData(americanData);
        setStrategy(tableStrategies[country]);
        break;
      case 'ES':
        setData(spainData);
        setStrategy(tableStrategies[country]);
        break;
      case 'KR':
        setData(southKoreaData);
        setStrategy(tableStrategies[country]);
        break;
      default:
        setData([]);
        setStrategy({});
        break;
    }
  }, []);

  const handleChanged = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const selected = event.target.value as CountryCode;
    setSelectedCountry(selected);
    updateDataAndStrategy(selected);
  };

  return (
    <>
      <h1>## Table</h1>
      <select onChange={handleChanged} value={selectedCountry} className="mb-2">
        <option value="US">United States</option>
        <option value="AR">Argentina</option>
        <option value="BR">Brazil</option>
        <option value="KR">South Korea</option>
        <option value="ES">Spain</option>
      </select>

      <Table
        strategy={strategy}
        data={data}
       />
    </>
  );
}

In this example, the select component allows the user to choose the desired country, and the table automatically updates to display the specific data and rendering strategy for that country. Check out the project link

Switching Between Countries

With the country selector, we can easily switch between different strategies, simulating the custom rendering of the table according to the specific configurations of each country. This approach allows us to visualize, in real time, how the content adapts to different regions and contexts.

Conclusion

With this approach using the Strategy Pattern, we ensure cleaner, more modular, and scalable code. Additionally, if in the future we need to add new countries or adjust the rules for an existing country, we can do so easily without impacting the rest of the system.

I developed a project on GitHub that contains all this code and a practical example of how to apply this technique.

If you want to see the complete code, check out the repository on
GitHub.

Thanks, folks! :)

Como Criar Componentes Globais e Dinâmicos com Strategy Pattern em React

Douglas Pujol — Fri, 25 Oct 2024 22:03:31 +0000

Tínhamos um desafio interessante no nosso time: como desenvolver componentes de forma global, onde os dados e comportamentos seriam diferentes para cada país? Em uma das discussões com meus colegas de trabalho, André Peixoto e Guilherme Cardoso, algumas soluções surgiram em nossa mente, e hoje vou contar sobre uma que se adequou perfeitamente ao nosso contexto.

No nosso caso, o primeiro componente que implementamos com essa abordagem foi uma tabela dinâmica. Esse componente deveria exibir colunas e dados que variavam conforme o país, com regras de exibição, interações e tratamentos de dados específicos.

O Desafio: Uma Tabela Dinâmica para Cada País

Imagine que você tem uma tabela que precisa renderizar diferentes tipos de dados para cada país, variando o número de colunas, o formato dos dados, e até as interações dos usuários com ela. Como resolver isso?

Você teria algumas opções, e vamos falar sobre algumas delas:

Criar uma tabela para cada país. Essa abordagem poderia funcionar, mas traria alguns problemas:
- Código duplicado: Cada tabela para cada país levaria à duplicação de lógica, aumentando o esforço de manutenção.
- Dificuldade em sincronizar mudanças: Se um bug for encontrado, você precisaria corrigir em múltiplos lugares.
- Escalabilidade: À medida que novos países fossem adicionados, essa solução se tornaria insustentável.
Criar uma tabela única com condicionais. Outra abordagem seria desenvolver uma única tabela, com várias condicionais para renderizar cada tipo de célula ou header, dependendo do país. No entanto, isso também apresenta problemas:
- Código complexo: À medida que a tabela cresce, o número de condicionais aumenta, tornando o código difícil de entender e manter.
- Acoplamento: O código ficaria altamente acoplado, dificultando a adição de novas funcionalidades.
- Manutenção difícil: A manutenção se torna um pesadelo quando o projeto cresce e precisa ser ajustado para novos cenários.

A Solução: Strategy Pattern

Uma abordagem mais limpa e escalável que adotamos foi o uso do Strategy Pattern. Mas o que é o Strategy Pattern?

O Strategy Pattern é um padrão de design comportamental que define uma família de algoritmos e os encapsula de maneira que possam ser intercambiáveis. Ou seja, você pode alternar entre diferentes estratégias sem modificar o cliente que as utiliza.

Benefícios do Strategy Pattern

Implementar um componente utilizando o Strategy Pattern traz algumas vantagens importantes:

Separação de responsabilidades: Cada país tem sua própria estratégia para renderizar os dados, tornando o código mais modular e fácil de entender.
Redução de código duplicado: Não precisamos replicar a lógica da tabela para cada país, já que as diferenças são abstraídas em estratégias específicas.
Escalabilidade: Novos países ou mudanças nos existentes podem ser adicionados facilmente, sem impactar o código base.
Facilidade de manutenção: Se houver um bug ou nova regra para um país, basta ajustar sua estratégia específica, sem impactar o restante da aplicação.

Pontos Negativos do Strategy Pattern

Embora o Strategy Pattern seja extremamente útil, ele não está isento de desvantagens. Uma consideração importante é a necessidade de configurar múltiplas estratégias separadas, o que pode resultar em um certo grau de fragmentação. Em sistemas maiores, pode ser necessário assegurar que as estratégias sejam mantidas de maneira organizada e coesa.

Implementação: Nossa Tabela Dinâmica

Agora, vamos ver como a tabela foi implementada na prática usando o Strategy Pattern.

Primeiro, criamos um componente Table que recebe os dados e a estratégia específica de colunas para renderização:

import React from 'react';

export interface Column<T> {
  key: string;
  label: string;
  render: (row: T) => JSX.Element;
}

export interface TableProps<T = unknown>  {
  data?: T[];
  strategy?: {
    columns: Column<T>[];
  } | unknown ;
}

const Table =<T,>({ data, strategy }: TableProps<T>) => {

  const defaultStrategy = { columns: [] as Column<T>[] };
  const currentStrategy = strategy ? (strategy as { columns: Column<T>[] }) : defaultStrategy;

  return (
    <table>
      <thead>
        <tr>
          {currentStrategy?.columns?.map((col) => (
            <th key={col.key} className="px-4 py-2 border border-dashed border-border">
              {col.label}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {currentStrategy && data && data.length > 0  ? data?.map((row, index) => (
          <tr key={index}
            className="hover:bg-hoverTable"
          >
            {currentStrategy?.columns?.map((col) => col.render(row))}
          </tr>
        )) : (
          <tr>
            <td colSpan={currentStrategy?.columns?.length || 1} className="px-4 py-2 text-center">
              No data available
            </td>
          </tr>
        )}
      </tbody>
    </table>
  );
};

export default  React.memo(Table);

Com essa estrutura básica, conseguimos garantir que as colunas e o conteúdo sejam renderizados dinamicamente com base na estratégia específica do país. Para cada país, definimos uma estratégia diferente, como no exemplo abaixo:

export const tableStrategies = {
  BR: {
    columns: [
      {
        key: 'number',
        label: 'Número',
        render: (row: BrazilData): JSX.Element => (
          <td key={`${row.number}-br`} className="px-4 py-2 border border-dashed border-border">{row.number}</td>
        ),
      },
      {
        key: 'name',
        label: 'Nome',
        render: (row: BrazilData): JSX.Element => (
          <td key={`${row.number}-name`} className="px-4 py-2 border border-dashed border-border">{row.name}</td>
        ),
      },
      // ...outras colunas
    ] as BrazilColumn[],
  },
  ES: {
    columns: [
      {
        key: 'shirtNumber',
        label: 'Número de Camiseta',
        render: (row: SpainData): JSX.Element => (
          <td key={`${row.shirtNumber}-es`} className="px-4 py-2 border border-dashed border-border">{row.shirtNumber}</td>
        ),
      },
      {
        key: 'name',
        label: 'Nombre',
        render: (row: SpainData): JSX.Element => (
          <td key={`${row.name}-name`} className="px-4 py-2 border border-dashed border-border">{row.name}</td>
        ),
      },
      // ...outras colunas
    ] as SpainColumn[],
  },
};

Além disso, o uso do método render no contexto do Strategy Pattern traz simplicidade. Cada coluna da tabela possui uma função render, que é responsável por determinar como a célula será exibida para cada tipo de dado específico. Isso oferece grande flexibilidade e clareza para personalizar a exibição sem complexidade desnecessária.

Agora, basta chamar o componente Table com a estratégia apropriada e os dados para cada país:

<Table
  strategy={tableStrategies.BR}
  data={brazilData}
/>

Um Exemplo Simples com Seleção de Países

Para fins didáticos, no projeto criei uma simulação onde o usuário pode selecionar diferentes países através de um select. Dependendo da escolha do país, os dados e a estratégia de renderização da tabela são atualizados dinamicamente:

import React from 'react';
import {  CountryCode } from './types';
import  Table  from './components/Table';
import { americanData, brazilData, southKoreaData, spainData } from './mocks';
import { tableStrategies } from './strategies';

export default function Home() {

  const [strategy, setStrategy] = React.useState<unknown>({});
  const [selectedCountry, setSelectedCountry] = React.useState<CountryCode>('BR');
  const [data, setData] = React.useState<unknown[]>([null])

  const updateDataAndStrategy =React.useCallback((country: CountryCode) => {
    switch (country) {
      case 'BR':
        setData(brazilData);
        setStrategy(tableStrategies[country]);
        break;
      case 'US':
        setData(americanData);
        setStrategy(tableStrategies[country]);
        break;
      case 'ES':
        setData(spainData);
        setStrategy(tableStrategies[country]);
        break;
      case 'KR':
        setData(southKoreaData);
        setStrategy(tableStrategies[country]);
        break;
      default:
        setData([]);
        setStrategy({});
        break;
    }
  }, []);

  const handleChanged = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const selected = event.target.value as CountryCode;
    setSelectedCountry(selected);
    updateDataAndStrategy(selected);
  };

  return (
    <>
      <h1>## Table</h1>
      <select onChange={handleChanged} value={selectedCountry} className="mb-2">
        <option value="US">United States</option>
        <option value="AR">Argentina</option>
        <option value="BR">Brazil</option>
        <option value="KR">South Korea</option>
        <option value="ES">Spain</option>
      </select>

      <Table
        strategy={strategy}
        data={data}
       />
    </>
  );
}

Nesse exemplo, o componente select permite ao usuário selecionar o país desejado, e a tabela atualiza automaticamente para exibir os dados e a estratégia de renderização específicos daquele país. Confira o Link do projeto

Alternando Entre Países

Com o seletor de país, trocamos facilmente entre diferentes estratégias, simulando a renderização personalizada da tabela de acordo com as configurações específicas de cada país. Essa abordagem permite visualizar, em tempo real, como o conteúdo se adapta a diferentes regiões e contextos.

Conclusão

Com essa abordagem utilizando Strategy Pattern, garantimos um código mais limpo, modular e escalável. Além disso, se no futuro precisarmos adicionar novos países ou ajustar as regras de um país existente, podemos fazer isso facilmente sem impactar o restante do sistema.

Eu desenvolvi um projeto no GitHub que contém todo esse código e um exemplo prático de como aplicar essa técnica.

Se quiser ver o código completo, confira o repositório no GitHub.

Valeu galera :)

Startups: Lessons I Learned

Douglas Pujol — Wed, 03 Jul 2024 15:43:54 +0000

Throughout my career, I've had the opportunity to work in several startups across different sectors. In this brief article, I share some key points I learned from these experiences.

Start Simple and Build Only What You Need

The best way to start a new project is to begin simply and avoid unnecessary complexities. Projects naturally become more complex over time, so focus on basic functionalities and develop the code based on the real needs of your product. Avoid creating complex solutions prematurely, as this wastes time and resources. A good architecture should be flexible, cost-effective, and capable of adapting to changes.

Don't Fall Victim to Hype

One of the biggest challenges for companies today is the hasty adoption of modern technologies, whether it's a new framework, a new styling library, or an architecture popularized by an influencer. While exploring new technologies is exciting, do so cautiously. New technologies often come with bugs and uncovered use cases because they need time to mature. Be critical and aware of the trade-offs of each choice.

Small, Talented Teams Outperform Large Mediocre Teams

If you're a manager, value and retain your talents. Maintaining a small, highly skilled team is more efficient than having large, average teams. Many companies believe that more programmers lead to better software quality, which is a misconception. The synergy and efficiency of a small, competent team are unmatched and extremely valuable for project success.

Wheat and the Chaff

Know how to identify who is truly committed to helping and building something extraordinary with you, as opposed to those who are just comfortable. Value dedicated professionals who are willing to grow alongside the project.

Take Care of Yourself and Your Family

Programming is a passion that has transformed my life and the lives of many others. However, maintaining a balance between professional and personal life is essential for success. Include daily physical activities, such as going to the gym or practicing jiu-jitsu, and dedicate quality time to your family. A strong mind and a healthy body are crucial for achieving any goal.

Culture Is Crucial

The importance of organizational culture became clear to me after several years in the workforce. Culture shapes the future of the company. Invest in creating a positive work environment where values and goals are shared among all team members.

Recognition Matters

The most valuable recognition comes in monetary forms, development opportunities, and meaningful friendships. The best companies I've been a part of were those where I built lasting friendships. These are the standards I prioritize in every project I undertake.

Startups: Lições que Aprendi

Douglas Pujol — Wed, 03 Jul 2024 15:37:40 +0000

Ao longo da minha trajetória profissional, tive a oportunidade de trabalhar em várias startups de diversos setores. Neste breve artigo, compartilho alguns pontos que aprendi com essas experiências.

1. Comece de forma simples e Construa apenas o que você precisa.

A melhor maneira de iniciar um novo projeto é começar de forma simples e evitar complexidades desnecessárias. Projetos naturalmente se tornarão mais complexos com o tempo, então concentre-se nas funcionalidades básicas e desenvolva o código com base nas necessidades reais do seu produto. Evite criar soluções complexas prematuramente, pois isso desperdiça tempo e recursos. Uma boa arquitetura deve ser flexível, econômica e capaz de se adaptar às mudanças.

2. Não Seja Vítima do Hype

Um dos maiores problemas para as empresas hoje é a adoção precipitada de tecnologias modernas, seja um novo framework, uma nova lib de estilos ou uma arquitetura popularizada por um influenciador. Embora seja bacana explorar novas tecnologias, faça isso com cautela. Novas tecnologias frequentemente apresentam bugs e casos de uso não cobertos, pois precisam de tempo para amadurecer. Seja crítico e consciente dos trade-offs de cada escolha.

3. Equipes Pequenas e Talentosas Superam Grandes Times Medíocres

Se você é gestor, valorize e mantenha seus talentos. Manter uma equipe pequena e altamente qualificada é mais eficiente do que ter grandes times medianos. Muitas empresas acreditam que mais programadores resultam em software de melhor qualidade, o que é um equívoco. A sinergia e a eficiência de um time pequeno e competente são inigualáveis e extremamente valiosas para o sucesso do projeto.

4. Separe o Joio do Trigo

Saiba identificar quem está verdadeiramente comprometido em ajudar e construir algo extraordinário com você, em contraste com aqueles que estão apenas acomodados. Valorize os profissionais dedicados e dispostos a crescer junto com o projeto.

5. Cuide de Si e da Sua Família

Programar é uma paixão que transformou minha vida e a vida de muitas pessoas. No entanto, manter um equilíbrio entre a vida profissional e pessoal é essencial para o sucesso. Inclua atividades físicas diárias, como academia ou jiu-jitsu, e dedique tempo de qualidade à sua família. Uma mente forte e um corpo saudável são fundamentais para alcançar qualquer objetivo.

6. A Cultura é Crucial

A importância da cultura organizacional só ficou clara para mim após alguns anos de experiência no mercado de trabalho. A cultura define o futuro da empresa. Invista em criar um ambiente de trabalho positivo, onde os valores e objetivos são compartilhados por todos os membros da equipe.

7. O Melhor Reconhecimento

O reconhecimento mais valioso vem de formas monetárias, oportunidades de desenvolvimento e grandes amizades. As melhores empresas pelas quais passei foram aquelas onde construí amizades duradouras. Esses são os parâmetros que considero importantes em todos os projetos dos quais participo.

The True Power of a Tech Lead

Douglas Pujol — Thu, 27 Jun 2024 14:17:16 +0000

This week I finished reading the book "O Verdadeiro Poder" ("The True Power"), written by Vicente Falconi, which was recommended to me by my friend Júlio.

Drawing a parallel with the world of software development and the role of a tech lead in a company, understanding all the processes of an organization and how they influence the lives of stakeholders is a responsibility of any tech lead. Moreover, fostering a results-oriented culture within the team is essential.

How much does it cost to develop a feature? What was the real impact of a bug? How much did it cost to stop the team for 3 hours to discuss an issue that wasn’t particularly relevant or could have been resolved via email?

Every new feature and every resolved bug must be aligned with the organization's financial metrics. Besides the technical knowledge required for the tech lead role, we often forget the fundamental management responsibilities that this professional must master.

An effective tech lead should be able to translate strategic goals into clear objectives for their team, ensuring that everyone is aligned and focused on the same goal.

It is a fact that, many times, we cannot know the monetary value of a team or an operation as a whole, but we can track hours, delivered features, and resolved bugs within a sprint or time interval. This would already be a good starting point to have a better view of the team's performance, crucial data that we often overlook.

Falconi's methodology is a guide to achieving challenging goals through planning and focus. Understanding the organization from different angles, whether functionally (horizontally) or departmentally (vertically), is essential for effective management.

In summary, a tech lead must go beyond their technical expertise, developing people management and strategic planning skills to achieve true success. Clearly understanding all the processes of a company and aligning their deliveries with the main objectives of the organization.

🚀 O Verdadeiro Poder de um Techlead

Douglas Pujol — Thu, 27 Jun 2024 14:12:48 +0000

Esta semana terminei a leitura do livro "O Verdadeiro Poder", escrito por Vicente Falconi, uma recomendação de leitura do meu amigo Júlio.

Traçando um paralelo com o mundo do desenvolvimento de software e o papel do techlead em uma empresa, conhecer todos os processos de uma organização e como eles influenciam a vida dos stakeholders é obrigação de qualquer techlead. Além disso, fomentar uma cultura de resultados em sua equipe é fundamental.

Quanto custa o desenvolvimento de uma feature? Qual foi o impacto real de um bug? Quanto custou parar o time por 3 horas para discutir um assunto sem grande relevância ou que poderia ter sido resolvido por e-mail?

Toda nova feature e todo bug resolvido devem estar alinhados com as métricas financeiras da organização. Além do conhecimento técnico necessário ao cargo de techlead, muitas vezes esquecemos o papel fundamental de gestão que esse profissional deve executar com maestria.

Um Techelead eficaz deve ser capaz de traduzir metas estratégicas em objetivos claros para sua equipe, garantindo que todos estejam alinhados e focados no mesmo objetivo.

É fato que, muitas vezes, não temos como saber o valor monetário de um time ou de uma operação como um todo, mas conseguimos ter um controle de horas, features entregues e bugs resolvidos em uma sprint ou intervalo de tempo. Isso já seria um bom ponto de partida para ter uma melhor visão do desempenho da equipe, dados importantíssimos que muitas vezes deixamos de lado.

A metodologia de Falconi é um guia para atingir metas desafiadoras através do planejamento e foco. Conhecer a organização por diferentes ângulos, seja funcionalmente (horizontal) ou departamentalmente (vertical), é essencial para uma gestão eficaz.

Em suma, um Techlead deve ir além de sua expertise técnica, desenvolvendo habilidades de gestão de pessoas e planejamento estratégico para alcançar o verdadeiro sucesso. Entender com clareza todos os processos de uma empresa e alinhar suas entregas com os objetivos principais da organização.