DEV Community: Jose Germán Martínez

Cómo Crear Rutas Protegidas con React y React Router DOM

Jose Germán Martínez — Thu, 23 Jan 2025 17:55:18 +0000

Cuando construimos aplicaciones web con React, a menudo necesitamos limitar el acceso a ciertas rutas, permitiendo que solo usuarios autenticados puedan acceder a ellas. En este post, te explicaré cómo crear rutas protegidas utilizando React, react-router-dom y el componente Outlet. Además, te mostraré cómo validar si el usuario es administrador a partir de un valor almacenado en el localStorage.

¿Qué es una ruta protegida?

Una ruta protegida es una página que solo puede ser accesada si el usuario cumple con ciertos criterios, como estar autenticado o tener ciertos permisos (por ejemplo, ser administrador). En caso de no cumplir con estos requisitos, el usuario es redirigido a otra página, como la de inicio de sesión.

Requisitos previos
Antes de comenzar, asegúrate de tener:

React configurado en tu proyecto.
react-router-dom instalado:

npm install react-router-dom

El ejemplo: Rutas protegidas con validación de administrador.

En este ejemplo, validaremos si el usuario está autenticado como administrador revisando un valor en el localStorage. Si no es administrador, lo redirigiremos a la página de inicio de sesión.

Configuración del Router.

Primero, configuramos las rutas principales de la aplicación.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
import ProtectedRoute from "./ProtectedRoute";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route
          path="/dashboard/*"
          element={<ProtectedRoute><Dashboard /></ProtectedRoute>}
        />
      </Routes>
    </Router>
  );
}

export default App;

Crear el componente ProtectedRoute.

Este componente valida si el usuario está autenticado como administrador antes de renderizar la ruta protegida. Si no lo está, será redirigido a la página de inicio de sesión.

import React from "react";
import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute = () => {
  // Verificar si el usuario es admin desde el localStorage
  const isAdmin = localStorage.getItem("role") === "admin";

  return isAdmin ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoute;

Explicación del código:

localStorage.getItem("role"): Obtiene el rol del usuario almacenado en el localStorage.
Si el rol es "admin", renderiza el componente Outlet, que representa el contenido de las rutas protegidas.
Si no, redirige al usuario a la ruta de inicio (/) utilizando el componente Navigate.

Crear la página de inicio de sesión (Login) Esta página simula un inicio de sesión básico y guarda el rol del usuario en el localStorage.

import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Simular un inicio de sesión y guardar el rol del usuario
    localStorage.setItem("role", "admin");
    navigate("/dashboard");
  };

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Página de Inicio de Sesión</h1>
      <button onClick={handleLogin}>Iniciar sesión como Admin</button>
    </div>
  );
}

export default Login;

Crear el Dashboard.

El Dashboard será la ruta protegida a la que solo pueden acceder los usuarios con el rol de administrador.

import React from "react";
import { Routes, Route, Link } from "react-router-dom";

function Dashboard() {
  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Dashboard (Solo para Admins)</h1>
      <nav>
        <Link to="stats" style={{ margin: "0 10px" }}>Estadísticas</Link>
        <Link to="settings" style={{ margin: "0 10px" }}>Configuración</Link>
      </nav>

      <Routes>
        <Route path="stats" element={<h2>Sección de Estadísticas</h2>} />
        <Route path="settings" element={<h2>Sección de Configuración</h2>} />
      </Routes>
    </div>
  );
}

export default Dashboard;

Flujo del ejemplo

El usuario accede a la aplicación:

Si no ha iniciado sesión, verá la página de inicio de sesión (/).
Al iniciar sesión como administrador, se guarda el rol en el localStorage y se redirige al Dashboard (/dashboard).
En el Dashboard, se muestra contenido protegido (Estadísticas y Configuración).

Si el usuario intenta acceder directamente al Dashboard sin ser administrador, será redirigido automáticamente al inicio de sesión.

