El Futuro del Almacenamiento Web: Explorando APIs de Almacenamiento Avanzadas

Rate this content
Bookmark
Slides

¿Estás cansado de depender de técnicas de almacenamiento web anticuadas? ¡Únete a nosotros mientras exploramos los últimos avances en almacenamiento web y gestión de datos que potenciarán tus aplicaciones web! En esta presentación, nos sumergiremos en el mundo de las APIs avanzadas como IndexedDB, CacheStorage, FileSystem API, y más. Compararemos los beneficios y limitaciones de cada API, discutiendo su persistencia, cuota, seguridad y rendimiento. También exploraremos casos de uso del mundo real y discutiremos el almacenamiento web más allá del almacenamiento local y el almacenamiento de sesión

FAQ

IndexedDB es una API de base de datos no SQL de bajo nivel que permite a los sitios web almacenar grandes cantidades de datos estructurados en el lado del cliente. Es crucial para el desarrollo web moderno, permitiendo que las aplicaciones web funcionen de manera eficiente en modo sin conexión y asegurando que los usuarios puedan acceder e interactuar con sus datos incluso sin internet.

Las características avanzadas de IndexedDB incluyen la codificación e indexación eficiente de datos, la gestión de transacciones que aseguran la integridad de los datos y el versionado de la base de datos para manejar actualizaciones del esquema de manera fluida.

El almacenamiento en caché es una característica del navegador que permite a las aplicaciones web almacenar y gestionar recursos como HTML, CSS y JavaScript en caché. Mejora el rendimiento del sitio web y asegura una experiencia de usuario fluida, especialmente en condiciones de red poco fiables, permitiendo el acceso rápido a los recursos guardados.

Las estrategias de almacenamiento en caché incluyen primero en caché, donde los activos se recuperan primero de la caché antes de recurrir a la red, y primero en red, donde se intenta primero la red y se usa la caché como recurso de respaldo. Estas estrategias varían según los requisitos de la aplicación.

La API del sistema de archivos es crucial para interactuar con archivos de usuario, permitiendo crear, leer, escribir y gestionar archivos y directorios en un dispositivo cliente. Es útil para aplicaciones que involucran contenido generado por el usuario como editores de documentos y de imágenes, y para gestionar archivos locales.

Tanto IndexedDB como la API del sistema de archivos operan en un entorno de sandbox para proteger los datos del usuario y aislar el almacenamiento de datos al origen, evitando el acceso de partes no autorizadas y protegiendo contra scripts maliciosos.

Shubham Gautam
Shubham Gautam
9 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy explora tres potentes APIs web: indexedDB, almacenamiento en caché y la API del sistema de archivos. IndexedDB permite la funcionalidad sin conexión y proporciona características avanzadas como codificación e indexación, transacciones, versionado y seguridad. El almacenamiento en caché admite varias estrategias de almacenamiento en caché y espacios de nombres, mientras que la API del sistema de archivos permite un control detallado sobre los archivos, facilitando la carga y descarga de archivos. También se proporciona un ejemplo de código de interacción con la API del sistema de archivos.

1. Introducción a indexedDB y almacenamiento en caché

Short description:

Hoy vamos a explorar tres potentes APIs web: indexedDB, almacenamiento en caché y la API de sistema de archivos. IndexedDB es una base de datos en el lado del cliente que permite que las aplicaciones web funcionen sin conexión y proporciona características avanzadas como codificación e indexación, transacciones, versionado y seguridad. El almacenamiento en caché es una característica del navegador que permite a las aplicaciones web almacenar y gestionar recursos en caché.

Hola a todos, soy Shubham y actualmente soy ingeniero de software en Headon. Hoy vamos a explorar tres potentes APIs web que son fundamentales en la web moderna desarrollo. Primero es indexedDB, luego tenemos almacenamiento en caché, y luego la API de sistema de archivos. En un mundo donde las expectativas del usuario son más altas que nunca, estas APIs abordan aspectos críticos de web development como data persistencia, capacidades sin conexión, performance optimization, y experiencias de usuario sin interrupciones. Así que sin más preámbulos, vamos a sumergirnos.

