00:00:00Olá a todos! Bem-vindos a mais uma sessão da comunidade Basel.
00:00:29Eu sou Maya Avendano e sou engenheira de DX aqui na Basel.
00:00:32Se esta é a sua primeira vez em uma de nossas sessões e você não consegue ver o chat,
00:00:35sinta-se à vontade para se juntar a nós em nossa plataforma em [community.basel.com/live](https://www.google.com/search?q=https://community.basel.com/live).
00:00:41Lá você pode usar o chat e fazer perguntas, o que é altamente incentivado, aliás.
00:00:45Ou se estiver assistindo pelo X ou qualquer outra plataforma, sinta-se à vontade para usá-las também.
00:00:49Quanto à sessão de hoje, estou muito ansiosa, porque, curiosidade:
00:00:53fui desenvolvedora Svelte por alguns anos e criei muitos projetos paralelos com ele.
00:00:58Sou uma grande fã e tenho até a camiseta.
00:01:01Então, para os colegas fãs de Svelte e para os curiosos,
00:01:06temos alguns membros da equipe do Svelte aqui hoje. Sejam bem-vindos.
00:01:12Oi. Olá a todos! Querem nos contar um pouco sobre quem são vocês?
00:01:21Claro, eu começo. Meu nome é Rich.
00:01:24Trabalho no Svelte há 10 anos, pois iniciei o projeto lá em 2016.
00:01:32Inicialmente, fiz para usar no meu trabalho como jornalista visual,
00:01:38usando JavaScript para ajudar a contar as notícias. E então, há pouco mais de quatro anos,
00:01:44mudei para a Basel e isso se tornou meu trabalho em tempo integral, e sigo assim desde então.
00:01:53É, acho que ninguém mais pode dizer que tem tantos anos quanto você.
00:01:57Eu acho que tenho uns cinco anos mantendo o Svelte.
00:02:02Bom, meu nome é Simon. Eu também trabalho na Basel no time do Svelte
00:02:08e cheguei ao Svelte através de um hackathon na minha empresa anterior.
00:02:13Eu queria testar algo diferente. Naquela época, eu usava principalmente Angular.
00:02:18Fui de Svelte no hackathon e me apaixonei imediatamente, mas também sabia:
00:02:22“Ok, não posso usar isso no meu dia a dia, então como posso manter contato com o Svelte?”
00:02:29Bem nerd, eu sei. Mas foi assim que me tornei um mantenedor de meio período.
00:02:34E alguns anos depois, tive a oportunidade de entrar na Basel para trabalhar nisso em tempo integral.
00:02:39E, bom, sigo feliz desde então.
00:02:43Eu sou o Elliot. Como gosto de lembrar ao Rich de vez em quando,
00:02:46eu estava me formando no ensino médio no ano em que ele começou o Svelte.
00:02:49Então, não estou na manutenção há tanto tempo assim.
00:02:54Mas eu comecei... não lembro se foi no final de 2021 ou início de 2022.
00:02:59Foi durante o beta do SvelteKit que conheci e entrei para a comunidade Svelte.
00:03:04E acabei começando na Vercel não muito depois do Rich, eu acho.
00:03:09Foi no outono do mesmo ano, se me lembro bem.
00:03:12Mas eu trabalhava em outras coisas relacionadas ao site da Vercel.
00:03:16E então, surpreendentemente, há um ano e alguns meses — parece que faz bem menos tempo —
00:03:23consegui migrar para a equipe do Svelte. Trabalho nisso em tempo integral desde então.
00:03:27Recentemente, a parte legal é que pude escrever a implementação de SSR assíncrono para o Svelte.
00:03:36Esse tipo de coisa é o desenvolvimento de software puro e nerd que eu amo
00:03:43e que sempre amei no Svelte.
00:03:48Incrível. É ótimo ter todos vocês aqui.
00:03:51E para o público que talvez não conheça, podem explicar brevemente o Svelte e o SvelteKit?
00:04:00Certamente podemos tentar. O Svelte é, bem, muitas coisas.
00:04:04É uma comunidade, é um estilo de vida, mas também é um framework de componentes declarativo.
00:04:11Se você já usou coisas como React ou Vue, conhece o conceito básico de que,
00:04:15em vez de escrever “document.createElement” e definir atributos e tudo mais,
00:04:21você descreve seu aplicativo em termos de componentes declarativos.
00:04:25E o trabalho do framework é pegar essa intenção declarativa e traduzi-la no que aparece na tela.
00:04:33O Svelte é um pouco diferente desses frameworks por ter esse design focado primeiro no compilador.
00:04:40Essencialmente, é uma linguagem que é transformada em um JavaScript puro de altíssimo desempenho.
00:04:48Em termos de uso, é bem parecido com outros frameworks, mas devido ao seu design,
00:04:53conseguimos fazer as coisas de um jeito um pouco mais agradável e compacto do que alguns deles.
00:04:58E, além do Svelte, que é a camada base, por assim dizer,
00:05:02temos esse framework que fica acima do Svelte chamado SvelteKit,
00:05:08que, se você conhece o mundo React, é tipo o nosso Next.js.
00:05:13Ele adiciona todo o resto: roteamento, renderização no servidor, carregamento de dados, ferramenta de build
00:05:18e tudo o que você precisa para criar um app, mas sem ter que
00:05:24perder tempo montando tudo sozinho.
00:05:28Fabuloso, muito obrigada.
00:05:29E vocês estiveram bem ocupados preparando novidades nos bastidores.
00:05:32Eu adoraria saber mais sobre o que têm feito nos últimos meses.
00:05:37Ouvi dizer que vocês têm algumas demos também?
00:05:41Temos algumas demos, sim.
00:05:43Digo, devo começar?
00:05:44Porque acho que, por uma questão de sequência, faria mais sentido falar sobre o desenvolvimento do Svelte Assíncrono,
00:05:51e depois podemos passar para as coisas que estamos construindo em cima disso.
00:05:55Parece ótimo.
00:05:55Certo, então, há mais de um ano, talvez, não tenho certeza exata...
00:06:02estamos trabalhando no que chamamos informalmente de Svelte assíncrono. Talvez, se eu compartilhar minha tela,
00:06:12eu possa fazer uma pequena demo disso, e depois passamos para alguns usos do Svelte Assíncrono.
00:06:20Só preciso lembrar onde fica o botão de compartilhar tela.
00:06:26Passar por todas as janelas de permissão.
00:06:28Aguardem um instante.
00:06:30Compartilhar a tela inteira.
00:06:33Pronto.
00:06:34Ok, acho que estou compartilhando minha tela.
00:06:35Estou compartilhando ou ainda está nos bastidores?
00:06:38Sim, estamos vendo.
00:06:40Ok, para quem não conhece, este é o Svelte.dev.
00:06:43Este é o nosso site.
00:06:44Este é o playground onde você pode testar o Svelte sem precisar instalar nada
00:06:49ou lidar com a linha de comando.
00:06:51Você pode escrever o código diretamente aqui.
00:06:53E este é o playground padrão que aparece.
00:06:55Vou aumentar um pouco para que todos consigam ver.
00:06:58Aqui temos um estado.
00:07:03Essas coisas engraçadas são chamadas de “runes”.
00:07:05É assim que você diz que algo no seu componente Svelte vai mudar,
00:07:10e que, quando mudar, precisaremos fazer uma nova renderização.
00:07:12Então temos um nome e uma contagem.
00:07:15E estamos exibindo esse nome bem aqui.
00:07:17E vinculando o valor dele ao conteúdo disso aqui.
00:07:21Podemos fazer isso.
00:07:24E clicar neste botão fará os números subirem.
00:07:27Coisas bem simples que qualquer framework
00:07:29consegue fazer de uma forma ou de outra.
00:07:35O que o Svelte Assíncrono adiciona é a capacidade de usar a palavra-chave “await” diretamente
00:07:41dentro dos seus componentes.
00:07:45Então, digamos... vamos tirar o nome e tudo isso.
00:07:49E vamos transformar isso em um ID e começar pelo um.
00:07:56E o que vou fazer é buscar um JSON
00:08:01de uma fonte externa.
00:08:04Vou começar criando algo que seja derivado do ID.
00:08:10Essa URL será recalculada sempre que o ID mudar.
00:08:16E você pode ver que se eu colocar a URL aqui, conforme o ID muda,
00:08:22a URL também muda.
00:08:24E então vou buscar os dados usando essa URL,
00:08:28meus dados serão iguais a “derived”.
00:08:30E aqui dentro, posso fazer “await fetch(URL)”.
00:08:36E então queremos pegar a resposta e transformá-la em JSON.
00:08:41Tenho certeza de que todos já viram esse tipo de coisa
00:08:43um milhão de vezes se trabalham com desenvolvimento.
00:08:47E aqui embaixo, vamos criar um “blockquote”
00:09:00e mostrar os dados que estamos puxando.
00:09:03Dá para ver que, se olharmos para...
00:09:06isso está quebrado.
00:09:13Isso é o que vamos receber, e queremos poder exibir.
00:09:16Então, aqui dentro, vou colocar “data.quote” assim.
00:09:21Ah, algo quebrou.
00:09:23Simon, Elliott, se virem o que eu quebrei, podem falar.
00:09:28Ah, não, é apenas o atraso no carregamento.
00:09:30Ok.
00:09:31E abaixo disso, adicionaremos o autor da citação.
00:09:40E talvez eu remova esse atraso enquanto trabalhamos nisso.
00:09:44Não sei.
00:09:46Ajudaria se eu envolvesse isso em chaves.
00:09:50E agora, se eu clicar nisso, ele vai sumir,
00:09:55buscar novos dados e renderizá-los.
00:09:58Isso pode parecer bem básico e trivial,
00:10:01mas se você olhar como tem que fazer isso em quase todos os outros frameworks,
00:10:08rapidamente se torna assustadoramente complicado.
00:10:10Você precisa ter um estado local e, então,
00:10:13ter um efeito — que pode ser
00:10:16o “useEffect” ou equivalente em outros frameworks — onde você faz o fetch.
00:10:20E quando o fetch é resolvido, você atribui ao estado local,
00:10:25além de ter que lidar com erros e tudo mais.
00:10:27E acaba ficando bem complexo.
00:10:32Mas com isso, simplesmente funciona.
00:10:36E se houver um atraso...
00:10:43continua funcionando.
00:10:45Embora você possa ver isso e pensar: espera aí,
00:10:46se estou clicando no botão várias vezes,
00:10:49eu só quero pular para o resultado final.
00:10:51Não quero passar por tudo isso no meio.
00:10:53Podemos fazer isso também.
00:10:54Podemos dizer aqui dentro, se eu importar este auxiliar chamado
00:10:58“getAbortSignalFromSelf”, e passar esse sinal para o fetch,
00:11:11então desta vez, conforme eu clico no botão,
00:11:15ele vai descartar todas as requisições intermediárias
00:11:19e pular direto para a última,
00:11:21porque as requisições anteriores estão sendo resolvidas tarde demais.
00:11:26E a essa altura, já mudamos o ID novamente.
00:11:28Então estamos cancelando os sinais existentes.
00:11:33Certo, o que mais podemos fazer?
00:11:34Bem, talvez eu queira ver o botão atualizar imediatamente.
00:11:38Podemos usar “state.eager” para sair
00:11:43da espera assíncrona.
00:11:47Isso também é bem útil.
00:11:49E podemos adicionar estilos.
00:11:51Podemos dizer que o carregamento de dados é igual a “effect.pending”
00:11:58sendo maior que zero.
00:11:59E então, se estivermos em um estado de carregamento,
00:12:04podemos aplicar um esmaecimento enquanto carregamos as coisas.
00:12:11E isso, novamente, é algo que, se você
00:12:13tentasse coordenar por conta própria,
00:12:15seria extremamente difícil.
00:12:17Podemos ir além.
00:12:19Digamos que eu queira adicionar uma foto para acompanhar a citação.
00:12:28Poderia ser algo assim.
00:12:37Se eu mudar,
00:12:41vou ter várias fotos diferentes.
00:12:42Pelo visto todas de notebooks, não sei por quê.
00:12:46Ok, aqui tem uma imagem melhor.
00:12:48Mas notem que há um pequeno atraso ali.
00:12:50Recebemos os dados da citação e depois a imagem aparece.
00:12:52Isso acontece porque renderizamos a imagem
00:12:57e depois temos que voltar à rede para buscá-la,
00:12:58o que não é o ideal.
00:12:59Então, se substituirmos isso por um pequeno auxiliar de
00:13:02que vou importar do meu módulo de utilitários,
00:13:07제 utils 모듈에서 가져올 헬퍼 함수인데,
00:13:17então, desta vez, veremos que a imagem e a citação
00:13:24aparecem ao mesmo tempo.
00:13:27Acabei de descobrir um pequeno bug.
00:13:28Teremos que corrigi-lo.
00:13:30Mas vocês entenderam a ideia.
00:13:31Podemos usar o “await” dentro das nossas computações
00:13:34e dentro do nosso template.
00:13:36E todas essas coisas são coordenadas perfeitamente
00:13:40de uma forma que funciona com múltiplos componentes,
00:13:44todos trabalhando de forma independente em resposta aos mesmos eventos.
00:13:47Funciona com renderização no servidor (SSR).
00:13:49Faz todas essas coisas que, se você
00:13:52tivesse que fazer sem o Svelte Assíncrono,
00:13:55seria extremamente penoso.
00:13:58E com essa base, somos capazes de construir
00:14:02coisas bem legais, e vou passar a palavra
00:14:05para os outros dois falarem sobre isso.
00:14:09Sim.
00:14:10Vou fazer uma demonstração rápida das funções remotas, que
00:14:17que serão construídas sobre isso.
00:14:19Agora que temos funções assíncronas no Svelte, isso é muito poderoso.
00:14:24Mas o SvelteKit, o meta-framework acima dele,
00:14:27ainda está, por assim dizer, no mundo antigo.
00:14:30Temos essas funções de carregamento que ficam em um arquivo diferente.
00:14:34Com isso, não conseguimos aproveitar todas essas
00:14:38coisas novas e legais que acabamos de ver.
00:14:41Então, o que estamos desenvolvendo agora são as funções remotas.
00:14:45Elas já estão disponíveis no SvelteKit.
00:14:48São experimentais, mas você já pode usá-las.
00:14:50Vou mostrar a maneira mais simples possível
00:14:55de ter funções remotas aqui, para poupar tempo.
00:14:59O que vou fazer é criar
00:15:01um contador muito, muito simples, onde
00:15:04sempre que eu clicar no botão, ele incrementará a contagem,
00:15:08mas o valor da contagem ficará no servidor.
00:15:10Vou implementar isso neste arquivo counter.remote.ts.
00:15:16Vou começar definindo a contagem.
00:15:18E então algo como "get count".
00:15:20Usaremos uma consulta de $app/server.
00:15:26E esta é uma consulta remota.
00:15:29E apenas retornaremos o valor da contagem aqui.
00:15:31Do outro lado, podemos então utilizar isso
00:15:37e dizer: await get count do arquivo que acabamos de importar.
00:15:44Essa importação parece uma importação comum de TypeScript.
00:15:48A questão é que estamos importando uma função,
00:15:52chamando-a, e ela retorna uma promessa.
00:15:54Por isso, usamos o await.
00:15:56Mas, na verdade, isso está cruzando a fronteira entre cliente e servidor.
00:16:01Esse "get count" realmente reside no servidor.
00:16:05O que está acontecendo na prática é que o cliente
00:16:08envia uma requisição para um endpoint oculto
00:16:14e recebe os dados de volta de lá.
00:16:17E, claro, funciona com renderização no lado do servidor.
00:16:19No carregamento inicial, ele não fará a requisição ao backend,
00:16:23mas processará diretamente.
00:16:25Agora temos a contagem, mas ainda não podemos fazer nada
00:16:29com ela.
00:16:29Queremos incrementá-la.
00:16:31Então, esta será a outra função remota.
00:16:34Vamos implementar rapidinho — sem copilot.
00:16:38Este é o comando errado.
00:16:40Queremos o comando de $app/server.
00:16:45E aqui, vamos apenas atualizar o estado do nosso servidor.
00:16:49Isso por si só ainda não ajuda,
00:16:52porque, por ser um comando, também precisamos dizer a ele
00:16:55para enviar uma atualização junto.
00:16:58Então, chamamos o get count, nossa função remota,
00:17:03e executamos o refresh nela.
00:17:05Com isso, basicamente dizemos:
00:17:08"faça uma mutação de voo único".
00:17:10Quando for chamado, incremente a contagem em um,
00:17:14e então envie de volta para o cliente a informação
00:17:19de que, sempre que o get count for usado nesta página,
00:17:22ele deve agora ser incrementado em um,
00:17:24pois há um novo estado disponível.
00:17:27Se eu adicionar isso aqui agora,
00:17:29vou colocar um on click para apenas incrementar a contagem.
00:17:37É só isso que vou fazer.
00:17:38Parece uma chamada de função comum.
00:17:40Mas, repetindo, isso na verdade chama o servidor.
00:17:43E agora, quando clico, estou incrementando o valor.
00:17:49Isso foi uma prévia bem rápida e superficial
00:17:53sobre as funções remotas.
00:17:55Dá para construir muito mais coisas com elas.
00:17:58Também funciona perfeitamente com IA.
00:18:01Por exemplo, cinco minutos antes da sessão começar,
00:18:06pedi ao copilot: "ei, construa para mim
00:18:12um bloco básico com o tema do jogo Portal onde
00:18:18eu queira mostrar algumas funções remotas."
00:18:20"Você deve usar Svelte 5 com o MCP do Svelte."
00:18:25O Elliot vai falar um pouco sobre isso logo mais.
00:18:29"Use isso, funções remotas e funções assíncronas."
00:18:32E ele basicamente acertou de primeira.
00:18:34Isso aqui é pré-renderizado.
00:18:35O bloco é pré-renderizado.
00:18:37E eu posso digitar aqui...
00:18:42salvar por aqui.
00:18:43E ele atualiza.
00:18:49Por baixo dos panos, está fazendo basicamente a mesma coisa.
00:18:53Dando uma olhada rápida nisso,
00:18:56estamos usando await get posts.
00:18:59Get posts é uma função de pré-renderização,
00:19:01o que significa que é executada no momento da compilação
00:19:05em vez de ser no tempo de execução.
00:19:06Temos uma seção de comentários aqui embaixo,
00:19:12onde carregamos os comentários e usamos um formulário para
00:19:15postar um novo comentário e assim por diante.
00:19:19Tudo isso usando funções remotas, sem funções de carga
00:19:23em lugar nenhum.
00:19:24E a IA fez isso de primeira.
00:19:27O Elliot vai falar um pouco mais sobre isso detalhadamente
00:19:32agora, eu acho.
00:19:34Sim, parece ótimo.
00:19:37Tenho que fazer a mesma coisa que o Rich Harris fez
00:19:41no começo para compartilhar a tela.
00:19:46Ok, pronto.
00:19:52Vou dedicar um minuto para falar com vocês sobre o desenvolvimento
00:19:57de IA que temos feito recentemente.
00:19:59E quando digo "nós", quero deixar claro que não me refiro a mim.
00:20:02Refiro-me principalmente a um cara chamado Paolo e alguns outros
00:20:06colaboradores nossos no Svelte.
00:20:09Na verdade, a maior parte das coisas relacionadas à IA que fizemos recentemente
00:20:13veio deles.
00:20:14Então, um enorme obrigado a eles.
00:20:15Eles fizeram um trabalho incrível.
00:20:18E sim, deixem-me aumentar o zoom aqui.
00:20:24Pronto.
00:20:27Eu poderia levar muito tempo explicando
00:20:28o que construímos para tornar isso possível,
00:20:31porque temos um servidor MCP.
00:20:32Ele tem algumas funções bem legais.
00:20:36Publicamos algumas habilidades.
00:20:38Mas, felizmente, você não precisa
00:20:41saber detalhadamente como tudo isso funciona,
00:20:43porque também publicamos plugins para
00:20:47Open Code e Cloud Code.
00:20:48Vou instalar o plugin do Open Code aqui, o que
00:20:52basicamente significa copiar esta configuração
00:20:55e soltá-la em um arquivo Open Code.json
00:20:58na sua biblioteca.
00:21:00E vou pedir para o Open Code construir um site com ele.
00:21:06Vamos ver como isso se sai.
00:21:10Vou perguntar a ele.
00:21:11Eu forneci algumas imagens nos assets.
00:21:17Deixem-me aumentar o zoom nisso também, infelizmente.
00:21:28Infelizmente, parece que não consigo aumentar o zoom para vocês.
00:21:34Ah, consegui.
00:21:34OK.
00:22:00[DIGITANDO]
00:22:06E vamos ver o que acontece com isso.
00:22:09Sem erros.
00:22:11Sim, exatamente.
00:22:12Isso é muito importante.
00:22:13Se você não colocar isso no final dos seus comandos,
00:22:15eles não funcionam tão bem.
00:22:18Mas enquanto isso acontece, posso atualizar vocês
00:22:21um pouco sobre o que eles têm trabalhado.
00:22:25Se você entrar no site do Svelte
00:22:28e for para a nossa documentação de IA, terá uma visão geral de tudo.
00:22:32Publicamos um MCP, que tem suas próprias ferramentas de CLI.
00:22:36E ele possui uma série de...
00:22:40oh, olha, ele corrigiu isso nos últimos cinco minutos.
00:22:43Então parece diferente de como estava cinco minutos atrás.
00:22:46Mas temos várias ferramentas que ele habilita na sua máquina.
00:22:51A maioria delas tem a ver—
00:22:53ou as duas primeiras têm a ver com obter boas informações
00:22:58sobre o Svelte.
00:22:58Basicamente, ele ensina o seu agente a ler a documentação
00:23:03e, especificamente, a lê-la de tal forma
00:23:05que ele consiga obter a informação específica que está
00:23:08procurando, sem precisar carregar toda a documentação
00:23:11ou ter que explorá-la e desperdiçar
00:23:12tempo, contexto e tudo mais.
00:23:15Existe esse corretor automático sensacional para o Svelte
00:23:17que eles construíram, que percebe padrões
00:23:21que os LLMs costumam usar e que não são bons, e os corrige.
00:23:26Ele também tem integração com o nosso playground
00:23:33que você pode usar aqui mesmo.
00:23:37E a outra coisa legal que temos
00:23:39é uma das nossas principais decisões de design
00:23:44quando olhamos para todo esse lance de IA,
00:23:46que é: como tornamos isso útil tanto para agentes quanto para pessoas?
00:23:52Não queremos que isso seja algo opaco,
00:23:55onde o seu agente magicamente sabe das coisas
00:23:59mas você não as conhece.
00:24:00É difícil de entender.
00:24:01Então, basicamente tudo o que fazemos,
00:24:04tentamos integrar na documentação também.
00:24:07As habilidades que publicamos,
00:24:09que fazem parte deste plugin Open Code ou Cloud Code
00:24:12quando você o instala, na verdade
00:24:15também publicam todo o seu conteúdo na documentação.
00:24:18Assim, você sempre saberá
00:24:20quais as melhores práticas que estamos ensinando ao seu LLM;
00:24:25você mesmo poderá lê-las.
00:24:27E elas sempre estarão no nosso site, exatamente assim.
00:24:31Então, vamos voltar e ver quanto progresso
00:24:34essa coisa já fez.
00:24:35Não muito até agora.
00:24:39Talvez bastante, na verdade.
00:24:45É, temos muita estilização acontecendo.
00:24:56Acho que vou apenas abrir meu localhost
00:25:00e ver o que ele fez.
00:25:03Nada.
00:25:07OK, bem, não quero prender vocês
00:25:10enquanto ele ainda está processando tudo.
00:25:12Pode levar um tempo.
00:25:13Se tivermos tempo no final, podemos voltar
00:25:15e ver o que o LLM criou para o nosso negócio
00:25:19artesanal de canhões de batata.
00:25:20Mas sim, esse é o desenvolvimento de IA que fizemos
00:25:25nos últimos meses.
00:25:26Fantástico.
00:25:32Sim, super relevante nesta nova era.
00:25:37Eu adoraria saber o que vem a seguir.
00:25:40O que vocês estão esperando ansiosamente?
00:25:46O próximo lançamento será o SvelteKit 3.
00:25:51Estamos trabalhando ativamente nisso no momento.
00:25:53Mas não será algo gigantesco com várias funcionalidades novas.
00:25:56com um monte de novos recursos.
00:25:57É basicamente uma oportunidade de descontinuar
00:25:59muitas coisas antigas, meio que limpando o terreno
00:26:02para que possamos construir todas as novidades empolgantes.
00:26:06A maior mudança é que ele usará a API de ambiente
00:26:09agora que o Vite 6 foi lançado há literalmente duas horas.
00:26:15E exigirá o Svelte 5 como a versão mínima.
00:26:21Então você ainda poderá usar o Svelte 4.
00:26:25E depois disso, focaremos
00:26:29em tornar o Svelte assíncrono e as funções remotas estáveis.
00:26:33Parece ótimo.
00:26:37E ouvi boatos de que
00:26:41vou passar a palavra para o Elliot, porque o LLM
00:26:44estava processando.
00:26:46Quer nos mostrar o que você conseguiu?
00:26:47Como essas coisas funcionam, ele decidiu terminar
00:26:49quase um milissegundo depois que mudamos de assunto.
00:26:55Então, vamos lá.
00:26:59Sim, aqui está nossa loja artesanal de canhões de batata
00:27:03que acabamos de criar com cerca de 1 dólar em tokens.
00:27:07E, na verdade, dando uma olhada no código,
00:27:13ele fez um trabalho muito bom, sem nada de maluco,
00:27:17usando o que eu consideraria as melhores práticas do Svelte.
00:27:22Então, testem.
00:27:25Digam-nos o que acharam.
00:27:27Fiquei muito impressionado com o trabalho
00:27:29que o Paolo e os outros fizeram em toda essa parte de IA.
00:27:33E adoraríamos continuar melhorando.
00:27:35Portanto, enviem seus comentários conforme surgirem.
00:27:38Obrigado.
00:27:40Adorei, os deuses da demonstração estão do nosso lado hoje.
00:27:45Vamos abrir para algumas perguntas?
00:27:47Acho que já temos algumas no chat.
00:27:51Vou começar, pode ser?
00:27:53Temos uma sobre Funções Remotas.
00:27:57Teremos streaming para Funções Remotas?
00:28:00A experiência de desenvolvedor (DX) das Funções Remotas é ótima.
00:28:03Dá vontade de usar em todo lugar.
00:28:05É, acho que o Richard pode responder essa
00:28:06porque você está nessa área.
00:28:10Sim, é engraçado você mencionar isso.
00:28:12Porque estou construindo um app no momento que
00:28:15realmente precisa desse recurso.
00:28:17E nós... o Simon trabalhou em um PR há um tempo,
00:28:22que implementou partes dele.
00:28:23Tivemos algumas... nossas ideias sobre o design
00:28:28evoluíram um pouco desde então.
00:28:31Mas é algo que estamos ansiosos para retomar.
00:28:35Então sim, se estivéssemos fazendo isso daqui a uma semana,
00:28:40poderíamos dizer: "aqui está o pull request".
00:28:43Ainda não chegamos lá.
00:28:44Mas fiquem tranquilos, é uma prioridade muito alta.
00:28:47E estamos muito empolgados com esse recurso.
00:28:49Para quem não está familiarizado, basicamente
00:28:51o que estamos falando é ter essencialmente uma versão em tempo real
00:28:55da função de consulta, onde ao solicitar
00:28:59os dados do servidor, ele retornará um iterável assíncrono,
00:29:04que sempre que houver novos dados,
00:29:09ele os enviará de volta para o cliente.
00:29:12Assim, você tem dados em tempo real sem precisar de polling
00:29:15ou algo do tipo.
00:29:16E assim que a página parar de exibir esses dados,
00:29:21a solicitação é encerrada.
00:29:23E o iterável assíncrono se encarrega da limpeza.
00:29:26É uma forma muito boa de pensar
00:29:28nesses problemas de tempo real.
00:29:31Sim, muito empolgado com isso.
00:29:33E para ser bem claro, quero
00:29:35que vocês saibam que quando o Rich diz que faremos isso logo,
00:29:38é porque o Elliot está me impedindo
00:29:40de trabalhar nisso no momento.
00:29:41Estou esperando ele terminar uma coisa.
00:29:43Assim que eu terminar o que estou fazendo agora,
00:29:45estaremos focados nisso.
00:29:46Legal.
00:29:50Temos outra pergunta.
00:29:52Que é: por que escolher o Svelte em vez de outros frameworks?
00:29:55Obviamente, achamos que é o melhor e mais capaz framework.
00:30:07Mas o real motivo para escolher qualquer framework
00:30:11hoje em dia é porque você
00:30:13gosta mais dele do que dos outros, sinceramente.
00:30:18Muito disso tem mais a ver com preferência pessoal
00:30:20do que com qualquer outra coisa.
00:30:22E especialmente hoje em dia, quando é
00:30:24muito fácil alternar entre frameworks,
00:30:28você tem um assistente mágico à disposição que pode te ensinar...
00:30:32"Estou acostumado a fazer assim no Vue."
00:30:35"Como eu faria no Angular?" ou o que quer que seja.
00:30:37Eles podem fazer isso.
00:30:38A curva de aprendizado foi essencialmente achatada
00:30:43nos dias de hoje.
00:30:45Então, você deve usar a ferramenta com a qual é mais produtivo
00:30:49e que te deixa mais feliz ao usar.
00:30:53E parte disso envolve a comunidade em torno do projeto.
00:30:57Parte envolve a filosofia geral do projeto.
00:31:02Mas o que eu não acho necessário hoje em dia
00:31:05é tomar uma decisão baseada em qual framework consegue fazer tal coisa.
00:31:11Porque todos eles podem fazer as mesmas coisas,
00:31:13ou em qual framework tem o maior ecossistema.
00:31:16Porque isso realmente não é mais uma preocupação.
00:31:18Então, apenas escolha o framework que seja mais divertido.
00:31:21E nós achamos que esse é, obviamente, o Svelte.
00:31:26Resposta fantástica.
00:31:27Adorei.
00:31:29A seguir, alguém perguntou: alguma novidade relacionada a cache?
00:31:35É, acho que isso provavelmente é sobre as funções remotas.
00:31:38No contexto das funções remotas,
00:31:41ainda não temos uma API de cache.
00:31:45Existe uma proposta interna.
00:31:48É um trabalho ativo.
00:31:51Foi deixado de lado em meio a todo o outro trabalho em andamento.
00:31:55Mas será retomado em breve.
00:31:58E então teremos uma API de cache muito boa que
00:32:01se integra com as funções remotas.
00:32:05Incrível.
00:32:06Temos uma pergunta descontraída.
00:32:08Qual é o local dos seus sonhos para um Svelte Summit?
00:32:10Oh, uau.
00:32:13Querem fazer uma rodada rápida agora?
00:32:16Você está no mudo, Elliot.
00:32:22Bem, se estamos falando de cumes (summits),
00:32:24temos o Everest, o K2.
00:32:28Não, mas para mim, a localização não importa tanto.
00:32:34Porque eu passo a maior parte do tempo
00:32:36com os outros desenvolvedores Svelte.
00:32:38Por mais clichê que pareça, quase qualquer lugar é incrível.
00:32:43Mas a Europa é muito legal.
00:32:46Então, quase qualquer lugar por lá
00:32:48é algum lugar que eu ainda não fui e gostaria de ir.
00:32:51Sempre fico feliz com uma desculpa para ir para o exterior.
00:32:56Existe uma tendência no mundo Svelte
00:33:01de usar o prefixo "SV" em tudo.
00:33:04Qualquer palavra que você
00:33:06esteja tentando usar para criar uma biblioteca ou conceito,
00:33:08você simplesmente coloca "SV" na frente.
00:33:11E acho que se realmente levássemos isso a sério,
00:33:12então teríamos nossa conferência em Svalbard.
00:33:15Boa.
00:33:20Que é um arquipélago norueguês.
00:33:23Você pesquisou isso no Google agora mesmo?
00:33:27Na verdade, isso surgiu em uma conversa outro dia.
00:33:31É, do nada.
00:33:35Sim.
00:33:38Se eu pudesse sonhar totalmente, acho que meu local ideal
00:33:41seria em um barco, na verdade.
00:33:45Apenas no mar.
00:33:47Tempo bom.
00:33:49E passar, sei lá, três dias em um barco.
00:33:52Isso seria legal.
00:33:55Todas as opções parecem ótimas.
00:33:57E estou muito empolgado para o próximo Svelte Summit.
00:34:00E falando em comunidade e eventos,
00:34:03temos uma pergunta: como as pessoas
00:34:05podem se envolver com o Svelte? Algum evento ou oportunidade
00:34:07na comunidade?
00:34:11Há eventos acontecendo o tempo todo.
00:34:13Se você for ao sveltesociety.dev, você
00:34:15pode ver um calendário de eventos.
00:34:16E também há muitos recursos sobre as melhores formas
00:34:19de se envolver, especialmente se não houver algo
00:34:22na sua região e você tiver interesse em começar
00:34:25um capítulo da Svelte Society. O site sveltesociety.dev
00:34:28é o lugar para obter informações.
00:34:33Sim, e também, se você for iniciante, entre no Discord
00:34:36e dê um oi em um dos vários canais.
00:34:41Também existem canais dedicados para os vários capítulos
00:34:47ou locais.
00:34:49No geral, são referências para outros canais do Discord
00:34:55no respectivo idioma.
00:34:57Por exemplo, existe um canal do Discord da Svelte Society alemã.
00:35:00Então, sim.
00:35:01Apenas entre no canal do Discord
00:35:06e você pode começar por lá.
00:35:08E fora isso, os canais relacionados ao Svelte
00:35:12também são lugares legais para frequentar.
00:35:16Sim, o pessoal do Svelte é adorável.
00:35:18Então, vão lá dar uma olhada.
00:35:22Temos outra pergunta relacionada à IA.
00:35:24Eu sei, Elliot, você já falou sobre isso.
00:35:26Alguém perguntou: é ótimo ver os frameworks se adaptarem
00:35:29ao mundo dos agentes e da IA.
00:35:31Estou curioso se vocês têm estatísticas sobre agentes usando Svelte por padrão.
00:35:36Não, na verdade não.
00:35:37Poderíamos conseguir algum tipo de sinal
00:35:44sobre isso através de algo como o v0, onde
00:35:46vemos telemetrias desse tipo.
00:35:49Mas o Svelte, em geral, tem...
00:35:53Digo, as pessoas que trabalham no Svelte
00:35:57tiveram uma abordagem relativamente negativa
00:36:01em relação à coleta de telemetria.
00:36:06Então, basicamente, os únicos dados que temos
00:36:08são os que estão disponíveis publicamente.
00:36:10Podemos olhar as tendências de download do NPM, que
00:36:14acho que estão subindo absurdamente por algum motivo estranho.
00:36:18Então talvez não os considere como verdade absoluta.
00:36:20Sim, não se preocupe.
00:36:22Mas é, nós realmente não coletamos dados
00:36:25dos nossos usuários por motivos de privacidade.
00:36:27Não queremos ser invasivos nas suas máquinas.
00:36:30Portanto, os dados que obtemos são os que estão disponíveis
00:36:35e talvez algumas informações úteis por meio de alguns canais da Vercel.
00:36:43Curiosamente, se você perguntar aos LLMs o que escolher,
00:36:46qual é o melhor, o Svelte é mencionado com frequência.
00:36:51Então isso é bom, pelo menos.
00:36:53Mas se isso se traduz em escolher o Svelte,
00:36:56se você não especificar no seu prompt, aí é outra questão.
00:37:01Sim, é muito interessante.
00:37:03Assim que você os instiga a pensar sobre qual é a ferramenta ideal,
00:37:06eles costumam dizer Svelte.
00:37:08Mas se você não disser "quero que use este framework"
00:37:11ou "quero que use o melhor framework",
00:37:12apenas "crie um app", eles geralmente vão para o React por padrão.
00:37:17E não há muito que possamos fazer para mudar isso.
00:37:21Por isso, temos focado nossa atenção
00:37:23em garantir que, para as equipes que escolhem o Svelte,
00:37:27vocês tenham a melhor experiência possível.
00:37:29E que os agentes tenham a melhor capacidade possível
00:37:31de navegar pela documentação e identificar erros.
00:37:36Sim, e como visto no blog com tema de Portal e no site
00:37:42do Potato Cannon, eles estão ficando muito
00:37:46bons em lidar com o contexto, o MCP e tudo mais.
00:37:50Então, sim, dá para ir bem longe e bem rápido com isso agora.
00:37:56Legal.
00:37:57Sim, é ótimo ver todo o trabalho
00:37:58que vocês estão fazendo nisso e também em acomodar
00:38:01ambos os públicos: humanos e agentes.
00:38:04E temos mais algumas perguntas específicas
00:38:06sobre funcionalidades do Svelte.
00:38:08Uma delas é: tudo bem ter várias chamadas
00:38:11para a mesma função remota no markup,
00:38:14ou deveríamos ter uma única referência na tag script?
00:38:17Sim, tudo bem.
00:38:20Você está trabalhando nisso agora, então responda.
00:38:24O que está impedindo o Rich de trabalhar em consultas em tempo real
00:38:26agora tem a ver justamente com essa pergunta.
00:38:29Sim, é totalmente aceitável chamar a mesma função remota
00:38:35várias vezes e referenciá-la repetidamente
00:38:39em diferentes lugares.
00:38:41Quando você usa funções remotas,
00:38:44seu modelo mental para consultas deve ser:
00:38:46quando chamo uma consulta com um argumento,
00:38:50estou obtendo uma referência para essa consulta,
00:38:54e a consulta é diferente dos dados em si.
00:38:57Então, se eu chamar getUser com ID 1 em qualquer lugar do app,
00:39:04eu na verdade estarei obtendo a mesma instância dessa consulta
00:39:07em todos os lugares.
00:39:08As chamadas de consulta são deduplicadas em todo o aplicativo
00:39:11para que você tenha, no máximo, uma chamada por conjunto de argumentos.
00:39:16Argumentos diferentes produzem resultados diferentes.
00:39:19Argumentos iguais produzem a mesma consulta.
00:39:21Elas são deduplicadas no app.
00:39:24Existem algumas ressalvas estranhas quanto a isso agora,
00:39:28e é nisso que estou trabalhando para corrigir, codificar
00:39:33e tornar um pouco mais claro
00:39:37nestas últimas semanas.
00:39:39Espero que isso saia em breve.
00:39:41Mas, sim, a resposta bem curta é sim.
00:39:44Pode chamar e usar onde quiser.
00:39:47Sim, e apenas para expandir,
00:39:48o motivo de estarmos fazendo todo esse trabalho
00:39:51com a palavra-chave await e tudo mais
00:39:54é porque queremos que você possa, na medida do possível,
00:39:57expressar tudo o que seu componente precisa
00:39:59dentro daquele componente.
00:40:00Os dias de buscar dados lá no topo e depois
00:40:04passá-los cuidadosamente para tudo o que precisa deles,
00:40:08isso vai acabar.
00:40:10Mas como parte disso, se você tiver que manter uma referência à consulta
00:40:14e passá-la adiante, então não
00:40:15teremos alcançado esse objetivo.
00:40:17A ideia é que, se este componente precisa de dados
00:40:20e este outro também precisa, por acaso, de dados,
00:40:22eles não precisam se comunicar entre si.
00:40:24Eles podem simplesmente pedir os dados ao sistema
00:40:28através da interface de consulta.
00:40:29E o sistema cuida de garantir
00:40:32que isso resulte em apenas uma requisição
00:40:34e não cause inconsistências entre esses dois
00:40:36componentes.
00:40:40Incrível, obrigado.
00:40:42E esta pergunta é sobre a API de animação e transição.
00:40:47Está planejada uma reformulação para isso?
00:40:49Disseram: "Achei complicado passar o flip de/para tamanhos
00:40:54via attachments".
00:40:57Estou ansioso demais para trabalhar nisso.
00:41:02Estou esperando por isso há muito tempo.
00:41:04Tem muita coisa para fazer.
00:41:06É que tudo o mais acaba entrando na frente.
00:41:09Essencialmente, quando projetamos a API de attachments,
00:41:12foi pensando exatamente nisso.
00:41:16Transições e animações são legais.
00:41:19E estão integradas ao framework
00:41:21de um jeito que facilita muito certas coisas.
00:41:25Mas assim que você cruza um limite,
00:41:28elas não conseguem mais te ajudar.
00:41:29Você precisa de mais controle programático sobre elas.
00:41:33E é aí que uma API programática
00:41:36para definir transições e animações seria útil.
00:41:42E a API de attachments é—
00:41:46a ideia é que no futuro, os attachments,
00:41:49em combinação com uma API para dizer:
00:41:52"Ei, quando eu for removido do DOM,
00:41:54espere um minuto até eu fazer um efeito de sumiço"
00:41:58ou qualquer outra animação.
00:42:00E só então você pode me remover do DOM.
00:42:02É isso que vai permitir cenários mais avançados
00:42:06de animação e transição.
00:42:09Mas ainda não chegamos lá.
00:42:11Está planejado.
00:42:12Vai acontecer.
00:42:13Mas não posso dar um prazo.
00:42:16Com certeza não será nos próximos dois ou três meses.
00:42:22Bom.
00:42:22Pelo menos está no radar.
00:42:24Ficamos felizes em saber.
00:42:25Legal.
00:42:25Acho que temos tempo para mais uma pergunta.
00:42:27A última.
00:42:29O Svelte é agnóstico, mas qual é o banco de dados
00:42:32favorito dos membros da equipe?
00:42:34Mais uma rodada rápida.
00:42:37SQLite.
00:42:37Eu usei o Neon no passado para um experimento rápido,
00:42:47e foi muito bom.
00:42:50Sim, SQLite é bom.
00:42:53O que eu realmente espero é que esses mecanismos de sincronia
00:42:59fiquem muito bons e amplamente disponíveis para que
00:43:02possamos ter aplicações local-first.
00:43:05E aí— sinceramente, não me importo
00:43:09com o banco que estou usando no back-end, para ser breve.
00:43:13É, eu acho que—
00:43:15não sei se tenho um favorito porque—
00:43:18quando você pergunta assim, qual o banco favorito,
00:43:22existem tantos diferentes porque eles
00:43:24fazem coisas diferentes melhor.
00:43:26Você precisa saber por que
00:43:28está escolhendo um banco para eleger um favorito.
00:43:31Acho coisas como o Convex bem interessantes para
00:43:36sincronização local-first.
00:43:38Eles são bem legais e têm muita coisa boa
00:43:41acontecendo.
00:43:42Meu favorito para uso geral,
00:43:45provavelmente é o Dynamo.
00:43:47Pode ser frustrante de acostumar,
00:43:49mas é muito, muito rápido.
00:43:51E escala incrivelmente bem.
00:43:55Mas eu gosto muito de SQL também.
00:43:58Então, se eu puder usar um banco SQL num projeto,
00:44:04provavelmente vou escolher ele porque minha carreira começou
00:44:07em análise de dados e coisas do tipo.
00:44:09Então, SQL foi com o que eu cresci, basicamente.
00:44:14Não sei se tenho um favorito,
00:44:16mas é assim que eu penso.
00:44:20Legal.
00:44:20E temos um comentário do Paolo.
00:44:23Sei que você mencionou ele antes.
00:44:24Ele diz: "Vejo cores demais."
00:44:27Temos certeza de que Rich, Simon e Elliot trabalham na Vercel?
00:44:32"Minha cadeira é preta."
00:44:35É, o Paolo estava me pressionando a usar o moletom da Vercel,
00:44:38mas está calor demais aqui.
00:44:40Tudo bem, pessoal.
00:44:45Mas eu o tenho no armário e o uso
00:44:48quando os dias estão mais frios.
00:44:51É isso que gostamos de ouvir, vestindo a camisa.
00:44:54Incrível.
00:44:55Sim, estou muito animado com o futuro do Svelte
00:44:58e agradeço muito por vocês se juntarem a nós
00:45:01e por todo o trabalho duro nos bastidores.
00:45:03Muito obrigado ao restante da equipe do Svelte
00:45:05também, os mantenedores que não estão na live.
00:45:09E um alô para a maravilhosa comunidade Svelte também.
00:45:11Sim, obrigado Rich, Simon e Elliot por participarem hoje.
00:45:16Obrigado.
00:45:17Tchau.
00:45:18Foi um prazer.
00:45:20Ok, e audiência, não vão embora ainda
00:45:23porque antes de encerrar, temos uma convidada especial.
00:45:26Temos a Eve, da equipe de educação da Vercel.
00:45:31Olá.
00:45:32Como vai?
00:45:33Olá, Eve.
00:45:33Bem.
00:45:34Como você está?
00:45:35Estou ótima.
00:45:36Obrigada.
00:45:36Essa é uma equipe fantástica, só os melhores.
00:45:40Sim.
00:45:41Que privilégio.
00:45:44Tudo bem.
00:45:45Gostaria de nos contar mais sobre a Academy
00:45:47e o que vocês têm preparado?
00:45:49Sim, adoraria.
00:45:50Se você ainda não sabe, a Vercel agora tem uma Academy.
00:45:55Temos 11 cursos no ar.
00:45:57O mais recente deles foi lançado hoje,
00:46:03que é— tcharam— o curso de Svelte na Vercel.
00:46:10A equipe ajudou muito a fazer
00:46:13isso acontecer.
00:46:15Nele, nós construímos um app de alertas de esqui.
00:46:18Então, se você esquia—
00:46:23ah, sim.
00:46:25Estou compartilhando a tela, vou mostrar.
00:46:28Incrível.
00:46:29Ah, aí está.
00:46:30Aí está.
00:46:31É mais emocionante fazer assim.
00:46:34O curso de Svelte na Vercel já está disponível.
00:46:36Nele, você vai construir um app de alertas de esqui.
00:46:40No mundo de hoje, quem esquia sabe
00:46:43que esta temporada tem sido difícil.
00:46:47Pouquíssima neve.
00:46:48Tem feito calor em todo lugar.
00:46:50Por isso, é muito importante ser notificado
00:46:52quando é um bom dia para esquiar.
00:46:54Este é o app que construímos ao longo do curso
00:46:58para que isso aconteça.
00:46:59Temos vários tipos— você pode criar alertas diferentes
00:47:02para as várias condições que procura, para que,
00:47:06quando chegar o dia, você esteja lá
00:47:10e não desperdice a oportunidade.
00:47:13O curso aborda o Svelte.
00:47:17Como fazer o deploy na Vercel?
00:47:19Como usar o AI SDK?
00:47:21Como usar workflows?
00:47:23E várias dicas de produção pelo caminho.
00:47:27Incrível.
00:47:28Maravilhoso.
00:47:29Acredito muito em aprender construindo.
00:47:31Então, sim, isso é fantástico.
00:47:33Muito obrigada.
00:47:34E vamos adicionar o link do curso
00:47:36também nos recursos da live.
00:47:38Obrigada por se juntar a nós hoje, Eve.
00:47:41Incrível.
00:47:41Muito obrigada.
00:47:42Certo.
00:47:46E isso nos traz ao fim da nossa sessão ao vivo.
00:47:49Muito obrigado à nossa comunidade
00:47:51por passar este tempo conosco.
00:47:52Não vou mentir, o chat estava bombando hoje.
00:47:54Foi sensacional ver isso.
00:47:56Esperamos que tenham gostado.
00:47:58E nas palavras de Rich Harris: Svelte é um estilo de vida.
00:48:02Então vão lá e brinquem com ele.
00:48:03Construam mais coisas com Svelte.
00:48:05Se quiserem participar das nossas futuras sessões,
00:48:08podem encontrar todos os detalhes na plataforma da comunidade
00:48:11em [community.vercel.com/live](https://community.vercel.com/live).
00:48:13Obrigado a todos.
00:48:15Até mais.
00:48:16Tchau.