DEV Community: Chris

Great value

Chris — Tue, 13 May 2025 15:52:40 +0000

MCM Development

May 13 '25

AI's global tech revolution: How recent developments are transforming business

#programming #ai #startup #productivity

Comments 2

5 min read

𝗧𝗵𝗲 𝗖𝗿𝘂𝗰𝗶𝗮𝗹 𝗥𝗼𝗹𝗲 𝗼𝗳 𝗗𝗮𝘁𝗮 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝘀

Chris — Tue, 08 Apr 2025 10:44:47 +0000

Reflecting on my previous roles, a significant obstacle I've noticed is often related to Data Structures. As developers, we tend to rush into coding or focus on the next task, overlooking the crucial step of Data Structure planning.

Prioritizing Data Structure planning leads to more efficient, maintainable, and scalable solutions, ultimately driving project success.

"𝘉𝘢𝘥 𝘱𝘳𝘰𝘨𝘳𝘢𝘮𝘮𝘦𝘳𝘴 𝘸𝘰𝘳𝘳𝘺 𝘢𝘣𝘰𝘶𝘵 𝘵𝘩𝘦 𝘤𝘰𝘥𝘦. 𝘎𝘰𝘰𝘥 𝘱𝘳𝘰𝘨𝘳𝘢𝘮𝘮𝘦𝘳𝘴 𝘸𝘰𝘳𝘳𝘺 𝘢𝘣𝘰𝘶𝘵 𝘥𝘢𝘵𝘢 𝘴𝘵𝘳𝘶𝘤𝘵𝘶𝘳𝘦𝘴 𝘢𝘯𝘥 𝘵𝘩𝘦𝘪𝘳 𝘳𝘦𝘭𝘢𝘵𝘪𝘰𝘯𝘴𝘩𝘪𝘱𝘴." - Linus Torvalds

The importance of well-planned Data Structures in software development cannot be overstated. Here’s a breakdown of its impact on various aspects:

Process Standardization and Code Consistency

Positive Impact:
Streamlining workflows to reduce errors and promote consistency across the codebase ensures a cohesive development process.
Potential Risks:
Without careful planning, the risk of creating inefficient or incompatible data structures can lead to increased errors and reduced code cohesion.

Code Scalability and Adaptation

Scalability: Thoughtfully designed Data Structures are key to facilitating growth and accommodating new requirements with ease.
Adjustment Challenges: Ignoring Data Structure planning can result in complex refactoring needs as projects evolve.

Development Efficiency:

Count on Execution:
A strong focus on Data Structures allows for optimized code that supports efficient application performance and maintainability.
Quality Assurance: Regularly reviewing and refining structures ensures ongoing efficiency and scalability.

Impact on Development Teams

Opportunities:
Emphasizing Data Structure planning enhances team capabilities in delivering scalable solutions.
Challenges: Teams must avoid the temptation to skip planning in favor of quick fixes to immediate challenges.

Conclusion:

Proper focus on Data Structure planning not only leads to efficient and maintainable codebases but also plays a pivotal role in driving overall project success and long-term sustainability.

𝗦𝗰𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲: 𝗘𝗹𝗲𝘃𝗮𝘁𝗶𝗻𝗴 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀

Chris — Fri, 04 Apr 2025 20:24:36 +0000

Embracing the Screaming Architecture paradigm plays a crucial role in how one structures and navigates a software project.

I personally find this approach more attractive and better organized. Here’s a brief overview of how this approach contrasts with traditional practices and the impact it can have on development processes:

Project Clarity & Focus

Screaming Architecture:
Namespaces and directories should loudly convey their purpose and meaning. This results in a cleaner, purpose-driven architecture that highlights the business domain rather than technical coupling.
Quality of Communication:
With a clear and meaningful structure, even those new to the project can easily navigate and understand its purpose without wading through generic structural hierarchies.

Enhanced Collaboration

Shared Understanding:
By organizing code around business capabilities, team members can more effectively collaborate as they are aligned around these core capabilities rather than isolated features or components.
Efficient Onboarding:
New developers can grasp the core functionalities and modules of the project swiftly when the folder structure directly reflects the business logic.

Scalability and Maintainability

Clear Expansion Pathways:
Adding new features or modules becomes intuitive when the architecture already provides a clear roadmap of where new code should reside based on its purpose.
Reduced Technical Debt:
A well-organized structure can prevent overlap and duplication, ensuring changes are integrated seamlessly without the chaos of navigating nested, generic hierarchies.

Developer Satisfaction and Productivity

Streamlined Workflow:
Clear, logical organization reduces the cognitive overhead associated with navigating complex and unstructured codebases, enhancing developer satisfaction and productivity.
Enhanced Focus:
Developers can prioritize business logic and problem-solving rather than spending excessive time on navigating or restructuring code.

