Todos los días millones de personas visitan sitios web desde sus computadoras o utilizan aplicaciones en sus celulares y solo algunos tienen el atrevimiento de estudiar cómo funciona, entenderlo y empezar a crear.

Si estás leyendo esta publicación es porque eres una de esas personas que tiene la espinita de ¿cómo funciona esta aplicación que tengo instalada en mi celular que me permite ver contenido, hacer la reserva de un vuelo, comprar ropa sin salir de mi casa, o comunicarme con personas que están completamente al otro lado del mundo de forma instantánea?

Pues te tengo dos noticias. Una buena y una mala. La mala, es que no hay una manera sencilla de explicar detalladamente cómo funciona cada una de estas soluciones sin entrar en muchísimos tecnicismos. La buena, es que si tienes suficientes ganas de aprender y paciencia, esta serie de publicaciones que apenas comienza te enseñará todo lo que debes saber acerca del desarrollo web.

Relación Cliente - Servidor

Lo primero que me gustaría dejar claro es la diferencia entre una aplicación que se ejecuta completamente en el dispositivo en el cual se encuentra instalada, contra una aplicación que requiere de acceso a internet para funcionar (existen aplicaciones híbridas a las que se les conoce como aplicaciones web progresivas, PWA del inglés progressive web application, pero por ahora no nos vamos a concentrar en ellas hasta mucho más adelante).

Para la aplicación que corre 100% en el dispositivo, me gustaría que pienses en, por ejemplo, Microsoft Word o Power Point que son aplicaciones que muchas veces utilizamos desde muy jóvenes para preparar una tarea para la escuela o el colegio. O quizás si eres fan de los videojuegos, piensa en los juegos clásicos de Super Mario. En estas piezas de software no necesitamos interactuar con otro dispositivo para que funcione.

Del otro lado tenemos las aplicaciones que requieren de internet para funcionar. El ejemplo más claro que se me ocurre es el buscador de Google, comúnmente accedido a través del dominio google.com. Con solo esto creo que ya la diferencia te quedó clara. En el caso de Google, abres tu navegador web (Chrome, Firefox, Safari, Edge, etc), escribes la dirección https://www.google.com le das enter, y ahora lo que se despliega en tu pantalla es el sitio web de Google. Pero, ¿y si no tengo internet? ¿Por qué no funciona?

Es simple, tu navegador está realizando una solicitud a un computador que se encuentra en otro lugar, a través de internet porque "Google" no está instalado en tu computadora o celular. El navegador está intentando comunicarse con otro dispositivo y conseguir los datos necesarios para poder mostrarte la información que tú le estás solicitando. Sin internet, no logra establecer comunicación con el servidor (se le llama servidor porque te sirve datos) y entonces el cliente (el que está solicitando los datos), en este caso el navegador web que utilizas para acceder a las páginas, te muestra el error de "No hay internet".

Imagen de error en el navegador Google Chrome cuando no tenemos internet

Con este sencillo ejemplo podemos observar que existe un principio básico que se repite en todas las aplicaciones web: hay un cliente y un servidor. El cliente puede venir en forma del navegador web o una aplicación específica que utilice algún protocolo de comunicación para solicitar o enviar datos al servidor, el cual tomará una acción y posteriormente enviará datos de regreso.

Esta diferencia no es solo importante conocerla para entender el funcionamiento de las aplicaciones web, sino también para lograr comprender las dos más grandes áreas del desarrollo web, comúnmente llamadas frontend y backend.

Frontend

El frontend es la parte de la aplicación que corre del lado del cliente, es decir, es lo que ves en tu navegador cuando accedes aplicaciones como Google, Facebook, Twitter, Netflix, entre otras. En el frontend normalmente se deben tener consideraciones de diseño, usabilidad, utilidad, que el sitio sea responsive (adaptativo) y que se vea bien tanto en computadoras, tabletas o celulares.

Para programar frontend se requiere conocer al menos 3 lenguajes. Se tienen que conocer los tres porque no son excluyentes, más bien trabajan en conjunto para dar vida a las aplicaciones web que conocemos hoy en día. Los lenguajes son:

  1. HTML: lenguaje de marcado que le da estructura y componentes básicos a las aplicaciones web.

  2. CSS: del inglés Cascading Style Sheets (hojas de estilos en cascada) es un lenguaje de diseño gráfico que proporciona estilo a los componentes de un lenguaje de marcado.

  3. Javascript: lenguaje de programación interpretado, imperativo. Principalmente se utiliza del lado del cliente, es decir, se ejecuta en los navegadores web, permitiendo realizar mejoras a nivel de interfaz de usuario y la creación de páginas web dinámicas. Además de Javascript como lenguaje de programación, existen otras tecnologías como frameworks, libraries y preprocessors que facilitan la creación de interfaces de usuario modernas. Algunas de ellas las vamos a estudiar más adelante, por ahora podemos solo mencionarlas por si quieren ir adelantando y buscando por su propia cuenta:

    • Vue, Angular, React
    • Sass, Less
    • Stencil, Tailwind, Bootstrap

