Введение в Aleph - React Framework в Deno

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

Aleph позволяет создавать приложение React, которое по умолчанию использует рендеринг на стороне сервера. Поскольку он использует Deno, ему не нужно использовать Webpack для import операторов.

Это также означает, что вам не нужно устанавливать пакеты в папку node_modules и записывать package.json файл. Все зависимости могут быть импортированы с использованием URL-адреса ESM и управляются Aleph.js. Например, вы можете использовать глобальный ESM CDN под названием esm.sh для импорта любых необходимых вам библиотек:

import React from "https://esm.sh/react"

Вот некоторые из основных преимуществ использования Aleph:

• Фреймворк нулевой конфигурации. Нет webpack и package.json
• Поддерживает TypeScript по умолчанию
• Использование карт импорта для упрощения организации зависимостей
• Fast Refresh интегрирован для разработки
• Файловая система и маршрутизация API, очень похожа на Next.js
• Встроенная поддержка Markdown
• Встроенная поддержка CSS (LESS и SASS)
• Поддержка SSR и SSG

Если вы уже знакомы с Next.js, то с Aleph вы быстро почувствуете себя как дома.

Начало работы с Алеф

Для начала на вашем компьютере должен быть установлен Deno версии 1.4 или выше.

Примечание. На момент написания этой статьи в Deno версии 1.7.0 была обнаружена ошибка, приводившая к сбою Aleph. Для этого урока я использую Deno версии 1.6.3.

Установив Deno, вы можете установить Aleph с помощью команды deno install:

deno install -A -f -n aleph https://deno.land/x/[email protected]/cli.ts

Когда установка будет завершена, создайте свое первое приложение Aleph с aleph init my-aleph-app.

Внутри my-aleph-app каталога вы найдете ряд автоматически сгенерированных файлов и каталогов, которые составляют структуру приложения Aleph:

my-aleph-app
├── app.tsx
├── components
│   └── logo.tsx
├── import_map.json
├── pages
│   └── index.tsx
├── public
│   ├── favicon.ico
│   └── logo.svg
└── style
    └── index.less

Некоторые примечания к структуре папок выше:

• В папке public/ хранятся статические ресурсы, такие как значки, изображения и карты сайта.
• Папка pages/ предназначена для страниц вашего приложения.
• Папка components/ предназначена для любых общих компонентов React, которые вы можете использовать на своих страницах.
• В папке style/ будет храниться весь ваш код CSS.
• Файл app.tsx служит точкой входа в ваше приложение Aleph.

После создания приложения перейдите в каталог my-aleph-app и запустите приложение Aleph с помощью команды aleph dev.

Перейдите к своему http: // localhost: 8080 /, чтобы увидеть страницу индекса Aleph:

Aleph поддерживает TypeScript с Deno и использует расширение .tsx для всех сгенерированных файлов. Код для индексной страницы выше находится по адресу pages/index.tsx.

Создавайте отличные дизайнерские системы и микро-интерфейсы

Выведите фронтенд-разработку на новый уровень с помощью независимых компонентов. Создавайте и совместно работайте над приложениями на основе компонентов, чтобы легко разблокировать Micro Frontend и обмениваться компонентами.

Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания и компоновки независимых компонентов, а также создания в одиночку или вместе с вашей командой.

Попробуйте →

Быстрая компиляция ESM с Aleph

Модули ES, необходимые для вашего приложения, будут загружены, когда вы запустите команду aleph dev. Каждый загруженный модуль необходимо скомпилировать только один раз, а затем кэшировать на диске.

Когда модуль изменяется, Aleph.js просто нужно повторно скомпилировать этот единственный модуль, поэтому не нужно тратить время на повторное объединение модулей без изменений. Поскольку вам не нужно npm install новые модули или библиотеки, любой новый import, который вы напишете в своем коде, заставит Aleph загрузить этот модуль и быстро скомпилировать его для вас.

После завершения компиляции Aleph мгновенно обновляет браузер, используя технологию HMR (Hot Module Replacement) с React Fast Refresh.

Например, предположим, что вы хотите добавить модуль date_fns в Aleph. Пока ваш сервер разработки все еще работает, вы можете отредактировать свой pages/index.tsx файл по умолчанию с помощью следующего кода:

import React from "https://esm.sh/react"
import { format } from 'https://deno.land/x/date_fns/index.js'
export default function Home() {
  return <h1>{format(new Date(2014, 1, 11), 'yyyy-MM-dd')}</h1>
}

Затем сохраните изменения. В консоли вы увидите, что Алеф автоматически загрузит необходимые модули и обновит вашу страницу в браузере. Вам не нужно останавливать сервер разработки только для npm install библиотек.

