Al comenzar en el Desarrollo web (o incluso más adelante), mucha gente tiene dudas y no entiende exactamente que diferencias hay entre los términos front-end y back-end. Para simplificar, muchas veces se suele decir que la parte visual se realiza en el frontend, y la parte de funcionalidad en el backend. Sin embargo, aunque puede ser una buena primera aproximación, no es técnicamente correcto.
¿Qué es front-end y back-end?
La palabra front-end hace referencia a la parte frontal, mientras que la palabra back-end hace referencia a la parte de atrás. En ambos casos, esto se refiere a como se ve una página web desde el punto de vista del visitante de la misma. La parte frontal es la parte visible, con la que interactúa el usuario, y la parte trasera es la que no se ve, donde el sistema realiza tareas que no son visibles al usuario, como gestiones con la base de datos, cacheo de información, etc.
Lo habitual suele ser optar por asociar tecnologías a cada una de estas especialidades:
En el front-end se utilizan tecnologías como:
- 🌐 HTML: La estructura y contenido de la página
- 🎨 CSS: El diseño y aspecto visual de la página
- ⚡ JavaScript: La interactividad y control de la página
En el back-end lo habitual es que se elija una sola tecnología como alguna de las siguientes:
- ☕ Java: Lenguaje tradicional para back-end
- 📗 NodeJS: Lenguaje Javascript para back-end
- ⚙️ Rust: Lenguaje enfocado en alta eficiencia
- 🐘 PHP: Lenguaje enfocado en facilidad y flexibilidad
- 🚀 Go: Lenguaje enfocado en alta concurrencia
- 🐍 Python: Lenguaje enfocado en ciencia de datos
Sin embargo, lo más importante aquí, es entender que las tecnologías de front-end funcionan en el navegador del usuario (después de enviarlas por Internet), mientras que las tecnologías de back-end funcionan en la máquina o servidor donde está alojada la web (antes de enviarlas por Internet).
¿Qué son los frameworks?
Como trabajar con estos lenguajes directamente puede resultar complejo, sobre todo para usuarios nóveles, lo habitual es utilizar frameworks que son más fáciles de aprender. Un framework es una capa de un cierto lenguaje que nos hace escribir menos código para hacer tareas comunes y habituales. Además, suelen venir junto a consejos y recomendaciones a la hora de trabajar, de modo que sea más intuitivo escribir código.
Existen frameworks tanto para la parte de front-end como para la parte de back-end:
- 🎨 CSS: TailwindCSS, Bootstrap...
- ⚡ Javascript: React, Vue, Angular...
- ☕ Java: Springboot, Micronaut...
- 📗 NodeJS: ExpressJS, NestJS...
- 🐍 Python: Django, Flask...
- ⚙️ Rust: Rocket, Actix...
- 🐘 PHP: Laravel, Symfony...
- 🚀 Go: Gin, Echo...
Sólo he colocado dos o tres de los más populares de cada lenguaje, pero existen muchísimos más. Ten en cuenta que cada uno de estos frameworks tiene su forma de escribir código, su forma diferente de trabajar, etc. Por lo que es imposible conocerlos todos.
Lo habitual suele ser buscar el que más se adapta a tu proyecto, o el que más encaja con la empresa en la que estás, o el que más se demanda en empresas para tener más oportunidad de contratación.
Muchas veces se suele llamar stack a la lista de tecnologías con la que trabajas, y se suelen utilizar las iniciales para identificarlas. Por ejemplo, MERN (MongoDB + Express + React + NodeJS), TALL (Tailwind + AlpineJS + Laravel + Livewire), LAMP (Linux + Apache + MariaDB + PHP), etc.
Modalidades
Otro detalle que merece la pena mencionar es que un sitio web no se construye siempre de la misma forma. Dependiendo de las necesidades del sitio web, puede carecer de ciertas partes o utilizar un esquema completo con todas las partes. Observa el siguiente esquema general:
Front-end + Back-end: Esta modalidad es la que se ve en el gráfico anterior y es una unión de las dos siguientes. En estos esquemas, normalmente se utiliza un framework de frontend para gestionar la parte visual e interacción con el usuario, y un framework en el back-end para realizar ciertas tareas y enviar/recibir datos al frontend a través de una API.
Front-end: Las tecnologías de frontend se ejecutan en el navegador, después de haber sido descargadas. Por esa razón, las tecnologías de front-end tienen como ventaja ser más rápidas y no tener mucha latencia. Si tenemos frameworks de Javascript (React, Vue, Angular...), éstos trabajan en este extremo. A través de Javascript, se puede recibir/enviar información al back-end a través de una API. Si tenemos un esquema de sólo frontend, se suele prescindir del backend/base de datos y se utilizan servicios de terceros en su lugar.
Back-end: Las tecnologías de backend se ejecutan en la máquina de alojamiento, el servidor. La ventaja de estos esquemas es que tienes capacidad de almacenamiento en disco o en bases de datos, es decir, puedes guardar y/o centralizar información. Si tenemos un esquema de sólo-backend, siguen existiendo tecnologías de front-end, pero suelen ser muy simples o reducirse a plantillas visuales para controlar temas estéticos.
¿Qué es una API?
El término API se refiere a tecnologías que nos permiten conectar dos sistemas. Por ejemplo, el frontend necesita una tarea que hace el backend (por ejemplo, buscar un usuario en la base de datos), entonces a través de una API le envía lo que quiere hacer y que quiere buscar. El backend recibe esa información, realiza la búsqueda y se la envía a través de esa misma API, mediante otra comunicación diferente en sentido backend-frontend.
¿Qué es FullStack?
Anteriormente hemos mencionado los términos front-end y back-end, pero no hemos mencionado el término Full-Stack. Cuando se habla de que una persona es Full Stack nos referimos a que puede realizar tareas tanto de frontend como de backend, con cierta destreza y habilidad en ambas.
Normalmente, una persona considerada FullStack requiere tener varios años de experiencia, ya que necesita tener conocimientos de múltiples tecnologías y lenguajes, haberse encontrado con problemas de muchos tipos, saber resolverlos y tener buenos soft skills.
Mitos típicos y estereotipos
También es muy común en el sector escuchar ciertos mitos o leyendas sobre perfiles de programadores o ciertas tecnologías. Frases como las siguientes:
- "El frontend solo es hacer botones bonitos"
- "El backend es más difícil que el frontend"
- "HTML/CSS no es programación"
- "El backend sólo son APIs"
- "Ese lenguaje/framework no lo pienso tocar ni con un palo"
- "Los programadores de verdad sólo hacen backend"
- "Javascript es un lenguaje de juguete"
Un buen programador se reconoce por su calidad como programador y como persona. Aunque todo el mundo puede tener preferencias a la hora de trabajar o resultarle más cómoda cierta tecnología, tener opiniones fuertes sobre sectores, tecnologías o lenguajes no te hace mejor programador. De hecho, es muy probable que a una persona experimentada le parezcas más inexperto o que tienes poca experiencia si demuestras opiniones fuertes sobre ciertas tecnologías o lenguajes.
