DEV Community: Frank Betancur

Instalación y uso de TanStack Query (antes React Query)

Frank Betancur — Sat, 25 Jan 2025 16:34:47 +0000

Introducción

TanStack Query (anteriormente conocido como React Query) es una biblioteca para gestionar el estado de las solicitudes de datos en aplicaciones de React. Permite realizar fetching, caching, sincronización y actualización de datos de manera eficiente.

Instalación

Para comenzar a usar TanStack Query en un proyecto de React, primero debes instalar la biblioteca:

npm install @tanstack/react-query

O si usas Yarn:

yarn add @tanstack/react-query

Adicionalmente, si deseas utilizar DevTools para depurar, instala:

npm install @tanstack/react-query-devtools

Configuración

Una vez instalada la biblioteca, debes envolver tu aplicación con QueryClientProvider, que proporciona un contexto para manejar las solicitudes de datos.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

Si instalaste DevTools, agrégalas dentro de QueryClientProvider:

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

<QueryClientProvider client={queryClient}>
  <MyComponent />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

Uso básico

El hook useQueryse usa para obtener datos de una API de forma eficiente.

import { useQuery } from '@tanstack/react-query';

function fetchData() {
  return fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json());
}

function MyComponent() {
  const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData });

  if (isLoading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div><h1>{data.title}</h1><p>{data.body}</p></div>;
}

Mutaciones

Para realizar mutaciones (POST, PUT, DELETE), usa useMutation.

import { useMutation } from '@tanstack/react-query';

function createPost(newPost) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newPost),
  }).then(response => response.json());
}

function CreatePost() {
  const mutation = useMutation(createPost);

  return (
    <button
      onClick={() => mutation.mutate({ title: 'Nuevo Post', body: 'Contenido del post' })}
    >
      Crear Post
    </button>
  );
}

Por qué TanStack Query necesita un fetcher?

TanStack Query es una librería de JavaScript altamente popular que simplifica la gestión de datos en aplicaciones front-end. Para poder obtener datos de una API o cualquier otra fuente externa, necesita una forma de "traer" esos datos. Ahí es donde entra el fetcher.

Fetcher como puente: El fetcher actúa como un puente entre tu aplicación y la fuente de datos. Es la función que se encarga de realizar la petición HTTP (o cualquier otro tipo de petición necesaria) y de obtener la respuesta.
Flexibilidad: TanStack Query te permite definir fetchers personalizados para adaptarlos a las necesidades específicas de tu aplicación y a las características de tu API. Esto te da un gran control sobre cómo se obtienen los datos.
Abstracción: Al separar la lógica de obtención de datos en un fetcher, mantienes tu componente limpio y enfocado en la presentación de los datos.

¿Qué es un fetcher?

En términos simples, un fetcher es una función que:

Recibe parámetros: Estos parámetros pueden incluir variables, opciones de la petición, etc.

Realiza una petición: Utiliza una librería como fetch, axios o cualquier otra para hacer la solicitud a la API.

Retorna un valor: Este valor suele ser una promesa que se resuelve con los datos obtenidos de la API, o se rechaza si ocurre algún error.

const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  const json = await response.json();
  console.log(json);
  return json; 
};

Conclusión

TanStack Query facilita la gestión de datos en aplicaciones React, mejorando la eficiencia en la obtención y actualización de información desde APIs. Su sistema de caching y revalidación automática optimiza el rendimiento, reduciendo peticiones innecesarias.

Nos leemos pronto!!! 🚀

Backend Developer roadmap

Frank Betancur — Sat, 29 Apr 2023 20:47:07 +0000

Continuamos con los roadmaps en mundo del desarrollo del software, esta vez con el de backend, o la parte del desarrollo de software encargada del procesamiento de datos y la lógica detrás de una aplicación, es un componente crítico en el desarrollo de aplicaciones web y móviles. Un roadmap de backend bien estructurado puede ayudar a los equipos de desarrollo a planificar y ejecutar proyectos de manera eficiente, asegurando la entrega exitosa de productos de alta calidad. En este artículo, exploraremos los elementos clave que componen un roadmap de backend y cómo puede beneficiar a los equipos de desarrollo.

Definir los objetivos y requisitos del proyecto

El primer paso en la planificación de un roadmap de backend es establecer los objetivos claros del proyecto y los requisitos específicos que deben cumplirse. Esto implica comprender la naturaleza de la aplicación, las funcionalidades requeridas, las restricciones de rendimiento, la seguridad y cualquier integración con sistemas externos.

Diseñar la arquitectura del backend

