00:00:00¡Hola a todos! Bienvenidos a otra sesión de la comunidad de Basel.
00:00:29Soy Maya Avendano y soy ingeniera de DX aquí en Basel.
00:00:32Si es su primera vez en una de nuestras sesiones y no pueden ver el chat,
00:00:35no duden en unirse a nuestra plataforma comunitaria en [community.basel.com/live](https://www.google.com/search?q=https://community.basel.com/live).
00:00:41Allí podrán usar el chat y hacer preguntas, lo cual, por cierto, recomendamos mucho.
00:00:45O si nos están viendo por X o cualquier otra plataforma, también pueden usarlas.
00:00:49Tengo muchas ganas de empezar la sesión de hoy porque, como dato curioso,
00:00:53fui desarrolladora de Svelte por varios años y he creado muchísimos proyectos personales con él.
00:00:58Así que soy una gran fan e incluso tengo la camiseta.
00:01:01Así que, para los fans de Svelte y para los que sienten curiosidad,
00:01:06hoy nos acompañan algunos integrantes del equipo de Svelte. Bienvenidos.
00:01:12Hola. ¡Hola a todos! ¿Quieren contarnos un poco sobre quiénes son?
00:01:21Claro, yo primero. Mi nombre es Rich.
00:01:24Llevo 10 años trabajando en Svelte porque empecé el proyecto allá por 2016.
00:01:32Al principio era para usarlo en mi trabajo como periodista de datos,
00:01:38usando JavaScript para ayudar a contar las noticias. Y hace poco más de cuatro años,
00:01:44me mudé a Basel, se convirtió en mi trabajo a tiempo completo y he seguido en ello desde entonces.
00:01:53Sí, creo que nadie más puede decir que lleva tantos años como tú.
00:01:57Creo que yo llevo unos cinco años como mantenedor de Svelte.
00:02:02Bueno, me llamo Simon. También trabajo en Basel, en el equipo de Svelte,
00:02:08y llegué a Svelte a través de un hackathon en mi empresa anterior.
00:02:13Quería probar algo distinto. En aquel entonces, trabajaba principalmente con Angular.
00:02:18Probé Svelte para el hackathon y me enamoré de inmediato, pero también supe:
00:02:22“Vale, no puedo usar esto en mi trabajo diario, ¿de qué otra forma puedo seguir en contacto con Svelte?”
00:02:29Muy de nerd, lo sé. Pero así fue como me convertí en mantenedor a tiempo parcial.
00:02:34Y unos años después, tuve la oportunidad de unirme a Basel para trabajar en ello a tiempo completo.
00:02:39Y bueno, soy feliz desde entonces.
00:02:43Yo soy Elliot. Como me gusta recordarle a Rich de vez en cuando,
00:02:46yo me gradué de la secundaria el año en que él empezó Svelte.
00:02:49Así que no he estado en el mantenimiento por tanto tiempo.
00:02:54Pero empecé, no recuerdo si fue a finales de 2021 o principios de 2022.
00:02:59Fue durante la beta de SvelteKit cuando encontré y me uní a la comunidad de Svelte.
00:03:04Y de hecho terminé entrando a Vercel no mucho después que Rich, creo.
00:03:09Fue como en el otoño de ese mismo año, si no recuerdo mal.
00:03:12Pero trabajé en otras cosas relacionadas con el sitio web de Vercel.
00:03:16Y luego, sorprendentemente, hace ya un año y pico (parece que fue hace mucho menos),
00:03:23pude pasarme al equipo de Svelte. Así que he estado trabajando en ello a tiempo completo desde entonces.
00:03:27Últimamente, lo más genial es que me toca escribir la implementación de SSR asíncrono para Svelte.
00:03:36Ese tipo de cosas son las que me encantan del desarrollo de software, muy técnicas y geniales,
00:03:43y es lo que siempre me ha gustado de Svelte.
00:03:48Increíble. Es genial tenerlos a todos aquí.
00:03:51Para quienes en nuestra audiencia no estén familiarizados, ¿pueden explicar brevemente qué son Svelte y SvelteKit?
00:04:00Podemos intentarlo. Svelte es... bueno, son muchas cosas.
00:04:04Es una comunidad, es un estilo de vida, pero también es un framework de componentes declarativo.
00:04:11Si han usado cosas como React, Vue y demás, estarán familiarizados con el concepto básico:
00:04:15en lugar de escribir “document.createElement” y “setAttribute” y todo eso,
00:04:21describes tu aplicación en términos de componentes declarativos.
00:04:25Y luego el trabajo del framework es tomar esa intención declarativa y traducirla a lo que realmente sucede en pantalla.
00:04:33Svelte es un poco distinto a esos frameworks porque tiene este diseño centrado en la compilación.
00:04:40Básicamente, es un lenguaje que se convierte en JavaScript puro de muy alto rendimiento.
00:04:48En cuanto al uso, es bastante similar a muchos de esos otros frameworks, pero debido a su diseño,
00:04:53podemos hacer las cosas de una manera un poco más agradable y compacta que otros frameworks.
00:04:58Y además de Svelte, que es la capa base, por así decirlo,
00:05:02tenemos este framework que se asienta sobre Svelte llamado SvelteKit,
00:05:08que, si vienen del mundo de React, es algo así como nuestro Next.js.
00:05:13Este añade todo lo demás: enrutamiento, renderizado en el servidor, carga de datos, la herramienta de construcción
00:05:18y todo lo que necesitas si estás creando una aplicación, pero no quieres tener que
00:05:24complicarte la vida montándolo tú mismo.
00:05:28Fabuloso, muchas gracias.
00:05:29Y sé que han estado muy ocupados preparando cosas entre bastidores.
00:05:32Me encantaría saber más sobre lo que han estado haciendo estos últimos meses.
00:05:37Me han dicho que incluso traen algunas demostraciones, ¿es así?
00:05:41Tenemos algunas demos.
00:05:43A ver, ¿debería empezar yo?
00:05:44Creo que por orden tendría más sentido hablar primero del desarrollo de Svelte asíncrono,
00:05:51y luego podemos pasar a las cosas que estamos construyendo sobre eso.
00:05:55Me parece bien.
00:05:55Vale, pues durante el último año o más, quizás, no estoy muy seguro...
00:06:02hemos estado trabajando en lo que llamamos informalmente “Svelte asíncrono”. Si comparto mi pantalla,
00:06:12puedo hacer una pequeña demostración de qué es y luego ver algunos de sus usos.
00:06:20Solo tengo que recordar dónde estaba el botón de compartir pantalla.
00:06:26Pasar por todos los diálogos de permisos.
00:06:28Ténganme paciencia.
00:06:30Compartir pantalla completa.
00:06:33Listo.
00:06:34Vale, creo que ya estoy compartiendo.
00:06:35¿Se ve mi pantalla o sigo todavía en el backstage?
00:06:38Sí, la vemos.
00:06:40Bien, para los que no lo conozcan, esto es Svelte.dev.
00:06:43Este es nuestro sitio web.
00:06:44Aquí está el playground donde pueden probar Svelte sin tener que instalar nada
00:06:49ni pelearse con la línea de comandos.
00:06:51Pueden escribir código directamente aquí.
00:06:53Y este es el playground por defecto que aparece.
00:06:55Voy a hacerlo un poco más grande para que todos puedan ver bien.
00:06:58Aquí tenemos algo de estado.
00:07:03Estas cosas raras se llaman “runes”.
00:07:05Así es como se indica que algo en tu componente de Svelte va a cambiar
00:07:10y que, cuando cambie, necesitaremos volver a renderizar.
00:07:12Tenemos un nombre y un contador (count).
00:07:15Estamos mostrando ese nombre aquí arriba.
00:07:17Y luego vinculamos (bind) el valor de eso al contenido de esto.
00:07:21Así que podemos hacer eso.
00:07:24Y podemos hacer clic en este botón para que los números suban.
00:07:27Cosas muy básicas que cualquier framework
00:07:29puede hacer de una forma u otra.
00:07:35Lo que aporta Svelte asíncrono es la capacidad de usar la palabra clave “await” directamente
00:07:41dentro de tus componentes.
00:07:45Supongamos que... quitemos el nombre y todo eso.
00:07:49Y vamos a convertir esto en un ID que empiece en uno.
00:07:56Lo que voy a hacer es traer unos datos JSON
00:08:01de una fuente externa.
00:08:04Empezaré creando algo que se derive del ID.
00:08:10Así, esta URL se calculará cada vez que cambie el ID.
00:08:16Pueden ver que si pongo la URL aquí, a medida que esto cambia,
00:08:22la URL también cambia.
00:08:24Ahora voy a obtener datos usando esa URL:
00:08:28“my data equals derived”.
00:08:30Y aquí dentro puedo hacer “await fetch URL”.
00:08:36Luego queremos tomar la respuesta y convertirla a JSON.
00:08:41Seguro que todos los que trabajan en desarrollo
00:08:43han visto esto un millón de veces.
00:08:47Y aquí abajo, vamos a crear un bloque de cita (blockquote)
00:09:00para mostrar los datos que estamos trayendo.
00:09:03Como ven, si miramos la...
00:09:06eso se rompió.
00:09:13Esto es lo que vamos a recibir y queremos poder mostrarlo.
00:09:16Así que aquí dentro pondré “data.quote” así.
00:09:21Vaya, algo se ha roto.
00:09:23Simon, Elliott, si ven qué he roto, avísenme.
00:09:28Ah, no, es solo el retraso.
00:09:30Vale.
00:09:31Y debajo de eso, añadiremos el autor de la cita.
00:09:40Y quizás quitemos ese retraso mientras trabajamos en ello.
00:09:44No sé.
00:09:46Ayudaría si lo envolviera entre llaves.
00:09:50Ahora, si hago clic en esto, la cita desaparecerá,
00:09:55buscará nuevos datos y los renderizará.
00:09:58Esto puede parecer muy básico y trivial,
00:10:01pero si miran cómo hay que hacer esto en básicamente cualquier otro framework,
00:10:08se vuelve terriblemente complicado muy rápido.
00:10:10Tienes que tener un estado local y luego
00:10:13tienes que tener un efecto (quizás un “useEffect”
00:10:16o el equivalente en otros frameworks) donde haces el fetch.
00:10:20Cuando el fetch se resuelve, asignas el valor a ese estado local,
00:10:25y tienes que gestionar los errores y todo lo demás.
00:10:27Se vuelve algo realmente complejo.
00:10:32Pero con esto, simplemente funciona.
00:10:36Y si hay un retraso...
00:10:43sigue funcionando perfectamente.
00:10:45Aunque al ver esto podrían pensar: “un momento,
00:10:46si estoy pulsando el botón varias veces,
00:10:49en realidad solo quiero saltar al resultado final”.
00:10:51“No quiero pasar por todos esos pasos intermedios”.
00:10:53Eso también lo podemos hacer.
00:10:54Podemos decir aquí dentro, si importo este ayudante llamado
00:10:58“get abort signal from self” y le paso esa señal al fetch,
00:11:11entonces esta vez, mientras pulso el botón,
00:11:15descartará todas esas peticiones intermedias
00:11:19y saltará directamente a la última,
00:11:21porque las peticiones anteriores se están resolviendo demasiado tarde.
00:11:26Para cuando llegan, ya hemos vuelto a cambiar el ID.
00:11:28Así que estamos cancelando las señales existentes.
00:11:33Muy bien, ¿qué más podemos hacer?
00:11:34Bueno, quizás quiera ver que este botón se actualice de inmediato.
00:11:38Podemos usar “state.eager” para salirnos
00:11:43de la espera asíncrona.
00:11:47Eso también es bastante útil.
00:11:49Y podemos añadir algunos estilos.
00:11:51Podemos poner que los datos están cargando si “effect.pending”
00:11:58es mayor que cero.
00:11:59Y si estamos en un estado de carga,
00:12:04podemos hacer un desvanecimiento mientras se cargan las cosas.
00:12:11Y esto, de nuevo, es algo que si
00:12:13intentaran coordinarlo ustedes mismos,
00:12:15sería endiabladamente difícil.
00:12:17Podemos ir incluso más allá.
00:12:19Digamos que quiero añadir una foto que acompañe a la cita.
00:12:28Podría verse así.
00:12:37Si lo cambio, voy a obtener
00:12:41un montón de fotos distintas.
00:12:42Parece que todas son de portátiles, no sé por qué.
00:12:46Vale, aquí hay una imagen mejor.
00:12:48Aunque notarán que hay
00:12:50un pequeño retraso ahí.
00:12:52Obtenemos los datos de la cita y luego aparece la imagen.
00:12:57Eso es porque renderizamos la imagen
00:12:58y luego tenemos que volver a la red
00:12:59para traer la imagen, y eso no queda muy bien.
00:13:02Así que si reemplazamos eso con un pequeño ayudante
00:13:07de precarga (preload) que voy a importar de mi módulo de utilidades,
00:13:17entonces esta vez veremos que la imagen y la cita
00:13:24aparecen ambas al mismo tiempo.
00:13:27Acabo de descubrir un pequeño error.
00:13:28Tendremos que ir a arreglarlo.
00:13:30Pero captan la idea.
00:13:31Podemos usar “await” dentro de nuestros cálculos
00:13:34y podemos usarlo dentro de nuestra plantilla.
00:13:36Y todas estas cosas están perfectamente coordinadas
00:13:40de una manera que funciona con múltiples componentes,
00:13:44todos trabajando de forma independiente ante los mismos eventos.
00:13:47Funciona con el renderizado en el servidor (SSR).
00:13:49Hace todas estas cosas que, si tuvieras
00:13:52que hacerlas sin Svelte asíncrono,
00:13:55serían sumamente pesadas.
00:13:58Y con esta base, somos capaces de construir
00:14:02cosas muy geniales, de las cuales les cedo la palabra
00:14:05a mis otros dos compañeros para que hablen.
00:14:09Sí.
00:14:10Voy a hacer una demo rápida de las funciones remotas, las cuales
00:14:17que se construirán sobre esta base.
00:14:19Ahora que tenemos funciones asíncronas en Svelte, esto es muy potente.
00:14:24Pero SvelteKit, el meta-framework que está por encima,
00:14:27todavía está en el "viejo mundo", por así decirlo.
00:14:30Tenemos estas funciones de carga que viven en un archivo diferente.
00:14:34Y con eso, realmente no podemos aprovechar todas estas
00:14:38novedades geniales que acabamos de ver.
00:14:41Así que en lo que estamos trabajando ahora es en las funciones remotas.
00:14:45Ya están disponibles en SvelteKit.
00:14:48Son experimentales, pero ya pueden usarlas.
00:14:50Y voy a mostrar la forma más sencilla posible
00:14:55de tener funciones remotas aquí, por falta de tiempo.
00:14:59Lo que voy a hacer es simplemente
00:15:01crear un contador muy, muy simple donde,
00:15:04cada vez que haga clic en el botón, se incremente el valor,
00:15:08pero el conteo residirá en el servidor.
00:15:10Implementaré esto en este archivo counter.remote.ts.
00:15:16Empezaré con una variable de conteo.
00:15:18Y luego pondré algo como "get count".
00:15:20Utilizaremos una consulta de $app/server.
00:15:26Y esta es una consulta remota.
00:15:29Simplemente devolveremos el conteo aquí.
00:15:31Y en el otro lado, podemos hacer uso de eso
00:15:37y decir: await get count del archivo que acabamos de importar.
00:15:44Esta importación parece una importación normal de TypeScript.
00:15:48Lo que ocurre es que estamos importando una función,
00:15:52la llamamos y nos devuelve una promesa.
00:15:54Así que usamos await.
00:15:56Pero, en realidad, esto está cruzando la frontera entre cliente y servidor.
00:16:01Este "get count" vive realmente en el servidor.
00:16:05Lo que sucede en realidad es que el cliente
00:16:08envía una solicitud a un endpoint oculto
00:16:14y recibe los datos de vuelta.
00:16:17Y, por supuesto, también funciona con el renderizado del lado del servidor.
00:16:19En la carga inicial, no hará la petición al backend,
00:16:23sino que lo hará directamente.
00:16:25Ya tenemos el conteo, pero aún no podemos hacer nada
00:16:29con él.
00:16:29Queremos incrementarlo.
00:16:31Así que esta será la otra parte para una función remota.
00:16:34Vamos a implementarlo rápido... nada de Copilot.
00:16:38Este es el comando equivocado.
00:16:40Queremos "command" de $app/server.
00:16:45Y aquí dentro, vamos a actualizar el estado del servidor.
00:16:49Eso por sí solo no ayudará todavía,
00:16:52porque necesitamos indicarle, al ser un comando,
00:16:55que también envíe una actualización.
00:16:58Así que llamamos a get count, nuestra función remota,
00:17:03y le aplicamos un "refresh".
00:17:05Con esto, básicamente le estamos diciendo:
00:17:08haz una mutación de un solo vuelo.
00:17:10Cuando te llamen, incrementa el conteo en uno,
00:17:14y luego envía de vuelta al cliente la información
00:17:19de que, cada vez que se use get count en esta página,
00:17:22debería incrementarse en uno,
00:17:24ya que hay un nuevo estado disponible.
00:17:27Así que, si añado esto aquí,
00:17:29voy a poner un "on click" y simplemente incrementar el conteo.
00:17:37Eso es todo lo que voy a hacer.
00:17:38Parece una llamada a una función normal.
00:17:40Pero insisto, esto en realidad llama al servidor.
00:17:43Y ahora, al hacer clic, se incrementa.
00:17:49Esto ha sido un vistazo muy rápido y superficial
00:17:53a las funciones remotas.
00:17:55Se pueden construir muchas más cosas con ellas.
00:17:58También funcionan de maravilla con la IA.
00:18:01Por ejemplo, cinco minutos antes de empezar la sesión,
00:18:06le pedí a este Copilot: "Oye, constrúyeme
00:18:12un bloque básico con temática de Portal donde
00:18:18quiera mostrar algunas de las funciones remotas".
00:18:20"Y usa Svelte 5 con el MCP, el MCP de Svelte".
00:18:25Elliot hablará un poco más de eso en breve.
00:18:29"Usa eso, usa funciones remotas y usa async".
00:18:32Y básicamente lo hizo a la primera.
00:18:34Esto está pre-renderizado.
00:18:35El bloque está pre-renderizado.
00:18:37Y ahora puedo escribir aquí...
00:18:42guardar por aquí.
00:18:43Y se actualiza.
00:18:49Y, internamente, está haciendo básicamente lo mismo.
00:18:53Repasándolo muy rápido,
00:18:56estamos usando await get posts.
00:18:59Get posts es una función de pre-renderizado,
00:19:01lo que significa que se ejecuta al compilar en lugar
00:19:05de en tiempo de ejecución.
00:19:06Tenemos una sección de comentarios aquí abajo
00:19:12donde cargamos los comentarios y usamos un formulario para
00:19:15publicar un nuevo comentario y demás.
00:19:19Y todo esto usa funciones remotas, sin funciones de carga
00:19:23en ningún lado.
00:19:24Y la IA lo consiguió al primer intento.
00:19:27Y Elliot va a hablar sobre eso con más detalle
00:19:32ahora, me parece.
00:19:34Sí, me parece genial.
00:19:37Tengo que hacer lo mismo que hizo Rich Harris
00:19:41al principio con lo de compartir pantalla.
00:19:46Vale, ya está.
00:19:52Voy a tomarme un minuto para hablarles sobre el desarrollo de IA
00:19:57que hemos estado haciendo últimamente.
00:19:59Y cuando digo "nosotros", quiero aclarar que no me refiero a mí.
00:20:02Me refiero sobre todo a un chico llamado Paolo y a otros
00:20:06de nuestros colaboradores en Svelte.
00:20:09De hecho, casi todo lo relacionado con la IA que hemos hecho
00:20:13ha sido obra de ellos.
00:20:14Así que muchísimas gracias a ellos.
00:20:15Han hecho un trabajo increíble.
00:20:18Y sí, déjenme ampliar esto aquí.
00:20:24Aquí vamos.
00:20:27Podría pasarme mucho tiempo explicando
00:20:28lo que hemos construido para lograrlo,
00:20:31porque tenemos un servidor MCP.
00:20:32Tiene unas funciones muy interesantes.
00:20:36Hemos publicado algunas habilidades.
00:20:38Pero, afortunadamente, no hace falta
00:20:41saber en detalle cómo funciona todo eso,
00:20:43porque también hemos publicado plugins para
00:20:47Open Code y Cloud Code.
00:20:48Voy a instalar el plugin de Open Code aquí,
00:20:52lo cual básicamente significa copiar esta configuración
00:20:55y soltarla en un archivo Open Code.json
00:20:58en tu biblioteca.
00:21:00Y voy a pedirle a Open Code que me construya un sitio con eso.
00:21:06Veremos cómo va.
00:21:10Se lo voy a pedir.
00:21:11He proporcionado algunas imágenes en assets.
00:21:17Déjenme ampliar esto también, por desgracia.
00:21:28Parece que no puedo ampliarlo para ustedes.
00:21:34Ah, ahora sí.
00:21:34Bien.
00:22:00[ESCRIBIENDO]
00:22:06Y vamos a ver qué pasa con eso.
00:22:09Sin errores.
00:22:11Sí, exacto.
00:22:12Eso es muy importante.
00:22:13Si no pones eso al final de tus instrucciones,
00:22:15no funcionan tan bien.
00:22:18Pero mientras esto avanza, les puedo contar
00:22:21un poco sobre lo que han estado trabajando.
00:22:25Si entran en el sitio de Svelte
00:22:28y van a nuestra documentación de IA, verán un resumen de todo.
00:22:32Hemos publicado un MCP, que incluye su propia CLI.
00:22:36Y tiene varios...
00:22:40vaya, lo ha arreglado en los últimos cinco minutos.
00:22:43Se ve diferente a como estaba hace cinco minutos.
00:22:46Pero tenemos varias herramientas que habilita en tu máquina.
00:22:51La mayoría tienen que ver...
00:22:53o las dos primeras sirven para obtener buena información
00:22:58sobre Svelte.
00:22:58Le enseña a tu agente cómo leer la documentación,
00:23:03y concretamente a leerla de tal manera
00:23:05que pueda obtener la información específica
00:23:08que busca sin tener que volcar toda la documentación
00:23:11ni tener que explorarla perdiendo
00:23:12tiempo y contexto y todo eso.
00:23:15Hay un corrector automático de Svelte increíble
00:23:17que han construido, el cual detecta patrones
00:23:21que suelen usar los LLM y que no son buenos, y los corrige.
00:23:26También tiene integración con nuestro Playground
00:23:33que pueden usar aquí mismo.
00:23:37Y la otra cosa genial que tenemos
00:23:39es una de nuestras decisiones de diseño fundamentales
00:23:44al analizar todo este tema de la IA:
00:23:46¿cómo hacemos que esto sea útil tanto para agentes como para personas?
00:23:52No queremos que esto sea algo opaco
00:23:55donde tu agente sepa cosas por arte de magia,
00:23:59pero tú no las sepas
00:24:00y sea difícil entenderlo.
00:24:01Así que, básicamente, todo lo que hacemos,
00:24:04intentamos integrarlo también en la documentación.
00:24:07Y por eso nuestras habilidades publicadas,
00:24:09que forman parte del plugin de Open Code o Cloud Code
00:24:12cuando lo instalas, en realidad
00:24:15publican todo su contenido también en la documentación.
00:24:18Así que siempre pueden saber
00:24:20qué mejores prácticas le estamos indicando a su LLM,
00:24:25leyéndolas ustedes mismos.
00:24:27Y siempre estarán disponibles en nuestro sitio así.
00:24:31Volvamos atrás y veamos cuánto
00:24:34ha procesado esto.
00:24:35No mucho de momento.
00:24:39Bueno, bastante, en realidad.
00:24:45Sí, hay mucho diseño visual en marcha.
00:24:56Supongo que abriré mi localhost
00:25:00y veré qué ha hecho.
00:25:03Nada.
00:25:07Vale, bueno, no quiero retrasar esto
00:25:10mientras esto sigue pensando en todo su proceso.
00:25:12Podría tardar un rato.
00:25:13Así que, si nos queda tiempo al final, volveremos
00:25:15para ver qué ideó el LLM para nuestro negocio
00:25:19artesanal de cañones de patatas.
00:25:20Pero sí, ese es el desarrollo de IA que hemos hecho
00:25:25en los últimos meses.
00:25:26Fantástico.
00:25:32Sí, súper relevante en esta nueva era.
00:25:37Me encantaría saber qué es lo siguiente.
00:25:40¿Qué es lo que más les entusiasma?
00:25:46El próximo lanzamiento será SvelteKit 3.
00:25:51Estamos trabajando activamente en ello en este momento.
00:25:53Pero no va a ser algo enorme con muchísimas funciones nuevas.
00:25:56con muchísimas funciones nuevas.
00:25:57Básicamente es una oportunidad para descartar
00:25:59muchas cosas viejas, como limpiar el terreno
00:26:02para poder construir todas las cosas nuevas y emocionantes.
00:26:06El cambio más grande es que usará la API de entorno
00:26:09ahora que Vite 6 se lanzó hace literalmente dos horas.
00:26:15Y requerirá Svelte 5 como la versión mínima.
00:26:21Así que ya no podrán usar Svelte 4.
00:26:25Y después de eso, nos enfocaremos
00:26:29en estabilizar Svelte asíncrono y las funciones remotas.
00:26:33Suena bien.
00:26:37Y me enteré por ahí que
00:26:41le voy a pasar la palabra a Elliot porque el LLM
00:26:44ha estado preparando algo.
00:26:46¿Quieres mostrarnos lo que tienes?
00:26:47Como suelen pasar estas cosas, decidió terminar
00:26:49justo un milisegundo después de pasar al siguiente tema.
00:26:55Así que, veamos.
00:26:59Sí, aquí está nuestra tienda artesanal de cañones de papas
00:27:03que acabamos de generar con casi 1 dólar en tokens.
00:27:07Y de hecho, revisando el código por encima,
00:27:13hizo un gran trabajo sin hacer nada realmente loco
00:27:17y usando lo que yo consideraría las mejores prácticas de Svelte.
00:27:22Así que pruébenlo.
00:27:25Dígannos qué les parece.
00:27:27Me ha impresionado mucho el trabajo
00:27:29que Paolo y los demás han hecho en todo este tema de la IA.
00:27:33Y nos encantaría seguir mejorando.
00:27:35Así que envíennos sus comentarios cuando los tengan.
00:27:38Gracias.
00:27:40Me encanta, los dioses de las demos están de nuestro lado hoy.
00:27:45¿Qué les parece si abrimos el foro para algunas preguntas?
00:27:47Creo que ya tenemos algunas en el chat.
00:27:51Empezaré yo, ¿les parece?
00:27:53Aquí hay una sobre Funciones Remotas.
00:27:57¿Tendremos streaming para las Funciones Remotas?
00:28:00La experiencia de desarrollo es tan genial.
00:28:03Quiero usarlas en todas partes.
00:28:05Sí, creo que Richard puede responder esto
00:28:06porque estás en esa área.
00:28:10Sí, es curioso que menciones eso.
00:28:12Porque de hecho estoy construyendo una aplicación justo ahora
00:28:15que realmente necesita esta función.
00:28:17Y nosotros... bueno, Simon trabajó en un PR hace un tiempo
00:28:22que implementaba partes de eso.
00:28:23Nuestras ideas sobre el diseño
00:28:28han evolucionado un poco desde entonces.
00:28:31Pero es algo que estamos ansiosos por retomar.
00:28:35Así que sí, tal vez si hiciéramos esto dentro de una semana,
00:28:40podríamos decir: "aquí está el pull request".
00:28:43Aún no llegamos ahí.
00:28:44Pero tengan por seguro que es una prioridad muy alta.
00:28:47Y estamos muy emocionados por esta función.
00:28:49Para quienes no estén familiarizados, básicamente
00:28:51hablamos de tener esencialmente una versión en tiempo real
00:28:55de la función de consulta, donde al solicitar
00:28:59los datos al servidor, este devolverá un iterable asíncrono,
00:29:04el cual, cada vez que haya nuevos datos,
00:29:09los enviará de vuelta al cliente.
00:29:12Así puedes tener datos en tiempo real sin ningún tipo de sondeo
00:29:15ni nada por el estilo.
00:29:16Y en cuanto la página deja de mostrar esos datos,
00:29:21la solicitud se cierra.
00:29:23Y el iterable asíncrono se limpia solo.
00:29:26Es simplemente una forma muy agradable de abordar
00:29:28estos problemas de tiempo real.
00:29:31Sí, estoy muy emocionado por eso.
00:29:33Y para ser totalmente claro, quiero
00:29:35que sepan que lo que Rich quiere decir con "pronto"
00:29:38es que Elliot me está impidiendo
00:29:40trabajar en esto ahora mismo.
00:29:41Estoy esperando a que él termine algo.
00:29:43Así que, en cuanto termine lo que estoy haciendo ahora,
00:29:45nos pondremos con ello.
00:29:46Genial.
00:29:50Tenemos otra pregunta.
00:29:52Y es: ¿por qué elegir Svelte sobre otros frameworks?
00:29:55Obviamente, creemos que es el mejor y más capaz de todos.
00:30:07Pero la verdadera razón para elegir cualquier framework
00:30:11hoy en día es porque
00:30:13lo disfrutas más que a los demás, sinceramente.
00:30:18Mucho de esto tiene más que ver con la preferencia personal
00:30:20que con cualquier otra cosa.
00:30:22Y especialmente ahora, cuando es
00:30:24realmente fácil cambiar entre frameworks,
00:30:28tienes a un mago mágico a tu disposición que te enseña:
00:30:32"Estoy acostumbrado a hacerlo así en Vue.
00:30:35¿Cómo lo haría en Angular?" o lo que sea.
00:30:37Ellos pueden hacer eso.
00:30:38La curva de aprendizaje básicamente se ha aplanado
00:30:43en la actualidad.
00:30:45Así que deberías usar la herramienta con la que seas más productivo
00:30:49y de la cual seas más feliz de usar.
00:30:53Y parte de eso se trata de la comunidad alrededor del proyecto.
00:30:57Parte es sobre la filosofía general del proyecto.
00:31:02Pero lo que no creo que necesites hacer hoy en día
00:31:05es tomar una decisión basada en qué framework puede hacer tal cosa.
00:31:11Porque todos pueden hacer lo mismo,
00:31:13o en qué framework tiene el ecosistema más grande.
00:31:16Porque eso realmente ya no es una preocupación.
00:31:18Así que solo elige el framework que sea más divertido.
00:31:21Y nosotros creemos que, obviamente, ese es Svelte.
00:31:26Fantástica respuesta.
00:31:27Me encanta.
00:31:29Siguiente, alguien pregunta: ¿alguna novedad relacionada con el caché?
00:31:35Sí, creo que esto probablemente se refiere a las funciones remotas.
00:31:38En el contexto de las funciones remotas,
00:31:41aún no tenemos una API de caché.
00:31:45Hay una propuesta interna.
00:31:48Es un trabajo activo.
00:31:51Se dejó a un lado entre todo el otro trabajo en curso.
00:31:55Pero se retomará pronto.
00:31:58Y entonces tendremos una API de caché realmente buena
00:32:01que se integre con las funciones remotas.
00:32:05Increíble.
00:32:06Tenemos una pregunta más ligera.
00:32:08¿Cuál es la ubicación de tus sueños para un Svelte Summit?
00:32:10Oh, vaya.
00:32:13¿Quieren hacer una ronda rápida ahora mismo?
00:32:16Estás silenciado, Elliot.
00:32:22Bueno, si hablamos de cumbres (summits),
00:32:24tenemos el Everest, el K2...
00:32:28No, pero para mí, la ubicación no importa tanto.
00:32:34Porque básicamente estaré pasando el rato
00:32:36con los otros desarrolladores de Svelte.
00:32:38Así que, aunque suene cursi, casi cualquier lugar es genial.
00:32:43Pero Europa es muy cool.
00:32:46Así que casi cualquier lugar por allá
00:32:48es un sitio donde no he estado todavía y me gustaría ir.
00:32:51Siempre me alegra tener una excusa para ir a cualquier lugar del extranjero.
00:32:56Hay una tendencia en el mundo de Svelte
00:33:01de usar el prefijo SV con todo.
00:33:04Así que, sea cual sea la palabra sobre la que estés
00:33:06tratando de construir una librería o un concepto,
00:33:08simplemente le pones SV adelante.
00:33:11Y creo que si realmente nos apoyáramos en eso,
00:33:12entonces tendríamos nuestra conferencia en Svalbard.
00:33:15Genial.
00:33:20Que es como... un archipiélago noruego.
00:33:23¿Acabas de buscar eso en Google ahora mismo?
00:33:27En realidad surgió en una conversación el otro día.
00:33:31Sí, al azar.
00:33:35Sí.
00:33:38Si puedo soñar despierto, creo que mi ubicación ideal
00:33:41sería en un barco, en realidad.
00:33:45Solo en el mar.
00:33:47Buen clima.
00:33:49Y pasar, no sé, tres días en un barco.
00:33:52Eso sería genial.
00:33:55Todo lo anterior suena encantador.
00:33:57Y estoy muy emocionado por el próximo Svelte Summit, sea cuando sea.
00:34:00Y sobre la comunidad y los eventos,
00:34:03tenemos una pregunta: ¿cómo puede la gente
00:34:05involucrarse con Svelte? ¿Algún evento u oportunidad
00:34:07comunitaria?
00:34:11Hay eventos sucediendo todo el tiempo.
00:34:13Si vas a sveltesociety.dev, ahí
00:34:15puedes ver un calendario de eventos.
00:34:16Y también hay muchos recursos sobre las mejores formas
00:34:19de involucrarse, particularmente si no hay algo
00:34:22en tu zona y te interesaría comenzar
00:34:25una sección de Svelte Society, entonces sveltesociety.dev
00:34:28es el lugar para obtener información.
00:34:33Sí, y además, si eres muy nuevo, entra al Discord
00:34:36y simplemente di hola en cualquiera de los canales.
00:34:41También hay canales dedicados para las diversas secciones
00:34:47o localizados.
00:34:49En su mayoría, son referencias a otros canales de Discord
00:34:55en sus respectivos idiomas.
00:34:57Por ejemplo, también hay un canal de Discord
00:35:00de la Svelte Society alemana.
00:35:01Así que sí, solo entra al servidor y al canal,
00:35:06y puedes partir desde ahí.
00:35:08Y por lo demás, el canal relacionado con Svelte
00:35:12también es un lugar agradable para pasar el rato.
00:35:16Sí, la gente de Svelte es encantadora.
00:35:18Así que sí, vayan a verlos.
00:35:22Tenemos otra pregunta relacionada con la IA.
00:35:24Sé que Elliot habló de esto.
00:35:26Alguien preguntó: "Es genial ver a los frameworks adaptarse
00:35:29al mundo de los agentes e IA".
00:35:31"Tengo curiosidad por saber si tienen estadísticas de agentes que eligen Svelte por defecto".
00:35:36No, en realidad no.
00:35:37Podríamos obtener algún tipo de señal
00:35:44sobre eso a través de algo como v0, donde
00:35:46vemos telemetría de ese tipo.
00:35:49Pero Svelte, en general, ha...
00:35:53Bueno, la gente que trabaja en Svelte
00:35:57ha adoptado un enfoque relativamente negativo
00:36:01respecto a recolectar telemetría.
00:36:06Así que casi los únicos datos que tenemos
00:36:08son los que están disponibles públicamente.
00:36:10Podemos mirar las tendencias de descarga de NPM, las cuales
00:36:14creo que se están volviendo locas ahora mismo por alguna extraña razón.
00:36:18Así que tal vez no las tomen como una verdad absoluta.
00:36:20Sí, no se preocupen.
00:36:22Pero sí, realmente no recolectamos ningún dato
00:36:25de nuestros usuarios por razones de privacidad.
00:36:27No queremos estar husmeando en sus máquinas.
00:36:30Así que los datos que obtenemos son los públicos
00:36:35y tal vez algo de información útil a través de algunos canales de Vercel.
00:36:43Curiosamente, si les preguntas a los LLM qué deberías elegir,
00:36:46o cuál es el mejor, Svelte se menciona a menudo.
00:36:51Así que eso es bueno, al menos.
00:36:53Pero si eso se traduce en elegir Svelte,
00:36:56si no lo especificas en tu prompt, esa es otra cuestión.
00:37:01Sí, es muy interesante.
00:37:03Una vez que les pides que piensen en cuál es la herramienta ideal,
00:37:06a menudo dirán Svelte.
00:37:08Pero si no dices: "Quiero que uses este framework"
00:37:11o "Quiero que uses el mejor framework",
00:37:12y solo pides que te hagan una app, generalmente elegirán React por defecto.
00:37:17Y no hay mucho que podamos hacer para cambiar eso.
00:37:21Así que hemos estado centrando nuestra atención
00:37:23en asegurar que para los equipos que sí eligen Svelte,
00:37:27tengan la mejor experiencia posible.
00:37:29Y que los agentes tengan la mejor capacidad posible
00:37:31para navegar por la documentación y detectar errores.
00:37:36Sí, y como se ve en el blog temático de Portal y en el sitio
00:37:42web de Potato Cannon, se están volviendo bastante
00:37:46buenos manejando el contexto, el MCP y demás.
00:37:50Así que sí, se puede llegar bastante lejos y muy rápido con eso ahora.
00:37:56Genial.
00:37:57Sí, es estupendo ver todo el trabajo
00:37:58que están haciendo en eso y también adaptándose
00:38:01tanto a audiencias humanas como a agentes.
00:38:04Y tenemos un par de preguntas más específicas
00:38:06sobre las funciones de Svelte.
00:38:08Una es: ¿está bien tener múltiples llamadas
00:38:11a la misma función remota en el marcado,
00:38:14o deberíamos tener una sola referencia en la etiqueta script?
00:38:17Sí, lo está.
00:38:20Tú estás trabajando en esto ahora mismo, así que cuéntanos.
00:38:24Lo que impide que Rich trabaje en las "live queries"
00:38:26ahora mismo tiene que ver precisamente con esta pregunta.
00:38:29Sí, es totalmente válido llamar a la misma función remota
00:38:35múltiples veces y referenciarla en varios sitios
00:38:39en diferentes lugares.
00:38:41Cuando usas funciones remotas,
00:38:44tu modelo mental para las consultas debería ser algo como:
00:38:46"cuando llamo a una consulta con un argumento,
00:38:50estoy obteniendo una referencia a esa consulta",
00:38:54y la consulta es algo distinto a los datos en sí.
00:38:57Así que si llamo a getUser con el ID uno en cualquier parte de mi app,
00:39:04en realidad voy a obtener la misma instancia de esa consulta
00:39:07en todas partes.
00:39:08Por lo tanto, las llamadas a consultas se deduplican en toda la aplicación
00:39:11para que, como máximo, haya una sola llamada por cada conjunto de argumentos.
00:39:16Diferentes argumentos producen diferentes resultados.
00:39:19Los mismos argumentos producen la misma consulta.
00:39:21Se deduplican en toda la aplicación.
00:39:24Hay algunos detalles extraños en este momento,
00:39:28y eso es en lo que he estado trabajando para arreglar y codificar,
00:39:33haciéndolo un poco más claro
00:39:37durante estas últimas dos semanas.
00:39:39Y espero que esté listo pronto.
00:39:41Pero sí, la respuesta corta es que sí.
00:39:44Simplemente llámalas y úsalas donde quieras.
00:39:47Sí, y para ampliar eso,
00:39:48la razón principal por la que estamos haciendo todo este trabajo
00:39:51con la palabra clave "await" y demás es
00:39:54porque queremos que seas capaz, en la medida de lo posible,
00:39:57de expresar todo lo que tu componente necesita
00:39:59dentro de ese mismo componente.
00:40:00Así que los días de obtener datos aquí arriba y luego
00:40:04pasarlos con cuidado a todos los elementos que los necesitan,
00:40:08eso se va a terminar.
00:40:10Pero como parte de eso, si tienes que tener una referencia a una consulta
00:40:14y luego ir pasándola, entonces realmente
00:40:15no habríamos logrado ese objetivo.
00:40:17Así que la idea es que si este componente necesita algunos datos
00:40:20y este otro componente también los necesita,
00:40:22no necesitan comunicarse entre sí.
00:40:24Simplemente pueden pedirle los datos al sistema
00:40:28a través de la interfaz de consulta.
00:40:29Y el sistema se encarga de asegurar
00:40:32que eso solo resulte en una única petición
00:40:34y que no haya inconsistencias entre esos dos
00:40:36componentes.
00:40:40Increíble, gracias.
00:40:42Y esta pregunta es sobre la API de animaciones y transiciones.
00:40:47¿Hay planeada una remodelación para eso?
00:40:49Dicen: "Me ha parecido complicado pasar 'flip' de un tamaño a otro
00:40:54a través de 'attachments'".
00:40:57Estoy ansioso por trabajar en esto.
00:41:02Llevo mucho tiempo deseándolo.
00:41:04Hay muchísimas cosas por hacer.
00:41:06Sí, todo lo demás se interpone en el camino.
00:41:09Básicamente, cuando diseñamos la API de attachments,
00:41:12fue precisamente con esto en mente.
00:41:16Las transiciones y animaciones están bien.
00:41:19Y están integradas en el framework
00:41:21de una manera que facilita mucho ciertas cosas.
00:41:25Pero en cuanto pasas de cierto umbral,
00:41:28ya no pueden ayudarte realmente.
00:41:29Necesitas más control programático sobre ellas.
00:41:33Y ahí es donde una API programática
00:41:36para definir transiciones y animaciones sería útil.
00:41:42Y la API de attachments es...
00:41:46la idea es que, en el futuro, la API de attachments,
00:41:49en combinación con una API para decir:
00:41:52"Oye, cuando me saquen del DOM,
00:41:54espera un minuto para que pueda hacer un desvanecimiento"
00:41:58o cualquier otra pequeña animación.
00:42:00"Y después ya puedes borrarme del DOM".
00:42:02Eso es lo que permitirá algunos de estos escenarios
00:42:06más avanzados de transiciones y animaciones.
00:42:09Pero simplemente aún no hemos llegado ahí.
00:42:11Está planeado.
00:42:12Va a suceder.
00:42:13Pero no puedo darles una fecha concreta.
00:42:16Desde luego, no será en los próximos dos o tres meses.
00:42:22Bien.
00:42:22Al menos está en el radar.
00:42:24Nos encanta oír eso.
00:42:25Genial.
00:42:25Creo que tenemos tiempo para una pregunta más.
00:42:27La última.
00:42:29Svelte es agnóstico, pero ¿cuál es la base de datos
00:42:32favorita de los miembros del equipo?
00:42:34Otra ronda rápida.
00:42:37SQLite.
00:42:37Usé Neon en el pasado para un experimento rápido,
00:42:47y fue realmente agradable.
00:42:50Sí, SQLite es buena.
00:42:53Lo que realmente estoy esperando es que estos motores de sincronización
00:42:59sean realmente buenos y estén ampliamente disponibles para que
00:43:02podamos tener aplicaciones de tipo "local-first".
00:43:05Y entonces... sinceramente, no me importa
00:43:09qué base de datos use en el backend, esa es mi respuesta corta.
00:43:13Sí, yo creo que...
00:43:15No sé si tengo una favorita porque...
00:43:18cuando preguntas simplemente cuál es tu favorita,
00:43:22hay tantas diferentes porque
00:43:24cada una hace cosas distintas mejor.
00:43:26Así que realmente tienes que saber por qué
00:43:28estás eligiendo una base de datos para decir que es tu favorita.
00:43:31Me parece que cosas como Convex son muy interesantes para el tema
00:43:36del motor de sincronización local-first.
00:43:38Creo que son geniales y tienen muchas cosas buenas.
00:43:41A favor de ellos.
00:43:42Probablemente mi base de datos de propósito general favorita
00:43:45es en realidad Dynamo.
00:43:47Puede ser un poco frustrante acostumbrarse a ella,
00:43:49pero es muy, muy rápida.
00:43:51Y escala increíblemente bien.
00:43:55Pero también me gusta mucho SQL.
00:43:58Así que si puedo hacer que una base de datos SQL funcione para un proyecto,
00:44:04probablemente la elegiré porque mi carrera empezó
00:44:07en el análisis de datos y cosas así.
00:44:09Así que SQL es con lo que crecí, básicamente.
00:44:14Así que no sé si tengo una favorita,
00:44:16pero así es como lo veo.
00:44:20Nivelado.
00:44:20Y tenemos un comentario de Paolo.
00:44:23Sé que lo mencionaron antes.
00:44:24Él dice: "Veo demasiados colores".
00:44:27¿Estamos seguros de que Rich, Simon y Elliot trabajan para Vercel?
00:44:32"Mi silla es negra".
00:44:35Sí, Paolo me estaba presionando para que me pusiera la sudadera de Vercel,
00:44:38pero hace demasiado calor aquí.
00:44:40Muy bien, chicos.
00:44:45Pero la tengo en mi armario y la saco
00:44:48cuando los días son más fríos.
00:44:51Eso es lo que queremos oír, luciendo la marca.
00:44:54Increíble.
00:44:55Sí, estoy muy emocionado por el futuro de Svelte
00:44:58y realmente les agradezco que nos acompañen
00:45:01y por todo su duro trabajo entre bastidores.
00:45:03Muchas gracias también al resto del equipo de Svelte
00:45:05que no está en el directo, los mantenedores de Svelte.
00:45:09Y un saludo también a la maravillosa comunidad de Svelte.
00:45:11Sí, gracias, Rich, Simon, Elliot por acompañarnos hoy.
00:45:16Gracias.
00:45:17Adiós.
00:45:18Ha sido un placer.
00:45:20Vale, y audiencia, no se vayan todavía
00:45:23porque antes de terminar, tenemos una invitada muy especial.
00:45:26Tenemos a Eve, del equipo de educación de Vercel.
00:45:31Hola.
00:45:32¿Cómo va todo?
00:45:33Hola, Eve.
00:45:33Bien.
00:45:34¿Cómo estás?
00:45:35Estoy genial.
00:45:36Gracias.
00:45:36Vaya equipo de cracks tenemos aquí.
00:45:40Sí.
00:45:41Qué lujo.
00:45:44Muy bien.
00:45:45¿Te gustaría hablarnos más sobre la Academy
00:45:47y qué han estado preparando?
00:45:49Sí, me encantaría.
00:45:50Por si no se han enterado, Vercel ahora tiene una Academy.
00:45:55Tenemos 11 cursos disponibles.
00:45:57El más reciente se ha publicado hoy,
00:46:03que es... ¡tachán!, el curso de Svelte en Vercel.
00:46:10El equipo ha sido de gran ayuda para
00:46:13conseguir terminarlo a tiempo.
00:46:15En él, construimos una app de alertas de esquí.
00:46:18Así que si eres esquiador...
00:46:23oh, sí.
00:46:25Ya estoy compartiendo pantalla, voy a ponerlo.
00:46:28Fantástico.
00:46:29Ahí está.
00:46:30Ya lo vemos.
00:46:31Esto es mucho más emocionante.
00:46:34El curso de Svelte en Vercel ya está disponible.
00:46:36En él, vas a construir una aplicación de alertas de esquí.
00:46:40En el mundo actual, si has esquiado este año,
00:46:43sabes que ha sido una temporada un poco difícil.
00:46:47Muy poca nieve.
00:46:48Ha hecho calor en todas partes.
00:46:50Así que es muy importante que te avisen
00:46:52de cuándo es un buen día para esquiar.
00:46:54Y esta es la app que construimos durante el curso
00:46:58para que eso sea posible.
00:46:59Tenemos de todo... puedes programar diferentes alertas
00:47:02para las condiciones específicas que busques
00:47:06de modo que, cuando sea el día ideal, estés allí
00:47:10y no desperdicies la oportunidad.
00:47:13Así que sí, el curso cubre Svelte.
00:47:17¿Cómo lo despliegas en Vercel?
00:47:19¿Cómo usas el AISDK?
00:47:21¿Cómo usas los workflows?
00:47:23Y algunos consejos de producción por el camino.
00:47:27Increíble.
00:47:28Maravilloso.
00:47:29Soy una fiel creyente de que se aprende construyendo.
00:47:31Así que sí, esto es fabuloso.
00:47:33Muchas gracias.
00:47:34Y añadiremos un enlace al curso
00:47:36también en los recursos del directo.
00:47:38Así que gracias por acompañarnos hoy, Eve.
00:47:41Genial.
00:47:41Muchas gracias.
00:47:42Muy bien.
00:47:46Y eso nos lleva al final de nuestra sesión en vivo.
00:47:49Muchas gracias a nuestra comunidad
00:47:51por pasar este tiempo con nosotros.
00:47:52No les voy a mentir, el chat ha estado que arde hoy.
00:47:54Así que es genial ver eso.
00:47:56Sí, esperamos que lo hayan disfrutado.
00:47:58Y en palabras de Rich Harris: "Svelte es un estilo de vida".
00:48:02Así que vayan a probarlo.
00:48:03Vayan a construir más cosas con Svelte.
00:48:05Si quieren unirse a nuestras futuras sesiones comunitarias,
00:48:08pueden encontrar todos los detalles en nuestra plataforma
00:48:11en [community.vercel.com/live](https://community.vercel.com/live).
00:48:13Sí, gracias a todos.
00:48:15Nos vemos.
00:48:16Adiós.