Las rutas protegidas son esenciales para aplicaciones que manejan usuarios y permisos. Utilizando React Router DOM, el componente Outlet y valores almacenados en el navegador como el localStorage, podemos implementar un sistema básico para restringir el acceso. Este enfoque es ideal para aplicaciones pequeñas o de aprendizaje, pero siempre es recomendable usar una solución de autenticación más robusta en proyectos grandes.

¿Tienes preguntas? ¡Déjame tus comentarios! 😊

[Boost]

Jose Germán Martínez — Tue, 10 Dec 2024 19:59:51 +0000

React 19 is now stable ! What’s New 👇

Random ・ Dec 8

#webdev #javascript #react #programming

JSConf Chile 2024: El evento imperdible para la comunidad JavaScript en Chile

Jose Germán Martínez — Tue, 15 Oct 2024 02:15:11 +0000

Este año, la JSConf Chile 2024 vuelve con fuerza en su segunda edición, consolidándose como uno de los eventos más importantes para la comunidad de JavaScript en Chile. Con un formato de 1 día de talleres y 2 días de charlas internacionales, este encuentro es una oportunidad única para aprender de los mejores expertos, hacer conexiones valiosas y formar parte de la creciente comunidad de JavaScript.

El evento se llevará a cabo los días 5, 6 y 7 de diciembre de 2024, y promete ser una plataforma de intercambio de ideas, conocimientos y experiencias que enriquecerá a todos los participantes, desde principiantes hasta desarrolladores avanzados.

Como instructor de JavaScript, me encanta apoyar y colaborar con iniciativas como la JSConf Chile, que impulsan el aprendizaje y el crecimiento de nuestra comunidad tecnológica. Invito a todos mis estudiantes y colegas a participar activamente en este evento. ¡Es una excelente oportunidad para ampliar tus conocimientos, hacer networking y ser parte de algo grande!

Si estás interesado en el desarrollo web o deseas profundizar tus conocimientos en JavaScript, no te pierdas esta oportunidad de asistir a la JSConf Chile 2024. ¡Nos vemos allí!

Entradas aquí

Post original

Flux: Manteniendo el control del flujo en el cambio de un estado (React)

Jose Germán Martínez — Thu, 03 Oct 2024 14:10:59 +0000

Imagina estar en una escena de una película de Marvel, justo en el momento en que Bruce Banner se transforma en Hulk. La transformación es un proceso que sigue un flujo claro y unidireccional: algo provoca la transformación, Bruce cambia a Hulk, y luego se desata el caos o se salva el día, dependiendo de la situación.

Ahora, usemos este momento para explicar cómo funciona el concepto de Flux en React, manteniendo ese flujo de transformación de Hulk bajo control, asegurándonos de que cada paso siga un camino claro y predecible.

¿Qué es Flux?

Flux es una arquitectura que asegura que los datos en una aplicación de React fluyan en una sola dirección, desde el inicio de un cambio hasta que ese cambio se refleja en la interfaz de usuario. Es como seguir la secuencia de transformación de Bruce a Hulk: siempre comienza con un detonante, sigue un proceso, y termina con un resultado visible (Hulk destrozando cosas o salvando el día).

El flujo de transformación de Hulk como ejemplo

Vamos a imaginar que tienes una aplicación que simula la transformación de Bruce Banner en Hulk. Al igual que en las películas, la transformación sigue una secuencia de eventos muy clara. Este es el flujo:

Un detonante (Action Creator): Algo provoca la transformación, ya sea un ataque, una situación de peligro, o simplemente que alguien se pasa de listo con Bruce. En términos de Flux, esto es una acción que genera un cambio en el estado de la aplicación. En nuestro caso, la acción sería "Transformar a Bruce en Hulk".
El comunicador del cambio (Dispatcher): Este es el intermediario que toma esa acción de transformación y la envía a la parte de la aplicación encargada de manejar ese estado (el Store). El dispatcher es como el detonante interno de Bruce, que envía la señal para que la transformación comience.
El estado cambia (Store): Aquí es donde ocurre la magia. El store en Flux es el lugar donde se guarda el estado actual de la aplicación, en este caso, el estado de Bruce Banner/Hulk. Una vez que el dispatcher recibe la orden, el store actualiza el estado de Bruce de "Banner" a "Hulk", lo que lleva a un cambio en cómo la aplicación debe comportarse.
El cambio se refleja en la UI (View): Después de que el estado cambia en el store, la vista (o interfaz de usuario) se actualiza. En nuestro ejemplo, esto sería como ver a Bruce convertirse en Hulk: la transformación se refleja en la pantalla, mostrando a Hulk listo para la acción.

