Los átomos de Jotai son solo funciones

Rate this content
Bookmark
Slides

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

22 min
05 Dec, 2022

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 contener valores y se pueden usar para estados globales, semiglobales o locales. Los átomos de Jotai son definiciones reutilizables que son independientes de React y se pueden usar 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 de estado. Forma un grafo 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 les resulte útil.

Como muchos de ustedes sabrán, la gestión del estado en React es uno de los temas más discutidos en la comunidad. 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 ecosistema. 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 proyectos experimentales. Jotai es uno de mis proyectos de código abierto, pero lo desarrollamos en equipo. Aunque soy el principal desarrollador del código, hay muchos colaboradores, no solo para programar, sino también para la documentación y otras cosas.

Esta charla trata sobre la biblioteca Jotai, que es una solución para la gestión del estado en React. Jotai es una biblioteca basada en átomos, que representan piezas de estado. Los átomos son popularizados por una biblioteca llamada Recoil, pero el concepto no es muy nuevo. El concepto consiste básicamente en formar un grafo de dependencias de piezas de 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 realiza, por ejemplo, con observables para el flujo de datos asíncronos. Los átomos son un poco diferentes de los observables.

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

Short description:

Por lo general, los átomos en Jotai 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 gancho UseAtom es similar a useState y devuelve un valor y una función de actualización. Los átomos se pueden utilizar 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. Solo son definiciones y los valores existen en otro lugar. Lo veremos en esta charla, pero primero veamos cómo se ve el uso de Jotai.

Este es un ejemplo simple que utiliza átomos de Jotai. Tenemos tres átomos, textAtom, textLengthAtom y uppercaseAtom. textAtom tiene un valor inicial HELLO. textLengthAtom tiene una función que devuelve la longitud de textAtom. uppercaseAtom tiene una función que devuelve la cadena en mayúsculas de textAtom. stringAtom y uppercaseAtom dependen de textAtom. Por lo tanto, si cambias textAtom, los otros dos átomos también cambiarán.

Como puedes ver, si cambiamos el texto, quiero decir, si ingresamos un texto en el campo de texto, los tres valores se actualizan en consecuencia. Si te fijas bien, usamos el gancho useAtom que toma un átomo que hemos definido. El gancho useAtom funciona como el gancho useState. Devuelve un valor y una función de actualización. Si el valor cambia, se desencadenará una nueva representación. Puedes cambiar el valor con la función de actualización.

Hay una nota importante que no se muestra en este ejemplo. Si usamos el mismo átomo, useAtom devuelve el mismo valor. Por lo tanto, podemos usar átomos para el estado global. La biblioteca Jotai a menudo se considera 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 parecer 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 React son solo funciones. Este es uno de los componentes más simples. Devuelve una cadena. Por lo general, definimos componentes que devuelven elementos JSX, pero devolver cadenas 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 ambas 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 la invocación no está determinada.

React invocará esta función cuando sea necesario. Es declarativo. Los componentes pueden considerarse funciones declarativas. Sigamos adelante. Los componentes son funciones. De la misma manera, los átomos son funciones.

Este es un ejemplo similar y es una definición de átomo válida. 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 es especialmente útil en TypeScript. En este caso, creará un objeto con la propiedad de lectura, que contiene la función. La función es exactamente la misma que vimos en el componente de texto en la diapositiva anterior. Este es un átomo cuyo valor es el valor de retorno de la función, que es una cadena, hola. Es un átomo estático cuyo valor nunca cambia.

Un átomo estático no es muy útil, ¿entonces cómo agregamos una dependencia? Veamos cómo se ve un componente. Con los componentes 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 el componente doble. El componente doble utilizará el valor del contexto, lo duplicará y lo devolverá. Cada vez 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 declarativo. Lo que declaramos es que el componente doble depende del contexto de conteo. Cómo se invoca la función no está determinado en este punto. ¿Estás de acuerdo con este ejemplo? Entonces, ¿cómo se ve un átomo? Aquí tienes un ejemplo simple 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 ni dónde se almacenan los valores de los átomos. Podemos cambiar las dependencias de los átomos. El átomo cuádruple depende del átomo doble, y el átomo doble depende del átomo de conteo. Son posibles otros patrones. Por ejemplo, un átomo único puede depender de múltiples átomos. Otro ejemplo es que la dependencia de un átomo puede ser condicional. Utilizando estos patrones, podemos definir libremente átomos y crear un grafo de dependencias complejo. Básicamente, hemos cubierto 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. El átomo de conteo es una sintaxis especial que corresponde a crear un contexto en el ejemplo anterior. Aprenderemos sobre esta sintaxis un poco más adelante. 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 el uso del contexto devuelve el valor del contexto. El átomo doble depende del átomo de conteo. Y cuando el átomo de conteo cambie, el átomo doble debe ser reevaluado.

Cuando definimos átomos, no sabemos cuáles son los valores de los átomos ni 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, utilizando la función get, puedes obtener el valor del átomo. Esto es bastante similar a cómo funciona el gancho 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 átomo cuádruple. La función interna devuelve el valor doble del átomo doble, que es el valor cuádruple del átomo de conteo original. El átomo cuádruple depende del átomo doble, y el átomo doble depende del átomo de conteo. Por lo tanto, las dependencias están encadenadas. En la práctica, formarán un árbol o incluso un grafo de dependencias. Ahora hemos aprendido el patrón básico de cómo los átomos forman un grafo de dependencias simple. Son posibles otros patrones. Por ejemplo, un átomo único puede depender de múltiples átomos. Otro ejemplo es que la dependencia de un átomo puede ser condicional. Utilizando estos patrones, podemos definir libremente átomos y crear un grafo de dependencias complejo. Básicamente, hemos cubierto cómo definir átomos en términos de leer sus valores. Veamos cómo podemos actualizar los valores.

