Qué es el Modelo Cliente/Servidor

Clase 17 de 32Fundamentos de Ingeniería de Software

Resumen

Comprende el modelo cliente-servidor con claridad: cómo se conecta el navegador con un servidor, qué papel juegan las bases de datos, y por qué tecnologías como PHP, Node.js, NGINX o Apache son clave. Aquí verás cómo se comunican HTML, CSS y JavaScript con el back end mediante GET, POST, AJAX y WebSockets, además de ejemplos de stacks como LAMP y MEAN, y un proyecto local con Arduino.

¿Qué es el modelo cliente servidor y por qué importa?

El cliente es tu navegador: abre un archivo HTML que invoca JavaScript y produce interacción. A esto se le llama front end. El servidor vive en Internet o en la nube, ejecuta el back end y se conecta a las bases de datos para procesar y devolver resultados seguros.

  • El front end corre en el navegador y usa HTML, CSS y JavaScript.
  • El back end corre en el servidor y accede a la base de datos para procesar datos.
  • Los programadores suelen especializarse en uno, pero entienden ambos mundos.

Sobre bases de datos: existen muchas. MySQL (relacional) y MongoDB (no relacional que trabaja con JavaScript) son muy populares; MySQL es más usada. También se mencionan Oracle, SQL Server y PostgreSQL.

¿Cómo se conectan front end, back end y bases de datos?

Cuando escribes una URL, ocurre una cadena de eventos que transforma un nombre de dominio en una respuesta con HTML, CSS y JavaScript. La seguridad depende de no exponer datos sensibles en el front end y de usar el back end como guardián de acceso.

¿Qué sucede desde la URL hasta la respuesta?

  • El dominio se resuelve en un servidor de DNS y se obtiene una IP.
  • Un software de servidor como NGINX, Apache o el propio Node.js recibe la URL.
  • El back end (por ejemplo, Go, Python, Node.js) procesa la petición y consulta MySQL o MongoDB.
  • Devuelve al navegador un resultado listo: HTML, CSS y JavaScript.

El servidor escucha en un puerto: el web suele ser el 80 por defecto; el navegador lo añade de forma automática.

¿Por qué no acceder directo a la base de datos?

  • El código del front end es visible y no se puede proteger de forma real.
  • Conectarse a la base de datos desde el navegador expondría datos de otros usuarios.
  • El front end envía credenciales al back end; este decide qué datos leer y regresar según permisos.

¿Qué métodos usa el front end para hablar con el back end?

  • GET: envía variables en la URL. Útil para filtros, no para contraseñas.
https://tienda.com/autos?marca=ferrari&modelo=2016
  • POST: envía datos “por debajo” en los headers HTTP mediante formularios; ideal para usuario y contraseña.
  • AJAX: actualiza partes de la página sin recargar, de forma asíncrona.
  • WebSockets: comunicación en tiempo real bidireccional, útil en chats y videojuegos.

¿Qué stacks, servidores y herramientas debes conocer?

En front end la base es HTML5, CSS3 y JavaScript (ECMAScript 6). Cuando inicias, céntrate en estas tres. En back end, el lenguaje popular es PHP, pero también puedes usar Ruby on Rails, Python, Node.js, Go, Java, C# ASP .NET o incluso WordPress como CMS. En servidores destacan NGINX, Apache, Node y, en tecnologías Microsoft, IIS.

¿Qué tecnologías componen el front end?

  • HTML5 para estructura.
  • CSS3 para estilos.
  • JavaScript (ES6) para interactividad.
  • Librerías y herramientas: Angular, React JS, Stylus, Jade (opcionales al inicio).

¿Qué stacks destacan y para qué sirven?

  • LAMP: Linux + Apache + MySQL + PHP; stack clásico para web.
  • MEAN: MongoDB, Express, AngularJS, Node.js; popular para apps JavaScript completas.
  • Un ejemplo empresarial: MySQL, Nginx, MongoDB y lenguajes de servidor como Python con Django, Go y Node.js.
  • Para tiempo real se usan sockets: comunicación cliente-servidor constante, ideal en chats y videojuegos.

¿Cómo montar un servidor local con Arduino y Node.js?

  • IP local del propio equipo: 127.0.0.1 (también localhost).
  • Puerto recomendado en desarrollo: 8080 (se evita el 80 por uso del sistema).
  • Stack del proyecto: Node.js (también referido como NoJS), Express en el servidor, y JavaScript + HTML en el navegador.
  • Por qué servidor: el navegador no accede a dispositivos; el servidor, como programa nativo del sistema, sí puede usar el puerto USB para hablar con Arduino.

¿Con qué parte te quedas: front end, back end o ambos? Cuéntame en los comentarios qué te gustaría construir y qué stack te interesa explorar.

      Qué es el Modelo Cliente/Servidor