Cosas que hubiera querido saber de cómo funciona el desarrollo web cuando comencé

Hola estimado alumno o alumna de Hola Mundo, en este artículo quisiera dejarte algunos conceptos clave, que, aunque los hemos descrito en otros artículos por separado, vamos a hablar de todo el conjunto y cómo este funciona, así como algunos conceptos que te espero que te sirva tenerlos claros para comenzar en tu camino a aprender a programar en el mundo del desarrollo web.

¿Qué es el desarrollo Frontend?

Comenzaremos por tal vez uno de los más populares en el sector que es el lado del frontend, si has escuchado sobre HTML, CSS, JavaScript o de librerías/frameworks como React, Angular, Vue, Svelte, Next JS o Astro, estamos hablando del lado del frontend.

Logo de CSS
Logo de JavaScript

Esta parte es la cual todos nosotros usamos cuando visitamos un sitio web, ya sea uno como el blog de Hola Mundo, la página de Youtube o Udemy por decirte algunos, es decir todo aquello con lo que el usuario puede interactuar, botones, links, animaciones, texto, formularios, imágenes, etc. Toda esta parte la hacemos en el frontend y nos hacemos valer de HTML para la estructura, CSS para los estilos y JavaScript para la interactividad, y ¿qué hay de los frameworks y librerías? Pues por detrás todos estos funcionan con estos 3 lenguajes para lograr crear un sitio web, tendrán sus propias formas de trabajo, pero son estas que son basadas en JS que tenemos nuestros sitios web listos para ser usados.

¿Qué es el desarrollo Backend?

El siguiente punto puede ser que te aclare muchas más cosas, ya que con el frontend podemos crear sitios totalmente funcionales, imagino por ejemplo un menú de restaurante, no tenemos problema con poner toda la lista de platillos en el código del frontend, puesto que no se trata de información sensible.

Pero que sucede con datos como usuarios, contraseñas, o imagina que tenemos una plataforma como YouTube, no sería lo más correcto tener toda la información en una misma página, en estos casos, y en muchos más, tenemos que guardar los datos en una base de datos, hacernos cargo de la autentificación y autorización de la información y peticiones o procesamiento de la información. Es aquí donde entra el Backend, en muchas ocasiones, se nos dice que este lado es lo que pasa por detrás en nuestra aplicación, pero cuando lo vemos ya en vivo cuando programamos vemos que si se trata de todo ese procesamiento de información y seguridad para dar la información que corresponde y no dar datos, por ejemplo, de un usuario que debe ver esos datos.

Aquí ya hablamos de páginas un poco más complejas, que requieren de ambos lados para funcionar, que tienen un login o que tienen que traer datos de una base de datos, un Backend es totalmente necesario.

Igualmente, desde esta parte es que podemos enviar el frontend, siendo que enviamos plantillas desde este, puedes hacer esto con los lenguajes de Backend programando todo con un solo lenguaje en el servidor, si te soy honesto, yo soy de la preferencia de tener separado el frontend y el Backend, pero esto es solo mi opinión.

Bases de Datos

Como su nombre lo indica, es aquí donde vamos a guardar los datos, y por supuesto que aquí también hay que mantener permisos sobre quién puede tener acceso.

Esto va muy de la mano del Backend, ya que depende de lo que queramos construir, elegiremos una u otra tecnología, tenemos las bases de datos relacionales, como lo puedes ser MySQL o PostgreSQL y, por el otro lado, las bases de datos no relacionales como Mongo DB o Cassandra.

Logo de MongoDB
Logo de MySQL

Estas son un esencial que debes aprender si vas a tomar el camino del Backend.

¿Qué es una API?

Hemos llegado a un punto que debes entender, las API son el puente de comunicación entre el frontend y el Backend, hemos explicado para qué sirve cada uno por separado, pero la forma de unir a estas dos partes es a través de la API que se programa en el Backend.

Imagina que tenemos una URL: https://holamundo/api, a esta como a cualquier otra pagino web podríamos ingresar desde nuestro navegador, esta posiblemente nos regrese una respuesta, te voy a dar un ejemplo más conciso, si haces clic en la siguiente URL:

https://pokeapi.co/api/v2/pokemon/1/

Veras que te da como respuesta una pagina llena de texto:

Resultados que regresa la Poke API

Esta es la respuesta de la que te estaba hablando, una API, está construida para que mandemos una petición, y nos regrese una respuesta, en este caso la respuesta fue todo ese texto y el formato lo conoceremos como JSON, que, si nos ponemos a leer un poco, verás que se trata de los datos del Pokémon Bulbasaur, lo que lo más seguro es que estos datos provengan de una base de datos.

Entonces, el Backend construye estas rutas a las que se puede acceder, también define quién puede acceder. En este caso de la que te acabo de mostrar es una API pública, pero hay otras que te requerirían tener un API key, que servirá para darte acceso a estos datos, a estas rutas o urls las llamamos endpoints.