Bien, comencemos profundizando en indexedDB, que es una potente base de datos en el lado del cliente para web apps. Si tenemos que definir indexedDB, es la abreviatura de base de datos indexada y es una API de base de datos no SQL de bajo nivel, que permite a los sitios web almacenar grandes cantidades de datos estructurados en el lado del cliente. A diferencia de las cookies y el almacenamiento local, está diseñado para almacenar una cantidad de datos más significativa de manera eficiente. Hablando de su papel en el web development, indexedDB juega un papel crucial en la web moderna desarrollo al proporcionar una solución robusta y escalable directamente en el navegador. Uno de sus roles principales es permitir que las aplicaciones web funcionen sin problemas en modo sin conexión. IndexedDB asegura que los usuarios puedan acceder e interactuar con sus datos incluso cuando no hay una conexión a internet disponible. Hablando de las características advanced de IndexedDB, la primera es Codificación e Indexación. IndexedDB destaca en la codificación e indexación de datos de manera eficiente. Puedes crear índices en propiedades específicas de los objetos almacenados en la base de datos. Esto permite una rápida recuperación de datos basada en los atributos indexados. Por ejemplo, si tienes una base de datos de clientes, puedes crear un índice en la propiedad de correo electrónico, lo que ayudará a habilitar búsquedas rápidas utilizando las direcciones de correo electrónico. Ahora hablemos de Transacciones, las transacciones en IndexedDB aseguran la integridad de los datos. Todas las operaciones dentro de una transacción son atómicas, lo que significa que todas las operaciones tienen éxito o todas las operaciones fallan. Esto ayuda a mantener un estado de aplicación consistente. Ahora hablemos de Versionado. IndexedDB soporta versionado de base de datos. Cuando hacemos cambios en la estructura de nuestra base de datos, podemos incrementar el número de versión. Esto nos permite manejar las actualizaciones del esquema de la base de datos de manera fluida. Ahora hablemos de security y privacidad, IndexedDB opera en un entorno seguro de sandbox, lo que ayuda a proteger los datos del usuario de posibles riesgos de seguridad. Aísla el almacenamiento de datos al origen, lo que ayuda a garantizar que los datos estén protegidos y accesibles por partes no autorizadas. Ahora veamos cómo podemos establecer una conexión con IndexedDB. En este ejemplo, estamos abriendo una conexión con una base de datos de clientes y la versión de la base de datos es 1. En este ejemplo, también tenemos un callback de Éxito y un callback de Error.

Ahora pasemos al almacenamiento en caché. Si tenemos que definir el almacenamiento en caché, básicamente es una característica del navegador que permite a las aplicaciones web almacenar y gestionar recursos en caché como HTML, CSS, JavaScript, activos de imagen y otros activos.

2. Almacenamiento en caché y API del sistema de archivos

Short description:

El almacenamiento en caché permite diversas estrategias de almacenamiento en caché, incluyendo primero en caché y primero en red. También soporta espacios de nombres de caché para organizar recursos. El pre-almacenamiento en caché asegura la funcionalidad sin conexión desde la primera carga. El almacenamiento en caché dinámico y la sincronización en segundo plano son valiosos para adaptarse a las acciones del usuario y a las actualizaciones de datos en tiempo real. La API del sistema de archivos permite un control detallado sobre los archivos individuales y es útil para interactuar con los archivos del usuario y gestionar los archivos locales en el lado del cliente.

Está básicamente diseñado para mejorar el rendimiento del sitio web y asegurar una experiencia de usuario fluida, particularmente en condiciones de red poco fiables. Hablando de sus características avanzadas, la primera es la estrategia de almacenamiento en caché. El almacenamiento en caché permite la implementación de diversas estrategias de almacenamiento en caché. La elección de las estrategias depende de los requisitos de la aplicación. Algunas de las estrategias comunes incluyen primero en caché, donde recuperamos los activos de la caché primero y recurrimos a la red si es necesario. Otra es primero en red, donde la aplicación intenta primero la red y usa la caché como recurso de respaldo.

