¿Cómo inspeccionar el consumo de APIs en tu navegador?
Enfrentarse al consumo de APIs puede ser un desafío si no tienes las herramientas adecuadas para entender lo que está sucediendo. En este segmento, te mostraré cómo utilizar la pestaña de Network en el inspector de tu navegador para depurar y observar el funcionamiento interno del consumo de APIs en tu aplicación. Esta herramienta es esencial para analizar el rendimiento y solucionar problemas de carga en tus proyectos.
¿Cómo clonar y abrir tu proyecto?
El primer paso es asegurarte de tener tu proyecto en local. Para eso, debemos descargarlo utilizando Git desde el repositorio de GitHub donde está alojado. Utiliza los siguientes comandos en tu terminal:
# Cambiar a tu directorio de proyectoscd mycourses
# Clonar el repositoriogit clone <URL_DEL_REPOSITORIO># Ingresar al directorio del proyecto clonadocd curso-API-REST-JavaScript-profesional
# Abrir el proyecto en tu editor de códigocode . -r
¿Cómo configurar tu API Key?
La API de MovieDB requiere una clave API (API Key) para realizar consultas. Sigue estos pasos para configurarla:
Esta pestaña del navegador es poderosa. Nos permite ver el tiempo de carga de cada recurso e identificar problemas de rendimiento. Vamos a cargar la página, inspeccionar los recursos y analizar nuestras peticiones HTTP:
Recargar la Página: Usa la opción de 'Empty Cache and Hard Reload' para recargar la página completamente y observar cargas desde cero.
Observar las Peticiones: Fíjate en los tamaños y tiempos de las solicitudes HTTP. El navegador implementa automáticamente una estrategia de caché, lo que mejora el rendimiento al cargar información previamente solicitada.
Cache vs. Memoization: Analiza cómo el navegador almacena la información en caché frente al uso de memoization, que guarda los resultados en un objeto en JavaScript.
¿Cuál es la estrategia de optimización más efectiva?
El navegador ya realiza un buen trabajo de cacheo. Sin embargo, optimizar el resto de los recursos como imágenes y scripts sigue siendo crítico. Las prácticas recomendadas incluyen:
Carga Condicional de Imágenes: Cargar imágenes solo cuando sean visibles.
Paginación: Implementar paginación para mejorar el rendimiento al manejar grandes listas de datos.
Utilizar Local Storage: Almacenar datos localmente para acceso rápido sin necesidad de nuevas solicitudes al servidor.
Estas prácticas te ahorrarán ancho de banda y acelerarán tu aplicación. Puedes experimentar con distintas configuraciones en la pestaña Network de tu navegador para encontrar lo que más se adecúe a tus necesidades.
¿Qué otras estrategias de optimización puedes utilizar?
Queremos saber tu opinión y experiencias. ¿Cuándo crees que sería mejor usar otra estrategia de caché o una alternativa diferente a la propuesta? Deja tus sugerencias y experiencias en los comentarios. Mantengamos una discusión enriquecedora y fructífera sobre este tema.
Recuerda que la optimización no es un producto final, sino un proceso continuo de mejora. Estaré feliz de resolver cualquier duda y seguir explorando este apasionante mundo contigo en nuestras próximas clases. ¡Nos vemos en la siguiente sesión donde nos sumergiremos aún más en la optimización de proyectos frontend!
Éste curso salió precisamente después que tomé los de optimización Web y debuggin con Chrome DevTools y la verdad ya estaba un poco "cansado" de ver el NetWork en inspeccionar, pero creo que es más necesario de lo que pensaba. El "pan de cada día" en esto del FrontEnd. Así que hay que aprender a amarlo.
Muchas se piensa que el trabajo frontend solo es programar y darle movimiento a la interface, pero en realidad hay un millon de cosas que muchas veces no se dan cuenta y es eso, optimizacion y mejora de rendimiento
😲😲😱😨🙀🙀
😂🤣
Oh nooooooo me habeis hackeadoooooo
Ctrl+F5
"para re carga fuerte"
Quiero decir que el profesor de manera equivocada filtró su API key en el 7:12, haciendo hover en la peticion list...
Reportado
No se ha censurado y la API Key sigue funcionando.
Aqui les dejo el link de la API que estamos utilizando, primero deben de tener una cuenta con ellos para que les pueda dar la API_KEY. https://www.themoviedb.org/settings/api
Una cosa bastante útil que sale en el Curso de manipulación del DOM es la técnica del Lazy loading, la cual consiste en llamar a la API solo cuando estemos sobre la imagen y no desde antes, así podemos tener una carga más rápida de las imágenes y nuestra aplicación corre de la misma forma.
En algunos poryectos me ha tocado implementar esta libreria https://axios-cache-interceptor.js.org/#/, excelente para manejar memoization de peticiones ya desde el código.
Hola, en el curso pasado vi que nos estaban recomendando usar un archivo .env
Busqué información al respecto pero al parecer se guardan en el equipo unas variables de entorno. ¿Cómo se utiliza el .env en producción?
Si alguien tiene documentación se lo agradecería.
¡Hola! :D
Por acá te dejo una lectura sobre el archivo .env
Nunca pares de aprender 💚
Las variables de entorno son variables del sistema operativo de nuestra computadora (o del servidor donde vida nuestra aplicación) donde podemos guardar de forma mucho más segura información sensible como las API KEYs.
.
En la clase de Deploy explicamos eso a un poquito más de detalle. Ahí mismo también puedes recomendar que sí grabemos el curso avanzado donde, entre otras cosas, haríamos esto.
.
Spoiler: se necesita que configuremos nuestro propio backend para lograr esto.
Mientras estudiaba en la universidad tenia que hacer unos ejercicios de JavaScript, no funcionaba bien aunque el código estaba perfecto, pasaron muchas horas hasta que el profe me dijo que presionara CTRL +F5 para recargar borrando el caché y se arreglo. Lo digo por si alguien alguna vez ha tenido un problema similar para que lo tengan en cuenta! A veces el caché juega malas pasadas
Para profundizar en Network está esta clase del profe Diego
Yo tuve un problema de carga con mi app desde el anterior curso, y ahora viéndolo bien creeria que es por el caché y la carga de los archivos.
Cuando empiezo una búsqueda noto que los llamados a la api se cargan de primeras, pero el index no, por lo tanto no hay una estructura a mostrar y se queda en negro la pantalla 👇
Pero una vez que recargo la pagina ya observo que el index se carga de primeras en consecuencia los estilos y la estructura y todo vuelve a la normalidad,
Ahora mi pregunta es, como puedo controlar los tiempos de carga para que no suceda eso?
Muy interesante lo de la caché.
Yo utilizo Mozilla Firefox, y las herramientas de desarrollo tambien son muy buenas, practicamente las mismas que tiene Google Chrome.
yo uso opera gx
es mas parecido a chrome que firefox
No se si sea un ejemplo válido en cual se aplica el tema del caché, pero recuerdo que en el Curso Profesional de Python hay un apartado sobre la carpeta pycache que lo que hace es que se guarda nuestro código ya ejecutado , para que en una segunda ejecución al sin algún cambio en el código, este no sea interpretado y conviertido a bytecode de nuevo, si no que lo cargue ya directamente ayudandonos a que se ejecute más rápido
La herramienta Network en el navegador es fundamental para entender el rendimiento y el comportamiento de nuestra aplicación al consumir APIs.
Análisis de recursos: Permite visualizar qué archivos (HTML, CSS, JS, imágenes, fuentes) se cargan, cuánto tiempo tardan y su tamaño.
Simulación de entornos: Es posible probar la aplicación en escenarios de internet lento, modo offline o deshabilitar el caché para pruebas reales.
Filtrado: Facilita el aislamiento de peticiones específicas, como los endpoints de tipo Fetch, para analizar el tráfico de datos de la API.
Gestión de Caché y Optimización
Estrategia nativa: Los navegadores implementan una estrategia de caché eficiente por defecto. Al recargar, si el recurso ya existe, el navegador lo sirve desde el Disk Cache, reduciendo tiempos de carga drásticamente.
Caché vs. Memoization: A diferencia de la memoization (que se pierde al recargar la página), el caché del navegador persiste entre recargas y navegaciones.
Punto de mejora: El navegador ya optimiza las peticiones HTTP de forma excelente. El enfoque real para el desarrollador debe estar en optimizar la carga de otros recursos, como imágenes que no están visibles o la implementación de paginación.
Mi navegador no esta implementando la estrategia del caché como se mostró en la clase. Despues de borrar el caché y hacer el hard reload sigue haciendo las solicitudes a la API. ¿Que puedo hacer para que mi navegador me guarde esa información en el caché y tener la optimización de carga?
Hola Nicolás! Justamente si borrás el caché y se hace un hard reload, las solicitudes a la API se vuelven a hacer, tal como se muestra en la clase. Si solo hacés reload (sin borrar la caché) el navegador va a guardar las peticiones y no se van a volver a hacer.
Espero que haya quedado claro, saludos!
Interesante, no sabía la funcionalidad de Network, increíble…otra visión del mundo.
Oww, en mi caso particular no se están guargando en caché todas mis solicitudes a la api.
·
En mi proyecto, además de conectarme a la API de TheMovieDB, también estoy usando una API traductor para tener en español las categorías y las descripciones de las películas, y precisamente estas últimas solicitudes a la API Traductor no se están guargando en caché (y por tanto sin importar si recargo la página o no, siempre tardan unos segunditos en cargar).
·
Pero bueno, creo que eso ya es más debido al hecho de que, en el caso de la API Traductor, las solicutdes que hago para que me traduzca las categorías y las descripciones de las películas son de tipo POST (en vez de las de tipo GET de TheMovieDB), y estas últimas no las guarda en caché a pesar de que en realidad siempre traduce el mismo texto.
La API de movieDB ya te tiene con la opción de lenguaje
const api = axios.create({baseURL:'https://api.themoviedb.org/3',headers:{'Content-Type':'application/json; charset=utf-8',},params:{'api_key':API_KEY,'language':'es-VE'},});
Pero esta bien que hayas implementado otra api, ya que es para fines educativos no esta de mas aprender a trabajar con varias API.
Je je je, sipi sipi, me lo suponía. No me había dado cuenta cuando decidí hacer la implementación conectándome a esa API Traductor, pero luego de empezar el Curso Profesional y ver que una de las últimas clases se titula "Reto: Selección de Idioma", je je.
·
Pero bueno, igualmente muchas gracias~ Ya luego actuliazo mi app y la pongo directamente en español ✨.
