Tony Stark y sus múltiples estados

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.