Luego tenemos los espacios de nombres de caché. El almacenamiento en caché básicamente nos permite crear múltiples cachés con diferentes nombres para organizar recursos. Esto puede ser extremadamente útil para la versión o agrupación de activos. Por ejemplo, puedes tener una caché para activos estáticos como imágenes o sus videos y otra espacio de nombres de caché para las respuestas de la API. Hablando de pre-almacenamiento en caché, el pre-almacenamiento en caché es la práctica de almacenar activos esenciales durante la instalación inicial de la activación del trabajador de servicio. Asegura que nuestra aplicación pueda funcionar sin conexión de manera efectiva desde la primera carga.

Hablando de almacenamiento en caché dinámico, además del pre-almacenamiento en caché, el almacenamiento en caché también soporta almacenamiento en caché dinámico. En el almacenamiento en caché dinámico, los recursos se almacenan en caché en función de la interacción del usuario y eventos específicos. Esta flexibilidad permite que nuestra aplicación web se adapte a las acciones del usuario y al contenido cambiante. Hablando de sincronización en segundo plano, el almacenamiento en caché junto con los trabajadores de servicio puede ser utilizado para la sincronización en segundo plano de los datos. Esto significa que los datos pueden ser sincronizados con el servidor incluso cuando la aplicación no está en uso activo o cuando la conexión a internet es intermitente. La sincronización en segundo plano es invaluable para las aplicaciones que dependen de actualizaciones de datos en tiempo real y para proporcionar a los usuarios información actualizada independientemente de su estado de red.

Ahora, tomemos un buen ejemplo para el almacenamiento en caché. En este ejemplo, estamos estableciendo una conexión con el espacio de nombres de caché de imágenes y estamos tratando de recibir imágenes de la caché y si las imágenes no se encuentran en la caché, recuperamos las imágenes de la red, las guardamos en caché y luego devolvemos las imágenes. Ahora, pasemos a la API del sistema de archivos.

Bien, esta API es esencial para trabajar con archivos de usuario y gestionar el acceso a archivos dentro de las aplicaciones web. A diferencia de IndexedDB o almacenamiento en caché, la API del sistema de archivos está diseñada principalmente para el acceso a nivel de archivo, lo que la convierte en una opción fuerte cuando necesitas un control detallado sobre archivos individuales. Si tienes que definir la API del sistema de archivos, es una característica del navegador que permite a las aplicaciones web crear, leer, escribir y gestionar archivos y directorios en un dispositivo cliente. La API del sistema de archivos se ajusta al desarrollo web cuando necesitas interactuar con archivos de usuario, como almacenar contenido generado por el usuario o gestionar archivos locales en el lado del cliente.

