Los Átomos de Jotai Son Simplemente Funciones

Rate this content
Bookmark
Slides

Jotai es una biblioteca de gestión de estado. La hemos estado desarrollando principalmente para React, pero conceptualmente no está vinculada a React. En esta charla, veremos cómo funcionan los átomos de Jotai y aprenderemos sobre el modelo mental que deberíamos tener. Los átomos son una abstracción agnóstica del marco para representar estados, y básicamente son solo funciones. Comprender la abstracción de átomo ayudará a diseñar e implementar estados en sus aplicaciones con Jotai

Daishi Kato
Daishi Kato
22 min
05 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La gestión de estado en React es un tema muy discutido con muchas bibliotecas y soluciones. Jotai es una nueva biblioteca basada en átomos, que representan piezas de estado. Los átomos en Jotai se utilizan para definir el estado sin retener valores y se pueden utilizar para estados globales, semi-globales o locales. Los átomos de Jotai son definiciones reutilizables que son independientes de React y se pueden utilizar sin React en una biblioteca experimental llamada Jotajsx.

Available in English

1. Introducción a la biblioteca Jotai

Short description:

La gestión del estado en React es un tema muy discutido con muchas bibliotecas y soluciones. Jotai es una nueva biblioteca basada en átomos, que representan piezas del estado. Forma un gráfico de dependencias para propagar actualizaciones. El concepto es similar a los observables para el flujo de datos asíncronos, pero los átomos tienen algunas diferencias.

Hola a todos. Gracias por la oportunidad de dar esta charla. Espero que la encuentren útil.

Como muchos de ustedes pueden saber, la state management en React es uno de los temas más discutidos en la community. Hay muchas bibliotecas y soluciones. UseStateHook es una de las soluciones primitivas. Algunas de las bibliotecas populares incluyen Redux, MoveX, XState y Zustand. Proporcionan diferentes funcionalidades para diferentes objetivos. Lo bueno es que los desarrolladores tienen muchas opciones para desarrollar sus aplicaciones. Lo malo es que hay demasiadas opciones. Pero creo que tener muchas opciones sigue siendo bueno para el ecosystem. Si solo hubiera una solución, nos perderíamos muchas ideas nuevas.

Jotai es una nueva biblioteca en este campo. Hola, mi nombre es Daishi Kato. Soy el autor de la biblioteca Jotai. Soy medio desarrollador de código abierto y medio freelancer. Mi software de código abierto es con JavaScript y React. Y mi trabajo también está relacionado con JavaScript y React. Hay bastantes proyectos de código abierto en los que estoy trabajando, incluyendo algunos experimentales. Jotai es uno de mis proyectos de código abierto, pero lo desarrollamos como un equipo. Aunque yo soy el principal desarrollador del code, hay muchos contribuyentes, no solo para la codificación, sino también para la documentation y otras cosas.

Esta charla es sobre la biblioteca Jotai, que es una solución para la state management en React. Jotai es una biblioteca basada en átomos, que representan piezas del estado. Los átomos son popularizados por una biblioteca llamada Recoil, pero el concepto no es muy nuevo. El concepto es básicamente formar un gráfico de dependencias de piezas del estado y propagar actualizaciones. Por ejemplo, supongamos que tenemos tres átomos, A, B y C. A depende de B, B depende de C. Si actualizamos C, tanto B como A se actualizan. Este patrón ya se ha hecho, por ejemplo, con observables para el flujo de data asíncrono. Los átomos son un poco diferentes de los observables.

2. Átomos y Gestión del Estado en la Biblioteca Jyotai

Short description:

Por lo general, los átomos en Jyotai se utilizan para definir el estado sin contener valores. Son como funciones que dependen de otros átomos. Cambiar un átomo desencadena actualizaciones en otros átomos dependientes. El hook UseAtom es similar a useState y devuelve un valor y una función de actualización. Los átomos pueden utilizarse para estados globales, semi-globales o locales.

