Встречайте новинки Deno — новый веб-фреймворк

В современной разработке JavaScript и TypeScript используется множество фреймворков и библиотек. Кроме того, добавляется каждый следующий месяц. Fresh был тем, который получил стабильный релиз около недели назад.

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

Fresh работает на базе Deno. Deno — это простая, современная и безопасная среда выполнения для JavaScript, TypeScript и WebAssembly, которая использует V8 и построена на Rust. Он управляет зависимостями иначе, чем Node.js.

  • Оперативная визуализация на периферии.
  • Поддержка клиентов на острове для максимальной интерактивности.
  • Нулевые накладные расходы во время выполнения: по умолчанию клиенту не отправляется JS.
  • Нет шага сборки.
  • Настройка не требуется.
  • Поддержка TypeScript по умолчанию.

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

Давайте создадим базовое приложение, которое извлекает изображения из API Hipolabs и отображает их в представлении с помощью Fresh. Чтобы создать демонстрационное приложение, нам нужно установить deno в нашу систему и настроить переменные среды.

Для установки следуйте стандартной документации guide в deno. Чтобы настроить стандартное приложение Fresh. Выберите да для установки twind. Это предоставит нам доступ к служебным классам попутного ветра, которые помогут создать страницу с гораздо меньшим количеством CSS.

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

Как только вы просмотрите папку маршрутов, вы поймете, что маршрутизация в Fresh следует той же схеме, что и маршрутизация Next.js, что удобно по многим причинам. Двигаясь вперед к коду, острова состоят из компонентов, которые нам нужны для отображения внутри наших страниц/маршрутов. Маршруты следуют маршрутизации пути к файлу, то есть, если файл существует внутри маршрута с именем follows.tsx, маршрут /follows будет создан автоматически. Fresh также поддерживает рендеринг на стороне сервера с обработчиками, что упрощает получение данных до загрузки страницы и позволяет нам передавать эти данные в виде свойств на страницу.

По умолчанию свежий поставляется с Typescript, что означает, что мы можем быть строгими с типами, используя интерфейсы и тип. Наш API возвращает данные в виде списка JSON в таком формате.

Нам нужно объявить интерфейс для следующего JSON, чтобы мы могли быть строгими с возвращаемыми типами, чтобы многие разработчики не использовали TypeScript с любым.

Таким образом, объявление интерфейса при получении вызова данных через внешний API всегда является хорошей идеей. Итак, мы объявляем интерфейсный университет.

Теперь у нас есть готовый интерфейс, и мы готовы написать функцию-обработчик, которая запускается до того, как элемент в DOM будет отрендерен, чтобы мы могли напрямую передавать их как реквизиты на страницу.

Функция-обработчик имеет тип Handler, который поставляется со свежим пакетом и может быть импортирован. Это дает нам возможности GET, POST и других методов, которые помогают сделать вызов успешным. Метод рендеринга позволяет нам возвращать данные, полученные из API, непосредственно в базовую функцию, содержащую JSX.

Теперь мы создаем базовый функциональный компонент с PageProps в качестве аргумента, который имеет доступ к параметрам данных внутри него. data содержит извлеченные данные вызовов API, которые мы получили от функции обработчика.

После того, как мы объединим это, мы можем увидеть список университетов, отображаемых на нашем экране в течение миллисекунд. С минимальными изменениями кода мы получаем потрясающую производительность, а синтаксис JSX делает его еще более простым в создании компонентов.

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

Я бы провел еще несколько исследований в свежем виде и со временем выявил некоторые плюсы и минусы этой библиотеки.

Надеюсь, вам понравилось читать мою статью. Спасибо!