Открыл картинки гугл…

Google полностью ушел из качественного UX?

В ближайшую пятницу 4 октября будет ViteConf.
Я буду слушать и всем советую взять онлайн билет.

Уверен, что покажут что-то интересное, особенно, если вы не следите за beta версиями и обсуждениями в репозиториях Vite.

Пока я смотрю записи докладов ViteConf, записался на Next.js Conf.

https://nextjs.org/conf

Создавать красивые штуки Vercel конечно умеет

Всем привет!
Потихоньку смотрю доклады с ViteConf, там 12 часов контента, не могу так много залпом.

The Future of the Web is Local First • Ben Holmes

Бен показал как используя SQLite в браузере, вместе с Drizzle и Astro делать local-first веб-приложения.

Пакет sqlocal — это по сути билд SQLite3 под WASM, позволяет выполнять запросы к БД в памяти браузера.
Удобно, что есть адаптер для Drizzle, а значит ORM можно использовать в браузере.

Хранение .sqlite файла в системе пользователя сделано через StorageManager .getDirectory(). Юзер разрешает доступ приложению в определенную директорию на своем диске, откуда код может читать и писать.

const root = await navigator.storage.getDirectory();
const handle = await root.getFileHandle("db.sqlite");
const writable = await handle.createWritable();

Поддержка есть во всех зеленых браузерах уже больше года.

Кроме этого, Бен показал как использовать эмбеддинги, для реализации поиска по смыслу, а не по совпадению букв, тоже local-first.

Правда, по ощущением это было хайпа ради, на что указывает ироничная ачивка на скриншоте.

Меня этот момент позабавил, потому что дома тоже есть такой "кек":
✅ Сережа упомянул AI
день прожит не зря))

P.S.
Вместо React-библиотек, Бен использует нативный <dialog> подключаясь к его событиям.

А еще, при использовании настоящих когнитивных моделей, в Хроме можно будет не качать 30МБ+ для работы поиска, а использовать встроенный AI.
Хоть и Gemini Nano, но уже хорошо

Интересно, что

Снова настолько же стабильно как прошлый раз с AppRouter?

А его уже стабилизировали?

Сейчас потратил 8+ часов на sandpack в комплекте с codemirror, пробовал monaco-editor и это всё в astro, в браузерном окружении.
Бьюсь уже которую неделю, но codemirror отказывается подсвечивать синтаксис кода. Просто cm-line и никаких токенов, просто строка и ничего больше.

Причем, codemirror в обычном Vite SPA приложении тоже не завелся. Какой же костыльный редактор. Я даже его без оберток подключал, нифига не работает. Как его вообще хоть кому-то удается завести?

Попробовал также аналог от stackblitz TutorialKit(WebContainers API), но там нет готовых реюзабельных компонентов.
Не хочу вручную верстать Editor, Terminal, Navigator и FileTree.

Может есть хорошие embed-песочницы с поддержкой npm-пакетов?

Решение оказалось настолько тупым в своей прямолинейности, что мне не сразу пришло в голову:

rm -rf pnpm-lock.yaml node_modules
pnpm install

Я в восторге!

P.S.
Продолжаю смотреть ViteConf, к тому же там еще NextConf подъехал.
Пока что очень мало интересных докладов, которые не пересказывают доку или блог.

Слушайте, если искать замену React, так это новый Svelte

https://svelte.dev/blog/svelte-5-is-alive

Что меня смущает в Solid, так это излишняя непрозрачность.

Пример с classList лишь один из многих. Чтобы прочитать значение сигнала, надо вызывать как функцию. К тому же нужно юзать control-flow операторы.

Очень невнятно выглядят ошибки иной раз, но…

Stunning Absolutely Ideal Framework на эффекторе должен поддерживать react, svelte и solid из коробки, #ящитаю

Сначала люди в интернетах пишут, что Ruby умер и вообще только легаси на нем.

А потом вижу проект этого года на Ruby on Rails и всё еще радуюсь, как приятно на нем было писать.

https://github.com/maybe-finance/maybe

В ноябре 2021 я купил предзаказ.
Атмосфера крайне приятная, персонажей озвучили, прокачали удобство.

Легенда. И баги на старте прям как в первой трилогии.

React-hooks не отделяют логику от UI

Не раз в чатах видел, как люди предлагают решать проблему прибитой логики к компонентам — просто вынесите логику в кастомные хуки. Но это вообще никак не помогает, хотя хуки позволяют вынести код из компонентов в отдельные функции, сама логика всё равно остаётся зависимой от React.

