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

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

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
Today's Talk introduces TRPC, a library that eliminates the need for code generation and provides type safety and better collaboration between front-end and back-end. TRPC is demonstrated in a Next JS application integrated with Prisma, allowing for easy implementation and interaction with the database. The library allows for seamless usage in the client, with automatic procedure renaming and the ability to call methods without generating types. TRPC's client-server interaction is based on HTTP requests and allows for easy debugging and tracing. The library also provides runtime type check and validation using Zod.
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
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.
Manejo de Cambios Significativos en GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
22 min
Manejo de Cambios Significativos en GraphQL
Top Content
This Talk discusses handling breaking changes in a GraphQL schema, including the use of the deprecated directive to tag fields that should no longer be used. It also covers the process of deploying GraphQL APIs and mobile apps, highlighting the challenges of mobile app release adoption. The Talk emphasizes the importance of making safe upgrades in mobile apps and provides strategies for detecting and handling breaking changes, such as using TypeScript and GraphQL Inspector. Overall, the Talk emphasizes the need to minimize user impact when introducing breaking changes in GraphQL schemas.
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
This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.
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
This Talk discusses the safe handling of dynamic data with TypeScript using JSON Schema and TypeBox. Fastify, a web framework, allows developers to validate incoming data using JSON schema, providing type safety and error handling. TypeBox is a powerful library that allows developers to define JSON schemas and derive static types in TypeScript. The combination of JSON schema, TypeBox, and Fastify provides powerful tools for type safety and validation of dynamic data.
Las APIs están evolucionando. Otra vez.
JSNation 2023JSNation 2023
28 min
Las APIs están evolucionando. Otra vez.
Matteo Collina
Luca Maraschi
2 authors
Technology is a spiral, with foundational ideas resurfacing. Java revolutionized enterprise applications. REST and JSON simplified building APIs and websites. Node.js enabled fast and custom development, leading to the microservices revolution. Platformatic aims to fill the gap in building, managing, and scaling microservices painlessly.

Workshops on related topic

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