Por lo general, un objeto observable contendría un valor o tal vez esté inicialmente vacío. Los átomos nunca contendrían valores. Son solo definiciones y los valores existen en otro lugar. Profundizaremos en esto en esta masterclass, pero primero veamos cómo se ve el uso de Jyotai.

Este es un ejemplo sencillo utilizando átomos de Jyotai. Tenemos tres átomos, textAtom, textLengthAtom y uppercaseAtom. textAtom tiene el valor inicial HELLO. textLengthAtom tiene una función que devuelve la longitud de textAtom. uppercaseAtom tiene una función que devuelve de manera similar la cadena de texto de textAtom en mayúsculas. stringAtom y uppercaseAtom ambos dependen de textAtom. Así que si cambias textAtom, los otros dos átomos también cambiarán.

Como puedes ver, si introducimos texto, es decir, si ingresamos un texto en el campo de texto, los tres valores se actualizan en consecuencia. Si observas de cerca, utilizamos el hook useAtom que toma un átomo que hemos definido. El hook UseAtom funciona como el hook useState. Devuelve un valor y una función de actualización. Si el valor cambia, desencadenará un nuevo renderizado. Puedes cambiar el valor con la función de actualización.

Hay una nota importante que no se muestra en este ejemplo. Si utilizamos el mismo átomo, useAtom devuelve el mismo valor. Por lo tanto, podemos usar átomos para el estado global. La biblioteca Jyotai a menudo se considera como una solución de estado global. Podemos usarla para el estado global, pero no es verdaderamente global. Y podemos usarla para estados semi-globales o locales. Esto puede sonar poco intuitivo, pero si piensas en los átomos como funciones, debería tener más sentido. Intentemos hacer una analogía. Todos sabemos que los componentes de React son solo funciones. Este es uno de los componentes más simples. Devuelve una cadena de texto. Por lo general, definimos componentes que devuelven elementos JSX, pero devolver cadenas de texto también es válido. No sabemos exactamente cuándo se invoca esta función.

3. Átomos y Dependencias en la Biblioteca Jotai

Short description:

React invoca funciones de manera declarativa. Los componentes y los átomos son ambos funciones. Los átomos se utilizan para definir valores estáticos. Para agregar una dependencia, podemos usar el patrón de contexto. Los componentes pueden declarar dependencias, pero no se determina la invocación.

React invocará esta función cuando sea necesario. Es declarativo. Se puede decir que los componentes son funciones declarativas. Sigamos adelante. Los componentes son funciones. Del mismo modo, los átomos son funciones.

Este es un ejemplo similar y es una definición válida de átomo. Tenemos una función de envoltura llamada átomo, pero no es muy importante. Es solo una función útil para construir un objeto AtomConfig, que ayuda especialmente en TypeScript. En este caso, creará un objeto con la propiedad read, que contiene la función. La función es exactamente la misma que vimos en el componente de texto en la anterior diapositiva. Este es un átomo cuyo valor es el valor de retorno de la función, que es una cadena, hola. Es, por así decirlo, un átomo estático cuyo valor nunca cambia.

Un átomo estático no es muy útil, ¿así que cómo añadimos una dependencia? Veamos cómo se ve un componente. Con los componentes de React, hay aproximadamente tres patrones para definir dependencias, props, estados y contexto. Tomemos el contexto como ejemplo, porque es bueno para la analogía. En este ejemplo, creamos un contexto de conteo y definimos un componente doble. El componente doble usará el valor del contexto, lo duplicará y lo devolverá. Siempre que el valor del contexto cambie, esperamos que el componente doble devuelva un valor actualizado. Pero no sabemos cuándo se invocará la función del componente, porque es declarativa. Lo que declaramos es que el componente doble depende del contexto de conteo. Cómo se invoca la función no se determina en este punto. ¿Estás de acuerdo con este ejemplo? ¿Cómo se ve un átomo? Aquí tienes un ejemplo sencillo con átomos.

