Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica

Rate this content
Bookmark

Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.

Alba Silvente Fuentes
Alba Silvente Fuentes
Roberto Butti
Roberto Butti
174 min
15 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La masterclass de hoy se centró en la creación de un sitio web utilizando SvelteKit y Storyblock CMS. Se cubrieron temas como la instalación de SvelteKit e integración de Storyblock, configuración de SSL para localhost, conexión del SDK de Storyblock con un espacio, recuperación de datos y configuración de preprocesamiento, creación de componentes y estilización con Tailwind, compilación de componentes y resolución de problemas, creación de páginas dinámicas y adición de campos al esquema, trabajo con el servicio de imágenes, y despliegue e internacionalización. La masterclass también tocó temas avanzados como el soporte multilingüe y enfatizó la importancia de estar familiarizado con un buen CMS y marco de trabajo para las oportunidades de empleo.

Available in English

1. Introducción a Gemstack y Headless CMS

Short description:

Hoy vamos a ver cómo crear un sitio Gemstack o en general un sitio web utilizando Svelkit y Storyblock. Storyblock es un CMS que te permite crear y gestionar contenido. Existen diferentes tipos de CMS, incluyendo CMS tradicionales y CMS sin cabeza. Los CMS tradicionales te permiten construir y gestionar sitios web sin codificación, pero la personalización es limitada. Los CMS sin cabeza separan el backend para la gestión de contenido del frontend, dándote más flexibilidad para elegir tu stack frontend. Hoy, nos centraremos en crear y estructurar contenido con Storyblock y construir el frontend con Svelkit.

Hoy vamos a ver cómo crear un sitio Gemstack o en general un sitio web utilizando Svelkit y Storyblock. Storyblock es un CMS, por lo tanto, es una herramienta que puedes usar para crear y gestionar el contenido, pero en el mercado, tenemos diferentes tipos de CMS de sistema de gestión de contenido. Tenemos CMS tradicionales y headless CMS, correcto. Así que, en el pasado, teníamos CMS monolíticos o CMS tradicionales y usábamos una aplicación de software que permitía al usuario o al creador de contenido construir y gestionar un sitio web sin tener que code y por lo tanto era bastante fácil. Pero al final, puedes crear el contenido y puedes entregar el contenido o el sitio web solo para el sitio web. Correcto. Y puedes empezar rápidamente a crear un sitio web con un CMS tradicional, con un CMS monolítico.

Pero al final, si quieres personalizar algo, por ejemplo, en el frontend, tienes que seguir algunas mejores prácticas proporcionadas por el CMS, porque el CMS proporciona el sistema de actualización de plantillas. Y por lo tanto, tienes que seguir sus reglas. Correcto. Algunos ejemplos son, por ejemplo, WordPress, Drupal, Sikore, y así sucesivamente. Correcto. Y normalmente, si quieres gestionar el contenido y también quieres entregar el frontend, tienes que desplegar todo el sistema. Correcto. Así que incluso si estás cambiando un poco en el CMS, tienes que desplegar todo el CMS. Porque, el frontend está estrechamente relacionado con el backend. El backend se utiliza para gestionar el contenido.