5. Actualización de los Valores de los Átomos

Short description:

Para actualizar los valores en Jotai, podemos cambiar la definición de un átomo agregando 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: obtener, establecer 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 charla.

Veamos cómo podemos actualizar los valores. Cambiamos la definición del átomo doble agregando 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. Estas funciones se colocan en las propiedades de lectura y escritura del objeto de átomo resultante. La función de escritura tiene tres parámetros: obtener, establecer 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 modificable. Las funciones de lectura y escritura de los átomos dobles son simétricas, pero no tienen que ser simétricas. Podemos definir esas funciones libremente. Esto abre un patrón llamado átomos de solo escritura, pero está fuera del alcance de esta charla.

6. Definición del Átomo de Conteo y Átomos Primitivos

Short description:

La pieza final que falta es la definición del átomo de conteo. Los átomos primitivos se definen mediante la función de átomo con un único valor inicial. Son las fuentes de datos en el grafo de dependencias.

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

Los átomos primitivos se definen mediante la función de átomo con un único valor inicial. En este caso, cero es el valor inicial. Esta es una sintaxis especial para crear un átomo modificable con un valor inicial. El objeto de configuración del á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 en el átomo mismo.

Hemos aprendido un átomo de solo lectura normal, un átomo modificable y un átomo primitivo. Los átomos de solo lectura son átomos que se calculan a partir de otros átomos. Los átomos modificables son átomos de solo lectura con capacidad de escritura. Los átomos primitivos son átomos modificables especiales que pueden escribir en sí mismos. Forman un grafo de dependencias y los átomos primitivos son la fuente del grafo.

7. Usando Átomos con React

Short description:

Los átomos son definiciones puras 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 a usar 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 y usar un estado global para los valores de los átomos. Sin embargo, en otros casos se pueden usar múltiples Providers.

Al comienzo de esta charla, presenté Jotai como una solución de gestión de estado para React. Como vimos cómo construir átomos, no tienen nada que ver con React. Los átomos son definiciones puras de estado que dependen solo de JavaScript. La función de átomo puede parecer mágica, pero es solo una función auxiliar para crear 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 he estado diciendo, los objetos de átomo son solo definiciones y no contienen valores. Entonces, 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 a usar UseAtom es casi nada para los desarrolladores que ya están familiarizados con UseState.

Veamos el mismo ejemplo que vimos anteriormente. TextAtom es un átomo primitivo, y los otros dos átomos son átomos de solo lectura. Dependenden de TextAtom. Entonces, cuando el valor de TextAtom cambia, los valores de los tres átomos cambian y las actualizaciones se pueden ver en la pantalla. El código en la diapositiva no muestra el componente Provider, pero está ahí en la parte inferior. Sin embargo, en algunos casos, realmente 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 usa un estado global para los valores de los átomos. Es una característica muy útil y se usa a menudo. Si nunca tenemos un componente Provider, teóricamente los átomos pueden contener valores. Entonces, ¿cuál es el punto de separar átomos y valores? Acabo de decir que si hay un Provider en la memoria, podemos omitirlo. Eso significa que para 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 usar sin React en una biblioteca experimental llamada Jotajsx. JotaiSignal y JotaiUncontrolled son otras dos bibliotecas experimentales. Los átomos de Jotai son definiciones de estado independientes del marco. Para los usuarios existentes de Jotai, tengan en cuenta 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 se define una vez. Ahora usamos el componente Counter en dos Providers. Debido a que esos dos Providers tienen valores de átomos diferentes, vemos dos valores diferentes en la pantalla. Veamos cómo funciona. Los Contadores están separados. Hacer clic en ambos extremos afecta solo al Contador en un Provider. Esto es a lo que me refiero. La definición del á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 representación. Necesitamos un componente Provider para cada representación para aislar los estados entre las solicitudes. Las definiciones de átomos se pueden compartir entre las solicitudes, pero los valores de los átomos no. Esto es en realidad hipotético porque en este momento básicamente no hay forma de actualizar los valores de los átomos 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 reemplaza técnicamente las bibliotecas 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 cambiando solo las líneas de importación. No está completo en cuanto a 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 de señal y la otra es para componentes no controlados. Sus implementaciones vienen con trucos, pero también deberían mostrar la prueba del concepto de átomo. En el futuro, la biblioteca Jotai eventualmente expondrá funciones puras que no están vinculadas a React. Y podremos construir más bibliotecas en nuestro ecosistema. Estas tres bibliotecas están alojadas en la organización de GitHub llamada jotailabs. Allí esperamos mejorar las bibliotecas para su 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 independientes del marco. Si ya eres usuario de Jotai, por favor, trata de tener eso en cuenta, 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 documentación. Esperamos comunicarnos con los usuarios y colaboradores. 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

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.
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 Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
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. 
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.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
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 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 Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
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.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
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.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
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
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
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
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
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.
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
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.