Backend

El backend, como contraparte, es lo que ocurre del lado del servidor y que no es evidente para la mayoría de usuarios. Normalmente se utiliza como capa de acceso a datos con diferentes niveles de seguridad y/o alguna lógica de aplicación propietaria que corre del lado del servidor, porque no se quiere que el código llegue al lado del cliente. En lo personal me gusta dividir el backend en otras 3 áreas que estudiaremos en detalle más adelante, pero que por ahora solamente las mencionaremos:

  1. Infraestructura: creación, mantenimiento, monitoreo y soporte de redes públicas y privadas, servidores de hosting, servidores de bases de datos, contenedores, infraestructura en forma de código, entre otros. Aquí podemos mencionar herramientas como: Docker, Kubernetes, Jenkins, Terraform, Serverless y los principales proveedores de servicios cloud: Amazon Web Services, Google Cloud Platform, y Microsoft Azure.

  2. Bases de datos: lugar donde se almacenan los datos de las aplicaciones. Comúnmente bases de datos relaciones o no relacionales y todo lo relacionado a su administración y seguridad. Por ejemplo: MySQL, PostgreSQL, MongoDB, Firebase Firestore, AWS DynamoDB, entre otros.

  3. Aplicaciones y APIs: parte donde ya se encuentra el código que da "vida" a la lógica de las aplicaciones como tal. Para escribir las aplicaciones que se ejecutan del lado del servidor hay muchísimos lenguajes de programación y herramientas, por ejemplo: Javascript (NodeJS), Python (Flask, Django), C# (.Net), Go, Ruby, PHP, Java, y la lista continúa. Llegado el momento estudiaremos algunas de estas opciones, según lo que he observado que es más útil y común en el mercado laboral.

Conclusión

Como se pudieron dar cuenta ya con la cantidad de términos, lenguajes y herramientas que mencionan en la publicación, la programación web es amplia y compleja. Se requiere de múltiples habilidades y conocimientos para hacer el desarrollo web de principio a fin. Por ello es muy común ver que existen posiciones de trabajo como Frontend Engineer, Backend Engineer, Full Stack Engineer (Frontend + Backend), DevOps Engineer (infraestructura, automatización, monitoreo, entre otros) y que en una empresa sean diferentes personas las que desempeñan estos roles.

Ahora que ya conoces un poco de esto:

  1. Si eres emprendedor y quieres comenzar un negocio tecnológico, ya tienes una base para saber qué buscar en los desarrolladores que contrates o qué nuevas habilidades debes adquirir para empezar tu mismo.

  2. Si eres de diseño o marketing sabrás con cuál ingeniero de tu equipo necesitas conversar para hacer una solicitud, consulta o trabajar en alguna parte del proyecto.

  3. Y si eres una persona que está interesada en programación como su carrera profesional, esta y las demás publicaciones que vienen en esta serie de Desarrollo Web desde Cero son un buen punto de partida para introducirse en este mundo.

Si te gustó el artículo y quieres mantenerte al tanto de esta serie, no olvides suscribirte a la lista de difusión de correos de Dev Senpai. No compartiremos tu correo con nadie y sólamente te enviaremos artículos de calidad relacionados con desarrollo web y móvil, desarrollo de juegos, ciencias de datos y consejos para mejorar tu productividad y balance vida/trabajo.

Nos vemos en la próxima.

Próximamente

La próxima lección seguirá siendo introductoria y cubrirá funcionamientos básicos del Internet que son determinantes para comprender cómo funcionan las aplicaciones. Veremos los conceptos de hosting, dominios, DNS y el protocolo HTTP y HTTPS.

Extras

Les quiero dejar este sitio web: https://roadmap.sh/. Para los que saben inglés, se pueden dar una idea a muy alto nivel del camino que deben de recorrer para comenzar con el desarrollo web ya sea en frontend o en backend. Está actualizado a las tecnologías más conocidas en el 2021 y además contiene una lista de enlaces que pueden visitar para aprender más de cada uno de los temas. Y para los que aún no dominan dicho idioma, no hay problema, daré lo mejor de mi para que mis publicaciones y videos les ayuden a comprender como funciona todo esto y convertirse en excelentes desarrolladores web. (PD: Aunque sí les recomiendo que en su tiempo libre se descarguen algo como Duolingo y empiecen a aprender o reforzar su inglés, es una habilidad muy importante que les permitirá ampliar muchísimo su mundo).

El crédito por la foto al inicio del blog post es para Franck en Unsplash