Conclusion

By adopting Screaming Architecture, software professionals can ensure their projects are not just technically efficient but also directly aligned with core business objectives, ultimately fostering a more effective and motivated development team. Let's move forward in structuring our codebases to reflect and amplify our project's true essence.

𝗧𝗵𝗲 𝗙𝘂𝘁𝘂𝗿𝗲 𝗼𝗳 𝗔𝗽𝗽𝘀: 𝗔𝗜-𝗣𝗼𝘄𝗲𝗿𝗲𝗱 𝗔𝗴𝗲𝗻𝘁𝘀, "𝗩𝗶𝗯𝗲-𝗖𝗼𝗱𝗶𝗻𝗴" 𝗜𝗻𝘀𝘁𝗮𝗯𝗶𝗹𝗶𝘁𝘆, 𝗼𝗿 "𝗦𝗶𝗻𝗴𝗹𝗲-𝗜𝗻𝗽𝘂𝘁" 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀?

Chris — Mon, 31 Mar 2025 21:37:51 +0000

As AI rapidly reshapes software development, we're seeing transformative concepts emerge about what future apps might look like. Let’s dig into key scenarios likely to define the next generation of applications:

1️⃣ 𝗦𝗶𝗻𝗴𝗹𝗲-𝗜𝗻𝗽𝘂𝘁 𝗔𝗽𝗽𝘀 (𝗣𝗼𝘄𝗲𝗿𝗲𝗱 𝗯𝘆 𝗔𝗜):

𝗕𝗲𝗻𝗲𝗳𝗶𝘁: We are already observing apps shifting towards simplified, minimalist interfaces—often just a single text input. Here, the AI handles complex user interactions, interpreting context, user intent, and generating real-time responses and actions. This streamlines UI development drastically and enhances user engagement.
𝗥𝗶𝘀𝗸: Depending entirely on AI may lead to mismatches between user intent and action execution without adequate transparency or intuitive fallback mechanisms. Users might feel unclear or disconnected from how their queries produce certain results, creating potential friction in trust and usability.

2️⃣ 𝗘𝗻𝗵𝗮𝗻𝗰𝗲𝗱 𝗔𝗽𝗽𝘀 𝘄𝗶𝘁𝗵 𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗲𝗱 𝗔𝗜 𝗔𝗴𝗲𝗻𝘁𝘀:

𝗕𝗲𝗻𝗲𝗳𝗶𝘁: AI agents embedded in apps could significantly boost personalization, automation, and productivity, enriching the user experience with dynamic, context-aware interactions.
𝗥𝗶𝘀𝗸: Heavy reliance on these agents without transparency or explainability might cause unpredictable behaviors, making users feel less in control.

3️⃣ 𝗜𝗻𝘀𝘁𝗮𝗯𝗶𝗹𝗶𝘁𝘆 & 𝗦𝗲𝗰𝘂𝗿𝗶𝘁𝘆 𝗿𝗶𝘀𝗸𝘀 𝗳𝗿𝗼𝗺 "𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴":

𝗔𝗱𝘃𝗮𝗻𝘁𝗮𝗴𝗲: Rapid deployment, creative exploration, and unprecedented speed of innovation.
𝗥𝗶𝘀𝗸: Such rapid coding techniques run the risk of architectural oversights, poor scalability, accumulating technical debt, and increasing security vulnerabilities due to inadequate testing and validation.

4️⃣ 𝗦𝗲𝗰𝘂𝗿𝗶𝘁𝘆 𝗮𝗻𝗱 𝗦𝘁𝗮𝗯𝗶𝗹𝗶𝘁𝘆: 𝗠𝗼𝗿𝗲 𝗜𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗧𝗵𝗮𝗻 𝗘𝘃𝗲𝗿

𝗡𝗲𝗰𝗲𝘀𝘀𝗶𝘁𝘆: More sophisticated tools and approaches bring critical risks that require careful attention. Security, vulnerability prevention, AI transparency, and robust testing frameworks will become paramount indicators of quality.
𝗗𝗮𝗻𝗴𝗲𝗿𝗼𝘂𝘀 𝗢𝘂𝘁𝗰𝗼𝗺𝗲: Neglect in addressing these factors will increase susceptibility to cyber-attacks, instability, and long-term app damage, causing irreversible customer distrust.

5️⃣ 𝗣𝗿𝗲𝗰𝗶𝘀𝗲 𝗛𝘂𝗺𝗮𝗻 𝗢𝘃𝗲𝗿𝘀𝗶𝗴𝗵𝘁

