Desarrollo web: Frontend vs Backend

Aprende a diferenciar las tecnologías de lado del cliente y de lado del servidor.

Frontend vs Backend

Si inicias en el desarrollo web es altamente probable que te hayas encontrado con estos términos:

• Frontend vs Backend
• Diseñador web vs desarrollador web
• Tecnología de lado del cliente vs tecnología de lado del servidor

En esta artículo aprenderás a diferenciarlos.

¿Debería importarte?

Este artículo te resultará muy útil, especialmente si:

• Estás considerando estudiar programación, o apenas iniciaste.
• Eres desarrollador web, móvil y/o de escritorio.

Objetivo principal

La intención de este artículo es describir de forma resumida las diferencias, y explicar a través de ejemplos.

Y recuerda:

Si algo no te queda claro, puedes escribir un comentario, o contactarme a través de las redes.

Sin más preámbulos, empecemos:

---

Entrando en contexto

En el desarrollo web moderno intervienen muchos roles en el desarrollo de aplicaciones web.

"Desarrollador frontend" y "desarrollador backend" son solo 2 de estos roles.

Ambos en conjunto cubren el desarrollo de lo que se ve y cómo funciona una página web, sin embargo hay más funciones que se deben desempeñar y que no son muy obvias cuando recién inicias en el desarrollo web.

---

¿Qué otros roles existen?

¿Cómo es posible que existan tantos roles si mi amigo hace páginas web él solo y en poco tiempo?

Muchos desarrolladores empiezan de este modo. Es posible, y no hay nada de malo en ello. Pero permíteme que te explique con mayor detenimiento.

Lo primero que debes saber es que, es diferente desarrollar una página informativa, que desarrollar una plataforma web donde es posible la interacción entre usuarios.

Y eso, también es diferente a desarrollar un sistema web que permita gestionar todas las operaciones (internas y externas) de una empresa, e integre varios módulos: compras, ventas, contabilidad, facturación, gestión de talento humano, reclutamiento, entre otras funcionalidades más.

Como ya lo habrás notado, mientras más complejo es un proyecto, más roles se van a necesitar, a fin de entregar un software de calidad, en un tiempo prudente.

A continuación algunos roles más que intervienen en el desarrollo de proyectos de software (no se limita a desarrollo web):

• Gestor del proyecto
• Arquitecto de información
• Diseñador gráfico
• Especialista en usabilidad y experiencia de usuario
• Administrador de bases de datos
• Redactor y editor de contenidos
• Especialista en seguridad de la información

Pero no nos desviemos del tema. Vamos a lo que nos interesa.

---

Lado del cliente: el origen de todo

Cuando un usuario llega a una página web, se realiza una petición al servidor donde está alojada dicha página.

Como respuesta a esta petición, el dispositivo que usa el usuario recibe información (y se le llama cliente porque es quien hace la petición).

Como parte de esta información, encontramos: archivos HTML, CSS y Javascript, además de imágenes, sonidos, videos y otros recursos que podría tener el sitio.

Es el navegador el que se encarga de interpretar toda esta información (sea que estés usando Chrome, Firefox, Safari o el mismo Internet Explorer).

Veamos entonces las tecnologías del lado del cliente:

• HTML: Estos archivos definen la estructura semántica del sitio (le dice a los navegadores qué imágenes, menús de navegación, y secciones contiene cada página).
• CSS: Los archivos CSS u hojas de estilo en cascada definen la apariencia de la página (los colores de fondo, tamaños y colores de fuente, ubicación de los elementos, cambios según el tamaño del dispositivo).
• Javascript: Este es el lenguaje de programación que interpretan los navegadores, y por tanto, es el lenguaje que permite realizar interacciones con la página. JS permite escuchar eventos (clic, doble clic, cursor encima de, arrastrar) y realizar alguna acción como efecto de ello (modificar la estructura HTML, o cambiar las propiedades de los elementos alterando sus estilos asignados inicialmente).

Esto siempre ha funcionado así.

Los que cambian son los estándares, sobre cómo se deben escribir las cosas, y cómo deben interpretar los navegadores.

---

¿Y el lado del servidor?