Vamos a la práctica: Transformación de Bruce a Hulk (React)
En tu aplicación, podrías tener un botón que dice "Transformar a Hulk". El flujo de datos se vería así:

El usuario hace clic en el botón "Transformar a Hulk".
Se crea una acción ("Transformar a Hulk"), que contiene la información de que Bruce debe transformarse.
El dispatcher recibe esa acción y la envía al store encargado de manejar el estado de Hulk.
El store actualiza su estado de "Bruce Banner" a "Hulk".
La vista se actualiza para reflejar que ahora estás viendo a Hulk en lugar de Bruce Banner, listo para pelear.

Vamos a ver un poco de código de React:

import { useReducer } from 'react';

// Definimos las acciones
const ACTIONS = {
  TRANSFORM_TO_HULK: 'transform_to_hulk',
  TRANSFORM_TO_BANNER: 'transform_to_banner',
};

// Creamos el reducer que maneja los estados de la transformación
const reducer = (state, action) => {
  switch (action.type) {
    case ACTIONS.TRANSFORM_TO_HULK:
      return { ...state, isHulk: true };
    case ACTIONS.TRANSFORM_TO_BANNER:
      return { ...state, isHulk: false };
    default:
      return state;
  }
};

// Componente principal
const HulkReducer = () => {
  // Inicializamos el estado usando useReducer
  const initialState = { isHulk: false };
  const [state, dispatch] = useReducer(reducer, initialState);

  // Función para manejar la transformación
  const handleTransformation = () => {
    if (state.isHulk) {
      dispatch({ type: ACTIONS.TRANSFORM_TO_BANNER });
    } else {
      dispatch({ type: ACTIONS.TRANSFORM_TO_HULK });
    }
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px'}}>
      <h1>{state.isHulk ? 'Hulk' : 'Bruce Banner'}</h1>
      <img
        src={state.isHulk ? 'https://static.wikia.nocookie.net/disney/images/b/b9/Profile_-_Hulk.jpg' : 'https://static.wikia.nocookie.net/loveinterest/images/e/eb/Bruce_banner.jpg'}
        alt={state.isHulk ? 'Hulk' : 'Bruce Banner'}
        style={{ width: '200px', height: 'auto', marginBottom: '20px', borderStyle: 'solid', borderWidth: '3px', borderColor: 'black', borderRadius: '10px'  }}
      />
      <br />
      <button onClick={handleTransformation} style={{color: 'white', backgroundColor: 'green'}}>
        {state.isHulk ? 'Volver a Bruce' : 'Transformar en Hulk'}
      </button>
    </div>
  );
};

export default HulkReducer;

La importancia del flujo unidireccional

¿Por qué es importante que los datos fluyan en una sola dirección en Flux, como la transformación de Hulk? Porque asegura que cada paso del proceso sea predecible y controlado. En vez de que los datos cambien de manera caótica, como cuando Hulk pierde el control, Flux permite que todo siga un orden. Cada vez que se realiza una transformación, sabes exactamente qué lo provocó y cómo se gestionó ese cambio.

En este caso, siempre tienes claro que la transformación empieza con un evento (la acción), pasa por un sistema (dispatcher y store), y luego se muestra en la interfaz de usuario (la vista de Hulk). Si los datos pudieran fluir en todas direcciones, el resultado sería confuso, como si Hulk empezara a transformarse de repente sin razón aparente.

Conclusión

Flux nos da un marco sólido para gestionar los cambios de estado en una aplicación de React, permitiendo que los datos fluyan de manera ordenada, como la secuencia de transformación de Bruce Banner a Hulk. Desde el detonante inicial hasta el cambio final en la interfaz, todo sigue una secuencia predecible y clara, haciendo que manejar aplicaciones complejas sea más sencillo y menos propenso al caos. ¡Con Flux, controlamos la transformación, no como Hulk, que pierde el control!