𝗖𝗿𝗶𝘁𝗶𝗰𝗮𝗹: Expert developers must guide AI-driven applications, validate AI outputs, ensure robust security audits, and maintain software stability.
𝗣𝗼𝘁𝗲𝗻𝘁𝗶𝗮𝗹 𝗣𝗿𝗼𝗯𝗹𝗲𝗺𝘀: A world with minimized human oversight risks catastrophic failures due to lack of understanding, uncontrollable implied complexity, compounding technical debt, and weakened skills among junior developers.

𝗖𝗼𝗻𝗰𝗹𝘂𝘀𝗶𝗼𝗻: The evolution towards “Single-Input Apps” is undeniably innovative, simplifying user interaction through AI. But we must strike a careful balance—leveraging AI strength without neglecting security, scalability, proper coding standards, and responsible human oversight.

The best outcome for the future rests in a mindful synergy of simplified AI-driven interfaces, stable and secure development processes, and strengthened human guidance.

𝗪𝗵𝗮𝘁 𝗮𝗿𝗲 𝘆𝗼𝘂𝗿 𝘁𝗵𝗼𝘂𝗴𝗵𝘁𝘀 𝗼𝗻 𝗮𝗽𝗽𝘀 𝗯𝗲𝗶𝗻𝗴 𝗷𝘂𝘀𝘁 𝗮 "𝘀𝗶𝗻𝗴𝗹𝗲 𝘁𝗲𝘅𝘁 𝗶𝗻𝗽𝘂𝘁"?

𝗘𝘃𝗼𝗹𝘂𝘁𝗶𝗼𝗻 𝗼𝗳 𝗔𝗜 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝗶𝗲𝘀: looking at the future

Chris — Fri, 28 Mar 2025 23:59:13 +0000

In today’s dynamic tech world, new AI coding methodologies are redefining how we approach software development. As we move forward, these cutting-edge approaches promise to shift paradigms in our industry.

Emerging Trends:

Transition from Traditional Programming:
Once the cornerstone of software development, traditional coding sees a decline as AI-driven solutions rise, offering enhanced efficiency and creativity.
Empowerment through Vibe Coding:
By 2025, the focus moves away from syntax mastery. Developers will use natural language to express ideas, with AI translating these into functional applications, fostering creativity and quicker implementation.
Rise of Coding Agents and Clusters:
By 2026, we’ll see autonomous agents transforming workflows by handling complex projects collaboratively, thus optimizing processes in various sectors.
Advent of Agent Fleets:
By 2027, these agents will operate in concert, autonomously addressing large-scale challenges such as global supply chain management and disaster response, revolutionizing problem-solving at a massive scale.

Real-World Implications:

Startups:
Entrepreneurs can realize their MVPs faster with AI, describing ideas that translate into working prototypes in no time.
Creative Industries:
Game developers and designers can focus on creativity, leaving technical details to sophisticated AI systems.
Healthcare Advancements:
Medical experts can design diagnostic tools tailored to their needs, without needing programming expertise.

Looking to the Future:

This evolutionary path of AI in software development is more than an efficiency boost—it's a journey towards unleashing creativity and autonomy, paving the way for breakthroughs across industries

AI Intelligence over Dev Intelligence

Chris — Wed, 26 Mar 2025 22:29:21 +0000

Embracing AI not only streamlines processes but also challenges us to elevate our creativity and strategic thinking. It's about leveraging AI to enhance, not replace, our innate problem-solving skills and technical expertise.

The integration of AI into the software development process presents various impacts on developers' intelligence and skill growth:

Efficiency and Innovation

Positive Impact: AI can automate mundane tasks, enabling developers to focus on creative and innovative problem-solving, thus enhancing overall productivity and fostering inventive solutions.
Potential Risks: Reliance on AI for basic tasks might cause developers to lose touch with foundational coding skills, impacting their long-term capability development.

Skill Enhancement

Opportunities: Working with AI tools can facilitate rapid learning and adaptation to new technologies, expanding developers' technical expertise and proficiency across different frameworks and languages.
Challenges: Developers may become dependent on AI tools, which could hinder their ability to code manually and understand core programming concepts deeply.

Quality and Productivity

Improved Workflow: By reducing the load of repetitive tasks, AI allows developers to allocate more time to complex aspects of projects, potentially improving the quality of the final product.
Quality Assurance: Effective review systems and human oversight remain crucial to ensure AI-generated code meets high standards and does not compromise application integrity.

Impact on Professional Growth

Growth Opportunities: Developers engaging with AI can learn and apply agile and innovative methodologies quickly, advancing their careers by mastering emerging technologies.
Development Risks: Over-dependence on AI might limit the growth of essential coding skills, making it imperative for developers to critically assess and engage with AI-generated content.