4. Definiciones de Átomos y Dependencias

Short description:

Definimos el átomo de conteo y el átomo doble. La función get devolverá el valor de un átomo. El átomo doble depende del átomo de conteo. Cuando definimos átomos, no sabemos cuáles son los valores de los átomos o incluso dónde se almacenan los valores de los átomos. Podemos cambiar las dependencias de los átomos. QuadrupleAtom depende de doubleAtom, y doubleAtom depende de CountAtom. Algunos patrones más son posibles. Por ejemplo, un solo átomo puede depender de varios átomos. Otro ejemplo es que la dependencia del átomo puede ser condicional. Usando estos patrones, podemos definir libremente átomos y hacer un gráfico de dependencia complejo. Básicamente cubrimos cómo definir átomos en términos de leer sus valores. Veamos cómo podemos actualizar los valores.

Definimos el átomo de conteo y el átomo doble. La definición del átomo de conteo es una sintaxis especial que corresponde a crear contexto en el ejemplo anterior. Aprenderemos sobre esta sintaxis un poco más tarde. Hasta ahora, es una definición de átomo que podemos usar desde otros átomos.

A continuación se muestra la definición del átomo doble. Observa una función llamada get. No la definimos. Será inyectada desde algún lugar. La función get devolverá el valor de un átomo. Es como use context devuelve el valor del contexto. El átomo doble depende del átomo de conteo. Y cuando el átomo de conteo cambia, el átomo doble debería ser reevaluado.

Cuando definimos átomos, no sabemos cuáles son los valores de los átomos o incluso dónde se almacenan los valores de los átomos. Lo que sabemos es que cuando se invoca la función, recibirá la función get, y usando la función get, puedes obtener el valor del átomo. Esto es bastante similar a cómo funciona el hook use context. La diferencia es que en los átomos, la función get se inyecta desde el parámetro de la función, mientras que use context se exporta desde la biblioteca react.

Hay otra diferencia. Podemos cambiar las dependencias de los átomos. Definimos un nuevo átomo llamado quadrupleAtom. La función interna devuelve el valor doble de doubleAtom, que es el valor cuádruple del CountAtom original. QuadrupleAtom depende de doubleAtom, y doubleAtom depende de CountAtom. Así que las dependencias están encadenadas. En la práctica, formará un árbol o incluso un gráfico de dependencias. Ahora aprendimos el patrón básico de cómo los átomos forman un gráfico de dependencia simple. Algunos patrones más son posibles. Por ejemplo, un solo átomo puede depender de varios átomos. Otro ejemplo es que la dependencia del átomo puede ser condicional. Usando estos patrones, podemos definir libremente átomos y hacer un gráfico de dependencia complejo. Básicamente cubrimos cómo definir átomos en términos de leer sus valores. Veamos cómo podemos actualizar los valores.

5. Actualización de Valores de Átomos

Short description:

Para actualizar los valores en Jotai, podemos cambiar la definición de un átomo añadiendo un segundo parámetro. El primer parámetro es la función de lectura, y el segundo parámetro es la función de escritura. La función de escritura tiene tres parámetros: get, set y nuevo valor. Podemos definir estas funciones libremente, lo que permite átomos de solo escritura. Sin embargo, este tema está más allá del alcance de esta masterclass.

Veamos cómo podemos actualizar los valores. Cambiamos la definición del átomo doble añadiendo un segundo parámetro. El primer parámetro se llama función de lectura, y el segundo parámetro se llama función de escritura. Esas funciones simplemente se colocan en las propiedades de lectura y escritura del objeto átomo resultante. La función de escritura tiene tres parámetros, get, set y nuevo valor. En este caso, divide un nuevo valor por 2 y lo establece en el átomo de conteo original. Proporcionar la función de escritura hace que el átomo sea escribible. Las funciones de lectura y escritura de los átomos dobles son simétricas, pero no tienen que serlo. Podemos definir esas funciones libremente. Esto abre un patrón llamado átomos de solo escritura, pero está fuera del alcance de esta masterclass.

