Desarrollo web: Frontend vs Backend

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

Frontend vs Backend

Siinicias 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 esdescribir 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 delo que se ve ycómo funciona una página web, sin embargohay 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 unapágina informativa, que desarrollar unaplataforma 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 integrevarios 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 unapetició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 uhojas 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).
• #"https://youtu.be/Qk2cqRtWkDo">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ñableBomberman.

  

  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é algunavulnerabilidad 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 laverdad 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 quetodo es posible, si realmente lo deseas

  Tecnologías frontend

  Lo diré de forma breve para que no resulte confuso, perote 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 #"/series/aprende-vue-3-vite-vuerouter-vuetify-pinia-y-typescript">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, yjQuery 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!