Conclusion

The potential of AI to reshape developer intelligence and capabilities is significant, but success hinges on balancing AI utilization with continuous learning and skill enhancement. AI's benefits should complement, not replace, the core competencies of skilled developers.

Vibe Coding: Future of programming?

Chris — Tue, 25 Mar 2025 12:14:05 +0000

The concept of "Vibe Coding" as presented offers an intriguing shift towards integrating AI more deeply into the software development process.

An evolving concept that highlights the integration of AI into the software development process. It supports rapid prototyping and iteration, facilitating swift innovation and validation of ideas. Here’s a breakdown of how this might affect various aspects:

Quality of Applications

Positive Impact
Rapid prototyping and iteration can speed up development and innovation. This can lead to quicker validation of ideas and concepts.

Potential Risks
Heavy reliance on AI for code generation might lead to inconsistencies and bugs if the AI's output isn't rigorously reviewed and refined. Quality might suffer if speed takes priority over thorough vetting.

Scalability and Reliance

Scalability
While reaching an MVP quickly is feasible, ensuring maintainability and scalability requires deliberate architecture planning. Critical systems might still need traditional, robust approaches.

Reliance
Excessive reliance on AI tools might lead to technical debt. Developers need to strategize refactoring to ensure long-term sustainability.

Good Quality?

Depends on Execution
If developers can balance rapid iteration with rigorous architectural considerations, the quality can be maintained or even enhanced. AI can handle repetitive tasks, allowing human developers to focus on solving complex problems.

Quality Assurance
Effective QA practices and human oversight will be essential to maintain high application quality.

Impact on Junior Developers

Opportunities
Junior developers could benefit by learning agile and iterative development processes. Collaborating with AI could augment their learning curve, allowing them to focus on higher architectural thinking.

Challenges
Over-reliance on AI might limit the development of foundational coding skills. Understanding and critically evaluating AI-generated code will become crucial for growth.

Conclusion

While "Vibe Coding" presents exciting possibilities, success will depend on strategic implementation, balancing AI capabilities with human oversight, and maintaining focus on long-term scalability and quality.

Image Library

REACT - Consultas a API [Completo]

Chris — Mon, 05 Feb 2024 12:33:21 +0000

Uno de los factores más utilizados a la hora de desarrollar un proyecto en React, es la comunicación con API’s, ya sea a nuestro respectivo Back End o a requisitos externos.

Nos enfocaremos en cómo, y en dónde hacer estas consultas. Como manejar las respuestas, los errores, como integrar TypeScript para hacer explícita tanto la respuesta como los parámetros de las funciones y cómo crear un Custom Hook básico para manejo de mensajes.

Tocaremos también el cómo autenticar las consultas a través de token en Header, como crear una ruta para envío de archivos y como hacer que nuestra ruta identifique si estamos en localhost o producción. Esto es especialmente útil para mantener un desarrollo fluido y consistente. Nos mantendremos fuera del Back End en este caso, solo nos enfocaremos en nuestro proyecto React, vamos a suponer que ya tenemos nuestra API creada y configurada.

Nuestro ejemplo será una pequeña app que consulta, crea, modifica y elimina órdenes.

Estos son los puntos que tocaremos:

Creación de Custom Hook para Fetch’s.
Consulta Básica.
Validar URL para producción.
Manejo de versionado desde variables de entorno.
Manejo de respuestas con MessageHandler.
Consultas seguras (JWT).
Envío de archivos.
Consulta externa.
Outro.

Custom Hook

Suponiendo que ya tenemos un proyecto creado y configurado (sino, utilizaremos Vite para crear nuestro proyecto), ¿Cómo hacemos consultas a una API?

1. Crear el Custom Hook.

En este ejemplo llamaremos al archivo ‘fetch.tsx’, ‘.tsx’ adelantándonos a la configuración de Typescript y lo colocamos en el siguiente directorio:

- src
   - Hooks
      - fetch.tsx

2. Inicializar el archivo

export function fetchLibrary () {

  return {}
}

Esto nos inicializa el hook, ahora podemos empezar a crear los request.

Consulta GET

Ahora crearemos la primera consulta, en el momento más básico se vería así:

interface ApiGetResponse {
    data: any[]; // Puedes especificar un tipo más específico para los elementos de data
    status: number; // Puedes especificar un tipo más específico para los elementos de status
  }

  const fetchApiGet = async ({ url } : { url: string }): Promise<ApiGetResponse> => {
    const headers = {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    };

    const request = await fetch(url, {
      headers,
      method: 'GET'
    });

    if (!request.ok) {
      throw new Error('Network response was not ok');
    }

    const response: ApiGetResponse = await request.json();

    return response;
  };