Tenemos en el mercado un enfoque diferente. Otro enfoque es, por ejemplo, usar un headless CMS. En este caso, tienes dos partes separadas. Una es el backend solo para gestionar el contenido. Y de hecho, el sistema de gestión de contenido headless es una aplicación de software que permite al usuario y al equipo gestionar el contenido, no para crear el sitio web. Así que, para gestionar el contenido y el proceso. Por ejemplo, crear el contenido, revisar el contenido, previsualizar el contenido y desplegar el contenido. Así que, tienes múltiples herramientas para gestionar el contenido. Y luego, por otro lado, puedes crear tu propio frontend. Y obviamente, en este caso, porque el frontend está totalmente desacoplado del contenido, tienes que integrarlo, ¿verdad? Así que, normalmente, el headless CMS te permite crear el contenido y luego exponer este tipo de contenido, las APIs. Así que, como desarrollador de frontend, tienes la libertad de elegir tu propio framework, SvelteKit o Svelte o Next React o Nuxt y Vue. Así que, tienes la libertad de elegir tu stack de tecnología frontend, y tienes que integrar a través de la API. Entonces, ¿qué proporciona el headless CMS? Normalmente, es una interfaz de administración para gestionar el contenido, almacenar el contenido y luego proporcionar el contenido a través de la API. En este caso, hoy, vamos a crear y estructurar el contenido con Storyblock, así que para la parte de los editores de contenido. Luego, Storyblock expone la API de entrega de contenido. Así que, esto es de serie. Así que, hoy, como desarrollador de frontend, podemos centrarnos en la parte que nos gusta y amamos, así que la parte frontend. Así que, podemos elegir nuestro framework frontend y hoy, obviamente, Svelkit y podemos construir nuestro frontend. Cuando necesitamos el frontend y el contenido, podemos integrar las APIs proporcionadas por el Storyblock. Vamos a utilizar un SDK proporcionado por Storyblock para integrar de una manera fácil las APIs. Así que, veremos lo que necesitamos desde la perspectiva del frontend para integrarnos con Storyblock. Y luego podemos crear nuestras aplicaciones de una manera SvelteKit, correcto, y podemos desplegar también las aplicaciones en algún lugar en la cloud. Por ejemplo, si tenemos tiempo, vamos a desplegar en Netlify, y luego podemos permitir al usuario final consumir nuestras aplicaciones que vamos a construir. Así que, expliqué un poco el pasado CMS tradicional y CMS monolítico. Hoy, vamos a usar un headless CMS. Pero, ¿por qué headless es mejor que el CMS tradicional? Porque tienes más flexibilidad y libertad porque puedes elegir tu stack frontend Probablemente si alguno de ustedes viene de WordPress, probablemente saben que están atrapados con algún stack tecnológico y tienen que usar su sistema de plantillas, ¿verdad? Así que, probablemente como desarrollador frontend, no estás contento porque no puedes usar tu propia herramienta. Otra razón para usar el CMS Endless es por la reutilización de contenido, ¿verdad? Veremos cómo podemos estructurar el contenido y reutilizar el componente que bloquea a través de las páginas. Mejora del performance porque las APIs son proporcionadas por un sistema, en el caso de Storyblock, por CloudFront, así que por un CDN. Y luego puedes centrarte en optimizar el performance del frontend, ¿verdad? Scalability, porque, al final, los endpoints son gestionados por el CMS, porque, normalmente, los CMS son una aplicación SaaS, ¿verdad? Así que está desplegado en la cloud, así que puedes scale de una manera fácil. A prueba de futuro, porque a veces en el pasado, si usaste WordPress, y quieres actualizar WordPress, probablemente tienes que reconstruir el sitio web, principalmente cuando tienes que cambiar para la versión mayor. En este caso, puedes centrarte principalmente en el frontend. Y security y mantenimiento, porque, al final, la interfaz entre el usuario final y el sistema backend está limitada por las APIs, ¿verdad? Así que, en este caso, puedes consumir la API. Las APIs son principalmente de solo lectura, así que puedes tener más security. Y, normalmente, los CMS de nivel enterprise como Storyblock siguen algunas certificaciones, algunas reglas, reglas OWASP. Son ISO 27001. Así que, lo que estoy tratando de decir es que son de nivel enterprise, así que se ocupan de la security. Alguien más verifica la security, y así sucesivamente, ¿verdad? Bueno.

Así que, ahora podemos empezar. Así que, una breve introducción, pero ahora podemos empezar. Y hemos preparado algunos ejercicios. Probablemente, podemos copiar y pegar la URL de este documento que ya hemos preparado, ¿verdad Alba? Sí. Bueno, entonces aquí, puedes, si haces clic, Alba trajo una URL en el chat, si abres el chat, y también abres la URL, tendrás acceso a algunos de nuestros ejercicios. Sí. Por favor, avísanos si tienes acceso, para verificar contigo. Pero estoy bastante seguro de que tendrás acceso. Vale. Lo publicaré por si acaso. Solo para guiarte en este tipo de ejercicio, déjame explicarte un poco. Ahora vamos a empezar a crear un proyecto SvelteKit. Podemos empezar creando un proyecto SvelteKit vacío. Así que porque, por lo que entendí, algunos de ustedes no usaron SvelteKit, así que podemos empezar creando Svelte, por ejemplo, una aplicación Svelte. ¿Estás de acuerdo? Para instalar una aplicación Svelte, creo que podemos usar npm. Así que ahora voy a crear una aplicación SvelteKit Total Empty. Como puedes ver, puedes usar npm, crear Svelte, y luego puedes usar la última versión. Luego puedes crear MyApp. MyApp es la carpeta donde vamos a crear la aplicación. Si quieres, puedes usar tu terminal y luego puedes seguir este tipo de instrucción para hacer lo mismo en tu ordenador local. Si tienes alguna duda o no sabes, por favor levanta la mano o escribe en el chat. Ahora intento ir despacio, sólo para asegurarme de que puedes seguirnos. Con este tipo de comando, podemos crear una aplicación vacía así que podemos responder a algunas preguntas si queremos una aplicación de demostración Svelte, o un proyecto esqueleto, o un proyecto de biblioteca. En este caso, proyecto esqueleto. Luego puedes decidir usar JavaScript JSDoc, o TypeScript, o normal. Por ahora, queremos ver cómo crear una aplicación SvelteKit vacía así que podemos seleccionar JavaScript con comandos JSDoc. Luego podemos añadir algunas herramientas útiles. Por ejemplo, Slink, Prettier, Playwright, y VTest. Los dos primeros son sobre enlace y formateo. Luego también tenemos la oportunidad de instalar algunas herramientas de testing, por ejemplo, como Playwright y VTest. Pero por ahora, personalmente, normalmente elijo Prettier. Puedes elegir más de uno, pero ahora podemos elegir solo uno. Luego podemos hacer clic en Enter. Luego podemos entrar en el nuevo directorio. El nuevo directorio, como puedes ver, tenemos algunos archivos creados por el comando, y luego podemos ir a través de npm install. Estamos instalando los paquetes.

