Как я собрал локальный плеер на React 19 и Tauri

Когда я решил сделать локальный музыкальный плеер, основная боль была в производительности. Electron и его ресурсоемкость стали для меня красной тряпкой — я хотел чего-то легковесного, но с современным интерфейсом. После пары экспериментов я остановился на связке React 19 и Tauri, и результат меня впечатлил.

Почему Tauri вместо Electron

Electron — это удобно, но его цена — это гигабайты оперативной памяти и долгий старт. Tauri, напротив, использует Rust для бэкенда и позволяет создавать минималистичные приложения с нативным доступом к системе. В моем случае это было критично, так как я работал с большими локальными коллекциями музыки.

Память? В среднем плеер потребляет около 50 МБ в фоновом режиме. Это в разы меньше, чем Electron-приложения, которые легко съедают 200–300 МБ даже на минимальной функциональности.

Кроме того, Tauri предоставляет доступ к файловой системе через Rust, что идеально подходит для задач вроде быстрого парсинга ID3-тегов. Я написал небольшой Rust-модуль, который обрабатывает метаданные прямо в фоновом потоке, не блокируя основной интерфейс.

React 19 и оптимизации

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

const AlbumCover = React.memo(({ coverPath }) => {
  const [cover, setCover] = React.useState(null);

  React.useEffect(() => {
    fetchCover(coverPath).then(setCover);
  }, [coverPath]);

  return cover ? <img src={cover} alt="Album cover" /> : <Placeholder />;
});

Такой подход позволяет избежать лишних ререндеров и держать интерфейс отзывчивым. TailwindCSS v4 добавил масштабируемости — динамическая тема и микроанимации теперь реализованы буквально в несколько строк кода.

Локализация и кэширование

Локализация была одной из ключевых задач. Я использовал i18next и настроил поддержку 8 языков из коробки. Все строки хранятся в JSON-файлах, что упрощает добавление новых языков.

Кэширование метаданных через localStorage — это отдельная история. Я решил агрессивно кэшировать данные, чтобы минимизировать время старта. При каждом запуске плеер проверяет наличие свежих данных и обновляет кэш только при необходимости. Это дало почти мгновенный старт даже на коллекциях в несколько тысяч треков.

Что можно улучшить

Несмотря на все преимущества, Tauri все еще молодая технология. Например, работа с нативными диалогами файловой системы иногда вызывает проблемы, особенно на Windows. Также есть ограничения по интеграции с некоторыми системными API, которые Electron предоставляет из коробки.

React 19, хоть и мощный, требует внимательного подхода к оптимизации. Если не следить за мемоизацией и асинхронными операциями, можно легко получить лаги.

Кому это полезно

Если вы разрабатываете десктопные приложения и хотите уйти от Electron, Tauri — это отличная альтернатива. Особенно если ваше приложение работает с большими объемами данных или требует минимального потребления ресурсов.

React 19, в свою очередь, подойдет тем, кто уже знаком с React и хочет использовать новые фичи для улучшения производительности. TailwindCSS делает процесс стилизации быстрым и предсказуемым, что особенно полезно в проектах с динамическим интерфейсом.

Сам проект открыт для всех желающих — можете клонировать репозиторий, поковыряться в коде и предложить свои улучшения. Особенно интересно было бы услышать мнение о архитектуре Tauri + React и возможных оптимизациях.

Источник: https://www.reddit.com/r/reactjs/comments/1ty38he/i_built_a_modern_local_music_player_using_react/