Ahora hablando de los beneficios y casos de uso, primero está el acceso y gestión de archivos. Una de las principales ventajas de la API del sistema de archivos es su capacidad para acceder y gestionar archivos en un dispositivo cliente. Esto es particularmente útil para aplicaciones que involucran contenido generado por el usuario como editores de documentos, editores de imágenes, editores de video y más. En segundo lugar, tenemos Entrada y Salida de Archivos. La API del sistema de archivos proporciona potentes capacidades de entrada y salida.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Despídete de tus esquemas de API con tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Despídete de tus esquemas de API con tRPC
¿Sabías que podemos reemplazar los esquemas de API con una biblioteca liviana y segura? Con tRPC, puedes reemplazar fácilmente GraphQL o REST con formas inferidas sin esquemas ni generación de código. En esta charla, entenderemos los beneficios de tRPC y cómo aplicarlo en una aplicación de NextJs. Si quieres reducir la complejidad de tu proyecto, no te puedes perder esta charla.
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
Aunque GraphQL es declarativo, los resolvers operan campo por campo, capa por capa, lo que a menudo resulta en un trabajo innecesario para la lógica de tu negocio, incluso cuando se utilizan técnicas como DataLoader. En esta charla, Benjie presentará su visión de una nueva estrategia de ejecución de GraphQL de propósito general cuyo enfoque holístico podría conducir a ganancias significativas en eficiencia y escalabilidad para todas las APIs de GraphQL.
Manejo de Cambios Significativos en GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
22 min
Manejo de Cambios Significativos en GraphQL
Top Content
Los requisitos cambian, pero los contratos de API son para siempre - ¡Ojalá! Un cambio significativo es algo que no es compatible con versiones anteriores. Esto significa que un consumidor de tu API no podría usar la nueva versión sin hacer un cambio de código ellos mismos. Evitamos cambios significativos si es posible, pero hay casos en los que son inevitables. Podría ser algo pequeño: como hacer un campo obligatorio opcional. O podría ser algo grande: como eliminar una consulta o una mutación. En esta charla revisaremos los tipos de cambios significativos que puedes encontrar y cómo lidiar con ellos de manera elegante.
Patrones avanzados para la gestión de API en aplicaciones React a gran escala
React Advanced Conference 2021React Advanced Conference 2021
20 min
Patrones avanzados para la gestión de API en aplicaciones React a gran escala
Top Content
En esta charla, descubrirás cómo gestionar operaciones asíncronas y cancelación de solicitudes implementando una capa de API mantenible y escalable y mejorándola con una lógica de cancelación desacoplada. También aprenderás cómo manejar diferentes estados de API de una manera limpia y flexible.
Manejo Seguro de Datos Dinámicos con TypeScript
Node Congress 2021Node Congress 2021
29 min
Manejo Seguro de Datos Dinámicos con TypeScript
Top Content
TypeScript hace JavaScript más seguro agregando definiciones de tipo estático. Las definiciones estáticas son maravillosas; evitan que los desarrolladores cometan errores triviales asegurando que cada asignación e invocación se haga correctamente. Una variable tipificada como una cadena no puede ser asignada un número, y una función que espera tres argumentos no puede ser llamada con solo dos. Estas definiciones solo existen en el momento de la compilación; el código que finalmente se ejecuta es solo JavaScript. ¿Pero qué pasa con la respuesta de una solicitud de API? En esta charla, Ethan Arrowood, Ingeniero de Software 2 @ Microsoft, cubrirá varias soluciones para tipificar de manera segura los datos dinámicos en las aplicaciones TypeScript. Esta charla presenta tecnologías populares como Fastify, JSON Schema, Node.js, y más!
Las APIs están evolucionando. Otra vez.
JSNation 2023JSNation 2023
28 min
Las APIs están evolucionando. Otra vez.
Como desarrolladores, nos apoyamos en los hombros de gigantes, y puede ser útil echar un vistazo al pasado para obtener una mejor perspectiva. En esta charla exploraremos brevemente la última década de desarrollo backend y patrones arquitectónicos.
A menudo hemos abandonado tecnologías en un intento de hacer que la experiencia del desarrollador sea sin fricciones. Sin embargo, a veces olvidamos lo que podemos aprender de los 'buenos viejos tiempos'.
¿Qué estás construyendo: un monolito, un sistema de microservicios o algo intermedio? Un cambio en cómo vemos las cosas puede ayudarnos a seguir avanzando.

Workshops on related topic

Construyendo APIs GraphQL sobre Ethereum con The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Construyendo APIs GraphQL sobre Ethereum con The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph es un protocolo de indexación para consultar redes como Ethereum, IPFS y otras blockchains. Cualquiera puede construir y publicar APIs abiertas, llamadas subgrafos, para hacer que los datos sean fácilmente accesibles.

En este masterclass aprenderás cómo construir un subgrafo que indexa datos de blockchain de NFT del contrato inteligente Foundation. Desplegaremos la API y aprenderemos cómo realizar consultas para recuperar datos utilizando diferentes tipos de patrones de acceso a datos, implementando filtros y ordenamiento.

