Ultra — это современный потоковый React-фреймворк, созданный с помощью Deno, который в значительной степени полагается на встроенную функциональность вашего браузера. Он использует ES-модули, карты импорта и веб-потоки в будущем. При этом он поддерживает некоторые отклонения от нормы, которые по каким-то причинам нравятся многим обычным людям (JSX и TypeScript). Ultra использует Deno и React и фокусируется на использовании веб-потоков и нативных функций в браузере.
Давайте рассмотрим некоторые причины, по которым вам стоит рассмотреть возможность использования Ultra для вашего следующего проекта.
- Модуль разрешений: Ultra имеет модуль безопасности на основе разрешений Deno, позволяющий устанавливать разрешения для запуска приложений.
- Ленивая маршрутизация: Ultra использует для создания маршрутов маршрутизатор Wouter a small Hooks на основе текущих проектов React и Preact.
- Выборка данных из Suspense: Ultra использует SWR от Vercel с Suspense, чтобы позволить вам получать данные в любом месте ваших компонентов.
- Service Workers: Ultra использует ванильные Service Workers для обслуживания, кэширования и оптимизации вашего сайта.
- Динамический MDX: Ultra имеет поддержку MDX, что позволяет генерировать динамический MDX в ваших приложениях.
Настройка проекта
Давайте создадим небольшое приложение для книжного магазина с помощью Ultra.
Сначала нам нужно создать новый проект Ultra, выполнив в терминале следующие команды.
git clone https://github.com/exhibitionist-digital/create-ultra-app
cd create-ultra-app
deno task dev
В результате выполнения приведенной выше команды будут созданы следующие структуры папок.
**create-ultra-app**
┣ src
┃ ┣ api
┃ ┃ ┗ example.ts
┃ ┣ app.tsx
┃ ┣ favicon.ico
┃ ┗ style.css
┣ .gitignore
┣ README.md
┣ deno.json
┣ importMap.json
┣ package-lock.json
┗ server.ts
Рассмотрим структуры папок подробнее в следующем разделе. Затем запустите приложение по адресу http//:localhost:8000/books.
Структура проекта
Ultra создает следующие структуры папок.
- Server.ts: Этот код запускает сервер Ultra.
- src: Это папка, в которой находится код вашего проекта.
- app.tsx: Это корневой файл для каждого проекта Ultra.
- importMap.json: Здесь документируются зависимости для проекта.
- deno.json: Здесь находится файл конфигурации, позволяющий настроить встроенные компилятор, форматер и линтеры TypeScript.
Обновление app.tsx
Давайте в файл app.tsx
включим Bootstrap CDN, чтобы включить стиль компонентов. Ultra использует react-helmet-async для добавления разметки в html
<head>
. Чтобы заменить код в компоненте <Helmet>
на фрагмент кода ниже.
<Helmet>
<title>Book store</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</Helmet>
Воспроизведение сеансов с открытым исходным кодом
OpenReplay — это пакет для воспроизведения сессий с открытым исходным кодом, который позволяет вам видеть, что делают пользователи в вашем веб-приложении, помогая вам быстрее устранять неполадки. OpenReplay является самостоятельным хостингом для полного контроля над вашими данными.
Начните получать удовольствие от отладки — [начните использовать OpenReplay бесплатно].
(https://github.com/openreplay/openreplay).
Создание компонента «Книга
Теперь давайте создадим еще одну папку component
для наших компонентов. В папке компонента создайте файл Book.tsx
и добавьте фрагмент кода, приведенный ниже.
import React from "react";
const BookList = React.lazy(() => import("./BookList.tsx"));
const books = [
{
id: 1,
title: 'The Design of EveryDay Things',
author: 'Don Norman',
price: '$22.00',
coverImage: 'https://miro.medium.com/max/1200/1*ixC7mJJRK55qPhyRwj3iGg.jpeg',
description: 'Don Norman is a designer who lives and works in San Francisco. He has designed more than 100 products for companies such as Google, Motorola, and eBay. He has also designed products for non-profit organizations such as the World Food Program and UNICEF.',
},
{
id: 2,
title: 'Things fall Apart',
author: 'Chinua Achebe',
coverage: 'https://i0.wp.com/feminisminindia.com/wp-content/uploads/2021/07/Things_Fall_Apart_by_Chinua_Achebe_1_.jpg?fit=1200%2C675&ssl=1',
description: 'Don Norman is a designer who lives and works in San Francisco. He has designed more than 100 products for companies such as Google, Motorola, and eBay. He has also designed products for non-profit organizations such as the World Food Program and UNICEF.',
}
];
В приведенном выше фрагменте кода мы импортировали React и компоненты BookList, которые мы создадим позже в этом учебнике. Затем мы создали массив book с некоторыми данными о книгах.
Теперь давайте создадим и отобразим JSX
для компонента Book
с помощью приведенного ниже фрагмента кода.
export default function Book() {
return (
<>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Book Store</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-md">
<div class="row">
{books.map((book) => (
<BookList key={book.id} book={book} />
))}
</div>
</div>
</>
);
}
В приведенном выше фрагменте кода мы создали JSX
для компонента Book и отобразили компонент BookList
, передав массив book
в качестве реквизита.
Создание компонента BookList
Создав компонент Book, давайте создадим еще один компонент в папке component
под названием BookList.tsx
и добавим фрагмент кода ниже.
import React from "react";
export default function BookList({ book }) {
return (
<div class="col-sm-6">
<div class="card">
<img src={book.coverImage} class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">
{book.title}</h5>
<p class="card-text">{book.description}</p>
<a href="#" class="btn btn-primary">View Details</a>
</div>
</div>
</div>
);
}
В приведенном выше фрагменте мы создали компонент BookList
. Здесь мы деструктурируем массив книг из реквизита, чтобы получить доступ к объектам book
и отобразить их.
Добавление маршрутов
Теперь давайте настроим маршрут для приложения. Ultra использует маршрутизатор Wouter для маршрутизации, и он уже настроен в файле app.tsx для вас. Но нам нужно сделать несколько модификаций. Мы отобразим компонент Book
на маршруте /books
.
...
<Switch>
<Route path="/book">
<Book />
</Route>
</Switch>
...
Заключение
На протяжении всего этого руководства вы узнали об Ultra, создав простое приложение Book. Мы начали с введения, а затем рассмотрели некоторые причины, по которым разработчики должны использовать Ultra в своих проектах.
Вы можете узнать больше об Ultra из официальной документации.