Happy programming day

Jose Germán Martínez — Thu, 12 Sep 2024 14:54:38 +0000

Happy day to all community programmers!

This career has given me a lot of satisfaction and thanks to it I have also managed to achieve some goals.

It has brought me closer to hundreds of people through developer communities and in my work as an instructor. I am very grateful.

Celebrate it too and enjoy your day.

Programmer's Day is celebrated on September 12 in order to highlight and celebrate the role of people who work in the development of different digital systems. Web pages, applications, games, software and operating systems are some of the products developed by programmers.

Feliz día de la programación

Jose Germán Martínez — Thu, 12 Sep 2024 13:26:15 +0000

¡Feliz día para todos los programadores de la comunidad!

Esta carrera que me ha dado muchas satisfacciones y gracias a ella también he logrado cumplir algunas metas.

Me ha acercado a cientos de personas por medio de las comunidades de desarrolladores y en mi labor como instructor. Estoy muy agradecido.

Celébralo tú también y disfruta de tu día.

El Día del Programador se celebra el 12 de septiembre con el fin de destacar y celebrar el rol de las personas que trabajan en el desarrollo de diferentes sistemas digitales. Páginas web, aplicaciones, juegos, software y sistemas operativos son algunos de los productos desarrollados por los programadores.

El código no se vende solo

Jose Germán Martínez — Mon, 26 Aug 2024 14:00:44 +0000

Siempre he pensado que la habilidad para vender no es solo para los que trabajan en ventas. Me explico, soy venezolano, inmigrante, 43 años, con un amor desmesurado por la tecnología y las cachapas con queso, pero he aprendido que saber vender es esencial, incluso en nuestro querido mundo del software o en el de la gastronomía internacional. ;)

Quiero hablarles de un tema que siempre genera controversia, y créanme, no me voy a andar por las ramas. ¿Qué pasa cuando el ego de un desarrollador es tan grande que no le permite ver la importancia de tener habilidades blandas, especialmente las comunicativas?

A ver, seamos sinceros: en la industria del software, a muchos nos han enseñado que el código es el rey, que mientras sepamos programar como dioses, lo demás no importa. Pero, ¡oh, sorpresa! El mundo real es mucho más complejo. No basta con ser un crack en Python o en JavaScript, también hay que saber comunicar lo que hacemos y venderlo. Sí, venderlo, porque aunque te parezca extraño, el código no se vende solo.

He visto colegas, y tal vez en algún momento fui uno de ellos, que se atrincheran detrás de sus líneas de código, sintiéndose intocables, como si la comunicación fuera una tarea para otros, para los "marketeros" o los "vendedores". Pero cuando llega el momento de presentar un producto, de transmitir esa idea brillante que se nos ocurrió a las 3 de la mañana, ¿qué pasa? Nos trabamos, nos frustramos, y al final, la idea se queda en la mente porque no supimos venderla.

Entiendo, la palabra "vender" tiene mala fama, sobre todo para quienes pensamos que nuestro trabajo debe hablar por sí solo. Pero aquí está la clave: si no sabes comunicar, si no sabes vender esa idea, ese proyecto o ese producto, todo ese trabajo que hiciste se queda en nada. No es suficiente con que tu código sea limpio, robusto y eficiente; si no logras que otros lo entiendan y lo valoren, es como si no existiera.

La verdad es que las habilidades blandas no son un adorno, son una necesidad. Y sí, sé que hay egos que se inflan como un globo cuando sugiero que deberían trabajar en su comunicación. Pero, amigos, no nos engañemos: ser un buen desarrollador no se trata solo de ser un ninja del código; se trata también de ser capaz de compartir, explicar, convencer y, por qué no, vender.

Si te gusta lo que escribo o conectas al menos un poco, te invito a conocerme un poco más y seguir otras publicaciones que hago en:
Substack
LinkedIn

