Caché del navegador vs memoization en APIs
Contenido del curso
Optimización de imágenes
Paginación
Almacenamiento local
Bonus
Próximos pasos
Caché del navegador vs memoization en APIs
Caché del navegador vs memoization en APIs
Contenido del curso
Oscar Fuentes Esteves
LUZ ADRIANA MARTINEZ RAMIREZ
Fernando Yutiz
Juan Castro
Profesor
Marco Andres Vasquez
Baltazar Andersson
Juan Castro
Profesor
Salomon Moreno
Raycris Maldonado
Sergio Javier Lopez Olivera
Mariana Contreras
Luis Angel Olivárez Estrada
Xavier Medina Veintimilla
Juan Castro
Profesor
Alonso Chaves
Guadalupe Monge Barale
Dario Paladines
Wilberk Ledezma
Ameth Ordoñez Erazo
Marco Andres Vasquez
Christopher David Erazo Herrera
Jefred Bedoya
Nicolás Felipe Pinto Vega
Agustina Corvo
Ricardo Alfonso Chavez Vilcapoma
Miguel Enrique Velásquez Millán
Jose Castillo
Miguel Enrique Velásquez Millán
É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 👇
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
Pueden consultarlo en este link: ¿Cómo funciona Python?
Inspección y Debugging con la Pestaña Network
La herramienta Network en el navegador es fundamental para entender el rendimiento y el comportamiento de nuestra aplicación al consumir APIs.
Gestión de Caché y Optimizació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 ✨.