Optimización y despliegue de Platzi Movies

Curso de API REST con Javascript: Performance y Usabilidad

Contenido del curso

No sé dónde empezar

Qué se debe optimizar en el frontend (y qué no)

Optimización de imágenes

Paginación

Almacenamiento local

Bonus

Próximos pasos

20
Cierre y próximos pasos con tu portafolio
08:08 min

Cursos Empresas Blog Live Conf Eventos Precios

0:004:23

Optimización y despliegue de Platzi Movies

Curso de API REST con Javascript: Performance y Usabilidad

Clase 1 de 20

Clase 1 / 20

Obtén respuestas inmediatas¿Dudas?Profundiza lo que acabas de ver

Recursos

Profesionalizar un proyecto en JavaScript que consume REST APIs significa optimizar imágenes, reducir tiempos de carga, manejar autenticación ligera y desplegar la aplicación sin exponer datos sensibles. Si ya construiste Platzi Movies con TheMovieDB API, este es el siguiente paso para que tu portafolio luzca como un producto real.

¿Qué aprendiste antes de llegar al nivel profesional?

Antes de optimizar, conviene recordar de dónde venimos y por qué cada pieza importa.

En el primer curso de la trilogía aprendiste a consumir REST APIs con JavaScript usando Fetch, librerías como Axios, headers, API keys, query parameters y endpoints. Practicaste con la Cat API para guardar fotos de gatitos y subir las tuyas. En el segundo curso, el práctico, creaste Platzi Movies con TheMovieDB API, un proyecto digno de portafolio.

Lo más interesante de ese proyecto es la navegación: un solo archivo HTML que, a través de hash navigation, simula múltiples rutas. Así tu aplicación deja de sentirse como un simple index.html y empieza a parecer una app real con varias secciones para tus usuarios.

¿Qué es hash navigation? Es una técnica que usa el símbolo # en la URL para cambiar de vista sin recargar la página. Permite simular rutas en una single page application sin necesidad de un router complejo.

¿Cómo optimizar imágenes y carga de datos en el front end?

La optimización es el corazón de un proyecto profesional, y casi todo se puede resolver desde el navegador.

Vas a trabajar la optimización de imágenes y del consumo de la API para reducir tiempos de carga. También aprenderás a entregar una buena experiencia mientras los datos terminan de llegar, mostrando placeholders o imágenes por defecto cuando algo falla o aún no carga. La pregunta clave: ¿cuánto puedes hacer desde el front end sin depender del back end?

Dentro de esa exploración vas a evaluar dos técnicas que muchos confunden:

Caching: guardar respuestas para no volver a pedirlas al servidor.
Memoization: recordar resultados de funciones costosas para reutilizarlos.
Optimización nativa del navegador: muchas veces el browser ya hace el trabajo por ti.

¿Qué es lazy loading y cuándo conviene usarlo?

El lazy loading o carga diferida hace que las imágenes y recursos solo se carguen cuando el usuario los necesita, normalmente al hacer scroll. Esto evita que todo se descargue de golpe y mejora el rendimiento percibido.

¿Qué tipo de paginación deberías implementar en tu proyecto?

La paginación define cómo tus usuarios recorren grandes volúmenes de datos, y no hay una sola forma correcta.

En este nivel vas a comparar tres enfoques y decidir cuál encaja mejor con Platzi Movies:

Botón Load More al final de cada página.
Barra de paginación con botones numerados que muestran cuántos resultados existen.
Infinite scrolling, donde el contenido aparece automáticamente al hacer scroll.

Cada técnica tiene ventajas y desventajas en términos de UX, rendimiento y consumo de la API. Vas a analizarlas una por una antes de elegir.

¿Cuándo usar infinite scrolling vs. paginación tradicional? El infinite scroll funciona bien para feeds de descubrimiento, como redes sociales. La paginación numerada es mejor cuando el usuario necesita volver a una posición exacta o saber cuántos resultados hay en total.

¿Cómo manejar autenticación y datos de usuario sin un back end?

No todo proyecto necesita un sistema completo de autenticación, y aquí está el truco para evitar esa complejidad.

Normalmente autenticas tu aplicación contra la API con una API key, pero también podrías autenticar a cada usuario que la usa. Eso no lo vas a hacer aquí, porque la autenticación es un tema tan denso que tiene cursos dedicados solo para él. En su lugar, vas a usar Local Storage para guardar preferencias y simular funcionalidades que normalmente requerirían un usuario autenticado.

También vas a entender cuándo no conviene usar Local Storage, sobre todo por riesgos de seguridad cuando manejas información sensible.

¿Cómo desplegar el proyecto sin exponer tu API key?

Aquí aparece uno de los retos más curiosos del curso: si ignoraste tu API key en el repositorio de GitHub, ¿cómo haces el deploy sin que termine visible en la consola del navegador?

Te adelanto algo importante: en una aplicación 100% front end, hay poco o nada que puedas hacer para ocultarla por completo, porque el navegador necesita leerla para hacer las peticiones. Lo que sí puedes hacer es entender los riesgos, aplicar buenas prácticas y saber cuándo necesitarías un back end intermedio.

Algunas claves que vas a explorar al desplegar:

Variables de entorno en plataformas de hosting.
Restricciones de dominio configuradas desde el panel de la API.
Diferencia entre claves públicas y claves privadas.

Agarra palomitas, abre tu proyecto del curso anterior y prepárate para convertirlo en una aplicación profesional con optimización, lazy loading, paginación inteligente, Local Storage y un deploy funcional. ¿Qué parte te genera más curiosidad? Cuéntalo en los comentarios.