Por el otro lado el frontend, se encarga de hacer las peticiones a los endpoints que se necesitan para dar información a nuestros usuarios dependiendo a la página que hayan accedido de nuestra aplicación.

Con esto tenemos el modelo cliente-servidor, donde el cliente es el frontend y el servidor el backend.

Representación Modelo Cliente-Servidor

Móviles y Escritorio

Hablemos un poco del desarrollo móvil, ya que en este caso se desarrollan aplicaciones nativas que pueden ser adquiridas en las tiendas oficiales, que en este caso, estas apps se comportarían como lo que llamamos frontend, por supuesto esto no es lo único pero se conforman de la misma manera, puesto que tenemos que construir las interfaces para que nuestros usuarios puedan usar nuestras aplicaciones y nosotros encargarnos de conectarnos a las API’s correspondientes para darles la información que necesitan, solo que aquí necesitamos.

En el caso del desarrollo de aplicaciones nativas para escritorio estamos hablando prácticamente del mismo caso, ya que aquí construiríamos la interfaz para ser usada por el usuario y con esto poder consumir los servicios necesarios para que la información pueda llegar al usuario.

¿Qué debo aprender?

Espero que esto te aclare el camino y cómo funciona la parte de desarrollo frontend y Backend para la construcción de sitios y aplicaciones, el que tomar va a depender mucho de lo que estés buscando construir, aprender o de que tanto campo laboral exista para dicha tecnología, ya que puede haber tecnologías muy buenas, pero si no hay campo que ofrezca trabajo, va a ser más complicado. Que a la vez puede también tener una cierta ventaja, que al no tener tantos desarrolladores compitiendo por esos puestos te puede ser mucho más fácil entrar a trabajar.

Últimamente, he escuchado que hay muchos más desarrolladores Frontend que Backend y que es por esto por lo que en este momento sería hasta más recomendable estudiar para ser desarrollador Backend, pero de nuevo dependerá de dónde vivas o apliques de las diferentes oportunidades a las que puedas acceder.

Ahora mismo estoy esperando los resultados del State of JS y ver cuál es la tendencia que ha tenido este lenguaje que te sirve prácticamente para estas áreas que hemos mencionado, espera pronto un artículo sobre esto. Ahora para lo que te podemos ayudar es a proporcionarte recursos para que puedas prepararte y aprender sobre esto, te dejaré algunas rutas que puedes seguir, en donde te apoyaremos en el paso a paso para que puedes realizar.

Igualmente, un par de artículos que te pueden ayudar mucho más a conocimientos que debes adquirir para desarrollarte en un área en específico y de los recursos que dispones con Hola Mundo para aprender:


Te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, y además te invitamos al siguiente enlace donde vas a poder obtener un descuento en tu primer año a sólo $49.90 usando el cupón PRIMERA_VEZ al momento de realizar tu pago

acceso a todo primer año

O igualmente puedes optar por cada curso de manera individual en Udemy.

Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.

¡Hasta la próxima!, y chao mundo

Gabriel Hernández

Soy desarrollador fullstack autodidacta y estudié administración en la universidad. Mi stack es principalmente con JavaScript, haciendo frontend con React y Next, y backend con Node y Express. Otras herramientas con las que he trabajado son Python para backend y Solidity para desarrollo de contratos inteligentes.

Comments (3)

  • Python vs. JavaScript, ¿cuál debo aprender? – Hola Mundosays:

    enero 10, 2024 at 11:33 am

    […] Esto del lado del frontend, es decir todo lo que puede ver el usuario, pero también lo que corre del lado del servidor lo podemos programar con JavaScript, esto sería todo lo que no ve el usuario, no me detendré mucho en este tema, pero te dejo por aquí un artículo donde he puesto estos conceptos que te pueden ayudar a comprender cómo funciona el desarrollo web: Cosas que hubiera querido saber de cómo funciona el desarrollo web cuando comencé […]

  • Freddy Tabordasays:

    mayo 22, 2024 at 10:01 am

    En «Esta es la respuesta de la que te estaba hablando, una API, está construida para que mandemos una petición, y nos regrese una respuesta, en este caso la respuesta fue todo ese texto en formato que coneceremos como JSON, que, si nos ponemos a leer un poco, verás que se trata de los datos del Pokémon Bulbasaur, lo que lo más seguro es que estos datos provengan de una base de datos….»

    Hay algo que dice «todo ese texto en formato que coneceremos como JSON…»

    Sera que quiere decir ‘todo ese texto en formato que conoceremos como JSON» ??

    Osea «coneceremos «, o es «conoceremos» ?

    Saludos

Responder a Gabriel HernándezCancelar respuesta

Press ESC to close

Descubre más desde Hola Mundo

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo