No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Front-End y Back-End: definición y características

4/23
Recursos

Reto: Sincronía y asincronía

Para esta clase he preparado un reto para que puedas llevar a la práctica los conceptos de sincronía y asincronía que vimos.

Son 2 retos, uno para cada concepto. Cada reto tiene una vista de Figma que puedes encontrar en Figma Community que debes resolver según el concepto.

En el caso de la sincronía, tendrás que agregar una vista que contemple el concepto de sincronía, es decir el tiempo de espera activa de los recursos que vienen del servidor.

Dada la vista que está disponible en Figma Community diseña cómo sería la vista de sincronía. Para diseñar esta vista, debes preguntarte cuales son esos recursos y como hago para comunicarle al usuario que está en una espera activa.

Vista de Figma para reto 1


Por otro lado, en el reto de asincronía tienes que implementar el flujo de exportación de los productos. El equipo de Back-End definió que se notificará por correo una vez que el archivo esté listo porque este, dependiendo de la cantidad de productos, puede tomar mucho tiempo en generarse.

Si tienes dudas, por favor ve a la clase de Front-End y Back-End donde revisamos los conceptos de sincronía y asincronía.

Vista de Figma para reto 2

Aportes 21

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

En resumen, el Frontend es todo lo que un usuario final ve en tu pagina o aplicación que vayas a desarrollar (colores, presentación, tamaños, acciones). El Backend es todo lo que hay detrás de esa apariencia bonita y es lo que permite que funcione tu página o aplicación (se conecta a una base de datos, permite registrar, editar, eliminar información, etc).

Les comparto este meme que si lo logran entender, habrán comprendido lo explicado en clase!

Este es e resultado del reto 1. Espera sincrónica usando Skeleton loading y spinner.


Este es el resultado del reto 2:

Gracias!
Feedback 😃

  • Cuando vemos en el Frontend (interfaces o pantallas web) elementos de carga (loading) como los progress bar, skeleton loading o spinners, tiene que ver con la espera activa o Sincrónica, en la que debido a que el tiempo de espera es corto, el usuario debe esperar hasta que se muestre el resultado o cargue la siguiente pantalla.
    .
    La espera Asincrónica son procesos que pueden tomar mucho tiempo, por lo que debes procurar que los usuarios puedan seguir navegando tu página o utilizando tu aplicación sin tener que detenerse hasta que cargue el resultado o termine el proceso solicitado. Es aquí donde entran las notificaciones con alertas o por correo para avisar al usuario cuando ha recibido la respuesta o conseguido el procesamiento y finalización de su solicitud / registro.

¡Hola! Este es mi ejercicio para el reto de sincronía 🌐🤓:

¡Hola! Este es mi ejercicio para el reto de sincronía.

Mis propuestas para los retos
Reto 1: Espera sincrónica

Reto 2: Espera asincrónica

Este es mi RETO

SINCRONÍA

ASINCRONÍA

Sincronismo y asincronismo

Hola, me gustaría feedback, muchas gracias! (el icono de imagen no funciona para subir las fotos) envío enlace a drive Reto Sincronía https://drive.google.com/file/d/1HriF4zY0ZtERLZlUeGFS_Srxc7TE0fBc/view?usp=sharing

Asincronía https://drive.google.com/file/d/12IkIbLCim1o5tXs5bs2rqC7eZ69bGqeV/view?usp=sharing

Espera Sincrónica: respuestas que esperamos activamente.

Espera Asincrónica: respuestas que podemos esperar en segundo plano, o que podemos esperar en más tiempo. La respuesta espera en 2do plano.

Un servidor es un computador que está funcionando 24 horas, los 7 días de la semana, esperando solicitudes y se conecta a una base de datos para dar una respuesta.




2.

Esta es una de las clases que mas me han gustado hasta ahora.
Conocía la idea de asincronía y sincronía, pero no sabía que era llamado así técnicamente!
Soy diseñador gráfico, actualmente estoy trabajando como analista de productos y hace tiempo que no utilizaba figma (que no manejo mucho), y pude reproducirlo con un poco de esfuerzo
Incluyo mi versión de sincronía
https://drive.google.com/file/d/1DtTx1V8J4wg08VCl24-Gq9gmd8nZw8hf/view?usp=drive_link
Asincronía
https://drive.google.com/file/d/1kAbqxJ8PWcAUxFK86blvxsQzyt1EbjJX/view?usp=drive_link

Reto 1

Reto 2


Hola, la vista que yo creé fue cuando eliges una talla en específico y este actualiza la disponibilidad de artículos, y en este caso muestra también que tiene oferta.
Espero haber entendido el reto. GRacias por sus comentarios 💚

Este es mi resultado del reto de Asincronía.