Quiero escuchar sus opiniones, ¿piensan que exagero? ¿O creen que tal vez es hora de que los desarrolladores bajemos un poco el ego y comencemos a darle más importancia a esas cualidades que muchos subestiman? ¡Los leo!

Programación Orientada a Objetos - Una abstracción de la realidad

Jose Germán Martínez — Thu, 08 Aug 2024 01:29:14 +0000

Hola, en este artículo, que parece tutorial, abordaremos un tema que en lo particular al principio me dio muchos dolores de cabeza. Sin embargo, esta dificultad me llevó a estudiar, estudiar y estudiar para hacer como propia la abstracción de la vida cotidiana y así llevar a líneas de código, la representación de algo tangible (créeme que esto puede llegar a ser una tarea titánica a veces). El tema terminó apasionándome de manera tal que ahora comparto en este artículo datos importantes para comprenderlo, así que vamos al hueso del asunto.

Explicaré o intentaré hacerlo de la mejor manera posible, programación orientada a objetos o por sus siglas (POO) utilizando JavaScript como mi lenguaje de elección. Para entender cómo aplicar la POO a situaciones del mundo real, tienes que internalizar que la programación orientada a objetos no es solo una técnica, ¡es un enfoque de vida! En este artículo, exploraremos conceptos fundamentales de POO y los aplicaremos a ejemplos tangibles de la vida cotidiana.

¿Qué es la Programación Orientada a Objetos?

La programación orientada a objetos es un paradigma de programación que se basa en el concepto de "objetos", puedes imaginarte en este mismo instante literalmente un objeto de la vida: una manzana, un perro, una casa, un auto, un papito de hule. Ahora, visualiza que estos objetos pueden contener datos en forma de propiedades o características y funcionalidades, es decir, pueden hacer cosas. Imagina que estás modelando un mundo virtual donde cada entidad puede ser representada como un objeto independiente con características únicas.

Objetos en la Vida Real y en la POO

Para entender mejor la POO, echemos un vistazo a un ejemplo de la vida real: un auto. Un auto puede tener propiedades como modelo, color y velocidad, así como métodos como arrancar y detener. Transpolar esto al mundo de la POO sería bastante sencillo:

class Auto {
  constructor(modelo, color) {
    this.modelo = modelo;
    this.color = color;
    this.velocidad = 0;
  }

  arrancar() {
    console.log(`El auto ${this.modelo} ha arrancado.`);
  }

  detener() {
    console.log(`El auto ${this.modelo} se ha detenido.`);
    this.velocidad = 0;
  }

  acelerar(kmh) {
    this.velocidad += kmh;
    console.log(`El auto ${this.modelo} acelera a ${this.velocidad} km/h.`);
  }
}

// Crear un objeto auto
const miAuto = new Auto('Sedán', 'Rojo');

// Utilizar métodos del objeto auto
miAuto.arrancar();
miAuto.acelerar(50);
miAuto.detener();

En este ejemplo, hemos creado una clase Auto con propiedades como modelo, color y velocidad, así como métodos, es decir, las cosas que puede hacer: como arrancar, detener y acelerar. Luego, creamos un objeto miAuto basado en esta clase y lo utilizamos para simular acciones de la vida real.

Herencia: La Clave de la Jerarquía

Imagina ahora que queremos modelar no solo coches, sino también motocicletas. Ambos comparten algunas similitudes, pero también tienen características únicas. Aquí es donde entra en juego el concepto de herencia en la POO.

class Camioneta extends Auto {
  constructor(modelo, color, tipo) {
    super(modelo, color);
    this.tipo = tipo;
  }

  realizarTruco() {
    console.log(`La camioneta ${this.modelo} ${this.tipo} realiza un asombroso truco.`);
  }
}

// Crear un objeto camioneta
const miCamioneta = new Camioneta('Explorer', 'Negra', '4x4');

// Utilizar métodos del objeto camioneta
miCamioneta.arrancar();
miCamioneta.acelerar(80);
miCamioneta.realizarTruco();
miCamioneta.detener();

Aquí, hemos creado una nueva clase Camioneta que extiende la clase Auto. La palabra clave extends nos permite heredar todas las propiedades y métodos de la clase padre (Auto). Además, la clase hija (Camioneta) puede tener propiedades y métodos adicionales.