Создание страниц Aleph

Концепция страниц в Aleph такая же, как и в Next.js, где каждый отдельный допустимый файл компонента React с расширениями .js, .jsx, .ts, .tsx или .mjs будет сопоставлен с /* маршрутами. Например, pages/about.js будет отображаться на /about маршрут:

import React from "https://esm.sh/react"
export default function About() {
  return <h1>About Us</h1>
}

Вы также можете создать страницу с уценкой, используя расширение .md для своей страницы:

---
title: About
description: My about page
---
# About

Приведенный выше файл будет преобразован в страницу компонента React следующим образом:

import React from "https://esm.sh/react"
export default function MarkdownPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello Everyone, this is my about page</p>
    </>
  )
}
MarkdownPage.meta = {
  title: "About",
  description: "My about page"
}

Aleph также поддерживает динамическую страницу с использованием шаблона именования pages/route/[param].extension. Затем вы можете получить параметр с помощью хука useRouter от Aleph.

Вот пример создания динамического маршрута страницы с именем aspages/user/[id].js:

import React from "https://esm.sh/react"
import { useRouter } from "https://deno.land/x/aleph/mod.ts"
export default function User() {
  const { params } = useRouter()
  return <h1>{params.id}</h1>
}

Приведенный выше код будет

Если вы хотите получить данные из конечных точек API для страницы, вам необходимо использовать предоставленный хук useDeno:

import React from "https://esm.sh/react"
import { useDeno, useRouter } from "https://deno.land/x/aleph/mod.ts"
export default function User() {
  const { params } = useRouter() // grab the parameter
const post = useDeno(async () => {
    return await (await fetch(`https://.../user/${params.id}`)).json()
  })
return (
    <h1>{post.title}</h1>
  )
}

По умолчанию вызов ловушки useDeno будет выполняться только во время сборки, а ответ кэшируется на диске. Когда в браузере вызывается ловушка, Aleph просто возвращает кэшированные данные без повторного получения конечной точки.

Если вы хотите, чтобы Aleph активно извлекал данные при каждом обновлении страницы, вам нужно передать в ловушку два параметра:

Второй параметр - это логическое значение true, чтобы Алеф знал, что вы хотите получать новую выборку при каждом обновлении:

const post = useDeno(async () => {
    return await (await fetch(`https://.../user/${params.id}`)).json()
  }, true)

И третий параметр - это массив зависимостей, чтобы наблюдать за изменением параметра, которое запускает вызов fetch, как в ловушке useEffect:

const post = useDeno(async () => {
    return await (await fetch(`https://.../user/${params.id}`)).json()
  }, true, [params.id])

Подробнее см. В документации useDeno hook.

Поддержка маршрутов API

Когда вам нужно создать конечную точку API для вашего приложения Aleph, вам просто нужно создать папку api/ в корневой папке вашего проекта. Любой файл (_40 _, _ 41 _, _ 42_) внутри папки будет сопоставлен с маршрутом /api/*.

Чтобы принимать входящие запросы к вашему маршруту API, вам необходимо по умолчанию экспортировать функцию, которая принимает APIRequest объект:

import type { APIRequest } from "https://deno.land/x/aleph/types.ts"
export default function handler(req: APIRequest) {
  req.status(200).json({ name: 'Carol' })
}

Маршрут API также поддерживает динамическую маршрутизацию, как на страницах.

Использование карт импорта для модулей

Вы можете использовать карты импорта в Aleph, создав файл import_map.json в корневом каталоге приложения:

{
  "imports": {
    "react": "https://esm.sh/react",
    ...
  }
}

Затем вы можете импортировать react в свои файлы следующим образом:

import React from "react"
export default function About() {
  return <h1>About</h1>
}

Но имейте в виду, что вам необходимо включить поддержку Deno для импорта карт, чтобы эта функция работала, потому что эта функция в настоящее время находится под меткой« нестабильные функции ».

Если вы используете VSCode, добавьте следующие настройки в .vscode/settings.json файл:

{
  "deno.enable": true,
  "deno.unstable": true,
  "deno.import_map": "./import_map.json"
}

Заключение

Aleph - это уникальный фреймворк JavaScript, который позволяет разработчикам создавать свои веб-приложения с помощью React и Deno.

Используя Deno для операций на стороне сервера, Aleph не нужно устанавливать библиотеки в node_modules папку, что устраняет необходимость в package.json файле для перечисления его зависимостей. Также нет необходимости использовать Webpack для обработки ресурсов или импорта библиотек, что дает возможность фреймворка с нулевой конфигурацией.

Для получения дополнительной информации ознакомьтесь с документацией Aleph по адресу https://alephjs.org/docs.

Учить больше