UnoCSS плагин

Fresh — это современный фреймворк для разработки веб-приложений на JavaScript и TypeScript, ориентированный на высокую производительность и минимизацию объёма клиентского кода. Основная идея Fresh заключается в рендеринге страниц на сервере (SSR) с генерацией полностью интерактивных компонентов без необходимости использования больших библиотек на клиентской стороне.

Архитектура и принципы работы

Fresh строится на принципах:

  • SSR по умолчанию: HTML формируется на сервере и сразу отправляется пользователю. Это снижает время до первого отображения контента и улучшает SEO.
  • Islands architecture: интерактивные участки страницы (компоненты) загружаются отдельно, а остальной HTML остаётся статическим. Такой подход позволяет минимизировать клиентский JavaScript.
  • Zero-runtime: если компонент не интерактивный, клиентский JavaScript для него вообще не генерируется, что уменьшает нагрузку на браузер.

Компоненты Fresh

Компоненты Fresh напоминают React, но имеют ряд особенностей:

  • Файловая структура: компоненты располагаются в каталоге components или в папках маршрутов routes. Имя файла определяет URL, если компонент находится в routes.
  • JSX/TSX синтаксис: используется для описания структуры HTML прямо в JavaScript или TypeScript. Пример компонента:
export default function Button({ label }: { label: string }) {
  return <button class="btn">{label}</button>;
}
  • Состояние: встроенные хранилища состояния отсутствуют; для интерактивности используются стандартные хуки Deno/JavaScript или сторонние библиотеки.

Маршрутизация и страницы

Fresh использует файловую маршрутизацию:

  • routes/index.tsx → /
  • routes/about.tsx → /about
  • Параметры URL можно задавать через квадратные скобки: routes/[id].tsx → /123

Каждая страница экспортирует функцию handler, которая обрабатывает серверные запросы:

import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  GET(req, ctx) {
    return ctx.render({ message: "Привет, Fresh!" });
  }
};

Работа с данными

Fresh предоставляет механизм ctx.render для передачи данных на страницу. Он позволяет интегрировать серверные данные в компонент без дополнительных API-запросов на клиент:

export default function Page({ data }: { data: { message: string } }) {
  return <h1>{data.message}</h1>;
}

Интеграция с UnoCSS

UnoCSS — это утилита для генерации атомарных CSS-классов на лету, полностью совместимая с Fresh. Основные моменты:

  • Конфигурация: создаётся файл uno.config.ts, где задаются правила генерации классов, темы, пресеты.
  • Пресеты: UnoCSS поддерживает готовые наборы стилей, например preset-wind (Tailwind-подобные утилиты) и preset-icons.
  • Использование в компонентах: классы можно применять прямо в JSX:
export default function Card() {
  return (
    <div class="p-4 bg-white shadow-lg rounded-lg">
      <h2 class="text-xl font-bold">Заголовок</h2>
      <p class="text-gray-700">Описание карточки</p>
    </div>
  );
}
  • Динамическое применение классов: UnoCSS позволяет формировать классы на основе переменных:
const color = "red-500";
return <div class={`bg-${color} p-2`}>Текст</div>;

Оптимизация производительности

Fresh и UnoCSS вместе обеспечивают:

  • Минимальный размер JavaScript на клиенте благодаря островной архитектуре.
  • Генерацию CSS только для реально используемых классов.
  • Быструю сборку за счёт JIT-компиляции стилей.

Сборка и деплой

Fresh использует Deno для сборки и запуска приложений:

  • Разработка: команда deno task start запускает сервер с горячей перезагрузкой.
  • Сборка: deno task build формирует статические страницы и необходимые скрипты.
  • Деплой: можно размещать на Vercel, Deno Deploy, Netlify и других платформах без изменения кода.

Работа с событиями и интерактивностью

Для интерактивных компонентов используются стандартные обработчики событий в JSX:

export default function Counter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return <button onCl ick={increment}>Нажми меня</button>;
}

Ключевой момент — интерактивность загружается только там, где она необходима, остальная страница остаётся статической.

Итоги интеграции с UnoCSS

Совместное использование Fresh и UnoCSS позволяет:

  • Создавать быстрые, лёгкие веб-приложения.
  • Минимизировать размер клиентского кода.
  • Гибко управлять стилями с помощью атомарных классов.
  • Сохранять удобство разработки через JSX и файловую маршрутизацию.

В результате получаются современные веб-приложения, оптимизированные по скорости загрузки и лёгкости поддержки.

Оглавление