6. Definición de Átomo de Cuenta y Átomos Primitivos

Short description:

La pieza final que falta es la definición del átomo de cuenta. Los átomos primitivos se definen mediante la función de átomo con un solo valor inicial. Son las fuentes de datos en el gráfico de dependencia.

Ahora, la pieza final que falta es la definición del átomo de cuenta en la primera línea. Llamamos a estos átomos, átomos primitivos. Desde la perspectiva del gráfico de dependencia, son las fuentes de data.

Los átomos primitivos se definen mediante la función de átomo con un solo valor inicial. En este caso del átomo de cuenta, cero es el valor inicial. Esta es una sintaxis especial para crear un átomo escribible con un valor inicial. El objeto de configuración de átomo resultante tiene tres propiedades, Init, Read y Write. La propiedad Init tiene el valor inicial. Las funciones Read y Write simplemente leen y escriben al auto-átomo.

Hemos aprendido un átomo normal de solo lectura, un átomo escribible y un átomo primitivo. Los átomos de solo lectura son átomos que se calculan a partir de otros átomos. Los átomos escribibles son átomos de solo lectura más la capacidad de escritura. Los átomos primitivos son átomos escribibles especiales que pueden escribirse a sí mismos. Forman un gráfico de dependencia y los átomos primitivos son la fuente del gráfico.

7. Uso de Átomos con React

Short description:

Los átomos son puras definiciones de estado que dependen solo de JavaScript. Para usar átomos en React, necesitamos ProviderComponent y UseAtomHook. ProviderComponent almacena los valores de los átomos, mientras que UseAtomHook recupera el valor actual y la función de actualización. Aprender UseAtom es fácil para los desarrolladores familiarizados con UseState. El ejemplo de código muestra cómo cambian los valores de los átomos y se pueden ver en la pantalla. En algunos casos, se puede omitir el Provider, utilizando el estado global para los valores de los átomos. Sin embargo, en otros casos se pueden usar múltiples Providers.

Al principio de esta masterclass, presenté a Jotai como una solución de state management para React. Como vimos cómo construir átomos, no tienen nada que ver con React. Los átomos son puras definiciones de estado que dependen solo de JavaScript. La función de átomo puede parecer mágica, pero es solo una función auxiliar para hacer un objeto de configuración. Técnicamente, podrías definir el objeto de átomo sin usar la función auxiliar.

Entonces, si los átomos no son cosas de React, ¿cómo podemos usarlos con React? Para usar átomos en React necesitamos dos funciones. Una es ProviderComponent. La otra es UseAtomHook. Como sigo diciendo, los objetos de átomo son solo definiciones y no contienen valores. Por lo tanto, necesitamos un lugar para almacenar los valores de los átomos. Ese es el ProviderComponent. Tiene los valores de todos los átomos bajo el árbol de componentes. Para usar un valor de átomo en el ProviderComponent, usamos UseAtomHook en el componente hijo. Toma un objeto de átomo y devuelve el valor actual en el ProviderComponent y la función de actualización para cambiar el valor en el Provider. El uso de UseAtom es similar a UseState y UseReducer. Por lo tanto, aprender UseAtom es casi nada para los desarrolladores que ya están familiarizados con UseState.

