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

Shubham Gautam
Shubham Gautam
9 min
12 Dec, 2023

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.

Available in English

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.

3. API del Sistema de Archivos y Ejemplo de Código

Short description:

La API del Sistema de Archivos permite leer, escribir, crear y editar archivos directamente desde aplicaciones web. También facilita la subida y descarga de archivos, permitiendo a los usuarios seleccionar archivos para subir y almacenar archivos descargados localmente. La API opera en un entorno de caja de arena para seguridad, y es beneficiosa para aplicaciones de juegos y educativas que requieren almacenamiento local. Ahora examinemos un ejemplo de código de interacción con la API del Sistema de Archivos.

Puedes leer y escribir data en archivos, puedes crear archivos, editar archivos y puedes hacer todo esto directamente desde tu aplicación web. Ahora hablando de Subidas y Descargas de Archivos, la API del Sistema de Archivos facilita las subidas y descargas de archivos. Los usuarios pueden seleccionar archivos de su dispositivo local para subir, y las aplicaciones pueden almacenar archivos descargados localmente en sus dispositivos de usuario.

Ahora hablando de consideraciones de security, similar a IndexedDB, la API del Sistema de Archivos opera en un entorno de caja de arena para proteger los data del usuario y asegurar que los scripts maliciosos no puedan acceder a archivos sensibles.

Ahora hablando de juegos y contenido interactivo, la API del Sistema de Archivos puede ser vital para aplicaciones de juegos basadas en la web. Permite a los juegos guardar el progreso, los perfiles de usuario y los activos del juego localmente, lo que ayuda a garantizar una experiencia de juego más fluida incluso en escenarios de desconexión o baja conectividad. Si hablamos de aplicaciones educativas e interactivas que implican el almacenamiento de progreso, cuestionarios o contenido interactivo, utilizando la API del Sistema de Archivos, podemos proporcionar una user experience fiable y atractiva.

Ahora veamos un ejemplo de código donde estamos interactuando con la API del Sistema de Archivos. En este ejemplo, estamos abriendo una conexión temporal con la API del Sistema de Archivos, y hemos especificado un límite máximo de 5 MBs. Y en este ejemplo, estamos tratando de acceder al archivo example.txt, y estamos usando un lector de archivos para acceder al contenido del archivo. Así que sigamos adelante, supongo que el tiempo es limitado. Bueno, eso es todo. Gracias a todos por sintonizar y ser parte de esta masterclass. Su interés y apoyo son muy apreciados. Aquí es cómo podemos conectar. Tenemos mi sitio web y también mi LinkedIn.

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

Get rid of your API schemas with tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Get rid of your API schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.
Step aside resolvers: a new approach to GraphQL execution
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.
Handling Breaking Changes in GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
22 min
Handling Breaking Changes in GraphQL
Top Content
Requirements change, but API contracts are forever - I wish! A breaking change is something that is not backwards compatible. This means that a consumer of your API would not be able to use the new version without making a code change themselves. We avoid breaking changes if possible, but there are cases when they are inevitable. It could be something small: like making a mandatory field optional. Or it could be something big: like removing a query or a mutation. In this talk we'll review the types of breaking changes you may encounter and how to deal with them gracefully.
Advanced Patterns for API Management in Large-Scale React Applications
React Advanced Conference 2021React Advanced Conference 2021
20 min
Advanced Patterns for API Management in Large-Scale React Applications
Top Content
In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner.
Safely Handling Dynamic Data with TypeScript
Node Congress 2021Node Congress 2021
29 min
Safely Handling Dynamic Data with TypeScript
TypeScript makes JavaScript safer adding static type definitions. Static definitions are wonderful; they prevent developers from making trivial mistakes ensuring every assignment and invocation is done correctly. A variable typed as a string cannot be assigned a number, and a function expecting three arguments cannot be called with only two. These definitions only exist at build time though; the code that is eventually executed is just JavaScript. But what about the response from an API request? In this talk Ethan Arrowood, Software Engineer 2 @ Microsoft, he will cover various solutions for safely typing dynamic data in TypeScript applications. This talk features popular technologies such as Fastify, JSON Schema, Node.js, and more!
APIs are Evolving. Again.
JSNation 2023JSNation 2023
28 min
APIs are Evolving. Again.
As developers we stand on the shoulders of giants, and it can be helpful to take a look at the past to gain a better perspective. In this talk we’ll briefly explore the past decade of backend development and architectural patterns.
We’ve often ditched technologies in an attempt to make the developer experience frictionless. However we sometimes forget what we can learn from “the good old days”.
What are you building: a monolith, a microservices system or something in between? A shift in how we see things can help us keep moving forwards.

Workshops on related topic

Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Database Workflows & API Development with Prisma
Node Congress 2022Node Congress 2022
98 min
Database Workflows & API Development with Prisma
WorkshopFree
Nikolas Burk
Nikolas Burk
Prisma is an open-source ORM for Node.js and TypeScript. In this workshop, you’ll learn the fundamental Prisma workflows to model data, perform database migrations and query the database to read and write data. You’ll also learn how Prisma fits into your application stack, building a REST API and a GraphQL API from scratch using SQLite as the database.
Table of contents:
- Setting up Prisma, data modeling & migrations- Exploring Prisma Client to query the database- Building REST API routes with Express- Building a GraphQL API with Apollo Server
Best Practices and Patterns for Managing API Requests and States
React Advanced Conference 2022React Advanced Conference 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.
Building GraphQL APIs With The Neo4j GraphQL Library
GraphQL Galaxy 2021GraphQL Galaxy 2021
175 min
Building GraphQL APIs With The Neo4j GraphQL Library
WorkshopFree
William Lyon
William Lyon
This workshop will explore how to build GraphQL APIs backed Neo4j, a native graph database. The Neo4j GraphQL Library allows developers to quickly design and implement fully functional GraphQL APIs without writing any resolvers. This workshop will show how to use the Neo4j GraphQL Library to build a Node.js GraphQL API, including adding custom logic and authorization rules.

Table of contents:
- Overview of GraphQL and building GraphQL APIs
- Building Node.js GraphQL APIs backed a native graph database using the Neo4j GraphQL Library
- Adding custom logic to our GraphQL API using the @cypher schema directive and custom resolvers
- Adding authentication and authorization rules to our GraphQL API