Al final del masterclass, deberías entender cómo construir y desplegar APIs de alto rendimiento en The Graph para indexar datos de cualquier contrato inteligente desplegado en Ethereum.
Práctica con AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Práctica con AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Comienza con AG Grid React Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado una cuadrícula de datos AG Grid React y la habrás personalizado con componentes funcionales de React.- Comenzando e instalando AG Grid- Configurando ordenamiento, filtrado, paginación- Cargando datos en la cuadrícula- La API de la cuadrícula- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la cuadrícula con componentes de React
Flujos de base de datos y desarrollo de API con Prisma
Node Congress 2022Node Congress 2022
98 min
Flujos de base de datos y desarrollo de API con Prisma
WorkshopFree
Nikolas Burk
Nikolas Burk
Prisma es un ORM de código abierto para Node.js y TypeScript. En esta masterclass, aprenderás los flujos de trabajo fundamentales de Prisma para modelar datos, realizar migraciones de base de datos y consultar la base de datos para leer y escribir datos. También aprenderás cómo Prisma se integra en tu stack de aplicaciones, construyendo una API REST y una API GraphQL desde cero utilizando SQLite como base de datos.
Tabla de contenidos:
- Configuración de Prisma, modelado de datos y migraciones- Explorando Prisma Client para consultar la base de datos- Construyendo rutas de API REST con Express- Construyendo una API GraphQL con Apollo Server
Mejores Prácticas y Patrones para Administrar Solicitudes de API y Estados
React Advanced Conference 2022React Advanced Conference 2022
206 min
Mejores Prácticas y Patrones para Administrar Solicitudes de API y Estados
Workshop
Thomas Findlay
Thomas Findlay
Con el surgimiento de frameworks, como React, Vue o Angular, la forma en que se construyen los sitios web ha cambiado a lo largo de los años. Las aplicaciones modernas pueden ser muy dinámicas y realizar múltiples solicitudes de API para poblar un sitio web con contenido actualizado o enviar nuevos datos a un servidor. Sin embargo, este cambio de paradigma ha introducido nuevos problemas con los que los desarrolladores deben lidiar. Cuando una solicitud de API está pendiente, tiene éxito o falla, el usuario debe recibir una retroalimentación significativa. Otros problemas pueden incluir el almacenamiento en caché de datos de API o la sincronización del estado del cliente con el servidor. Todos estos problemas requieren soluciones que deben ser codificadas, pero pueden volverse rápidamente inmanejables y dar como resultado una base de código difícil de ampliar y mantener. En este masterclass, cubriremos cómo manejar las solicitudes de API, los estados de API y la cancelación de solicitudes mediante la implementación de una Capa de API y combinándola con React-Query.
Prerrequisitos: Para aprovechar al máximo este masterclass, debes estar familiarizado con React y Hooks, como useState, useEffect, etc. Si deseas codificar junto con nosotros, asegúrate de tener Git, un editor de código, Node y npm instalados en tu máquina.
Construyendo APIs GraphQL con la biblioteca Neo4j GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
175 min
Construyendo APIs GraphQL con la biblioteca Neo4j GraphQL
WorkshopFree
William Lyon
William Lyon
Este masterclass explorará cómo construir APIs GraphQL respaldadas por Neo4j, una base de datos de grafos nativa. La biblioteca Neo4j GraphQL permite a los desarrolladores diseñar e implementar rápidamente APIs GraphQL completamente funcionales sin escribir ningún resolvedor. Este masterclass mostrará cómo utilizar la biblioteca Neo4j GraphQL para construir una API GraphQL en Node.js, incluyendo la adición de lógica personalizada y reglas de autorización.

Tabla de contenidos:
- Visión general de GraphQL y construcción de APIs GraphQL
- Construcción de APIs GraphQL en Node.js respaldadas por una base de datos de grafos nativa utilizando la biblioteca Neo4j GraphQL
- Adición de lógica personalizada a nuestra API GraphQL utilizando la directiva de esquema @cypher y resolvedores personalizados
- Adición de reglas de autenticación y autorización a nuestra API GraphQL