Veamos el mismo ejemplo que vimos antes. TextAtom es un átomo primitivo, y los otros dos átomos son átomos de solo lectura. Dependen de TextAtoms. Entonces, cuando cambia el valor de TextAtom, cambian los valores de los tres átomos, y las actualizaciones se pueden ver en la pantalla. El code en la diapositiva no muestra el componente Provider, pero está allí en la parte inferior. Sin embargo, en algunos casos, podemos omitir el Provider. Para muchos casos de uso, tendríamos un Provider cerca de la raíz del árbol de componentes. Si solo hay un Provider en la memoria, podemos omitirlo. Luego utiliza un estado global para los valores de los átomos. Es una característica muy útil y a menudo utilizada. Si nunca tenemos un componente Provider, teóricamente los átomos pueden contener valores. Entonces, ¿cuál es el punto de separar los átomos y los valores? Acabo de decir que si hay un Provider en la memoria, podemos omitirlo. Eso significa que en otros casos, tener múltiples Providers es significativo y es posible si los átomos no contienen valores. Este es un ejemplo con dos Providers.

8. Átomos en la Biblioteca Jotai y Bibliotecas Experimentales

Short description:

Los átomos en Jotai son definiciones reutilizables que son independientes de React. Se pueden utilizar sin React en una biblioteca experimental llamada Jotajsx. JotaiSignal y JotaiUncontrolled son otras dos bibliotecas experimentales. Los átomos de Jotai son definiciones de estado agnósticas al marco de trabajo. Para los usuarios existentes de Jotai, recuerden que los átomos son como funciones. Se anima a los nuevos usuarios a probar la biblioteca Jotai.

Observa que tenemos un átomo definido, que es CountAtom. El componente Counter también está definido una vez. Ahora usamos el componente Counter en dos Providers. Como esos dos Providers tienen diferentes valores de átomo, vemos dos valores diferentes en pantalla. Veamos cómo funciona. Los Counts están separados. Hacer clic en ambos extremos solo afecta al Count en un Provider. Esto es lo que quiero decir. La definición de átomo es reutilizable, es como una función.

Hay otro caso en el que los átomos no deben contener valores. En el contexto del servidor, hay múltiples solicitudes y cada solicitud inicia una nueva renderización. Necesitamos un componente Provider para cada renderización para aislar los estados entre las solicitudes. Las definiciones de átomo pueden compartirse entre solicitudes, pero los valores de átomo no. Esto es realmente hipotético porque en este momento básicamente no hay forma de actualizar los valores de átomo en el servidor. Dicho esto, se siente bien separar la definición y los valores si manejamos múltiples cosas en un solo espacio de memoria. Y podríamos hacer más cosas en el servidor en el futuro.

Entonces, si los átomos son solo definiciones e independientes de React, ¿podemos usarlos sin React? Para responder a esa pregunta, hice una biblioteca experimental llamada Jotajsx. Es una biblioteca que técnicamente reemplaza las bibliotecas de React y React-dom, ya que la sintaxis es exactamente la misma que el uso normal de Jotai con React. Podemos ejecutar una aplicación Jotai solo cambiando las líneas de importación. No está completa en características y puede contener errores, pero muestra una prueba de concepto. Las otras dos bibliotecas experimentales se llaman JotaiSignal y JotaiUncontrolled. Básicamente funcionan con React, pero la sintaxis es diferente. Una es de estilo signal y la otra es para componentes no controlados. Sus implementaciones vienen con hacks, pero también deberían mostrar la prueba del concepto de Átomo. En el futuro, la biblioteca Jotai eventualmente expondrá funciones vanilla que no están atadas a React. Y podríamos construir más bibliotecas en nuestro ecosistema. Estas tres bibliotecas están alojadas bajo la organización de GitHub llamada jotailabs. Allí esperamos mejorar las bibliotecas para uso práctico y agregar más bibliotecas para experimentos.

En resumen, la conclusión es la siguiente. Los átomos de Jotai son como funciones. Y son definiciones de estado agnósticas al marco de trabajo. Si ya eres usuarios de Jotai, por favor intenta tener eso en mente, lo cual puede ayudar a diseñar átomos. Si eres nuevo en la biblioteca Jotai, por favor pruébala. Tenemos un sitio web en jotai.org y hay algunas documentaciones. Esperamos comunicarnos con los usuarios y contribuyentes. Este es el final de mi charla. Gracias.

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

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.