Una vez que se comprenden los requisitos del proyecto, es importante diseñar una arquitectura de backend sólida que cumpla con esos requisitos. Esto puede implicar la selección de tecnologías adecuadas, como el lenguaje de programación, el marco de desarrollo, la base de datos y otras herramientas relevantes. La arquitectura debe ser escalable, segura y capaz de manejar eficientemente las operaciones necesarias para la aplicación.

Crear una API RESTful

Las API (Interfaces de Programación de Aplicaciones) son fundamentales para permitir la comunicación entre el frontend y el backend de una aplicación. Es importante diseñar y desarrollar una API RESTful bien estructurada que sea fácil de usar, tenga una documentación clara y permita a los desarrolladores del frontend acceder a los datos y funcionalidades del backend de manera eficiente.

Implementar la lógica de negocio

La lógica de negocio es el corazón de una aplicación, y en el backend es donde se implementa. Esto incluye el procesamiento de datos, la aplicación de reglas de negocio, la gestión de usuarios, la autenticación y la autorización, entre otros aspectos. Es importante implementar la lógica de negocio de manera modular y escalable, de modo que sea fácil de mantener y extender en el futuro.

Establecer pruebas y asegurar la calidad

Para garantizar la calidad del backend, se deben establecer pruebas exhaustivas que abarquen diferentes escenarios y casos de uso. Esto puede incluir pruebas unitarias, pruebas de integración, pruebas de rendimiento y pruebas de seguridad. La automatización de pruebas también es recomendable para agilizar el proceso y detectar posibles problemas de manera temprana.

Monitoreo y escalabilidad

Una vez que el backend está en funcionamiento, es importante implementar mecanismos de monitoreo para recopilar métricas y detectar posibles problemas o cuellos de botella. Además, se debe considerar la escalabilidad del backend, especialmente si se espera un crecimiento en la cantidad de usuarios o la carga de trabajo. Esto puede implicar el uso de servicios en la nube, la configuración de balanceadores de carga y la optimización de la infraestructura.

A continuación les comparto un link donde pueden encontrar el roadmap para Backend Developer en una manera mas detalla

Backend Developer Roadmap

Nos leemos pronto!!! 🚀

Frontend Developer roadmap

Frank Betancur — Tue, 28 Feb 2023 15:33:00 +0000

Continuamos con esta serie de post que nos ayudan a como comenzar en el mundo del desarrollo del software. En esta entrega veremos el roadmap para la carrera de Frontend, que necesitamos y donde comenzar.

Para ser Frontend Developer necesitamos aprender de las bases, las cuales son:

HTML
Es una herramienta que nos ayuda a construir las páginas webs, de como se van a ver, en qué posición estarán las elementos de ella, etc. Debemos tener en cuenta también tener buenas prácticas que nos ayudarán mas adelante en otros temas como SEO, responsive, etc, son temas que veremos a mas detalle en su momento.

CSS
Esta herramienta va muy de la mano con HTML, ya que es la que crea la belleza de la página web como tal. Este también es un mundo importante e interesante ya que desde el CSS podemos construir aplicaciones responsive, animaciones, etc. También debemos tener muy buenas prácticas usando herramientas como Sass que nos ayudan a tener un mejor código CSS y poderlo reutilizar en otros archivos, tambíen dentro de CSS hay frameworks y librerías que nos ayudan agilizar la construcción del CSS en una página web como por ejemplo: Boostrap, Tailwind, MaterialUI, etc.

JavaScript
Es un legunaje de programación interpretado, que ayuda en las aplicaciónes web a ejecutar acciones dentro de esta, como por ejemplo: guardar la información de un formulario haciendo click en un botón, la acción de ese click lo hacemos en JavaScript. También dentro de JavaScript existen librerías y frameworks que nos ayudan a crear sitios y aplicaciones web mucho mas cómodos y con buenas practicas, como por ejemplo: React, Angular, Vue.

Acá tenemos algunos recursos que pueden ayudar en este roadmap:
Curso de HTML y CSS
Curso de JavaScript
Curso de React
Curso de Angular

Documentación:
HTML
CSS
JavaScript
React
Angular
Vue
Sass
MaterialUI
Angular Material
Bootstrap
Tailwind

En el siguiente enlace podemos encontrar un roadmap mas completo, el cual recomiendo que miren para profundizar mas en el tema.
Frontend Developer RoadMap

Nos leemos pronto!!! 🚀

Recursos para iniciar como developer

Frank Betancur — Mon, 20 Feb 2023 22:27:59 +0000