¿Te parece que con lo anterior ya lo tenemos todo?

No es así. Faltan cubrir muchas cosas, igual de interesantes.

Imagina que ahora quieres que tus usuarios inicien sesión, se registren y guarden su información en tu página.

Quieres guardar sus preferencias, sus imágenes, sus conversaciones.

Para eso necesitas una base de datos. Y necesitas conectar tu página a dicha base de datos de alguna forma.

¿Puede HTML o CSS hacer eso?

No, y no. HTML solo define la estructura de un sitio, y CSS los estilos. No son lenguajes de programación.

Vaya, ¿entonces Javascript sí puede?

Sí, y no.

Javascript sí es un lenguaje de programación, pero ejecutado sobre un navegador no puede ni debe conectarse a la base de datos de tu aplicación.

Ten en cuenta que el código Javascript que se ejecuta en el navegador se puede alterar.

Se puede modificar porque se ejecuta en el navegador (y por tanto en la computadora del usuario visitante).

Entonces si expones el usuario y contraseña de tu base de datos en el código Javascript de tu página, todos lo verían.

¿Eso significa que puedo modificar cualquier página que visito? :o

Sí, y no.

Puedes modificar las páginas que visitas, ejecutando código Javascript que tú mismo escribes. También puedes modificar la estructura HTML del sitio que estás viendo y alterar las propiedades CSS.

Pero, sólo tú verás los cambios.

Recuerda que estas tecnologías se están ejecutando en tu ordenador (o smartphone, o tablet, o smart TV), pero el servidor ya te respondió.

Por más cambios que hagas, esos cambios no persisten en el servidor. Son cambios que haces para ti, y que los demás no podrán ver.

A menos que compartas con alguien el código Javascript que usaste. Pero eso generalmente no tiene mucho sentido, porque lo verían solo ustedes 2.

Cada vez que alguien haga una petición a la página, el servidor responderá con la información correcta, que de eso se encarga el desarrollador backend.

---

El camino completo

Cuando un usuario visita una página, está haciendo una petición GET (existen distintas formas de realizar peticiones, distintos verbos HTTP) al servidor.

La tecnología usada como backend se encargará de elaborar una respuesta, y entonces devolverá al cliente archivos HTML, CSS, Javascript y demás recursos.

Elaborar una respuesta puede implicar varias cosas. Algunas de ellas podrían ser:

• Verificar si el usuario tiene permisos para ver dicha página.
• Consultar la base de datos y mostrar los resultados en la página.
• Mostrar aleatoriamente una imagen.
• Realizar un cálculo importante y mostrar el resultado.

Así, el cliente recibirá la respuesta ya procesada.

Podrá alterar estos archivos como ya te comenté antes, pero los datos verdaderos (leídos de una o varias bases de datos) se verán reflejados en la respuesta que realiza el servidor.

Y eso es lo que ven también todos los clientes conectados, como la verdad absoluta.

---

La verdad absoluta

Para que se comprenda mejor te pongo un ejemplo.

Hace poco encontré un juego online bastante entretenido, al estilo del entrañable Bomberman.

Era un juego de "todos contra todos" donde cada uno controlaba un personaje y trataba de conseguir la mayor cantidad de víctimas posible.

El punto es que, algunos personajes tenían apareciencias más destacables.

Algunos jugadores tenían como personaje a Naruto, Batman, Spiderman, un zombie, un dragón, un gato, etcétera.

Genial, ¿y cuál escogiste?

Lamentablemente no podía cambiar el skin de mi personaje porque para ello había que recargar puntos, y por tanto pagar. Y yo solo estaba de pasada.

El servidor es el que se encarga de ver qué jugadores están conectados, qué skin tiene escogido cada jugador, y de comunicar esta información a cada cliente conectado.

Yo analicé un poco el código Javascript y pude cambiar la apariencia de mi personaje, alterando el código Javascript que se ejecutaba en mi ordenador.

Fue bueno, porque pude jugar con una apariencia más llamativa.

Pero lo triste detrás de esta historia (como ya habrás notado) es que sólo yo me veía de esa forma. Todos los demás jugadores me veían con la apariencia por defecto.

¿Y te quedaste tranquilo?