Почему? Возьмём useEffect. Этот хук будет вызываться дважды в strict mode, потому что он связан с жизненным циклом компонента. И это не баг, а фича React, спорная конечно, но в результате, любая бизнес-логика внутри такого хука становится заложником жизненного цикла React.

И это только самый наглядный пример! Наверняка вы сами можете привести еще десяток менее очевидных примеров. Чего стоит только каскад ререндеров из-за необходимости указывать dependencies между разными useEffect. Приходится городить решения поверх особенностей реакт и выглядит это совсем не просто.

Из-за этой привязки к React, тестирование также превращается в проблему. Приходится оборачивать тесты в условный act(), или же мокать хуки и поведение React – и всё это только потому, что бизнес-логика не отделена от компонентов.

Можно решить "по-старинке": вынести логику в обычные функции или классы, а хуки использовать только как мост между React и бизнес-логикой. Но тогда мы сталкиваемся с новой проблемой – нужно самостоятельно продумывать реактивность и управление состоянием.

Хоть может показаться, что реактивность не обязательна, современные приложения демонстрируют как раз реактивную природу. Чем меньше в коде ручного/императивного управления состоянием, тем проще код. Но это вовсе не означает, что нужно перестать писать императивный код и погрузиться в пучину декларативности или функциональности.

Используйте инструменты по назначению!

Astro 5 + Vite 6

Из самого интересного:

Content Layer
Позволяет динамически грузить данные для страничек из любых источников. Например из notion или вообще через fetch() откуда угодно. Что круто, так это кеширование.
Когда я трогал beta версию, можно было руками перезапустить выгрузку данных, а потом быстро рендерить уже загруженную инфу.

Server Islands
Пререндерим всё статическое в .html, а динамику из бд можем грузить и рендерить на сервере. Причем только для небольших частей интерфейса.
Нормально реализованные идеи Next.js, без привязки к React!

astro:env
Ну и самая ожидаемая мной фича — безопасное извлечение переменных и секретов.
Описываем все переменные в виде zod-схемы, а затем импортируем из astro:env/server или astro:env/client.
Секреты доступны только на сервере из astro:env/server, а вот переменные окружения доступны в любом окружении при импорте из astro:env/client.

Очень рекомендую почитать релиз ноутс и официальный гайд по Env vars.

SVG Components
В экспериментальном режиме Astro поддерживает импорт SVG как компонентов Astro.
Но не спешите грустить, есть разные варианты взаимодействия. Можно как инлайнить, так и бандлить SVG в спрайты.

Давно не писал о том, что я делаю когда ко мне обращаются за помощью на личных консультациях.

С 2022 года провел 60+ часов консультаций, не очень много, по разным причинам, но это всегда интересное времяпровождение для меня.

Из интересного по моим логам:

Построение структуры фронтенд проектов.
Обсжудаем цели продукта, особенности команды, скопившееся легаси, технический стек, наличие свободного ресурса и исходя из этого строим план модернизации.
Иногда это введение инструментов контроля качества кода, иногда новые практики в команде, чаще настройка CI/CD, реже изменение архитектуры и дата-флоу.

Ревью кода и рекомендации.
Не редко приходят ребята с запросом поревьювить код, помочь улучшить фичу, задизайнить техническое решение, обсудить реализацию конкретного компонента в специфическом стеке.
В этом случае я выдаю рекомендации основанные на ситуации и опыте, вместе с литературой на-почитать.

React, Effector, FSD, Atomic-Router, Next.js
Конечно же, в основном приходят с вопросами по моему основному стеку. Как реализовать сложную задумку, какой архитектурный подход может лучше сработать, какие практики стоит рассмотреть, да и вообще взгляд на решение со стороны.
Я не часто использую Next.js, но приходится в нем разбираться, иногда запрашивая у клиента время на исследование.

Менторинг, личное развитие, управление временем.
Кроме технических штук, за 12+ лет работы в коммерции, пришлось перепробовать кучу разных практик по управлению своим временем, а также временем команды. Это тоже опыт, который можно из меня вытащить на консультациях.
Построить трек из списка навыков, необходимых современному разработчику, проверить собственные скиллы (я регулярно нанимаю людей в разные компании, могу поднатаскать), найти слабые места и придумать как их прокачать.

Может у вас есть задачи для меня, которые я еще не делал?
Или что-то из списка выше откликается?

В любом случае, приходите @sovasergey