Frontend y backend:¿por qué es importante conocer sus diferencias?


Si asistimos a una reunión de programadores, seguramente escucharemos en repetidas ocasiones los términos frontend y backend, relevantes en ese mundillo, esenciales para la existencia y funcionamiento de aplicaciones y sitios web. Aunque no seas un profesional en desarrollo, estar al tanto las características de esos elementos es de veras importante para conocer más sobre las herramientas que usamos a diario.


Un anticipo de lo que veremos: el frontend atañe directamente a los usuarios y a lo más visible de un aplicativo, mientras que el backend es el “detrás de escena” o, mejor aún, los pilares que dan sustento a persas herramientas digitales, especialmente websites. Para echar luz en este terreno usualmente se emplea como alegoría a un restaurante, donde el front sería el salón (donde priman los sentidos), mientras que el back sería la cocina (allí donde los conocimientos técnicos y la organización son imperiosos).


¿Qué es frontend?


El frontend refiere al conjunto de prácticas enfocadas en el desarrollo de los elementos que los usuarios finales encuentran en un sitio web o aplicación.


Es por eso que a ese concepto también se lo conoce como “desarrollo del lado del cliente”.


En ese terreno se trabaja con lenguajes como HTML, CSS y Java, entre otros, que se encargan de conformar la parte frontal y visible en el desarrollo de sitios web y apps.


¿Qué es el frontend, en términos prácticos?


Entre los ejemplos de aquello que se encuentra en ese “frente de la escena” podemos mencionar los textos, los colores, las animaciones, los menús, los fondos, las secciones, los botones, etcétera.


Es decir, ese conjunto de elementos que habitualmente agrupamos en el concepto “interfaz”.


La tarea primordial en el frontend es, precisamente, el desarrollo de la interfaz y el diseño de la experiencia de uso. 


Esa “parte visible” de las herramientas también persigue los siguientes propósitos:


Ofrecer entornos dinámicos, intuitivos y accesibles.


Optimizar las herramientas para el posicionamiento en buscadores (posicionamiento SEO).


Brindar interoperabilidad: idealmente, deben funcionar sin “romperse” en persos entornos, navegadores, dispositivos, sistemas operativos, etcétera.


Apuntar a la velocidad y al adecuado rendimiento de las herramientas.


Los elementos fundamentales en el desarrollo frontend son los siguientes:


Layout: Fundamental en el diseño de las herramientas, refiere a elementos como los botones, el menú, el footer, etcétera.


Estructuras de navegación: Determina la organización de las páginas en un sitio web; esto también influye en el vínculo entre las persas funciones.


Contenido: Prima el aspecto visual. En este caso, se trata de textos, imágenes, audios y otros elementos, en sus persos formatos.


Diseño gráfico: La tarea consiste en escoger y dar forma al aspecto de las herramientas. 


En resumen, cuando hablamos de frontend emergen dos aspectos clave: la usabilidad y la estética.





¿Qué es el backend?


El backend es el conjunto de mecanismos encargados de procesar la información del frontend. Es la capa de entrada, donde encontramos código y no interfaces para el usuario final.


Es usualmente descrito como el “detrás de escena” y por eso también se conoce a esta especialidad como “desarrollo del lado del servidor”.


En este terreno nos encontramos con programadores que trabajan con bases de datos, macros y códigos, en lugar de con los elementos que los usuarios finales encuentran en los sitios web y aplicaciones.


Del backend depende el frontend: en el primero hay códigos que propician el funcionamiento del segundo. De acuerdo a la organización y estructuras dependerá el correcto funcionamiento de los recursos en una herramienta digital.


La siguiente alegoría puede servir para comprender más cabalmente qué es el backend.


El backend es comparable a una sala de máquinas, mucho menos bonita que el dispositivo al que motoriza, aunque fundamental para su uso y operación. Allí hay engranajes, pequeñas piezas y elementos desconocidos por los que no son expertos en la materia.


En otras palabras, se trata de una sección en el trasfondo (oculta a primera vista) de un sistema informático. Repetimos: el usuario final no tiene acceso a ese espacio; no es necesario y tampoco le es permitido. 


Además de la experiencia de uso más elemental (por ejemplo, tocar un botón y que éste nos lleve a una página del sitio), el backend también se encarga de aspectos esenciales como la privacidad y la seguridad.  


En backend se usan lenguajes de programación como Javascript (que es el más popular en este terreno), Python, C++, Ruby y PHP, entre otras alternativas.


Los elementos fundamentales en el backend son los siguientes:


La programación determina la experiencia de uso general y cómo los usuarios acceden a los elementos del sistema.


La información se estructura y organiza en bases de datos, almacenada en servidores.


