Deno стандартная библиотека

Фреймворк Fresh строится поверх Deno, используя его возможности для разработки веб-приложений без необходимости сборки. Начало работы требует установки Deno (версии 1.36 и выше) и инициализации проекта через команду:

deno run -A https://deno.land/x/fresh@latest/init.ts my-app
cd my-app
deno task start

Ключевой момент: Fresh использует систему модулей Deno напрямую, без необходимости package.json или npm, что упрощает управление зависимостями и повышает безопасность за счет встроенной проверки разрешений.

Структура проекта Fresh

Проект Fresh имеет несколько важных директорий:

  • routes/ – маршруты приложения, соответствующие URL. Файлы .tsx внутри этой директории автоматически обрабатываются как страницы.
  • components/ – React-подобные компоненты, используемые на страницах.
  • static/ – статические ресурсы, доступные напрямую через URL.
  • islands/ – интерактивные компоненты, рендерящиеся на клиенте, но управляемые с сервера.

Маршруты и обработка запросов

Каждый файл в routes/ экспортирует функцию handler, которая обрабатывает HTTP-запросы. Пример:

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

export const handler: Handlers = {
  GET(req, ctx) {
    return new Response("Hello Fresh", { status: 200 });
  }
};

ctx предоставляет доступ к параметрам маршрута, кэшированию и другим утилитам. Использование Handlers позволяет определять отдельные методы для GET, POST и других HTTP-запросов.

Компоненты и Islands

Fresh поддерживает концепцию islands, что позволяет создавать интерактивные части страницы без полной загрузки SPA. Компонент в islands/Counter.tsx может выглядеть так:

import { useState } from "preact/hooks";

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

На странице компонент подключается через <Counter />, при этом основной HTML рендерится на сервере, а JavaScript подгружается только для интерактивной части.

Работа с Deno стандартной библиотекой

Fresh тесно интегрирован со стандартной библиотекой Deno, что обеспечивает использование готовых модулей без установки сторонних пакетов. Основные модули:

  • std/http – создание и управление HTTP-серверами, маршрутизация.
  • std/fs – работа с файловой системой: чтение, запись, наблюдение за изменениями.
  • std/path – манипуляции с путями файлов и директорий.
  • std/datetime – работа с датами и временем.

Пример чтения файла через стандартную библиотеку Deno:

import { readTextFile } from "https://deno.land/std@0.209.0/fs/mod.ts";

const data = await readTextFile("./static/data.txt");
console.log(data);

Использование стандартной библиотеки в Fresh позволяет строить серверную логику напрямую в маршрутах и обработчиках.

Сервировка статических файлов

Доступ к статическим ресурсам осуществляется через папку static/. Для более сложных сценариев можно использовать модуль std/http/file_server.ts:

import { serveFile } from "https://deno.land/std@0.209.0/http/file_server.ts";

export const handler = {
  GET(req: Request) {
    return serveFile(req, "./static/logo.png");
  }
};

Это обеспечивает точное управление отдачей файлов с кастомными заголовками и кэшированием.

Работа с Middleware

Fresh поддерживает middleware для обработки запросов перед попаданием в маршруты. Middleware подключается через middleware.ts:

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

export async function handler(req: Request, ctx: MiddlewareHandlerContext) {
  console.log("Запрос:", req.url);
  return await ctx.next();
}

Middleware позволяет реализовать авторизацию, логирование и глобальную обработку ошибок на уровне приложения.

Использование TypeScript и JSX

Fresh полностью интегрирован с TypeScript, что обеспечивает строгую типизацию на сервере и клиенте. JSX/TSX используется для описания интерфейсов и компонентов. Ключевые особенности:

  • Автоматическая трансформация TSX в серверный и клиентский код.
  • Возможность использовать хуки из Preact (useState, useEffect) для интерактивных islands.
  • Типизация маршрутов и props компонентов обеспечивает безопасную передачу данных между сервером и клиентом.

Деплой и оптимизация

Fresh оптимизирован для работы с Deno Deploy, но может быть развернут на любом сервере, поддерживающем Deno. Оптимизация включает:

  • Предварительный рендеринг страниц на сервере (SSR).
  • Минимизация клиентского JavaScript благодаря islands.
  • Использование кеширования через ctx.render() и стандартную библиотеку Deno для управления ресурсами.

Локальная разработка и горячая перезагрузка

Команда deno task start запускает локальный сервер с поддержкой горячей перезагрузки. Изменения в routes/, islands/ и components/ автоматически отражаются в браузере. Для больших проектов это ускоряет цикл разработки и позволяет тестировать серверную и клиентскую логику одновременно.

Интеграция с базами данных и внешними API

Fresh не накладывает ограничений на выбор базы данных. Благодаря встроенной поддержке TypeScript и модульной структуре Deno можно использовать:

  • SQLite и PostgreSQL через Deno драйверы.
  • REST и GraphQL API через стандартный fetch.
  • Интеграцию с кешем, Redis и другими внешними сервисами.

Пример запроса к API в обработчике маршрута:

export const handler = {
  async GET() {
    const res = await fetch("https://api.example.com/data");
    const json = await res.json();
    return new Response(JSON.stringify(json), { status: 200 });
  }
};

Это позволяет строить полноценные веб-приложения без сторонних инструментов сборки и сложной конфигурации.

Оглавление