2. Instalación de SvelteKit e Integración de Storyblock

Short description:

En esta parte, aprendemos cómo instalar SvelteKit y entender su estructura. También exploramos la integración de Storyblock CMS utilizando la herramienta Create Demo. La herramienta crea una aplicación SvelteKit vacía con la integración de Storyblock ya configurada. Podemos lanzar la herramienta usando MPX y proporcionar los detalles necesarios. La herramienta configura el proyecto con las dependencias requeridas e instrucciones para la integración. Luego podemos ejecutar el servidor y ver la página simple con contenido de Storyblock. El archivo package.json incluye dependencias adicionales para la integración. Tenemos el componente Story Block en el directorio de rutas. Ahora, podemos proceder a crear un proyecto desde cero con la configuración de Storyblock y recuperar datos de Storyblock.

puedes usar yarn o pmpm, etc. Luego podemos agregar Git, pero por ahora no es importante. Luego podemos ejecutar npm run dev, el servidor. Ejecutando el servidor, tenemos el servidor web en funcionamiento, así que ahora, déjame mostrarte. Esta es la página vacía de nuestra aplicación SvelteKit. Significa que podemos instalar SvelteKit. ¿Por qué quiero crear una aplicación vacía solo para permitirte entender la estructura de una típica aplicación SvelteTask vacía. En este caso, no estamos integrando el CMS, solo estamos instalando la aplicación. Probablemente puedas ver, ponerlo, y también el encabezado. Probablemente puedas ver mi editor, es correcto. Luego podemos ver que tenemos el directorio con el código fuente, y luego tenemos dos archivos, app.d.ts y app.html. Luego tenemos el directorio de rutas, principalmente donde tenemos la página. Veremos un poco más adelante sobre el sistema de enrutamiento, pero por ahora, la página que podemos ver en el navegador está en el archivo pluspage.svelte. Si vamos a cambiar algo aquí, y luego podemos cambiar, por ejemplo, al navegador. Demasiadas pantallas. Podemos abrirlo. Como puedes ver, tenemos el Hola. Es muy fácil, pero nos permite entender la estructura de la aplicación vacía.