Encapsulamiento: Protegiendo tus Secretos

El encapsulamiento es otro pilar de la POO que nos permite proteger los detalles internos de un objeto y exponer solo lo necesario. Veamos un ejemplo sencillo utilizando una "Cuenta Bancaria":


class CuentaBancaria {
  constructor(titular, saldoInicial) {
    this.titular = titular;
    this._saldo = saldoInicial; // El saldo se designa con el prefijo _ para indicar que es privado
  }

  get saldo() {
    return this._saldo;
  }

  depositar(cantidad) {
    if (cantidad > 0) {
      this._saldo += cantidad;
      console.log(`${cantidad} depositados. Nuevo saldo: ${this._saldo}`);
    } else {
      console.log("Error: La cantidad debe ser mayor que cero.");
    }
  }

  retirar(cantidad) {
    if (cantidad > 0 && cantidad <= this._saldo) {
      this._saldo -= cantidad;
      console.log(`${cantidad} retirados. Nuevo saldo: ${this._saldo}`);
    } else {
      console.log("Error: Cantidad inválida o saldo insuficiente.");
    }
  }
}

// Crear una cuenta bancaria
const miCuenta = new CuentaBancaria('Juan Pérez', 1000);

// Utilizar métodos del objeto cuenta bancaria
console.log(`Saldo inicial: ${miCuenta.saldo}`);
miCuenta.depositar(500);
miCuenta.retirar(200);

En este ejemplo, hemos encapsulado el saldo de la cuenta utilizando un método get para acceder a él. Esto protege el saldo de ser modificado directamente desde fuera de la clase, manteniendo la integridad de nuestra cuenta bancaria.

Polimorfismo: La Magia de la Versatilidad

El polimorfismo permite que diferentes clases compartan el mismo nombre de método, pero con comportamientos específicos para cada una. Para ilustrar esto, imaginemos un zoológico con animales que emiten sonidos.


class Animal {
  hacerSonido() {
    console.log('Algunos sonidos genéricos de animal.');
  }
}

class Perro extends Animal {
  hacerSonido() {
    console.log('¡Guau! ¡Guau!');
  }
}

class Gato extends Animal {
  hacerSonido() {
    console.log('¡Miau! ¡Miau!');
  }
}

// Crear objetos animales
const miAnimal = new Animal();
const miPerro = new Perro();
const miGato = new Gato();

// Utilizar el método hacerSonido de cada objeto
miAnimal.hacerSonido();
miPerro.hacerSonido();
miGato.hacerSonido();

En este ejemplo, las clases Perro y Gato heredan de la clase Animal, pero cada una sobrescribe el método hacerSonido con su propia implementación única. Esto permite que diferentes tipos de animales utilicen el mismo método de manera distinta.

Conclusión: POO... ponlo en Acción

¡Te agradezco mucho llegar este punto! Exploramos conceptos clave como objetos, herencia, encapsulamiento y polimorfismo, y los hemos aplicado a situaciones de la vida real. Recuerda, la POO es una forma de pensar que te permite modelar y entender el mundo de manera más efectiva...y llevarla a código.

Así que la próxima vez que veas un auto, una cuenta bancaria o incluso a tu mascota, piensa en cómo podrías representarlos como objetos en tu código. La programación orientada a objetos no solo es una herramienta poderosa, ¡es una forma de dar vida a tus programas!

Espero que hayas disfrutado este artículo y que le puedas sacar provecho en tus proyectos. Déjeme tus comentarios para saber que te pareció y si tienes alguna otra abstracción de la vida real. ;)

Tony Stark y sus múltiples estados

Jose Germán Martínez — Wed, 17 Jan 2024 01:09:21 +0000

Entendiendo los Estados en Aplicaciones Web desde la mirada de un superhéroe.

Los estados desempeñan un papel fundamental en el desarrollo de aplicaciones web, especialmente en bibliotecas y frameworks. Acá no nos limitamos verlo desde un solo lenguaje de programación, ya que el concepto es agnóstico al lenguaje que se ocupe.

