Популярные библиотеки для Fresh

Фреймворк Fresh предоставляет современный подход к созданию веб-приложений на JavaScript с использованием Deno. Одной из сильных сторон Fresh является возможность интеграции с разнообразными библиотеками, расширяющими функциональность и упрощающими разработку. Рассмотрим наиболее востребованные библиотеки и их применение.

1. Preact

Fresh изначально строится на основе Preact, облегчённой версии React. Preact обеспечивает:

  • Минимальный размер бандла, что ускоряет загрузку страниц.
  • Совместимость с React API, включая хуки (useState, useEffect).
  • Быструю реактивность компонентов с серверной рендерингом (SSR).

Использование Preact позволяет писать интерактивные компоненты внутри Fresh-приложения с привычным синтаксисом JSX. Для примера, компонент кнопки с состоянием кликов:

/** @jsx h */
import { h } from "preact";
import { useState } from "preact/hooks";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onCl ick={() => setCount(count + 1)}>
      Клики: {count}
    </button>
  );
}

Интеграция с Fresh происходит автоматически через fresh-роутинг и серверный рендеринг.

2. Oak

Для работы с HTTP-запросами и маршрутизацией в Fresh используется серверная библиотека Oak:

  • Поддержка middleware и обработки запросов/ответов.
  • Настройка роутинга с динамическими параметрами URL.
  • Простое подключение сторонних библиотек для аутентификации или логирования.

Пример middleware для логирования запросов:

import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (ctx, next) => {
  console.log(`${ctx.request.method} ${ctx.request.url}`);
  await next();
});

app.listen({ port: 8000 });

Использование Oak совместно с Fresh позволяет создавать гибкие серверные маршруты и API.

3. Deno DOM и JSX-библиотеки

Для рендеринга и манипуляций с DOM на сервере применяются библиотеки типа deno_dom:

  • Серверная генерация HTML с последующим гидрированием на клиенте.
  • Возможность работы с CSS-классами и атрибутами в JSX.
  • Интеграция с Preact для унифицированного подхода к компонентам.

Пример генерации HTML с Deno DOM:

import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";

const htmlString = "<div class='container'>Привет Fresh</div>";
const doc = new DOMParser().parseFromString(htmlString, "text/html");

console.log(doc?.querySelector(".container")?.textContent);

Это облегчает тестирование и серверную вёрстку без необходимости запуска браузера.

4. Drash и другие микро-фреймворки

Для более лёгких API можно использовать микро-фреймворки, такие как Drash, которые подходят для Fresh-проектов с минимальным серверным стеком. Особенности:

  • Простой роутинг и обработка HTTP-методов.
  • Поддержка middleware и кастомных ответов.
  • Лёгкая интеграция с базами данных.

Drash эффективен для небольших сервисов и серверной логики внутри Fresh-приложения.

5. Tailwind CSS

Для стилизации компонентов и страниц широко применяется Tailwind CSS:

  • Утилитарный CSS для быстрого прототипирования.
  • Поддержка динамических классов через Preact/JSX.
  • Оптимизация стилей с помощью PurgeCSS для минимального размера бандла.

Пример использования Tailwind внутри Preact-компонента:

export default function Card({ title, content }) {
  return (
    <div class="p-4 shadow-lg rounded-xl bg-white">
      <h2 class="text-xl font-bold mb-2">{title}</h2>
      <p class="text-gray-700">{content}</p>
    </div>
  );
}

Tailwind прекрасно сочетается с серверной рендерингом Fresh и поддерживает динамические классы, формируя адаптивный интерфейс без лишних файлов CSS.

6. Supabase и базы данных

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

  • Полная интеграция с PostgreSQL через REST и GraphQL.
  • Поддержка аутентификации и авторизации.
  • Синхронизация с серверным рендерингом Fresh.

Пример запроса к базе данных через Supabase:

import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";

const supabase = createClient(Deno.env.get("SUPABASE_URL"), Deno.env.get("SUPABASE_KEY"));

const { data, error } = await supabase.from("posts").select("*");
console.log(data, error);

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

7. GraphQL и gql-request

Для построения API поверх Fresh популярны библиотеки GraphQL и gql-request:

  • Асинхронные запросы к GraphQL-серверам.
  • Типизация данных через TypeScript.
  • Возможность интеграции как на сервере, так и на клиенте.

Пример запроса с gql-request:

import { gql, GraphQLClient } from "https://cdn.skypack.dev/graphql-request";

const client = new GraphQLClient("https://example.com/graphql");

const query = gql`
  query {
    posts {
      id
      title
    }
  }
`;

const data = await client.request(query);
console.log(data);

GraphQL позволяет создавать гибкие и масштабируемые API для Fresh-приложений, минимизируя лишние запросы к серверу.

Популярные библиотеки для Fresh создают экосистему, которая сочетает лёгкость и производительность Preact, гибкость серверных решений на Deno и богатый выбор инструментов для работы с данными и интерфейсом. Правильный выбор этих библиотек позволяет строить современные веб-приложения с минимальными затратами ресурсов и максимальной скоростью разработки.

Оглавление