You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
21 Hrs
8 Min
28 Seg

Debuggeando caché y networking

3/20
Resources

How to inspect API consumption in your browser?

Dealing with API consumption can be a challenge if you don't have the right tools to understand what's going on. In this segment, I'll show you how to use the Network tab in your browser's inspector to debug and observe the inner workings of API consumption in your application. This tool is essential for analyzing performance and troubleshooting load issues in your projects.

How to clone and open your project?

The first step is to make sure you have your project locally. For that, we must download it using Git from the GitHub repository where it is hosted. Use the following commands in your terminal:

# Switch to your project directorycd mycourses
 # Clone the repositorygit clone <URL_DEL_REPOSITORY>
 # Enter the cloned project directorycd course-API-REST-JavaScript-professional
 # Open the project in your code editorcode . -r

How to configure your API Key?

The MovieDB API requires an API Key to perform queries. Follow these steps to set it up:

  1. Create a secrets.js file in the src directory.
  2. Add your API Key as a constant:
    const API_KEY = 'YOUR_API_KEY_HERE';
  3. Get your API Key from themoviedb.org/settings/api by creating an account if you don't have one yet.

How to use the Network tab?

This browser tab is powerful. It allows us to see the load time of each resource and identify performance issues. Let's load the page, inspect the resources and analyze our HTTP requests:

  1. Reload Page: Use the 'Empty Cache and Hard Reload' option to reload the page completely and observe loads from scratch.
  2. Observe Requests: Look at the sizes and times of HTTP requests. The browser automatically implements a caching strategy, which improves performance when loading previously requested information.
  3. Cache vs. Memoization: Analyze how the browser caches information versus using memoization, which stores the results in a JavaScript object.

Which is the more effective optimization strategy?

The browser already does a good job of caching. However, optimizing the rest of the resources such as images and scripts is still critical. Best practices include:

  • Conditional Image Loading: Load images only when they are visible.
  • Pagination: Implement pagination to improve performance when handling large lists of data.
  • Use Local Storage: Store data locally for quick access without the need for new server requests.

These practices will save you bandwidth and speed up your application. You can experiment with different configurations in the Network tab of your browser to find what best suits your needs.

What other optimization strategies can you use?

We want to know your opinion and experiences. When do you think it would be better to use another caching strategy or a different alternative to the proposed one? Leave your suggestions and experiences in the comments. Let's have an enriching and fruitful discussion on this topic.

Remember that optimization is not a final product, but a continuous process of improvement. I'll be happy to answer any questions and continue exploring this exciting world with you in our next classes, see you in the next session where we'll dive even deeper into frontend project optimization!

Contributions 14

Questions 4

Sort by:

Want to see more contributions, questions and answers from the community?

É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.

😲😲😱😨🙀🙀

😂🤣

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…

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.

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

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.

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

Pueden consultarlo en este link: ¿Cómo funciona Python?

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.