¿Dónde debe vivir la lógica de tu aplicación? Backend vs. Frontend

Al diseñar y desarrollar aplicaciones, uno de los debates más comunes es decidir dónde debería residir la lógica de negocio: ¿en el backend o en el frontend? Esta decisión, aunque pueda parecer trivial, tiene implicaciones sustanciales en la escalabilidad, mantenimiento y experiencia del usuario.

La división entre frontend y backend es una característica definitoria en la arquitectura de muchas aplicaciones modernas. Mientras que el frontend se encarga de la presentación y la interacción con el usuario, el backend se ocupa de la lógica de negocio, el almacenamiento de datos y la integración con otros sistemas. Pero, ¿qué sucede cuando las líneas entre estas responsabilidades comienzan a difuminarse?

Tengo lógica que podría vivir en el back o en el front

Tomemos como ejemplo una aplicación web que muestra información de suscripciones y utiliza una propiedad llamadasoft-lock la cual determina que features podrían estar bloquedas en el frontend. La aplicación tiene ciertas reglas y cálculos basados en estos valores. La pregunta es: ¿Dónde debería realizarse este cálculo, en el servidor o en el cliente?

Si la lógica viviera en el backend:

Ventajas:

1. Consistencia de datos: Asegura que todos los usuarios vean el estado correcto de sus suscripciones independientemente del dispositivo o navegador que utilicen.
2. Seguridad: Las reglas y lógicas permanecen ocultas, evitando potenciales manipulaciones malintencionadas.
3. Desempeño del frontend: El cliente no necesita procesar lógica adicional, lo cual es óptimo para dispositivos con limitaciones.

Desventajas:

1. Menor flexibilidad en el frontend: Las adaptaciones en la presentación pueden requerir cambios en el backend.
2. Tiempos de respuesta potencialmente más lentos: Si hay muchos usuarios consultando simultáneamente, podría haber demoras.

Si la lógica viviera en el frontend:

Ventajas:

1. Flexibilidad: Permite adaptaciones rápidas y específicas para diferentes usuarios o situaciones.
2. Interactividad: Los cálculos y decisiones se toman al instante, mejorando la experiencia del usuario.
3. Reducción de la carga en el servidor: El servidor se dedica principalmente a servir datos, liberándolo de cálculos adicionales y se utilizarían los recursos del frontend para realizar éstos cálculos.

Desventajas:

1. Exposición de la lógica: Los usuarios técnicos podrían inspeccionar y entender cómo funciona la lógica, aunque no podrían alterarla para otros usuarios.
2. Inconsistencia potencial: Si hay múltiples versiones del cliente o si el código no está bien mantenido, podrían surgir discrepancias en la lógica.

Consideraciones adicionales:

• Seguridad: Aunque en este caso no se manejan datos financieros, aún es crucial garantizar que la lógica no exponga información sensible.
• Protección de datos sensibles: Asegurarse de que ningún dato crítico se exponga en el frontend.
• Alteración de datos: Si los cálculos realizados conducen a una posible alteración de datos que pueda ser enviada al backend para procesar información, es determinante que la lógica exista en el back, por ejemplo, el cálculo de descuentos sería algo que aunque el frontend podría manejar, es algo que es suceptible a cambios, resultado en un comportamiento no deseado.

Ejemplo de código:

Supongamos que queremos determinar si mostrar una notificación de "Acceso Bloqueado" a un usuario:

En backend ser vería así

const db = require('./database'); // Suponiendo que hay un módulo de base de datos

app.get('/estadoUsuario/:idUsuario', async (req, res) => {
    const idUsuario = req.params.idUsuario;

    // Suponiendo que fetchUser retorna un objeto con { suscripcion, softlock } de la BD
    const userData = await db.fetchUser(idUsuario);

    if ((userData.suscripcion === "inactivo" && userData.softlock === true) || 
        (userData.suscripcion === "en espera" && userData.softlock === false)) {
        res.send({ notificacion: "Acceso Bloqueado" });
    } else {
        res.send({ notificacion: "Acceso Permitido" });
    }
});

El frontend ser vería así

// Supongamos que se desea obtener el estado de un usuario con ID 123
const idUsuario = 123;
const apiUrl = `https://tuApi.com/estadoUsuario/${idUsuario}`;

// el api en este caso solamente retornaria un objeto tipo { subscription: string, softlock: boolean }

fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
        const { suscripcion, softlock } = data;

        if ((suscripcion === "inactivo" && softlock === true) || 
            (suscripcion === "en espera" && softlock === false)) {
            mostrarNotificacion("Acceso Bloqueado");
        } else {
            mostrarNotificacion("Acceso Permitido");
        }
    })
    .catch(error => {
        console.error("Hubo un error al obtener los datos:", error);
    });

function mostrarNotificacion(mensaje) {
    alert(mensaje);
}

La ubicación de la lógica de una aplicación puede parecer un detalle menor, pero en realidad es una decisión crítica que puede afectar significativamente la mantenibilidad, eficiencia y seguridad del sistema. Como se puede ver en nuestro ejemplo, la misma lógica puede ser implementada tanto en el backend como en el frontend. Pero, ¿dónde debería residir realmente?

El backend, siendo el cerebro detrás de las operaciones, ofrece una capa centralizada donde la lógica se puede aplicar de manera uniforme para todos los usuarios, independientemente del dispositivo o navegador que utilicen. Esta centralización facilita la actualización y el mantenimiento, y protege la lógica de manipulaciones malintencionadas.

Por otro lado, el frontend, siendo la interfaz con la que interactúan los usuarios, ofrece una inmediatez que es difícil de igualar. Implementar la lógica aquí permite adaptaciones rápidas y específicas, proporcionando una experiencia de usuario fluida y personalizada.

Entonces, ¿dónde debería residir la lógica? No hay una respuesta única. Dependerá del tipo de lógica, de las necesidades del sistema y de las prioridades del proyecto. Pero si tomas en cuenta las ventajas y desventajas, eso podría ayudarte a tomar una mejor decisión.

Happy coding! :D

---

Photo by Ryoji Iwata on Unsplash