Cómo es el trabajo frontend y backend con una API

Autor: | Última modificación: 26 de agosto de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

Es importante entender el trabajo frontend y backend con una API pues es una de las dinámicas más encontradas en el trabajo con programas de código, conexión con APIs y desarrollo de aplicaciones. Ambos conceptos revelan características importantes acerca del lenguaje computacional y cómo trabajar con él. Por lo tanto, a continuación, te contaremos cómo es el trabajo frontend y backend con una API.

Cómo es el trabajo frontend y backend con una API

Cuando estamos usando una API nos encontramos con varios elementos dentro del programa para desarrollar una aplicación o plataforma web que conecte con ella. Este trabajo se divide en dos partes muy conocidas dentro del sector de la programación. Estos son el campo fronted y el campo backend. Este trabajo mancomunado es importante, pues ambos campos del programa se juntan en un solo sitio. Por lo tanto, el programa tendrá dos caras: la de JavaScript en el cliente y la de Flask en el campo del servidor.

Elementos necesarios

Los elementos con los que te encontrarás en el trabajo con una API, desde los sectores frontend y backend serán los siguientes:

  • Navegador.
  • Cliente.
  • JavaScript.
  • Servidor web.
  • Archivos estáticos, como las imágenes, los scripts y CSS.
  • La API.
  • Templates.
  • Flask.
  • Servidor de la app.

Cada uno de los elementos de esta lista interactúan con otros de la misma lista para formar los dos sectores de los que te hablaremos a continuación: el frontend y el backend.

Frontend y backend con una API

Los elementos que aparecen en el campo frontend son el navegador y JavaScript. Estos conforman el campo del cliente. El navegador se encargará de realizar las peticiones al servidor web o a la aplicación creada por Flask. A su vez, le llegara el script de una aplicación, que ha sido programado a partir de JavaScript. Cuando llega JavaScript al navegador, entendemos que se está ejecutando el programa.

Para llegar a eso, el navegador realiza un petición y se dirige al servidor web. Ahora, si pide un archivo, se propone buscarlo en el disco duro, lo toma y después lo devuelve al mismo lugar.

Entre tanto, si la petición empieza por /API, el navegador lo tendrá que solicitar por la dependencia de Flask. Esto identificará que es una ruta de API, por lo tanto, lo tratará como tal.

🔴 ¿Quieres Aprender a Programar con Python? 🔴

Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana

Ahora, si el programa no empieza, tomará lo que está en template, lo renderizará y, por último, tendrá que ejecutarlo. Después de todo esto, lo devolverá al lugar que lo solicita.

En resumidas cuentas, nuestra aplicación web, que se encuentra en la parte de backend, utiliza la dependencia de Flask, lo que permite que se ejecute en el servidor. Mientras que el programa por JavaScript, es decir, el frontend, genera la parte del cliente. Entre tanto, todo lo que ejecuta se debe pedir al servidor web, el cual, a su vez, tiene acceso a lo que se genera con Flask en el servidor.

Diagrama frontend y backend para una API

A continuación, te presentamos un diagrama que representa la forma en la que se fragmenta el trabajo entre el sector frontend y backend. Aquí podemos ver, según lo que te contamos hace un momento, cómo, en primer lugar, el navegador a partir de JavaScript conforma el sector cliente o frontend del programa con API.

Mientras tanto, en la parte del servidor o el sector backend, aparecen los elementos para la conformación de la aplicación a partir de Flask. Estos son la API con su base de datos de SQL y el conjunto de templates.

Ambos sectores se conectan por medio del servidor web, que se encarga de contener todos los archivos estáticos.

Cómo es el trabajo frontend y backend con una API
Diagrama frontend vs backend

De esta manera, ya te queda mucho más claro cómo es el trabajo frontend y backend con una API.

¿Qué quieres hacer hora?

Ahora que sabes cómo es el trabajo frontend y backend con una API, seguro que entiendes mejor el funcionamiento de cada uno de estos campos, así como el funcionamiento de las API o la interfaz de programación de aplicaciones.

Si deseas seguir investigando y aprendiendo sobre programación, te recomendamos echarle un vistazo al programa de Aprende a Programar desde Cero Full Stack Jr. Bootcamp. ¡No dudes en matricularte para seguir practicando y convertirte en un profesional!

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!