¿Cómo interactúan el código frontend y el backend?

Para obtener una respuesta más detallada, vea En términos simples: código de fondo, código de interfaz y cómo interactúan.

Frontend: cosas que se ejecutan en el navegador, que se basa en HTML / CSS / JS

Backend: cosas que se ejecutan en el servidor, Ruby, PHP, Python, Java, JavaScript / Node, scripts bash, DBMS

Hay dos arquitecturas principales hoy que definen cómo interactúan su backend y frontend.

Aplicaciones renderizadas por el servidor

El primero es solicitudes HTTP directas a una aplicación renderizada por el servidor . Este es un sistema mediante el cual el navegador envía una solicitud HTTP y el servidor responde con una página HTML.

Entre la recepción de la solicitud y la respuesta, el servidor generalmente consulta la base de datos y la introduce en una plantilla (ERB, Blade, EJS, Manillares).

Una vez que la página se carga en el navegador, HTML define qué son las cosas, CSS cómo se ven y JS cualquier interacción especial.

Comunicación usando AJAX

AJAX significa A crín sincrónico de J ava S y X ML. Esto significa que el JavaScript cargado en el navegador envía una solicitud HTTP (XHR, XML HTTP Request) desde la página e históricamente obtuvo una respuesta XML.

Hoy en día, las respuestas también se realizan en formato JSON.

Esto significa que su servidor necesita tener un punto final que responda JSON / XML a las solicitudes. Dos arquitecturas para esto son REST y SOAP.

Aplicaciones del lado del cliente (página única)

AJAX le permite cargar datos sin actualizar la página. Esto se ha llevado al máximo con marcos como Angular y Ember. Estas aplicaciones se incluyen, se envían al navegador y cualquier representación posterior se realiza en el lado del cliente (navegador).

Estas interfaces se comunican con el back-end a través de HTTP utilizando respuestas JSON / XML.

Aplicaciones de cliente y servidor

Las aplicaciones React y Ember (y otras) se pueden representar en el servidor (back-end), así como desde el cliente (frontend).

Cuando se configura de esta manera, la aplicación usa tanto AJAX como HTML renderizado por el servidor para comunicar la interfaz de usuario al backend.

Así que eso es un poco largo pero espero que esto tenga sentido :).

Bien, intentaré agregar algunos detalles a esta respuesta, para que las cosas se vean más explícitas.

Frontend como dijo Hugo; es básicamente lo que se ejecuta en su navegador, para ser más genérico, lo que su espectador ve se llama frontend, puede que ni siquiera sea el navegador, podría ser una aplicación móvil, al final es lo que ve su usuario, eso es descrito como el frontend; y como verán ya, esto implica mucho trabajo de diseño, y de eso se tratan los programadores frontend. ¡Hacer que la interfaz de usuario se vea genial!

Entonces, ¿cómo sucede esto básicamente,

Se está ejecutando un servidor web en su máquina servidor y descarga el dominio de ejemplo de su sitio web a pedido. Digamos que su servidor web es apache. Entonces, simplemente configura Apache para que cuando una solicitud llegue a esta máquina, solicite y alimente al usuario, con la información solicitada si la tenemos, si no le devolvemos un 404, no tenemos esas cosas.

Ahora, eso es básico! Backend por otro lado es para la interactividad. ¿Qué quiero decir con esto?

Entra en juego cuando quieres mantener el estado, quieres recordar dónde lo dejaste y continuar desde allí. Ya no solo envías información a ciegas al usuario, sino que realizas algunas verificaciones más sobre el usuario.

Entonces, ejecutemos un ejemplo; Digamos que quiere un sitio web, donde los usuarios pueden iniciar sesión y ver su información privada. ¡Ahora se dan cuenta de que Apache es simplemente un servidor! no puede hacer estas comprobaciones, se da cuenta de que necesita una base de datos, para mantener el contacto con la información de cada usuario. De repente hay mucha programación involucrada y se llevaría a cabo en el servidor (The Backend) mientras el usuario en el (front-end) espera.

Entonces, surgieron algunos lenguajes para resolver esto como PHP. ¿Como funciona esto?

Cuando se desarrolla un sitio web que requeriría algo de lógica de back-end, se escribiría un script PHP, luego apache (o cualquier servidor web utilizado, debe soportar ese lenguaje de back-end en particular).

Un usuario solicita alguna página, cuando apache verifica la página, cualquier archivo que tenga su extensión de archivo como .php lo envía al preprocesador de PHP para procesarlo y obtener un resultado que luego envía al usuario.

En resumen, el frontend se reduce a lo que ven los usuarios, el back-end se reduce a un programa escrito en la máquina del servidor para trabajar con el servidor y producir páginas dinámicas para los usuarios.