Si tu pregunta está orientada a si pagué, pues creo que la cosa no va por allí :P

Pero si me estás preguntando si detecté alguna vulnerabilidad en el sitio, es una buena pregunta.

Accedí a la tienda. Vi el botón para comprar el skin que quería. Le di clic.

Apareció una ventana flotante solicitando que realice un pago.

Revise los eventos del botón, a fin de predecir qué pasaría luego de hacer la compra.

Y curiosamente encontré una función que le decía al servidor que me asigne el skin que había escogido, y que a su vez me lo asigne por un tiempo limitado (¿gran negocio verdad?).

Entonces hice la petición al servidor por mi cuenta. Creí que había conseguido lo que quería.

Pero no. El servidor verificó si había un pago registrado en la base de datos.

Como ese pago no existía, la orden que se le daba perdía peso, y por tanto no se ejecutaba.

Esa es la verdad absoluta que el servidor debe imponer.

---

La verdad acerca de las verdades absolutas

Es lógico que un juego con una cantidad considerable de usuarios activos, tenga muy bien desarrollado tanto su lado frontend (las animaciones que realiza el juego, los colores, los estilos de fuente, las imágenes, las ventanas flotantes) como su lado backend (las validaciones, la correcta ejecución de las operaciones de compra).

Pero lo cierto es que muchos sitios no están creados correctamente.

Algunos sitios realizan validaciones en el lado del cliente (usando Javascript), pero no validan adecuadamente en el lado del servidor.

---

Tecnologías backend

A continuación, un listado de las tecnologías más representativas del desarrollo backend:

• PHP (Laravel, Symfony)
• Java (Spring)
• Python (Django)
• Ruby (Ruby on Rails)
• Javascript (Node.JS)
• C# (ASP.NET Core)

Lo que se menciona primero es el lenguaje y lo que está entre paréntesis son unos ejemplos de frameworks para cada uno de ellos.

Si aprendes bien los fundamentos de un lenguaje de programación, es cuestión de días para que puedas crear tus primeros proyectos con un framework distinto, correspondiente a dicho lenguaje de programación.

Ok. Pero, espera, ¿acabas de mencionar Javascript como una tecnología backend?

Así es. Javascript es un lenguaje de programación que se puede ejecutar como tecnología de lado del cliente (sobre el navegador), pero también puede funcionar como una tecnología de lado del servidor.

Ya veo. De todas formas, me parece que el backend es mucho más complejo que el frontend.

Cuando uno recién empieza, puede tener esa impresión. Pero déjame decirte 3 cosas:

• Mira en qué año estamos (y lo rápido que avanza la tecnología, así como el tiempo)
• Reflexiona sobre lo inmenso que es este mundo, pero no dejes que eso te detenga
• JAMÁS abandones tu aprendizaje, ya que todo es posible, si realmente lo deseas

Tecnologías frontend

Lo diré de forma breve para que no resulte confuso, pero te dejaré un enlace por si quieres profundizar un poco más acerca de la situación actual del desarrollo frontend y lo que comprende.

Así como existen tecnologías backend y frameworks para estos lenguajes, existe también toda una variedad de frameworks para Javascript:

• Vue
• React
• Angular
• Svelte
• Y muchos más

Espera, ¿y jQuery?

JQuery es una biblioteca de funciones de Javascript.

Es ideal para cuando inicias en el desarrollo web y estás aprendiendo lo básico sobre HTML, CSS y Javascript.

Pero las aplicaciones web modernas son un tanto más complejas, y jQuery se queda bastante corto, comparado a lo que ofrecen los frameworks antes citados.

---

Conclusión

Hay mucho por aprender.

Cuanto más aprendas, notarás que hay mucho más por aprender.

Y eso no es una desventaja. Es una ventaja que el mundo se "actualice" tan rápidamente.

Sería aburrido hacer todo siempre de la misma forma, ¿verdad?

Comparte

Siempre que aprendas algo nuevo, compártelo. Es la mejor forma de aprender.

Si este artículo te ha parecido interesante, por favor compártelo con tus amigos, compañeros, familiares y/o en redes sociales.

Gracias por leer hasta el final!