Языковое определение

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

Основы структуры приложения

В Fresh проект строится вокруг routes, islands и components.

  • Routes — это директории и файлы в папке routes/, которые автоматически становятся URL-путями приложения. Например, файл routes/about.tsx будет доступен по адресу /about. Каждый route представляет собой серверный обработчик, который возвращает HTML.
  • Islands — небольшие интерактивные компоненты, которые гидратируются на клиенте. Они позволяют добавлять динамику только там, где это действительно необходимо, снижая нагрузку на браузер.
  • Components — переиспользуемые элементы интерфейса, которые могут быть как статическими (рендерятся на сервере), так и динамическими (с гидрацией).

Структура файлов и языковое определение

Fresh поддерживает как JavaScript, так и TypeScript. При использовании TypeScript проект получает строгую типизацию на уровне компонентов, props и состояния.

Файл компонента обычно имеет расширение .tsx для поддержки JSX/TSX. Статические маршруты могут быть написаны в .ts или .tsx, если требуется использование JSX.

Пример простого компонента на TypeScript:

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

export const handler: Handlers = {
  GET(req, ctx) {
    return ctx.render({ title: "Пример страницы" });
  },
};

export default function Home({ data }: PageProps<{ title: string }>) {
  return (
    

      
{data.title}

      
Это простая страница, рендерящаяся на сервере.

    

  );
}

Ключевые моменты:

  • PageProps позволяет точно типизировать данные, передаваемые в компонент.
  • Handlers управляют HTTP-запросами на сервере и могут возвращать разные статусы или редиректы.
  • JSX внутри .tsx автоматически преобразуется в HTML на сервере.

Динамическая типизация и props

Fresh предоставляет строгую типизацию для props в компонентах. Использование TypeScript позволяет предотвратить ошибки ещё на этапе компиляции.

Пример типизированного интерактивного компонента (island):

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

interface CounterProps {
  initialCount: number;
}

export default function Counter({ initialCount }: CounterProps) {
  const [count, setCount] = useState(initialCount);

  return (
    
  );
}

Особенности:

  • Props описываются через интерфейсы TypeScript.
  • Используется useState для управления состоянием.
  • Компонент можно подключить как island, что обеспечит его интерактивность только там, где это нужно.

Импорт и экспорт модулей

Fresh поддерживает модульную структуру ES Modules. Импорт осуществляется через относительные пути или специальные алиасы, предоставляемые фреймворком ($fresh/server.ts, $fresh/runtime.ts, $std/... для стандартной библиотеки Deno).

Пример импорта утилит:

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

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

Языковые особенности Fresh

  1. JSX/TSX — основа для построения интерфейсов.
  2. Серверные обработчики (Handlers) — управляют логикой запроса, редиректами и возвратом данных.
  3. Типизация данных через TypeScript — позволяет безопасно передавать props между сервером и клиентом.
  4. Гидратация islands — минимизирует клиентскую нагрузку, делая страницы быстрыми.
  5. ES Modules — современный способ организации кода с поддержкой tree-shaking.

Совместимость с TypeScript и настройка

Fresh автоматически поддерживает TypeScript, достаточно иметь tsconfig.json в корне проекта. Рекомендуется включать строгий режим ("strict": true) для предотвращения ошибок типизации.

Пример базового tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["routes/**/*", "components/**/*"]
}

Выводы по языковому определению:

  • Fresh сочетает возможности JavaScript и TypeScript, обеспечивая гибкость и безопасность.
  • JSX и TSX становятся основными единицами визуального и логического построения приложения.
  • Серверная и клиентская логика разделены через routes и islands, что оптимизирует производительность.
Оглавление