Siempre que alguien quiere comenzar en el mundo del desarrollo de software las preguntas que surgen por lo general son: cómo puedo comenzar? a quién le puedo preguntar? quién puede ser mi mentor?, etc.

Hoy intentaré solucionar esas preguntas y ayudar un poco con algunos recursos en internet que nos pueden ayudar a mejorar, aprender y retar nuestros skills.

Documentación 📚

Siempre debemos apoyarnos mucho en las documentación de las herramientas que utilicemos, acá les dejo algunas:

JavaScript
React
Angular
Vue
NodeJS
Python

Canales en youtube 📺

Al día de hoy, hay muchas personas que les gusta compartir conocimiento por medio de youtube, donde explican un tema en particular, el manejo de un frameworks y/o librería, y hasta hacen bootcamps completos, algunos de ellos son:

Fazt
Carlos Azaustre
MiduDev
Leifer Mendez
Dominicode
Khristian Moreno
Julian Duque
Oscar Barajas
Mouredev
Hola Mundo

Platafromas de pago 💵

En lo personal uso mucho Udemy y Plazi, y la vdd me han ayudado mucho a mejorar mis skills:

Platzi
Udemy
En Udemy siempre recomiendo mucho a Fernando Herrera, explica muy bien los temas, acá les dejo su sitio web, frecuentemente regala bonos de sus cursos:
Fernando Herrera

Estos son algunos recursos que nos pueden ayudar, existen muchos mas que por el momento se me pueden estar pasando, pero a medida que encuentre iré actualizando este post, así que don't worries 😉

Nos leemos pronto!!! 🚀

Comezando en el desarrollo de software y mantenerse motivado

Frank Betancur — Sat, 11 Feb 2023 23:54:33 +0000

Muchas veces cuando alguien comienza a aprender de programación por cuanta propia o los que ya tienen experiencia quieren aprender algo nuevo, siempre se empieza con alguna motivación que lamentablemente con el paso del tiempo la vamos perdiendo, y esto es normal, lo que si no puede ser normal es dejar que esa desmotivación se vuelva una constante, o aún peor, algo definitivo en nuestro ciclo de aprendizaje. Por esto quiero recomendar algunos tips que pueden ayudarnos a mantenernos motivados.

Tener claro qué es lo queremos

Puede ser muy común cuando comenzamos a estudiar algo que no tenemos un norte definido, que solo lo estudiamos por que está siendo hype o trading ese tema, herramienta, librería, framework, etc, para este caso es importante saber que valor agregado nos brinda aprender ese tema, si nos puede ayudar a mejorar nuestro stack profesional, si lo podemos aplicar en corto o mediano plazo, o simplemente lo vamos a estudiar por gusto propio.

Definir un alcance

Una vez que tengamos definido qué es lo que queremos, debemos revisar el alcance, es decir, comenzar poco a poco, desde lo mas básico e ir incrementando la complejidad. No es recomendable comenzar a estudiar algo que no tienes la mínima idea de que se trata y sin saber como podes abordarlo, esto puedo llevarnos muy rápido a la frustración y muy seguramente a renunciar al estudio del tema.

Constancia y disciplina

Debemos tomar una rutina, que tengas definido los tiempos y espacios de dedicación a estudiar, esto nos ayudará muy seguramente a llegar a la meta del aprendizaje. Ir creando este hábito es muy esencial e importante en el desarrollo de software, porque en esta área se debe estar en constante actualización por las seguidas actualizaciones de las herramientas que útilizamos y por las nuevas que surgen, esto nos ayudará a estar vigentes en el mercado.

Crear un grupo de estudio

Muy importante tener un grupo de amigos con los cuales puedas hablar, debatir y darse feedback, esto ayuda mucho al crecimiento y entre todos pueden brindarse apoyo y motivación.

Unirse a las comunidades de software

En casi todas las ciudades existen comunidades de software las cuales son grupos de muchas personas que les gusta compartir conocimiento con altruismo, muchas de ellas son patrocinadas por grandes empresas, te invito a que investigues cuáles existen en tu ciudad.

Subscribirse a canales en youtube

Hoy en día existen muchos canales en youtube en las cuales hay personas que explican y comparten conocimiento por medio de cursos gratuitos, clips, live coding, y ejemplos de proyectos que pueden servir para que comiences aprender y posteriormente crear tu portafolio.

En próximos posts te recomendaré algunos recursos en los cuales aprenderás mucho y que te mantendrán motivado a seguir aprendiendo de este universo del desarrollo de software.