En programación backend, los developers se abocan también a la seguridad de la herramienta, fundamental para eludir posibles ataques.


Al backend le conciernen aspectos y tareas como el inicio de sesión en una plataforma; la inclusión de herramientas como un carrito de compras en un sitio de comercio electrónico; la gestión de contenidos que actualizan la información sin alterar el código HTML (se logra con el sistema CMS); el uso de cookies; la disponibilidad de formularios; plantillas de contacto; el acceso a informes; etcétera.  





Frontend vs. backend: diferencias y similitudes


En función de lo repasado, podemos establecer las diferencias entre backend y frontend.


El frontend es la parte en la que ocurre la interacción con el usuario; el backend es la que conecta con la base de datos y el servidor.


Al frontend se vinculan tareas como el diseño y desarrollo, siempre encargados de la experiencia de uso final. Aquí entran en juego aspectos visuales y de experiencia.


En cambio, al backend se vinculan las tareas de programación, la gestión de código.


Además, a diferencia del backend, el frontend es accesible para los usuarios.


¿Qué tienen en común el backend y el frontend? La respuesta es relativamente simple. Veamos. 


Ambos ámbitos operan en conjunto, en pos de un mismo propósito, aunque con procesos y en ámbitos persos. 


Para seguir jugando con analogías, podemos pensar en estos procesos como dos engranajes en un mismo motor: uno visible para los usuarios y otro al que solamente echan mano los mecánicos.


Backend y frontend: el ejemplo del botón


Ya sabes que nos gustan las alegorías como un modo de graficar de qué estamos hablando. 


Usar un botón de un sitio web como ejemplo es útil para entender la diferencia entre los conceptos que nos convocan en este repaso.


Sí. Un simple botón nos permite comprender a qué se dedica un desarrollador “del lado del servidor” en la práctica y cuál es la tarea de un desarrollador “del lado del cliente”. 


Ya lo sabes: un botón está allí para ejecutar una acción cuando el usuario toca sobre él.


¿Qué le toca hacer a un desarrollador frontend? Pues usará sus habilidades para que el botón tenga una determinada forma, un color específico, en qué posición se ubicará, qué tipografía se usará, etcétera.


Por su parte, un desarrollador backend se abocará a la programación del vínculo entre el botón con una base de datos o con líneas de código que sirvan para ejecutar la acción planificada.


A modo de nota al pie, es importante tener en cuenta que tanto los desarrolladores backend como los dedicados a frontend cooperan con otras áreas y profesionales, como especialistas en ventas, marketing, expertos en posicionamiento, etcétera; además de con clientes. 


¿Qué es full stack?


Full stack es un concepto que en programación hace referencia a los desarrolladores con conocimientos tanto en backend como en frontend.


Si te gusta el deporte comprenderás la siguiente analogía.


El desarrollador full stack es un jugador de todo el campo, capaz de realizar diferentes tareas.


En otras palabras, los desarrolladores full stack son expertos que se mueven en los dos escenarios. Cuentan con los conocimientos necesarios para gestionar tanto la parte visual y creativa, como la de carácter más técnico.


¿De dónde proviene el término “full stack”? En inglés, hace referencia a la palabra “montón”, dando cuenta del conjunto de tecnologías necesarias para el desarrollo integral de un sitio web o aplicación.


Aquellos que cumplen con las características del perfil full stack poseen habilidades y experiencia para administrar el proyecto completo. Desarrollan el código que integra el back y el front, y también se encargan de las partes visibles de las herramientas que llegan a manos de los usuarios.


En resumen, un desarrollador full stack comprende los pormenores tanto del backend como del frontend.  


/online/programacion-backend


Frontend y backend: conclusiones


Las letras que ves en esta pantalla, las imágenes y las funciones que permiten navegar este sitio son el resultado del trabajo tanto en el backend como en el frontend. 


Es, a fin de cuentas, la buena comunicación entre el servidor y el trabajo de los developers que dieron forma a este site.


Conocer el ABC de las funciones, características y diferencias entre los conceptos es también importante para participar en cualquier proyecto que involucre la creación de un sitio web y/o aplicación.


Resumiendo. 


El frontend atañe directamente a los usuarios y a lo más visible de un aplicativo, mientras que el backend es el “detrás de escena” o, mejor aún, los pilares que dan sustento a persas herramientas digitales.


Para echar luz en este terreno usualmente se emplea como alegoría a un restaurante, donde el front sería el salón (donde priman los sentidos), mientras que el back sería la cocina (allí donde los conocimientos técnicos y la organización son imperiosos).


Son diferentes, pero interactúan entre sí. En tanto, es válido concluir que el frontend es una capa que se encuentra por encima del backend, no en términos de relevancia sino de cara al usuario final.