Ahora, ¿qué pasa si queremos agregar la integración de Storyblock? Desde el lado de Storyblock, déjame empezar usando nuestra herramienta llamada Create Demo. Create Demo es una herramienta proporcionada por Storyblock que te permite crear de la misma manera que hicimos antes, una aplicación vacía con la integración ya configurada con Storyblock. Significa que vamos a lanzar un comando. Ahora, podemos ver. Luego veremos más o menos la misma estructura, pero con alguna integración con Storyblock. Storyblock es tu CMS. Exactamente, sí. Es el CMS que vamos a usar. Pero hoy, nos centraremos principalmente en la parte de Svelki. En este caso, puedo eliminar, por ejemplo, la aplicación vacía. Porque creamos una aplicación vacía solo como ejemplo, y luego podemos usar nuestra herramienta Create Demo. Para hacer eso, podemos hacer, podemos lanzar de manera más o menos similar a antes. Podemos usar MPX y luego podemos crear el demo. Storyblock create demo con la versión más reciente. Luego queremos crear una carpeta, MyDemo. Luego podemos definir qué framework queremos usar, y hoy estamos usando Svelkit, así que vamos a usar Svelkit. Luego podemos definir qué tipo de gestor de paquetes queremos usar, y es opcional, pero solo para permitirte entender, vamos a definir la región, la región de AWS que podemos usar para el CMS, no para el frontend, para el CMS, para la parte que quieres usar y gestionar. En este caso, mi expectativa es tener una carpeta MyDemo. Tenemos una aplicación Svelkit con algunas dependencias añadidas y algunas instrucciones añadidas para la integración con Storyblock. Más o menos, similar, lo mismo. Podemos ejecutar el sistema, la herramienta nos pide el token de acceso porque si quieres integrar tu frontend con Storyblock, necesitas usar un token de acceso. Por ahora, podemos omitir esta parte porque usaremos el espacio completo. Luego para esta pregunta, podemos decir, veremos más adelante sobre el HTTPS y la herramienta crea el demo. Toma un tiempo porque bajo el capó, el comando toma un clon, mejor clonar el repositorio de GitHub, donde ya tenemos una aplicación Svelkit, una aplicación Svelkit vacía con algunas dependencias para integrar Svelkit y Storyblock. Luego podemos ir al directorio y luego ejecutar npm install y luego ejecutar el servidor. Ahora el servidor está en funcionamiento. En este caso, tenemos este tipo de mensaje porque tenemos la configuración para servir la página a través de HTTPS incluso si estamos en local, ¿de acuerdo? Será muy importante servir la página a través de HTTPS porque la configuración comienza a usar la red telefónica 3G. Y porque usamos la red a través de HTTPS. Veremos por qué en unos minutos. Así que luego podemos aceptar el certificado porque estamos en local. Así que el Vita porque bajo el capó estamos usando un Vita, crea el certificado, el certificado autoasignado para ejecutar localhost. Así que está bien porque la máquina es. Y como puedes ver, tenemos una página muy simple. De acuerdo, una página muy simple con algo de contenido. Por ejemplo, este hola mundo, característica uno, característica dos y característica tres. Y un pequeño spoiler, este tipo de contenido proviene de Storyblock. Así que significa que ya tenemos integración. Ya hemos realizado una integración. Así que déjame hacer lo mismo que hice antes. Así que abriendo el editor y luego ver algo sobre la estructura, ¿verdad? En este caso, tenemos más o menos la misma estructura que antes. Pero en este caso, en el package.json, tenemos algunas dependencias más. Por ejemplo, este es el SDK que proporcionamos para la integración con Story Block. Tenemos, por ejemplo, este complemento que nos permite iniciar el servidor web local a través de HTTPS. Y algunas otras cosas, por ejemplo, porque estamos usando un Tailwind CSS, pero no es obligatorio. Esto es solo un ejemplo, ¿verdad? Luego, en el directorio de rutas, tenemos más archivos que antes, pero al final, como puedes ver, tenemos page.swelt, donde tenemos el componente Story Block. Ahora, vamos a ver cada pieza y comentar esto. Solo para que sepas que a través de la aplicación Create Daemon, tienes la estructura ya configurada, tienes una instalación mínima y tienes algunos archivos ya configurados, pero ahora entendemos que podemos comenzar desde una aplicación SvelteKit vacía. Podemos agregar la integración con Storyblock. Ahora con Alba, puedes tomar el... vamos a crear un proyecto desde cero y con la configuración con Storyblock porque queremos crear el contenido en Storyblock y queremos crear nuestra aplicación SvelteKit que usa y recupera datos de Storyblock. Exactamente. ¿Tienes alguna pregunta hasta ahora? No hay preguntas, de acuerdo. En general, si tienes preguntas mientras explicamos un poco, puedes escribir un mensaje. Sí, pero ahora porque hacemos mucha magia usando algunos comandos, ¿verdad? Ahora podemos hacer lo mismo como si estuvieras siguiendo paso a paso. Así que puedes entender todo el proceso, ¿verdad? Exactamente. Entonces, si quieres, podemos, puedes compartir la pantalla Alba, ¿quieres o? Sí, puedo. Sí, hagámoslo. Así que puedo, de acuerdo, compartir la pantalla, el escritorio también, ese es el correcto. De acuerdo, perfecto. ¿Puedes ver correctamente el tamaño de la pantalla? De acuerdo, genial. Bueno, sí, la idea era que aterricé en la página de Notion que tenemos solo para que sepas que aquí tienes todos los recursos que compartiremos y también el ejercicio que haremos y también las versiones que necesitas tener, por ejemplo, para node, porque nuestro SDK bajo el capó está utilizando la API nativa fetch. Entonces, para admitirlo, debes usar este tipo de versiones o superiores, pero como estamos usando Svelkit, y es moderno, todos usarán este tipo de versión de node. Así que no creo que sea un problema. Y aquí tienes todos los enlaces a todo lo que explicaremos. Y también los repositorios de plantillas que creamos para cada uno de los ejercicios. Tendrás una rama para cada uno de los ejercicios. Así que en caso de que te pierdas, siempre puedes cargar la rama y ponerte al día muy rápido. Y aquí tienes el repositorio que crearemos con todos los ejercicios por ramas, como te dije. Y puedes ir uno por uno y verificar si cambias algo en tu code o lo que sea. Y la versión en vivo del proyecto que crearemos. Que es solo algo básico. Quiero decir, nada extravagante, solo un artículo dentro de un blog y sí, algún tipo de texto.

Watch more workshops on 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.
Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
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
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)

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.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.