Comprender cómo funcionan los estados y manejarlos correctamente es esencial para construir aplicaciones robustas y dinámicas. En este post, exploraremos qué son los estados en el contexto de las aplicaciones web, cómo se pueden gestionar en React y haremos una comparación con de como se implementaría en Elixir (gracias al crack @clsource que cordialmente propuso realizar en conjunto esta comparación entre ambas tecnologías).

¿Qué son los Estados en Aplicaciones Web?
En el contexto de las aplicaciones web, el "estado" se refiere a la representación instantánea de la información en un momento dado. En otras palabras, es la condición actual de la aplicación en términos de datos y la interacción del usuario. Los estados pueden cambiar en respuesta a eventos, acciones del usuario o actualizaciones de datos externos.

Estados en Aplicaciones React

React, siendo una biblioteca de JavaScript para construir interfaces de usuario, utiliza el concepto de estados para gestionar la dinámica de las aplicaciones. En React, el estado es un objeto que representa información que puede cambiar durante la ejecución de un componente.

¿Cómo sería en Elixir?

En Phoenix (Framework Web de Elixir) la gestión de estados
es mediante la modificación de una estructura "socket" que es
pasada como parámetro a las distintas funciones.
Ésta estructura es creada en cada petición por Phoenix. La máquina virtual de Erlang (BEAM) crea un nuevo proceso en cada solicitud, lo que permite una alta concurrencia y robustez al crear aplicaciones web, ya que si falla un proceso no afectará a los otros.
-@clsource

Ahora, nos vamos al universo cinematográfico de Marvel para entender todo esto.

La Evolución del Estado de Iron Man

En el universo Marvel, Iron Man es un personaje que experimenta una transformación significativa a lo largo de su historia, lo que puede servir como una analogía interesante para entender el concepto de estados en React y de los procesos en Elixir.

Estado Inicial - Tony Stark, el Genio Millonario

En su estado inicial, Tony Stark, el cerebro detrás de Iron Man, es un genio millonario y egocéntrico, más preocupado por la tecnología y el éxito personal que por el bien común. Este estado inicial puede compararse con el estado inicial de un componente React, donde los datos y las condiciones son predefinidos.

const IronMan = () => {
  const [estado, setEstado] = useState('Genio Millonario');

  return (
    <div>
      <p>Tony Stark está en el estado: {estado}</p>
      {/* Otros componentes y acciones aquí */}
    </div>
  );
};

Acá el ejemplo de como declaramos el estado inicial de Tony con Elixir

defmodule Live.IronMan do
    use Phoenix.LiveView

    def mount(_params, _session, socket) do
        socket = assign(socket, :estado, "Genio Millonario")
        {:ok, socket}
    end

    def render(assigns) do
        ~H"""
            <p>Tony Stark está en el estado: <%= @estado %></p>
            <!-- Otros componentes y acciones aquí -->
        """
    end
end

Cambio de Estado - Transformación de Tony Stark
Ahora, imaginemos que un evento importante ocurre en la vida de Tony Stark, como su captura por un grupo terrorista. Este evento desencadena una transformación en su carácter y perspectiva, cambiando su estado de "Genio Millonario" a "Héroe Tecnológico".

const IronMan = () => {
  const [estado, setEstado] = useState('Genio Millonario');

  const transformar = () => {
    setEstado('Héroe Tecnológico');
  };

  return (
    <div>
      <p>Tony Stark está en el estado: {estado}</p>
      <button onClick={transformar}>¡Transformarse!</button>
    </div>
  );
};

Como se ve con Elixir:

