00:00:00Всем привет! Добро пожаловать на очередную сессию сообщества Basel.
00:00:29Я Майя Авенданьо, инженер по связям с разработчиками в Basel.
00:00:32Если вы впервые на нашей сессии и не видите чат,
00:00:35[community.basel.com/live에](https://www.google.com/search?q=https://community.basel.com/live%EC%97%90) 있는 저희 커뮤니티 플랫폼에 언제든지 참여해 주세요.
00:00:41Там вы можете пользоваться чатом и задавать вопросы, что, кстати, очень приветствуется.
00:00:45Или, если вы смотрите нас в X или на любой другой платформе, можете писать там.
00:00:49Сегодняшнюю сессию я очень ждала, потому что, забавный факт:
00:00:53я несколько лет была Svelte-разработчиком и создала много пет-проектов на Svelte.
00:00:58Так что я большая фанатка, у меня даже есть футболка с логотипом.
00:01:01Итак, для всех фанатов и просто интересующихся Svelte,
00:01:06у нас сегодня в гостях часть команды Svelte. Добро пожаловать!
00:01:12Привет всем! Не хотите ли немного рассказать о себе?
00:01:21Конечно. Меня зовут Рич.
00:01:24Я работаю над Svelte уже 10 лет, так как запустил этот проект в 2016 году.
00:01:32Изначально я создал его для основной работы журналистом — я занимался визуальной журналистикой,
00:01:38использовал JavaScript для подачи новостей. А чуть более четырех лет назад
00:01:44я перешел в Basel, и это стало моей основной работой, которой я занимаюсь по сей день.
00:01:53Да, думаю, никто больше не может похвастаться таким стажем.
00:01:57У меня, кажется, около пяти лет опыта поддержки Svelte.
00:02:02Меня зовут Саймон. Я тоже работаю в Basel над Svelte,
00:02:08а познакомился со Svelte на хакатоне в моей предыдущей компании.
00:02:13Мне хотелось попробовать что-то новое. В то время я в основном писал на Angular.
00:02:18Попробовал Svelte на хакатоне и сразу влюбился, но также понимал:
00:02:22«Ладно, я не могу использовать это на основной работе, как же мне еще оставаться на связи со Svelte?»
00:02:29Звучит очень по-гиковски, я знаю. Но так я стал мейнтейнером на полставки.
00:02:34А через несколько лет мне выпала возможность перейти в Basel, чтобы заниматься этим фултайм.
00:02:39И с тех пор я счастлив.
00:02:43Я Эллиот. Как я люблю напоминать Ричу время от времени,
00:02:46я окончил школу в тот самый год, когда он запустил Svelte.
00:02:49Так что я в команде мейнтейнеров не так давно.
00:02:54Но я начал... не помню, это был конец 2021-го или начало 2022 года.
00:02:59Где-то во время беты SvelteKit я нашел сообщество Svelte и присоединился к нему.
00:03:04А потом начал работать в Vercel вскоре после Рича, кажется.
00:03:09Это было осенью того же года, если не ошибаюсь.
00:03:12Но я работал над другими вещами, связанными с сайтом Vercel.
00:03:16И вот, как ни странно, год и несколько месяцев назад (время пролетело незаметно),
00:03:23мне удалось перейти в команду Svelte. С тех пор я работаю над проектом фултайм.
00:03:27Из последнего интересного — мне довелось писать реализацию асинхронного SSR для Svelte.
00:03:36Это как раз те крутые технические задачи в разработке ПО, которые я обожаю
00:03:43и всегда любил в Svelte.
00:03:48Потрясающе. Очень рада, что вы все здесь.
00:03:51Для тех наших зрителей, кто может быть не в курсе, не могли бы вы кратко объяснить, что такое Svelte и SvelteKit?
00:04:00Мы, конечно, попробуем. Svelte — это много чего.
00:04:04Это сообщество, это образ жизни, но также это декларативный фреймворк компонентов.
00:04:11Если вы использовали React, Vue и подобные вещи, то вам знаком базовый принцип:
00:04:15вместо того чтобы писать document.createElement, setAttribute и прочее,
00:04:21вы описываете свое приложение с помощью декларативных компонентов.
00:04:25И задача фреймворка — взять это декларативное намерение и превратить его в то, что реально происходит на экране.
00:04:33Svelte немного отличается от других фреймворков тем, что в его основе лежит компилятор.
00:04:40По сути, это язык, который превращается в очень высокопроизводительный чистый JavaScript.
00:04:48В плане использования он похож на многие другие фреймворки, но благодаря архитектуре
00:04:53мы можем делать вещи чуть изящнее и компактнее, чем в некоторых других инструментах.
00:04:58И в дополнение к Svelte, который является фундаментом,
00:05:02у нас есть фреймворк уровнем выше под названием SvelteKit,
00:05:08который для мира React является аналогом Next.js.
00:05:13Он добавляет все остальное: роутинг, серверный рендеринг, загрузку данных, инструменты сборки —
00:05:18в общем, всё, что нужно для создания приложения, чтобы вам не пришлось
00:05:24возиться со сборкой всего этого самостоятельно.
00:05:28Великолепно, спасибо большое.
00:05:29Вы тут вовсю «готовили» что-то за кулисами.
00:05:32Мне бы очень хотелось узнать, чем вы занимались последние несколько месяцев.
00:05:37Слышала, у вас даже есть какие-то демо?
00:05:41Да, у нас есть демо.
00:05:43Наверное, мне стоит начать?
00:05:44Потому что логичнее сначала поговорить о разработке асинхронного Svelte,
00:05:51а затем перейти к вещам, которые мы строим поверх этого.
00:05:55Звучит отлично.
00:05:55Хорошо, последний год с лишним, наверное — точно не уверен —
00:06:02мы работали над тем, что условно называем «асинхронным Svelte». Если я поделюсь экраном,
00:06:12то смогу показать небольшое демо, а потом перейдем к вариантам использования.
00:06:20Мне только нужно вспомнить, где здесь кнопка демонстрации экрана.
00:06:26Пройти через все эти диалоговые окна разрешений.
00:06:28Секундочку.
00:06:30Поделиться всем экраном.
00:06:33Готово.
00:06:34Так, кажется, я делюсь экраном.
00:06:35Экран видно или он всё еще в режиме предпросмотра?
00:06:38Да, мы видим.
00:06:40Итак, для непосвященных: это Svelte.dev.
00:06:43Это наш сайт.
00:06:44Это песочница, где можно попробовать Svelte без необходимости что-либо устанавливать
00:06:49или возиться с командной строкой.
00:06:51Можно просто писать код прямо здесь.
00:06:53Вот стандартный пример в песочнице.
00:06:55Я сделаю масштаб побольше, чтобы всем было видно.
00:06:58Здесь у нас есть состояние.
00:07:03Вот эти забавные штуки называются «руны» (runes).
00:07:05Так вы указываете, что какой-то элемент в компоненте Svelte будет меняться,
00:07:10и когда это произойдет, нам нужно будет выполнить рендеринг.
00:07:12У нас есть имя (name) и счетчик (count).
00:07:15Мы выводим это имя вот здесь.
00:07:17И мы привязываем его значение к содержимому этого поля.
00:07:21Вот так это работает.
00:07:24Мы можем нажать на кнопку, и значение будет увеличиваться.
00:07:27Всё очень просто, это умеет делать любой фреймворк
00:07:29в том или ином виде.
00:07:35Что добавляет асинхронный Svelte, так это возможность использовать ключевое слово await напрямую
00:07:41внутри ваших компонентов.
00:07:45Давайте... уберем имя и все остальное.
00:07:49И превратим это в ID, начнем с единицы.
00:07:56И я собираюсь подтянуть немного JSON-данных
00:08:01из внешнего источника.
00:08:04Начну с создания переменной, которая вычисляется на основе ID.
00:08:10Этот URL будет пересчитываться всякий раз, когда меняется ID.
00:08:16Вы видите: если я выведу URL здесь, то при его изменении
00:08:22URL тоже меняется.
00:08:24Затем я получу данные, используя этот URL.
00:08:28data = derived...
00:08:30И внутри я могу написать: await fetch(URL).
00:08:36А затем мы берем ответ и переводим его в JSON.
00:08:41Уверен, все, кто занимается разработкой,
00:08:43видели подобное миллион раз.
00:08:47Теперь здесь внизу давайте создадим блок цитаты
00:09:00и выведем данные, которые мы оттуда тянем.
00:09:03Вы видите, что если мы посмотрим на...
00:09:06ой, сломалось.
00:09:13Вот что мы получим, и мы хотим это отобразить.
00:09:16Внутри я напишу: data.quote.
00:09:21Ой, что-то пошло не так.
00:09:23Саймон, Эллиот, если видите, что я сломал — подсказывайте.
00:09:28А, нет, это просто задержка.
00:09:30Понятно.
00:09:31И ниже мы добавим автора цитаты.
00:09:40Может, уберем задержку, пока работаем над этим.
00:09:44Не знаю.
00:09:46Помогло бы, если бы я обернул это в фигурные скобки.
00:09:50Теперь, если я нажму на кнопку, старая цитата исчезнет,
00:09:55загрузятся новые данные, и они отобразятся.
00:09:58Это может показаться чем-то базовым и тривиальным,
00:10:01но если посмотреть, как это приходится делать почти в любом другом фреймворке,
00:10:08всё быстро становится пугающе сложным.
00:10:10Вам нужно локальное состояние, затем
00:10:13нужен эффект (например,
00:10:16useEffect или аналог), в котором вы делаете запрос.
00:10:20Когда запрос завершается, вы записываете результат в это состояние,
00:10:25при этом нужно обрабатывать ошибки и прочее.
00:10:27Всё это выходит довольно громоздко.
00:10:32А здесь это просто работает.
00:10:36И если есть задержка —
00:10:43то всё равно продолжает работать.
00:10:45Хотя вы можете посмотреть и подумать: погодите,
00:10:46если я нажимаю на кнопку много раз,
00:10:49я хочу сразу перейти к финальному результату.
00:10:51Мне не нужны все эти промежуточные действия.
00:10:53Это мы тоже можем сделать.
00:10:54Внутри мы можем импортировать вспомогательную функцию
00:10:58getAbortSignalFromSelf и передать этот сигнал в fetch.
00:11:11Теперь, когда я нажимаю кнопку,
00:11:15система будет игнорировать все промежуточные запросы
00:11:19и переходить сразу к последнему,
00:11:21потому что предыдущие запросы завершаются слишком поздно.
00:11:26К тому моменту мы уже снова сменили ID.
00:11:28Так что мы просто отменяем существующие сигналы.
00:11:33Хорошо, что еще мы можем сделать?
00:11:34Например, я хочу, чтобы эта кнопка обновлялась мгновенно.
00:11:38Мы можем использовать state.eager, чтобы выйти
00:11:43из режима асинхронного ожидания.
00:11:47Это тоже полезная штука.
00:11:49И можем добавить стили.
00:11:51Напишем: dataLoading = effect.pending
00:11:58больше нуля.
00:11:59И если мы находимся в состоянии загрузки,
00:12:04то можем сделать текст полупрозрачным, пока данные грузятся.
00:12:11Опять же, если бы вы
00:12:13пытались скоординировать всё это сами,
00:12:15было бы дьявольски сложно.
00:12:17Но мы можем пойти еще дальше.
00:12:19Допустим, я хочу добавить фото к цитате.
00:12:28Это могло бы выглядеть вот так.
00:12:37Если я буду менять ID, я буду получать
00:12:41разные фотографии.
00:12:42Судя по всему, везде ноутбуки, не знаю почему.
00:12:46О, вот картинка посимпатичнее.
00:12:48Хотя вы могли заметить
00:12:50небольшую задержку.
00:12:52Сначала появляются данные цитаты, а потом подгружается картинка.
00:12:57Потому что мы рендерим изображение,
00:12:58а потом нам приходится снова идти в сеть,
00:12:59чтобы его получить, и это не очень здорово.
00:13:02Поэтому, если мы заменим это на хелпер preload,
00:13:07который я импортирую из своего модуля utils,
00:13:17то в этот раз мы увидим, что изображение и цитата
00:13:24появляются одновременно.
00:13:27Кажется, я только что обнаружил маленький баг.
00:13:28Нам придется его исправить.
00:13:30Но идею вы поняли.
00:13:31Мы можем использовать await внутри вычислений
00:13:34и внутри шаблона.
00:13:36И все эти вещи идеально скоординированы
00:13:40таким образом, что это работает с множеством компонентов,
00:13:44каждый из которых независимо реагирует на одни и те же события.
00:13:47Это работает с серверным рендерингом (SSR).
00:13:49Всё это делать
00:13:52без асинхронного Svelte
00:13:55было бы крайне мучительно.
00:13:58И имея такой фундамент, мы можем строить
00:14:02очень крутые вещи, о которых я попрошу
00:14:05рассказать коллег.
00:14:09Да.
00:14:10Я быстро покажу демо удаленных функций (remote functions),
00:14:17которые будут построены на этой основе.
00:14:19Теперь, когда в Svelte появилась поддержка асинхронности, это открывает огромные возможности.
00:14:24Но SvelteKit, мета-фреймворк над ним,
00:14:27все еще находится, так сказать, в старом мире.
00:14:30У нас есть функции загрузки (load functions), которые живут в отдельном файле.
00:14:34И из-за этого мы не можем в полной мере использовать все те крутые
00:14:38новые фишки, которые мы только что видели.
00:14:41Поэтому сейчас мы работаем над удаленными функциями (remote functions).
00:14:45Они уже доступны в SvelteKit.
00:14:48Они пока в экспериментальном режиме, но вы уже можете их попробовать.
00:14:50И я просто покажу самый простой способ
00:14:55использования удаленных функций, просто чтобы сэкономить время.
00:14:59Итак, что я сделаю: я просто
00:15:01создам очень, очень простой счетчик, где
00:15:04при каждом нажатии на кнопку значение будет увеличиваться,
00:15:08но само состояние счетчика будет храниться на сервере.
00:15:10Я реализую это в файле counter.remote.ts.
00:15:16Начну с переменной count.
00:15:18А затем добавлю что-то вроде get count.
00:15:20И мы будем использовать query из пакета $app/server.
00:15:26Это удаленный запрос.
00:15:29И здесь мы просто возвращаем значение count.
00:15:31А на другой стороне мы можем это использовать
00:15:37и написать: await get count из файла, который мы только что импортировали.
00:15:44Для TypeScript этот импорт выглядит как обычный импорт.
00:15:48Просто мы импортируем функцию,
00:15:52вызываем ее, и она возвращает промис.
00:15:54Поэтому мы используем await.
00:15:56Но на самом деле это действие пересекает границу между клиентом и сервером.
00:16:01Эта функция get count на самом деле выполняется на сервере.
00:16:05То есть происходит следующее: клиент
00:16:08отправляет запрос на скрытый эндпоинт
00:16:14и получает оттуда данные.
00:16:17И, конечно, это работает и с серверным рендерингом.
00:16:19При начальной загрузке запрос к бэкенду не пойдет,
00:16:23все выполнится напрямую.
00:16:25Теперь у нас есть значение count, но мы пока ничего
00:16:29не можем с ним сделать.
00:16:29Мы хотим его увеличивать.
00:16:31Для этого нам понадобится другая удаленная функция.
00:16:34Реализуем ее по-быстрому — никакого Copilot.
00:16:38Это не та команда.
00:16:40Нам нужна команда (command) из $app/server.
00:16:45И здесь мы просто обновляем состояние на сервере.
00:16:49Само по себе это не поможет,
00:16:52потому что нам нужно указать — раз это команда —
00:16:55что вместе с ней нужно отправить обновление.
00:16:58Для этого мы вызываем нашу удаленную функцию get count
00:17:03и вызываем на ней refresh.
00:17:05Этим мы фактически говорим системе:
00:17:08«выполни мутацию за один проход».
00:17:10Когда тебя вызывают, увеличь count на единицу,
00:17:14а затем отправь клиенту информацию о том,
00:17:19что везде, где get count используется на этой странице,
00:17:22значение теперь должно быть увеличено на один,
00:17:24так как доступно новое состояние.
00:17:27И если я теперь добавлю это сюда,
00:17:29я просто пропишу on click и инкремент count.
00:17:37Это все, что я сделаю.
00:17:38Выглядит как обычный вызов функции.
00:17:40Но, опять же, на самом деле происходит вызов сервера.
00:17:43И теперь, когда я кликаю, значение увеличивается.
00:17:49Это был очень беглый, черновой обзор
00:17:53удаленных функций.
00:17:55На них можно построить гораздо более сложные вещи.
00:17:58Они также прекрасно работают в связке с ИИ.
00:18:01Например, буквально за пять минут до начала сессии
00:18:06я попросил Copilot: «Эй, создай мне
00:18:12базовый блок в стиле игры Portal, где
00:18:18я хочу продемонстрировать несколько удаленных функций.
00:18:20Используй Svelte 5 вместе с MCP, Svelte MCP».
00:18:25Эллиот скоро расскажет об этом подробнее.
00:18:29«Используй это, удаленные функции и асинхронность».
00:18:32И он выдал рабочий результат с первой попытки.
00:18:34Это пререндеринг.
00:18:35Блок отрисован заранее.
00:18:37И теперь я могу здесь печатать —
00:18:42сохраним где-нибудь здесь.
00:18:43И данные обновляются.
00:18:49Под капотом происходит практически то же самое.
00:18:53Если быстро пробежаться по коду,
00:18:56мы используем await get posts.
00:18:59Get posts — это функция пререндеринга,
00:19:01что означает, что она выполняется на этапе сборки,
00:19:05а не во время работы приложения.
00:19:06У нас есть раздел комментариев внизу,
00:19:12где мы загружаем комментарии и используем форму,
00:19:15чтобы отправить новый комментарий и так далее.
00:19:19И всё это работает на удаленных функциях, функций загрузки
00:19:23здесь нигде нет.
00:19:24И ИИ справился с этим с одного запроса.
00:19:27Эллиот сейчас расскажет об этом чуть
00:19:32подробнее, я полагаю.
00:19:34Да, звучит отлично.
00:19:37Мне нужно проделать те же манипуляции в духе Рича Харриса,
00:19:41которые мы делали в начале, чтобы расшарить экран.
00:19:46Так, готово.
00:19:52Я хочу уделить пару минут рассказу о разработках
00:19:57в области ИИ, которыми мы занимались в последнее время.
00:19:59И под «мы» я, чтобы быть честным, имею в виду не себя.
00:20:02Я говорю в основном о парне по имени Паоло и других
00:20:06наших контрибьюторах в Svelte.
00:20:09На самом деле, большая часть того, что связано с ИИ за последнее время,
00:20:13была сделана именно ими.
00:20:14Так что огромное им спасибо.
00:20:15Они проделали потрясающую работу.
00:20:18И да, позвольте мне увеличить масштаб.
00:20:24Вот так.
00:20:27Я мог бы долго рассказывать о том,
00:20:28что именно мы построили, чтобы это стало возможным,
00:20:31потому что у нас есть сервер MCP.
00:20:32В нем есть несколько очень крутых функций.
00:20:36Мы также опубликовали ряд навыков (skills).
00:20:38Но, к счастью, вам не обязательно
00:20:41в деталях знать, как всё это устроено,
00:20:43потому что мы также выпустили плагины
00:20:47для Open Code и Cloud Code.
00:20:48Сейчас я установлю плагин Open Code,
00:20:52что по сути означает просто копирование этой конфигурации
00:20:55и вставку её в файл Open Code.json
00:20:58в вашей библиотеке.
00:21:00И теперь я попрошу Open Code создать мне сайт с его помощью.
00:21:06Посмотрим, что из этого выйдет.
00:21:10Я спрошу его...
00:21:11Я подготовил несколько изображений в папке assets.
00:21:17Мне тоже придется это увеличить для вас, к сожалению.
00:21:28К сожалению, похоже, я не могу увеличить это для вас.
00:21:34А, вот.
00:21:34ОК.
00:22:00[ПЕЧАТАЕТ]
00:22:06И посмотрим, что получится.
00:22:09Без ошибок.
00:22:11Да, именно.
00:22:12Это очень важно.
00:22:13Если не дописывать это в конце промпта,
00:22:15нейросети работают не так хорошо.
00:22:18Но пока идет процесс, я могу
00:22:21немного ввести вас в курс дела по их наработкам.
00:22:25Если вы зайдете на сайт Svelte
00:22:28в раздел документации по ИИ, вы увидите общий обзор.
00:22:32Мы опубликовали MCP с собственным CLI-инструментарием.
00:22:36И в нем есть ряд...
00:22:40Ой, он исправил это за последние пять минут.
00:22:43Теперь это выглядит иначе, чем пять минут назад.
00:22:46Но у нас есть несколько инструментов, которые он активирует на вашей машине.
00:22:51Большинство из них связаны...
00:22:53точнее, первые два связаны с получением качественной информации
00:22:58о Svelte.
00:22:58Они учат вашего агента правильно читать документацию,
00:23:03причем делать это так,
00:23:05чтобы он находил именно ту информацию,
00:23:08которую ищет, не выгружая всю документацию целиком,
00:23:11не блуждая по ней и не тратя впустую
00:23:12время и контекстное окно.
00:23:15Есть также классный автофиксер для Svelte,
00:23:17который они построили — он замечает паттерны,
00:23:21которые LLM часто используют неправильно, и исправляет их.
00:23:26Также есть интеграция с нашей песочницей (playground),
00:23:33которую вы можете использовать прямо здесь.
00:23:37И еще одна крутая вещь:
00:23:39одним из наших ключевых дизайнерских решений,
00:23:44когда мы смотрим на все эти штуки с ИИ,
00:23:46является вопрос: как сделать это полезным и для агентов, и для людей?
00:23:52Мы не хотим, чтобы это было чем-то непрозрачным,
00:23:55когда ваш агент магическим образом что-то знает,
00:23:59а вы — нет.
00:24:00В таком случае трудно во всем разобраться.
00:24:01Поэтому практически всё, что мы делаем,
00:24:04мы стараемся интегрировать и в документацию.
00:24:07И наши опубликованные навыки,
00:24:09которые входят в плагины Open Code или Cloud Code,
00:24:12когда вы их устанавливаете, на самом деле
00:24:15публикуют всё свое содержимое и в общую документацию.
00:24:18Так что вы всегда можете проверить,
00:24:20какие именно лучшие практики мы транслируем вашей LLM,
00:24:25прочитав их самостоятельно.
00:24:27Они всегда будут доступны на нашем сайте вот в таком виде.
00:24:31Давайте вернемся и посмотрим, сколько работы
00:24:34уже успела провернуть эта штука.
00:24:35Пока не очень много.
00:24:39Хотя, на самом деле, может и много.
00:24:45Да, тут много работы со стилями.
00:24:56Я, пожалуй, просто открою localhost
00:25:00и посмотрю, что получилось.
00:25:03Ничего.
00:25:07ОК, ну, я не хочу задерживать всех,
00:25:10пока система обдумывает весь этот процесс.
00:25:12Это может занять какое-то время.
00:25:13Если в конце останется время, мы вернемся
00:25:15и посмотрим, что LLM придумала для нашего бизнеса
00:25:19по производству крафтовых картофельных пушек.
00:25:20Но да, это то, чего мы достигли в разработке ИИ
00:25:25за последние несколько месяцев.
00:25:26Фантастика.
00:25:32Да, супер актуально в новую эпоху.
00:25:37Мне бы очень хотелось узнать, что дальше.
00:25:40Чего вы, ребята, ждете больше всего?
00:25:46Следующим релизом будет Svelte Kit 3.
00:25:51Мы сейчас активно над этим работаем.
00:25:53Но это не будет чем-то грандиозным
00:25:56с кучей новых функций.
00:25:57По сути, это возможность объявить устаревшим
00:25:59многое из старого, своего рода расчистка площадки,
00:26:02чтобы мы могли создать все эти захватывающие новые вещи.
00:26:06 Самое большое изменение в том, что теперь будет использоваться Environment
00:26:09API, так как Vite 6 вышел буквально два часа назад.
00:26:15И в качестве последней версии потребуется Svelte 5.
00:26:21Так что вы вполне сможете использовать Svelte 4.
00:26:25А после этого мы сосредоточимся
00:26:29на стабилизации асинхронного Svelte и удаленных функций.
00:26:33Звучит отлично.
00:26:37И до меня дошли слухи,
00:26:41что пора передать слово Эллиоту, потому что LLM
00:26:44уже что-то приготовила.
00:26:46Хочешь показать нам результат?
00:26:47Как это обычно бывает, она решила закончить
00:26:49примерно через миллисекунду после того, как мы перешли к следующему пункту.
00:26:55Так что давайте посмотрим.
00:26:59Да, вот наш магазин крафтовых картофельных пушек,
00:27:03который мы только что получили, потратив примерно 1 доллар в токенах.
00:27:07И на самом деле, бегло просмотрев код,
00:27:13я вижу, что она проделала отличную работу, не наделав глупостей
00:27:17и используя то, что я бы назвал лучшими практиками Svelte.
00:27:22Так что попробуйте сами.
00:27:25Дайте нам знать, как вам это понравится.
00:27:27Я под впечатлением от работы,
00:27:29которую Паоло и остальные проделали над всеми этими ИИ-штуками.
00:27:33И мы хотим продолжать совершенствоваться.
00:27:35Так что делитесь своими отзывами.
00:27:38Спасибо.
00:27:40Обожаю это, боги демо-версий сегодня на нашей стороне.
00:27:45Может, откроем обсуждение для вопросов?
00:27:47Думаю, в чате уже что-то есть.
00:27:51Я начну, пожалуй.
00:27:53Итак, у нас есть вопрос про Remote Functions (удаленные функции).
00:27:57Будет ли в них поддержка стриминга?
00:28:00DX (опыт разработчика) в Remote Functions просто великолепен.
00:28:03Хочется использовать их повсюду.
00:28:05Да, я думаю, Ричард ответит на это,
00:28:06так как ты занимаешься этой областью.
00:28:10Да, забавно, что вы об этом упомянули.
00:28:12Потому что сейчас я как раз создаю приложение,
00:28:15которому очень нужна эта функция.
00:28:17И мы... Саймон работал над PR (пулл-реквестом) некоторое время назад,
00:28:22в котором реализовал часть этого.
00:28:23Наши идеи относительно дизайна
00:28:28с тех пор немного эволюционировали.
00:28:31Но это то, к чему мы очень стремимся вернуться.
00:28:35Так что, возможно, если бы мы проводили встречу через неделю,
00:28:40мы смогли бы сказать: "Вот пулл-реквест".
00:28:43Мы еще не совсем там.
00:28:44Но будьте уверены, это очень высокий приоритет.
00:28:47И мы в восторге от этой функции.
00:28:49Для тех, кто не знаком: по сути,
00:28:51мы говорим о создании версии функции запроса в реальном времени,
00:28:55где при запросе
00:28:59данных с сервера будет возвращаться асинхронный итерируемый объект,
00:29:04который каждый раз при появлении новых данных
00:29:09будет передавать их обратно клиенту.
00:29:12Так что вы сможете получать данные в реальном времени без всяких опросов (polling)
00:29:15или чего-то подобного.
00:29:16И как только страница перестает отображать эти данные,
00:29:21запрос прекращается.
00:29:23И асинхронный итератор очищается сам.
00:29:26Это действительно приятный способ решения
00:29:28подобных задач в реальном времени.
00:29:31Да, я в предвкушении.
00:29:33И чтобы быть до конца честным, я хочу
00:29:35просто сказать, что когда Рич говорит "мы скоро займемся этим",
00:29:38это значит, что Эллиот сейчас мешает мне
00:29:40работать над этим.
00:29:41Я жду, пока он что-то закончит.
00:29:43Так что как только я закончу то, над чем работаю сейчас,
00:29:45мы сразу приступим.
00:29:46Здорово.
00:29:50У нас есть еще один вопрос.
00:29:52А именно: почему стоит выбрать Svelte, а не другие фреймворки?
00:29:55Очевидно, мы считаем его лучшим и самым мощным фреймворком.
00:30:07Но реальная причина выбора любого фреймворка
00:30:11в наше время заключается в том,
00:30:13что он нравится вам больше остальных, честно говоря.
00:30:18Многое здесь зависит от личных предпочтений,
00:30:20а не от чего-либо еще.
00:30:22И особенно сегодня, когда
00:30:24переключаться между фреймворками очень легко,
00:30:28у вас под рукой есть магический помощник, который может научить вас:
00:30:32"Я привык делать это вот так во Vue.
00:30:35Как мне сделать это в Angular?" или в чем-то еще.
00:30:37ИИ на это способен.
00:30:38Кривая обучения, по сути, стала плоской
00:30:43в наши дни.
00:30:45Поэтому вам следует использовать инструмент, с которым вы наиболее продуктивны
00:30:49и пользователем которого вы счастливы быть.
00:30:53И отчасти это касается сообщества вокруг проекта.
00:30:57Отчасти — общей философии проекта.
00:31:02Но чего, как мне кажется, не нужно делать сегодня,
00:31:05так это принимать решение на основе того, какой фреймворк «умеет» что-то конкретное.
00:31:11Потому что они все умеют одно и то же.
00:31:13Или выбирать по принципу, у какого фреймворка самая большая экосистема.
00:31:16Потому что это уже не проблема.
00:31:18Так что просто выбирайте тот фреймворк, с которым веселее работать.
00:31:21И мы, очевидно, считаем, что это Svelte.
00:31:26Отличный ответ.
00:31:27Прекрасно.
00:31:29Далее у нас спрашивают: есть ли что-то новое по поводу кэша?
00:31:35Да, думаю, это касается Remote Functions.
00:31:38В контексте удаленных функций
00:31:41у нас пока нет Cache API.
00:31:45Есть внутреннее предложение.
00:31:48Это не активная фаза работы.
00:31:51Его отложили в сторону из-за обилия других текущих задач.
00:31:55Но скоро мы к нему вернемся.
00:31:58И тогда у нас будет очень приятный API для кэширования,
00:32:01который интегрируется с удаленными функциями.
00:32:05Потрясающе.
00:32:06У нас есть шутливый вопрос.
00:32:08Какая локация вашей мечты для Svelte Summit?
00:32:10О, ничего себе.
00:32:13Хотите устроить блиц-опрос прямо сейчас?
00:32:16Эллиот, у тебя выключен микрофон.
00:32:22Ну, если мы говорим о вершинах (summit — вершина),
00:32:24то у нас есть Эверест, К2...
00:32:28Нет, если серьезно, для меня локация не так важна.
00:32:34Потому что в основном я провожу время
00:32:36с другими разработчиками Svelte.
00:32:38Так что, как бы банально это ни звучало, везде будет круто.
00:32:43Но в Европе очень классно.
00:32:46Так что любое место там,
00:32:48где я еще не был, мне бы подошло.
00:32:51Я всегда рад любому поводу поехать за границу.
00:32:56В мире Svelte есть тенденция
00:33:01добавлять префикс SV ко всему подряд.
00:33:04Любое слово,
00:33:06вокруг которого вы строите библиотеку или концепцию,
00:33:08вы просто дополняете буквами SV в начале.
00:33:11И я думаю, если мы действительно в это ударимся,
00:33:12то должны провести конференцию на Шпицбергене (Svalbard).
00:33:15Мило.
00:33:20Это такой норвежский архипелаг.
00:33:23Ты только что загуглил это?
00:33:27На самом деле это всплывало в разговоре на днях.
00:33:31Да, случайно.
00:33:35Да.
00:33:38Так что, если мечтать по полной, локация моей мечты —
00:33:41на самом деле на лодке.
00:33:45Прямо в море.
00:33:47Хорошая погода.
00:33:49И просто провести, не знаю, три дня на корабле.
00:33:52Это было бы круто.
00:33:55Все варианты звучат замечательно.
00:33:57И я очень жду следующего Svelte Summit, когда бы он ни состоялся.
00:34:00К слову о сообществе и мероприятиях,
00:34:03у нас вопрос: как люди могут
00:34:05присоединиться к Svelte, есть ли какие-то события или возможности
00:34:07для сообщества?
00:34:11Мероприятия проходят постоянно.
00:34:13Если вы зайдете на sveltesociety.dev, то
00:34:15увидите календарь событий.
00:34:16А также много ресурсов о том, как лучше всего
00:34:19принять участие, особенно если в вашем регионе
00:34:22ничего нет, и вы заинтересованы в том,
00:34:25чтобы открыть филиал Svelte Society.
00:34:28Всю информацию можно найти на sveltesociety.dev.
00:34:33Да, и еще, если вы совсем новичок, залетайте в Discord
00:34:36и просто поздоровайтесь в одном из каналов.
00:34:41Там есть выделенные каналы для разных филиалов
00:34:47или локальных групп.
00:34:49В основном это ссылки на другие Discord-серверы
00:34:55на соответствующих языках.
00:34:57Например, есть немецкий Discord-канал Svelte Society.
00:35:00Так что да, просто заходите в Discord-канал,
00:35:01и оттуда уже сориентируетесь.
00:35:06А еще канал svelte-related
00:35:08тоже отличное место для общения.
00:35:12Да, в Svelte работают прекрасные люди.
00:35:16Так что загляните к ним.
00:35:18У нас есть еще один вопрос про ИИ.
00:35:22Я знаю, Эллиот, ты уже говорил об этом.
00:35:24Кто-то спросил: приятно видеть, как фреймворки адаптируются
00:35:26к миру агентов и ИИ.
00:35:29Любопытно, есть ли у вас статистика о том, как часто агенты выбирают Svelte по умолчанию?
00:35:31Нет, не совсем.
00:35:36Мы могли бы получить какой-то сигнал
00:35:37через что-то вроде v0, где
00:35:44мы видим подобную телеметрию.
00:35:46Но Svelte в целом...
00:35:49Скажем так, люди, работающие над Svelte,
00:35:53заняли довольно негативную позицию
00:35:57в отношении сбора телеметрии.
00:36:01Так что практически единственные данные, которые у нас есть,
00:36:06это то, что находится в открытом доступе.
00:36:08Мы можем смотреть на тренды загрузок в NPM, которые,
00:36:10как мне кажется, сейчас зашкаливают по каким-то странным причинам.
00:36:14Так что, возможно, не стоит принимать их за истину в последней инстанции.
00:36:18Да, не волнуйтесь.
00:36:20Но мы действительно не собираем никаких данных
00:36:22о наших пользователях из соображений конфиденциальности.
00:36:25Мы не хотим так бесцеремонно присутствовать на ваших машинах.
00:36:27Поэтому данные, которые мы получаем, — это то, что доступно публично,
00:36:30и, возможно, что-то полезное через каналы Vercel.
00:36:35и, возможно, кое-какие полезные данные через каналы Vercel.
00:36:43По слухам, если спросить ИИ, что выбрать,
00:36:46какой фреймворк лучший, Svelte упоминается часто.
00:36:51Это, по крайней мере, приятно.
00:36:53Но выльется ли это в реальный выбор Svelte,
00:36:56если не указывать его в промпте — это другой вопрос.
00:37:01Да, это очень интересно.
00:37:03Как только вы просите их подумать об идеальном инструменте,
00:37:06они часто называют Svelte.
00:37:08Но если вы не скажете: «Я хочу, чтобы ты использовал этот фреймворк»
00:37:11или «используй лучший фреймворк»,
00:37:12а просто «создай мне приложение», они обычно выбирают React по умолчанию.
00:37:17И мы мало что можем сделать, чтобы это изменить.
00:37:21Поэтому мы сосредоточили наше внимание
00:37:23на том, чтобы те команды, которые выбирают Svelte,
00:37:27получали наилучший возможный опыт.
00:37:29И чтобы агенты могли максимально эффективно
00:37:31ориентироваться в документации и находить ошибки.
00:37:36Да, и судя по блогу в стиле Portal и сайту Potato
00:37:42Cannon, они уже довольно
00:37:46хорошо справляются с контекстом, MCP и прочим.
00:37:50Так что да, сейчас с этим можно продвинуться очень далеко и быстро.
00:37:56Здорово.
00:37:57Да, приятно видеть всю ту работу,
00:37:58которую вы проделываете, а также то, как вы адаптируетесь
00:38:01под обе аудитории: и людей, и ИИ-агентов.
00:38:04У нас есть еще пара конкретных вопросов
00:38:06по функциям Svelte.
00:38:08Один из них: допустимо ли делать несколько вызовов
00:38:11одной и той же удаленной функции прямо в разметке,
00:38:14или лучше сделать одну ссылку в теге script?
00:38:17Да, это допустимо.
00:38:20Ты как раз сейчас над этим работаешь, так что отвечай.
00:38:24То, что мешает Ричу работать над «живыми запросами»
00:38:26прямо сейчас, на самом деле связано с этим вопросом.
00:38:29Да, совершенно нормально вызывать одну и ту же удаленную функцию
00:38:35несколько раз и ссылаться на нее многократно
00:38:39в разных местах.
00:38:41Когда вы используете удаленные функции,
00:38:44ваша ментальная модель запросов должна быть такой:
00:38:46когда я вызываю запрос с аргументом,
00:38:50я получаю ссылку на этот запрос,
00:38:54и сам запрос — это не то же самое, что данные.
00:38:57Так что если я вызову getUser с ID 1 в любом месте приложения,
00:39:04я фактически получу один и тот же экземпляр этого запроса
00:39:07повсюду.
00:39:08Ваши вызовы запросов дедуплицируются внутри приложения,
00:39:11так что вы получаете максимум один вызов на набор аргументов.
00:39:16Разные аргументы дают разные результаты.
00:39:19Одинаковые аргументы ведут к одному и тому же запросу.
00:39:21Они дедуплицируются в масштабах всего приложения.
00:39:24Сейчас есть некоторые странные нюансы,
00:39:28и это именно то, над чем я работаю: исправляю, кодифицирую
00:39:33и делаю поведение более понятным
00:39:37в последние пару недель.
00:39:39И, надеюсь, это скоро выйдет.
00:39:41Но если коротко — да.
00:39:44Просто вызывайте и используйте их там, где вам удобно.
00:39:47Да, и в дополнение к этому:
00:39:48вся причина, по которой мы ведем работу
00:39:51с ключевым словом await и прочим,
00:39:54в том, что мы хотим, чтобы вы могли, насколько это возможно,
00:39:57выразить все потребности вашего компонента
00:39:59внутри самого этого компонента.
00:40:00Так что времена, когда данные запрашивались где-то наверху,
00:40:04а затем бережно передавались вниз всем, кому они нужны,
00:40:08подходят к концу.
00:40:10Но если вам все равно приходится создавать ссылку на запрос
00:40:14и передавать ее дальше, значит,
00:40:15мы не достигли цели.
00:40:17Идея в том, что если этому компоненту нужны данные,
00:40:20и этому компоненту тоже случайно нужны те же данные,
00:40:22им не нужно взаимодействовать друг с другом.
00:40:24Они могут просто запросить данные у системы
00:40:28через интерфейс запросов.
00:40:29А система сама позаботится о том,
00:40:32чтобы это привело лишь к одному сетевому запросу
00:40:34и не вызвало несогласованности между этими двумя
00:40:36компонентами.
00:40:40Потрясающе, спасибо.
00:40:42А этот вопрос касается API анимаций и переходов.
00:40:47Планируется ли их масштабное обновление?
00:40:49Спрашивают: «Мне показалось неудобным передавать flip
00:40:54через attachments для разных размеров».
00:40:57Я просто сплю и вижу, как начну над этим работать.
00:41:02Давно этого ждал.
00:41:04Столько всего нужно сделать.
00:41:06Да, всё остальное постоянно мешает.
00:41:09По сути, когда мы проектировали API вложений (attachments),
00:41:12мы имели в виду именно это.
00:41:16Переходы и анимации — это круто.
00:41:19И они интегрированы в фреймворк так,
00:41:21что определенные вещи делать очень легко.
00:41:25Но как только вы выходите за рамки простых случаев,
00:41:28они уже не могут вам помочь.
00:41:29Вам нужно больше программного контроля над ними.
00:41:33И именно здесь пригодился бы программный API
00:41:36для определения переходов и анимаций.
00:41:42И API вложений — это...
00:41:46идея в том, что в будущем этот API
00:41:49в сочетании с возможностью сказать:
00:41:52«Эй, когда меня выкидывают из DOM,
00:41:54подожди минутку, пока я не сделаю плавное исчезновение»
00:41:58или какое-нибудь движение,
00:42:00«а потом уже удаляй меня из DOM».
00:42:02Именно это позволит реализовать более продвинутые
00:42:06сценарии анимации переходов.
00:42:09Но мы еще до этого не дошли.
00:42:11Это в планах.
00:42:12Это обязательно случится.
00:42:13Но я не могу назвать сроки.
00:42:16Уж точно не в ближайшие два-три месяца.
00:42:22Хорошо.
00:42:22По крайней мере, это в поле вашего зрения.
00:42:24Рады это слышать.
00:42:25Круто.
00:42:25Думаю, у нас есть время на еще один вопрос.
00:42:27Итак, последний.
00:42:29Svelte универсален, но какая база данных
00:42:32любимая у членов команды?
00:42:34Давайте по кругу.
00:42:37SQLite.
00:42:37Я использовал Neon в прошлом для быстрого эксперимента,
00:42:47и это было очень здорово.
00:42:50Да, SQLite хорош.
00:42:53Чего я действительно жду, так это чтобы системы синхронизации
00:42:59стали по-настоящему качественными и доступными,
00:43:02чтобы мы могли делать приложения в стиле local-first.
00:43:05И тогда — честно говоря —
00:43:09мне будет всё равно, какая база данных крутится на бэкенде.
00:43:13Да, я думаю...
00:43:15Не знаю, есть ли у меня прям любимая, потому что...
00:43:18Когда спрашивают «какая твоя любимая база данных»,
00:43:22их же так много, и каждая
00:43:24хороша в чем-то своем.
00:43:26Нужно понимать, для чего именно
00:43:28вы выбираете базу, прежде чем называть ее любимой.
00:43:31Мне кажется интересным Convex для всего,
00:43:36что касается синхронизации local-first.
00:43:38Они крутые, у них много классных штук.
00:43:41Пожалуй, моя любимая универсальная база —
00:43:42это на самом деле Dynamo.
00:43:45К ней бывает сложно привыкнуть,
00:43:47но она очень, очень быстрая.
00:43:49И она очень, очень, очень хорошо масштабируется.
00:43:51Но SQL я тоже очень люблю.
00:43:55Так что если я могу использовать SQL для проекта,
00:43:58я, скорее всего, так и сделаю, потому что моя карьера
00:44:04началась с аналитики данных и прочего.
00:44:07Так что на SQL я, можно сказать, вырос.
00:44:09В общем, не знаю, есть ли одна любимая,
00:44:14но я рассуждаю примерно так.
00:44:16Круто.
00:44:20И у нас есть один комментарий от Паоло.
00:44:20Я знаю, вы его уже упоминали сегодня.
00:44:23Он говорит: «Я вижу слишком много цветов».
00:44:24«Мы уверены, что Рич, Саймон и Эллиот работают на Vercel?»
00:44:27«Моё кресло черное».
00:44:32Да, Паоло уговаривал меня надеть худи Vercel,
00:44:35но здесь слишком жарко.
00:44:38Хорошо, ребята.
00:44:40Оно у меня в шкафу, и я его достаю,
00:44:45когда становится холоднее.
00:44:48Это то, что мы любим слышать — поддержка бренда.
00:44:51Потрясающе.
00:44:54Да, я в восторге от будущего Svelte
00:44:55и очень благодарен вам за то, что вы пришли,
00:44:58и за всю вашу тяжелую работу за кулисами.
00:45:01Большое спасибо и остальной команде Svelte,
00:45:03которой нет в эфире, всем мейнтейнерам.
00:45:05И привет замечательному сообществу Svelte.
00:45:09Да, спасибо, Рич, Саймон, Эллиот, что были с нами сегодня.
00:45:11Спасибо.
00:45:16Пока.
00:45:17Было очень приятно.
00:45:18Хорошо, зрители, пока не расходитесь,
00:45:20потому что перед завершением у нас есть особенный гость.
00:45:23С нами Ив из команды обучения Vercel.
00:45:26Привет.
00:45:31Как дела?
00:45:32Привет, Ив.
00:45:33Хорошо.
00:45:33Как ты?
00:45:34Я отлично.
00:45:35Спасибо.
00:45:36Какая же мощная команда собралась, просто лучшие.
00:45:36Да.
00:45:40Это просто подарок.
00:45:41Хорошо.
00:45:44Расскажешь нам подробнее об Academy
00:45:45и о том, что вы там подготовили?
00:45:47Да, с удовольствием.
00:45:49Если вы еще не слышали, у Vercel теперь есть Academy.
00:45:50У нас запущено 11 курсов.
00:45:55Самый свежий из них вышел сегодня —
00:45:57та-да! — это курс «Svelte на Vercel».
00:46:03Команда очень помогла нам
00:46:10довести его до финишной прямой.
00:46:13В рамках курса мы создаем приложение для лыжных оповещений.
00:46:15Так что если вы лыжник...
00:46:18О, точно.
00:46:23У меня включена демонстрация экрана, сейчас покажу.
00:46:25Отлично.
00:46:28О, вот оно.
00:46:29Да, вот так.
00:46:30Так гораздо интереснее.
00:46:31Курс «Svelte на Vercel» уже доступен.
00:46:34Там вы будете строить приложение лыжных уведомлений.
00:46:36В нашем современном мире, если вы катались в этом году,
00:46:40вы знаете, что сезон выдался тяжелым.
00:46:43Снега мало.
00:46:47Везде было тепло.
00:46:48Поэтому очень важно вовремя получить уведомление,
00:46:50когда наступает удачный день для катания.
00:46:52И это приложение, которое мы строим на протяжении курса,
00:46:54как раз помогает в этом.
00:46:58У нас там можно настраивать разные типы алертов
00:46:59на определенные условия, чтобы,
00:47:02когда наступит тот самый день, вы уже были там
00:47:06и не упустили возможность.
00:47:10Курс охватывает работу со Svelte.
00:47:13Как деплоить его на Vercel?
00:47:17Как использовать AI SDK?
00:47:19Как использовать Workflows?
00:47:21И даем советы по работе в продакшене.
00:47:23Потрясающе.
00:47:27Чудесно.
00:47:28Я твердо верю в обучение через практику.
00:47:29Так что это просто супер.
00:47:31Большое тебе спасибо.
00:47:33Мы также добавим ссылку на курс
00:47:34в список ресурсов трансляции.
00:47:36Спасибо, что присоединилась к нам сегодня, Ив.
00:47:38Замечательно.
00:47:41Большое спасибо.
00:47:41Ну что же.
00:47:42На этом наш прямой эфир подходит к концу.
00:47:46Огромное спасибо нашему сообществу
00:47:49за то, что провели это время с нами.
00:47:51Не буду врать, чат сегодня просто разрывался.
00:47:52Это очень круто видеть.
00:47:54Надеемся, вам понравилось.
00:47:56И, как говорит Рич Харрис, «Svelte — это образ жизни».
00:47:58Так что идите и пробуйте.
00:48:02Создавайте больше крутых штук на Svelte.
00:48:03Если хотите присоединиться к будущим сессиям,
00:48:05все подробности есть на нашей платформе
00:48:08[community.vercel.com/live](https://community.vercel.com/live).
00:48:11Да, всем спасибо.
00:48:13Увидимся.
00:48:15Пока.
00:48:16안녕히 계세요.