Esto nos genera una consulta GET básica con una respuesta suponiendo que viene un objeto ‘data’ con un Array y un item ‘status’, esto depende de cómo esté estandarizada nuestra API.

La función recibe un único parámetro ‘url’ que es de tipo string, se declaran los headers de forma estándar y se devuelve la respuesta.

Así nos quedaría el hook por ahora:

interface ApiGetResponse {
    data: any[];
    status: number;
  }
export function fetchLibrary () {

  const fetchApiGet = async ({ url } : { url: string }): Promise<ApiGetResponse> => {
  }


  return {fetchApiGet}
}

En este momento ya podemos llamar al Custom Hook y realizar consultas, pero antes de eso, primero haremos otro Custom Hook específico que manejará las consultas de ´Orders´.

En este artículo solo utilizaremos órdenes como ejemplo, así que tendremos un solo Custom Hook, pero supongamos que ustedes hacen consultas de ´User´, ´Products´, ´Discounts´, etc, por cada tipo de modelo, haremos un Custom Hook propio.

- Hooks
   - Models
      - orders.tsx

Acá importamos la librería que acabamos de crear e inicializamos nuestro primer request:

import { fetchLibrary } from '../fetch'

export function useOrders () {
  const { fetchApiGet } = fetchLibrary()

  const ListOrders = async () => {
    try {
      const listOrders = await fetchApiGet({
        url: 'https://nuestra-api/orders'
      })

      if (listOrders instanceof Error || listOrders.status !== 200) {
        throw new Error('Success false')
      }

      return listOrders
    } catch (e) {
      throw new Error('Get Orders failed')
    }
  }

  return { ListOrders }

Con esto estandarizamos la consulta y respuesta para la obtención de Orders, así mantenemos independencia en cada uno de los pasos.

Este Custom Hook se encarga únicamente de consultar las Órdenes y todas las consultas relacionadas con ellas, no le interesa cómo se consultan, quién las hace ni de dónde vienen, esto nos da la libertad de que, si el día de mañana queremos cambiar la librería de consultas de Fetch a Axios, o incluso sacar los datos a través de un archivo JSON, no habría ningún problema. No tendríamos que cambiar cada una de las funciones en donde se consulta ‘Orders’, sino únicamente modificar el Hook fetchLibrary, siempre y cuando se mantenga y se respete el ‘Contrato’ entre todas las partes, todo seguiría funcionando.

Ahora sí podemos realizar la consulta desde nuestra vista o componente de la siguiente manera:

import { useEffect } from 'react'
import { useOrders } from '../../../Hooks/Models/orders'

export default function MyOrders () {
  const { ListOrders } = useOrders()

  useEffect(() => {
    handleGetOrders()
  }, [])

  function handleGetOrders () {
    ListOrders()
      .then((result) => {
        console.log(result)
      })
  }
}

Así podemos manejar de forma sencilla, ordenada y escalable nuestras consultas básicas. Ahora, esto por supuesto se puede mejorar y desarrollar mucho más, hagamos algunas mejoras.

Validar URL para producción

Esta función nos sirve para obtener el dominio de la ruta de forma dinámica, por ejemplo, usar ruta en Producción cuando el proyecto se encuentre en el servidor, o utilizar localhost cuándo nos encontremos trabajando desde nuestro entorno.

Es una función simple que llamaremos desde un archivo como ´utils´

1. Creamos el archivo

- src
   - Utils
      - utils.tsx

2. Creamos la función

export function validProductionUrl({ url }: { url: string }): string {
  if (import.meta.env.VITE_APP_ENV === 'production') {
    return `${import.meta.env.VITE_API_URL}${url}`
  } else {
    return `${import.meta.env.VITE_API_URL_LOCAL}${url}`
  }
}

Utilizaremos las variables de entorno de Vite para obtener el modo actual de nuestro proyecto.

3. Crear .env

Ahora creamos el archivo .env en la raíz de nuestro proyecto y colocamos lo siguiente:

VITE_APP_ENV=development
VITE_API_URL=https://nuestra-api.com
VITE_API_URL_LOCAL=http://localhost:3030

Esto básicamente nos permite llamar dinámicamente a la API correspondiente dependiendo del modo actual del proyecto. Esto también nos serviría si tenemos múltiples API's o una API que no sea definitiva o que esté en constante cambio, la agregaríamos al .env y únicamente tendríamos que preocuparnos de reemplazarla ahí.

Ahora simplemente en el archivo fetchLibrary importamos la función:

import { validProductionUrl } from '../Utils/utils'

Y la función fetchApiGet que se encuentra dentro le agregamos *validProductionUrl * a la URL, quedando de la siguiente manera:

const request = await fetch(validProductionUrl({ url }), {
  headers,
  method: 'GET'
})

Únicamente nos quedaría, en nuestro archivo orders.tsx limpiar la url que le enviamos al fetch:

const listOrders = await fetchApiGet({
   url: '/orders'
})

Porque recordemos que ahora agregamos la url de forma dinámica a través del .env, entonces al enviar la url así:

/orders

La función nos la devuelve así:

https://nuestra-api/orders

O así:

http://localhost:3030/orders

Manejo de versionado desde variables de entorno

Siguiendo con el punto anterior, agregaremos un punto más, muy sencillo pero nos ayudará a hacer las consultas más ordenadas y escalables.

Agrega esto a tu .env ya creado:

VITE_API_VERSION=/api/v1

Ahora en nuestro fetchApiGet agregamos el versionado a la URL:

const request = await fetch(validProductionUrl({ url: `${import.meta.env.VITE_API_VERSION}${url}` }), {
      headers,
      method: 'GET'
})

Podríamos agregar esa importación a una función en el utils.tsx de la siguiente manera:

export function getApiVersion(): string {
  return import.meta.env.VITE_API_VERSION
}

Ahora quedaría un poco más limpio:

const request = await fetch(validProductionUrl({ url: `${getApiVersion()}${url}` }), {
      headers,
      method: 'GET'
})

Y nuestro request final ahora se enviaría:

https://nuestra-api/api/v1/orders

Por supuesto tendríamos que asegurarnos de que nuestra API reciba el request a /api/v1/orders y no únicamente a /orders.

Manejo de respuestas con MessageHandler

Este Custom Hook nos permite mantener un orden en cuanto a las respuestas de nuestras consultas, tanto para los success como errors.

1. Crear archivo

- src
   - Hooks
      - handlerMessages

import { toast } from 'sonner'

export function useMessageHandler () {
  const errorHandler = ({ errorMessage, data, show }: { errorMessage: string, data: object, show: boolean }): Error => {
    if (import.meta.env.VITE_APP_ENV !== 'production') {
      console.error(data)
    }
    if (show) {
      toastHandler({ message: errorMessage, type: 'error' })
    }
    throw new Error(errorMessage)
  }

  const successHandler = ({ successMessage, data, show }: { successMessage: string, data: object, show: boolean }): void => {
    if (import.meta.env.VITE_APP_ENV !== 'production') {
      console.log(data)
    }
    if (show) {
      toastHandler({ message: successMessage, type: 'success' })
    }
  }

  const toastHandler = ({ message, type }: { message: string, type: 'success' | 'error' | 'info' | 'warning' }): void => {
    toast[type](message)
  }

  return { errorHandler, successHandler, toastHandler }
}

Este Hook nos provee 3 funciones:

errorHandler: Maneja los errores.
successHandler: Maneja los success. Estas dos funciones reciben el texto a mostrar, data para el consog.log y boolean show para decidir si mostrar la notificación en pantalla o no.
toastHandler: Maneja el proceso de la notificación.

A su vez integramos la validación de producción del .env para que, si estamos en local se muestre la información en consola, pero solo si estamos en local. Recordemos que en producción NO debería quedar ningún mensaje en consola.

Podemos usar las notificaciones que queramos, yo en este ejemplo estoy utilizando los Toast de Sonner que se instalan de la siguiente manera:

npm install sonner

Ahora simplemente en nuestro fetchApiGet o en cualquier otro sitio que necesitemos manejar errores, llamamos nuestra función de esta manera:

 if (!request.ok) {
      return errorHandler({ errorMessage: 'Network response was not ok', data: request, show: false })
    }

const response = await request.json()

return response

Consultas seguras (JWT)

Un punto esencial, el más importante sobre la comunicación entre nuestro Front y nuestra API es sin duda la seguridad, una manera fácil y común de colocar seguridad básica a nuestros request es a través del estándar JWT.

Suponiendo nuevamente que nuestra API ya está configurada para recibir, generar y guardar tokens, nos enfocaremos en crear nuestra parte en React.

1. Creamos la petición POST

En nuestro Hook fetchLibrary crearemos nuestra nueva petición, es similar al GET que ya tenemos solo que enviaremos un body.

const fetchApiPost = async ({ url, body }: { url: string, body: object, secure: boolean }): Promise<ApiPostResponse> => {
    const headers = {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
    const request = await fetch(validProductionAdminUrl({ url: `${import.meta.env.VITE_API_VERSION}${url}` }), {
      headers,
      method: 'POST',
      body: JSON.stringify(body)
    })

    if (!request.ok) {
      return errorHandler({ errorMessage: 'Network response was not ok', data: request, show: false })
    }

    const response: ApiPostResponse = await request.json()

    return response
  }

Y no nos olvidemos de exportar la función:

return { fetchApiGet, fetchApiPost }

2. Crear funciones Cookies

En nuestro archivo utils creamos tres funciones para crear, obtener y eliminar cookies, yo utilizo la librería js-cookie.

import Cookies from 'js-cookie'

export function setCookie ({ cookie, value, expires, secure }: { cookie: string, value: any, expires: number | undefined, secure: boolean }): void {
  Cookies.set(cookie, value, { expires, secure })
}
export function getCookie ({ cookie }: { cookie: string }): string | undefined {
  return Cookies.get(cookie)
}
export function removeCookie ({ cookie }: { cookie: string }): void {
  return Cookies.remove(cookie)
}

3. Crear el Custom Hook userAuth.

- src
   - Hooks
      - Models
         - userAuth.tsx

Ya teniendo las tres funciones de cookies en nuestro utils, podemos crear las primeras dos funciones en nuestro nuevo Hook userAuth antes de crear la función principal del Hook.

import { fetchLibrary } from '../fetch'
import { useMessageHandler } from '../handlerMessages'
import { setCookie, getCookie, removeCookie } from '../../Utils/utils'

function setAuthToken ({ receivedToken, tokenExpiry }: { receivedToken: string, tokenExpiry?: number }): void {
  setCookie({ cookie: 'authToken', value: receivedToken, expires: tokenExpiry, secure: true })
}

export function getAuthToken (): string | undefined {
  return getCookie({ cookie: 'authToken' })
}

En setAuthToken podemos enviarle el ´tokenExpiry´ para determinar el tiempo de vida del token, sino le enviamos ninguno, por defecto tendrá el tiempo de vida de la sesión en el navegador.

Ahora si, declaramos la interface, creamos la función Hook y creamos otras dos funciones:

interface LoginResponse {
  data: any[];
  status: number;
}

export function useUserAuth () {
  const { fetchApiPost } = fetchLibrary()
  const { errorHandler } = useMessageHandler()

  const login = async ({ email, password }: { email: string, password: string }): Promise<LoginResponse> => {
    try {
      const loginResult = await fetchApiPost({
        url: '/login',
        body: {
          email: email,
          password: password,
        },
      })

      if (loginResult instanceof Error || loginResult.success.type !== 'success' || !loginResult.data.token) {
        return errorHandler({ errorMessage: 'Success false', data: loginResult, show: true })
      }

      setAuthToken({ receivedToken: loginResult.data.token })
      return loginResult
    } catch (e) {
      return errorHandler({ errorMessage: 'Authentication failed', data: e, show: true })
    }
  }

  const logout = () => () => {
    removeCookie({ cookie: 'authToken' })
  }
  return { login, logout }
}

Estas funciones son a modo de ejemplo, estamos mostrando el proceso de como sería el post a nuestra API con datos básicos de Login, como respuesta nos vendría el Token y luego lo guardamos en las Cookies.

Ya con esto tendríamos el sistema de asignación y eliminación de Cookies para el usuario, ahora tenemos que aplicarlo a nuestras consultas para hacerlas seguras.

4. Modificación de nuestra función fetchLibrary

Los cambios que haríamos acá serían:

Importar la función que acabamos de crear para obtener la Cookie.
Agregar nuevo header de Authorization.

import { getAuthToken } from './Models/userAuth'

const fetchApiGet = async ({ url, secure }: { url: string, secure: boolean }): Promise<ApiGetResponse> => {
    const headers = {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: secure ? `Bearer ${getAuthToken()}` : ''
    }
    const request = await fetch(validProductionAdminUrl({ url: `${import.meta.env.VITE_API_VERSION}${url}` }), {
      headers,
      method: 'GET'
    })

    if (!request.ok) {
      return errorHandler({ errorMessage: 'Network response was not ok', data: request, show: false })
    }

    const response: ApiGetResponse = await request.json()

    return response
  }

Acá ya la consulta es segura, con un condicional porque puede que necesitemos hacer alguna consulta a nuestra API que no haga falta que sea segura (o que no puede) como por ejemplo, esa primera consulta ´/login´, al ser la primera consulta que se hace a nuestra API, y además al ser la consulta que nos trae el token como respuesta, aún no tenemos el token por lo cual no la podemos hacer segura.

Y ahora simplemente en nuestro Hook de Orders modificamos el fetch para que sea seguro:

const listOrders = await fetchApiGet({
 url: `/orders`,
 secure: true
})

Envío de archivos

El envío de archivos funciona de la misma manera que la petición estándar POST, solo que tenemos que modificar una pequeña cosita antes de enviar la petición:

  const fetchApiUploadFile = async ({ url, file, secure }: { url: string, file: File, secure: boolean }): Promise<ApiPostResponse> => {
    if (!(file instanceof File)) {
      return errorHandler({ errorMessage: 'El parámetro "file" no es un objeto File válido.', data: file, show: false })
    }

    const formData = new FormData()
    formData.append('file', file)

    const headers = {
      Accept: 'application/json',
      Authorization: secure ? `Bearer ${getAuthToken()}` : ''
    }
    const request = await fetch(validProductionAdminUrl({ url: `${import.meta.env.VITE_API_VERSION}${url}` }), {
      headers,
      method: 'POST',
      body: formData
    })

    if (!request.ok) {
      return errorHandler({ errorMessage: 'Network response was not ok', data: request, show: false })
    }

    const response: ApiPostResponse = await request.json()

    return response
  }

Esto nos permite enviar archivos a nuestra API que, por supuesto, tiene que estar condicionada para recibir un archivo. Ahora sería solo enviar el archivo en la petición del Hook, por ejemplo:

const UploadBanner = async ({ file }: { file: File }) => {
    try {
      const uploadBannerResult = await fetchApiUploadFile({
        url: `/banner`,
        secure: true,
        file
      })

      if (uploadBannerResult instanceof Error) {
        return errorHandler({ errorMessage: 'Success false', data: uploadBannerResult, show: true })
      }

      return uploadBannerResult
    } catch (e) {
      return errorHandler({ errorMessage: 'Upload Banner failed', data: e, show: true })
    }
  }

Consulta externa

Una consulta externa sería exactamente igual a lo que ya hemos hecho, solo que no la enviaremos segura:

const fetchGetUrl = async ({ url }: { url: string }): Promise<any> => {
    const headers = {
      'Content-Type': 'application/json',
      Accept: 'application/json'
    }
    const request = await fetch(url, {
      headers,
      method: 'GET'
    })

    if (!request.ok) {
      return errorHandler({ errorMessage: 'Network response was not ok', data: request, show: false })
    }

    const response = await request.json()

    return response
  }

Podemos definir el tipo de promesa si sabemos cuál va a hacer la respuesta estándar de las consultas.

Outro

Podemos crear la librería completa de todas las consultas; DELETE, GET, POST, PATCH.
Si hacemos consulta a una API en específico, podemos analizar la opción de crear una función específica para esa API así manejamos su respuesta adecuadamente, tal como hicimos con fetchApiGet.
Todo es perfectamente personalizable y adaptable, siéntase libre de probar, desarrollar y si tiene tiempo, compartir.
Esto es una guía básica-media, siempre se puede desarrollar más, innovar más y mejorar más.

DEV Community: Chris

Great value

AI's global tech revolution: How recent developments are transforming business

𝗧𝗵𝗲 𝗖𝗿𝘂𝗰𝗶𝗮𝗹 𝗥𝗼𝗹𝗲 𝗼𝗳 𝗗𝗮𝘁𝗮 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝘀

Process Standardization and Code Consistency

Code Scalability and Adaptation

Development Efficiency:

Impact on Development Teams

Conclusion:

𝗦𝗰𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲: 𝗘𝗹𝗲𝘃𝗮𝘁𝗶𝗻𝗴 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀

Project Clarity & Focus

Enhanced Collaboration

Scalability and Maintainability

Developer Satisfaction and Productivity

Conclusion

𝗘𝘃𝗼𝗹𝘂𝘁𝗶𝗼𝗻 𝗼𝗳 𝗔𝗜 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝗶𝗲𝘀: looking at the future

Emerging Trends:

Real-World Implications:

Looking to the Future:

AI Intelligence over Dev Intelligence

Efficiency and Innovation

Skill Enhancement

Quality and Productivity

Impact on Professional Growth

Conclusion

Vibe Coding: Future of programming?

Quality of Applications

Scalability and Reliance

Good Quality?

Impact on Junior Developers

Conclusion

Image Library

REACT - Consultas a API [Completo]

Estos son los puntos que tocaremos:

Custom Hook

1. Crear el Custom Hook.

2. Inicializar el archivo

Consulta GET

Validar URL para producción

1. Creamos el archivo

2. Creamos la función

3. Crear .env

Manejo de versionado desde variables de entorno

Manejo de respuestas con MessageHandler

1. Crear archivo

Consultas seguras (JWT)

1. Creamos la petición POST

2. Crear funciones Cookies

3. Crear el Custom Hook userAuth.

4. Modificación de nuestra función fetchLibrary

Envío de archivos

Consulta externa

Outro

Contacto