defmodule Live.IronMan do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    socket = assign(socket, :estado, "Genio Millonario")
    {:ok, socket}
  end

  def handle_event("transformar", _params, socket) do
    socket = assign(socket, :estado, "Héroe Tecnológico")
    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <p>Tony Stark está en el estado: <%= @estado %></p>

    <button phx-click="transformar">¡Transformarse!</button>
    """
  end
end

Estado Final - Iron Man, el Vengador
Después de la transformación, Tony Stark se convierte en Iron Man, un héroe que utiliza su tecnología para luchar contra el mal. Este es su estado final, que puede considerarse como el resultado de una serie de eventos y cambios de estado.

Este ejemplo utiliza la historia de Iron Man para ilustrar cómo los estados en las aplicaciones web pueden cambiar a lo largo del tiempo, influenciados por eventos o acciones del usuario. Al igual que Tony Stark, los componentes React y los procesos en Elixir pueden evolucionar y adaptarse a medida que cambian las condiciones en la aplicación. Si quieres conocer un poco mas sobre estados globales, para este tema realicé recientemente un artículo en mi newsletter en linkedIn.

También te invito, si aún no lo haz leido, pasar por el post de @clsource donde nos da una cátedra sobre Elixir para desarrollo web.

Espero te haya gustado esta explicación y que sobre todo lo hayas entendido. Déjame tus comentarios para saber si te gustó o si ya manejas estados en tus aplicaciones. Nos leemos en la próxima.

Venciendo al Impostor: Cómo este Síndrome Puede Limitar tu Crecimiento en el Desarrollo de Software

Jose Germán Martínez — Thu, 14 Dec 2023 00:35:36 +0000

¡Hola comunidad! Nos encontramos de nuevo para leernos y conversar sobre un tema que seguro ha rondado nuestras mentes en más de una ocasión: el temido síndrome del impostor. Este pequeño monstruo, que parece emerger de la nada, nos hace cuestionar nuestras habilidades como desarrolladores. Pero tranquilos, ¡todos hemos estado allí!

Imaginen la escena: frente a la pantalla, código reluciente en mano, y ¡zas! El síndrome del impostor aparece como un relámpago, sembrando dudas. "¿Seré lo suficientemente competente para esto?", nos preguntamos. Pero amigos, desde ya les digo, desde el novato hasta el experto, todos hemos sentido esta sombra en algún momento. Esta escena es más común de lo que pudieran imaginar, así que el primer consejo que puedo dar es: ¡calma!

El peligro de esta situación radica en permitir que este impostor tome el control, ya que corremos el riesgo de frenar nuestro crecimiento profesional. Es como si nos cubriéramos con un manto invisible que oculta nuestras habilidades y logros. Pero, ¿saben qué? No podemos permitir que eso suceda. El desarrollo de software es un viaje constante de aprendizaje, y todos estamos navegando en la misma travesía.

Una verdad incómoda: Si nos dejamos arrastrar por el síndrome del impostor, estamos construyendo nuestras propias barreras contra el éxito. Este enemigo interno puede llevar a una disminución de la autoestima profesional y frenar nuestras ambiciones. Es como si un motor de coche estuviera limitado y no pudiera alcanzar su velocidad máxima.

Cuando nos dejamos atrapar por el síndrome del impostor, perdemos la oportunidad de demostrar al mundo y a nosotros mismos lo que realmente somos capaces de hacer. La resolución de problemas, el aprendizaje continuo y la capacidad de adaptación son las marcas distintivas de un buen desarrollador. Así que, la próxima vez que sientan que ese impostor acecha, recuerden: son más fuertes de lo que creen y están aquí porque merecen estarlo. ¡A codear con confianza y a dejar al impostor fuera de juego! 💻✨

El desarrollo de software es un campo donde la confianza en uno mismo es clave. Al dudar de nuestras habilidades, nos arriesgamos a no aprovechar al máximo nuestro potencial. Imaginen un superhéroe que, en lugar de enfrentarse al villano, se esconde en la sombra. ¡Eso no es lo que queremos! Queremos ser los héroes y heroínas que enfrentan desafíos con valentía y resuelven problemas con destreza.

Así que, la próxima vez que ese impostor susurre en sus oídos, recuerden todas las líneas de código brillantes que han escrito, los problemas resueltos y los proyectos exitosos. No permitan que una sombra momentánea eclipse la brillante luz de sus logros. ¡Adelante, valientes coders, el mundo está esperando sus genialidades! 💻🚀

Déjeme tus comentarios y si te gustó, no olvides compartir este post con tus amigos, compañeros de estudios y colegas.