¿Qué son las tecnologías front-end y back-end?

Introducción al desarrollo frontend

La interfaz de un sitio web es lo que ve e interactúa en su navegador. También conocido como “lado del cliente”, incluye todo lo que el usuario experimenta directamente: desde texto y colores hasta botones, imágenes y menús de navegación.

Digamos que decides iniciar un negocio. Abre una panadería gourmet para golosinas para perros y necesita un sitio web profesional para presentar su empresa a los clientes y decirles dónde se encuentra. Quizás incluyas algunas fotos y alguna información sobre tus productos. Todo lo que necesita son tecnologías frontend para construir su sitio web.

Idiomas frontend

Estos tres idiomas harán el truco:

HTML : el lenguaje de codificación fundamental que crea y organiza el contenido web para que un navegador pueda mostrarlo

CSS : un lenguaje que acompaña a HTML y define el estilo del contenido de un sitio web, como el diseño, los colores, las fuentes, etc.

JavaScript : lenguaje de programación utilizado para elementos más interactivos como menús desplegables, ventanas modales y formularios de contacto.

Juntos, estos elementos esenciales crean todo lo que se presenta visualmente cuando visita una página web, ya sea comprando en línea, leyendo las noticias, revisando su correo electrónico o realizando una búsqueda en Google.

Además de los lenguajes de front-end básicos, encontrará marcos como Bootstrap y Angular, así como bibliotecas de JavaScript como jQuery y extensiones CSS como Sass y LESS. Hay una larga lista de recursos como estos, que admiten HTML, CSS y JavaScript. Su propósito es simplemente hacer que el código (y el proceso de escritura) sea más manejable y organizado al proporcionar varias herramientas y plantillas compatibles con lenguajes de codificación comunes.

Entre bastidores

Un avance rápido de unos meses. El sitio web de su negocio se ve muy bien, y la panadería gourmet para golosinas para perros se ha vuelto increíblemente exitosa. Ahora los clientes quieren comprar grandes cantidades de golosinas para sus amigos peludos y comenzar a preguntar si pueden ordenar en línea.

Entonces decide abrir una tienda en línea donde las personas pueden comprar y hacer pedidos en cualquier momento. Esto significa que su sitio ahora tendrá que almacenar información sobre productos, compras, perfiles de usuario, tarjetas de crédito y más. ¿Cómo administrará estos datos para poder comenzar a entregar golosinas para todas esas colas? Aquí es donde entra en juego el desarrollo de backend.

Introducción al desarrollo de backend

Hasta ahora, lo que tiene es un ejemplo de un sitio web estático : su contenido realmente no cambia mucho. Para los sitios estáticos, toda la información necesaria que determina qué hay en la página web está en el propio código de la interfaz. Los sitios web estáticos son buenos para mostrar cosas como negocios, restaurantes, carteras o perfiles profesionales. Pero si desea convertir su sitio en algo con lo que los usuarios puedan interactuar, necesitará profundizar más sobre lo que está sucediendo detrás de escena del sitio web.

El backend (o “lado del servidor”) es la parte del sitio web que no ve. Es responsable de almacenar y organizar datos, y de garantizar que todo en el lado del cliente realmente funcione. El backend se comunica con el front-end, enviando y recibiendo información para que se muestre como una página web. Cada vez que complete un formulario de contacto, escriba una dirección web o realice una compra (cualquier interacción del usuario en el lado del cliente), su navegador envía una solicitud al lado del servidor, que devuelve información en forma de código frontend que el navegador puede interpretar y mostrar.

Su nuevo sitio necesitará tener componentes de back-end adicionales para convertirlo en una aplicación web dinámica : un sitio web cuyo contenido puede cambiar en función de lo que está en su base de datos , y que puede ser modificado por la entrada del usuario. Esto es distinto de un sitio web estático, que no requiere una base de datos porque su contenido generalmente permanece igual.

Configuración del lado del servidor

Su sitio web necesita una base de datos para administrar toda la información del cliente y del producto. Una base de datos almacena el contenido del sitio web en una estructura que facilita la recuperación, organización, edición y almacenamiento de datos. Se ejecuta en una computadora remota llamada servidor . Hay muchas bases de datos diferentes que se usan ampliamente, como MySQL, SQL Server, PostgresSQL y Oracle.

Su aplicación seguirá conteniendo código de interfaz, pero también debe construirse utilizando un lenguaje que una base de datos pueda reconocer. Algunos lenguajes de fondo comunes son Ruby, PHP, Java, .Net y Python. Estos lenguajes de programación a menudo se ejecutan en marcos que simplifican el proceso de desarrollo web. Rails, por ejemplo, es un marco escrito en Ruby. “Ruby on Rails” es una tecnología popular para crear aplicaciones web dinámicas que hace que el proceso sea mucho más rápido.

Con todas estas partes funcionando juntas correctamente, los clientes pueden visitar su sitio web y buscar el tipo particular de refrigerio que desean comprar, tal vez quieran obtener una lista de golosinas hechas especialmente para cachorros pequeños. Cuando lo escriben en el cuadro de búsqueda (en el frontend), la aplicación revisa todos los datos del producto almacenados en la base de datos (backend) y devuelve la información adecuada en forma de código frontend que el navegador muestra como la lista solicitada por el usuario .

Una tecnología front-end es lo que visualiza el usuario, es decir, el aspecto del sitio web, etc.

La tecnología de back-end es el proceso detrás de cualquier clic en el sitio web o juego o cualquier cosa. El backend consiste principalmente en Python, Java, C, C ++, Perl, R, etc.

El código escrito para mostrar la interfaz al usuario se llama front end. El código que procesa la lógica interna es el código de fondo. Por ejemplo,

el estilo de página que está viendo ahora en la pantalla se debe al código de front-end, pero la forma en que esta página vino del servidor a su navegador en cuestión de segundos se debe al código de back-end.

Puede ver el código de front-end haciendo clic derecho en Chrome y seleccionando Ver fuente de página.

Pero no puede ver el código de fondo a menos que esté autorizado.

El front-end básicamente significa la forma en que un usuario va a interactuar con un software … ya sea un sitio web … ya sea una aplicación web … etc.

El back end incluirá lo que sea que sea el software … El sitio web, etc. hará … Cómo se mostrarán los datos al usuario … Cómo el software actualizará los otros sistemas … Etc …