Было время, когда Node.js был основной средой выполнения JavaScript. К лучшему, а иногда и к худшему, если вы хотели создать приложение JavaScript, вы использовали Node.js в качестве серверной части. Из-за привычки и огромного количества инструментов, библиотек и фреймворков, поддерживающих Node.js, он остается широко используемым выбором. Но в последние годы появились новые среды выполнения, позволяющие решить некоторые проблемы, с которыми разработчики сталкиваются при работе с Node.js.
Одной из таких новых сред выполнения серверной части является Bun, представленная в 2021 году. Основная идея Бана заключается в том, что она «похожа на Node.js, но предназначена для скорости, современных рабочих процессов и с меньшим количеством инструментов для установки», что устраняет многие разочарования, которые разработчики испытывали при использовании Node.js. Это важно, поскольку Интернет в 2025 году будет выглядеть совсем иначе, чем в 2009 году, когда Node.js был впервые создан.
Hono был создан в декабре 2021 года японским разработчиком Юсуке Вада. Согласно репозиторию GitHub, Hono — это «небольшой, простой и сверхбыстрый веб-фреймворк, построенный на веб-стандартах». Первоначально он был создан для Cloudflare Workers, но теперь работает «в любой среде выполнения JavaScript», включая Node.js, Deno, Bun и Vercel (хотя для поддержки Node требуется адаптер и Node ≥ 18).
Зачем создавать API с помощью Bun и Hono?
Прежде чем мы углубимся в создание бессерверного API, давайте рассмотрим некоторые подобные инструменты сейчас, когда рынок стал более конкурентным.
Классика: Node.js и Express
Это более тяжелая архитектура — больше шаблонов, более медленное время запуска и больший объем памяти — архитектура, чем у Bun и Hono.
Конкурент: Дено и Оук
Из всех возможных вариантов Дено и Оук наиболее близки к Бану и Хоно. Deno — это современная среда выполнения — безопасные настройки по умолчанию, встроенные инструменты, оптимизация производительности — с первоклассной поддержкой TypeScript, разработанная с учетом безопасности и удобных для разработчиков настроек по умолчанию.
Так зачем же вам создавать приложение с Баном и Хоно?
Даже на более конкурентном рынке такая комбинация имеет явные преимущества. Во-первых, это скорость. Bun был создан специально для повышения производительности, что делает ответы API чрезвычайно быстрыми. Тогда есть простота. Настройка минимальна, что позволяет вам сосредоточиться на логике, а не на настройке. Эта архитектура также готова к использованию TypeScript, что упрощает типобезопасную разработку. Кроме того, он удобен для работы без серверов и содержит шаблоны для Cloudflare, AWS Lambda и других платформ.
Давайте возьмем его на тест-драйв.
Мы собираемся создать простой бессерверный API, который:
- Получает два числа от браузера;
- Вычисляет сумму;
- Сохраняет результаты в памяти и в приложении.
Предварительные требования для этого руководства
Перед началом на вашем компьютере должно быть установлено следующее:
- булочка
- Менеджер пакетов булочек
- IDE (я использую VS Code)
- Базовое понимание программирования
Настройка проекта Bun and Hono
Нам нужно выполнить некоторые установки и базовую настройку, прежде чем мы начнем сборку. В новом окне терминала в новом проекте в вашей IDE давайте установим Bun и инициализируем новый проект Hono.
Сначала нам нужно установить Bun.
После успешной установки мы готовы инициализировать проект Hono.
Здесь вы можете увидеть все шаблоны, которые предлагает Hono. Мы собираемся выбрать шаблон «булочка», за которым следует буква «Y» для зависимостей проекта, и менеджер пакетов Bun.
Для этого проекта нам понадобятся всего два файла:
- src/index.ts — это часть пакета, который мы только что установили. Эта страница будет нашим серверным API.
- test.html — вам придется добавить эту страницу в файл hono-API. Это интерфейс нашего браузера.
Создание index.ts
Все следующие блоки кода можно добавить в один и тот же файл в том же порядке. Я разобрал его, чтобы глубже погрузиться в функциональность нашего бессерверного API.
Импорт и инициализация
CORS — это промежуточное программное обеспечение, которое мы будем использовать. Это позволяет получить доступ к API из браузера, предотвращая проблемы с перекрестным происхождением.
Далее давайте включим CORS. Код ниже будет применять CORS ко всем маршрутам.
Следующее, что мы собираемся сделать, это создать хранилище в памяти. Когда мы отправляем числа из браузера, этот код позволит также отображать массив результатов в терминале. Несмотря на то, что мы сохраняем их в терминале, они по-прежнему являются временными и исчезнут при перезапуске сервера.
Построение маршрутов
Первый маршрут, который мы собираемся добавить, — это наш корневой маршрут. Это базовый GET для конечной точки /.
Следующим маршрутом будет другой маршрут GET, на этот раз с параметром URL. Вы можете использовать это для проверки функциональности, добавив слово в конец URL-адреса в браузере. Слово появится на странице браузера.
Теперь мы готовы добавить наш POST-маршрут /API/sum.
Этот код получит два числа из браузера, проверит их тип, вычислит сумму, а затем сохранит ее в массиве результатов. Он зарегистрирует содержимое памяти в терминале. Этот код возвращает сумму в формате JSON.
Последний маршрут, который мы собираемся построить, — это маршрут GET, /API/sum.
Код будет отправлен в браузер в формате JSON.
Последний шаг — экспортировать приложение.
Вот код в одном варианте копирования/вставки:
Создание test.html
test.html — это простой веб-интерфейс, который соединяет внешний интерфейс с серверной частью. Поскольку это базовый HTML, мы не будем рассматривать его подробно. Здесь вы можете ввести два числа и сложить их, и на странице отобразится сумма. Он также регистрирует сохраненные результаты в вашем терминале.
Как запустить бессерверное приложение
После завершения сборки вы можете запустить приложение с помощью команды Bun run src/index.ts.
Вы можете открыть файл test.html вручную в браузере, дважды щелкнув его в папке проекта (на Mac я нашел его с помощью Finder).
Браузер будет выглядеть так:
И каждый раз, когда вы нажимаете «Рассчитать сумму», ваш терминал будет обновляться примерно так:
И все! Теперь у вас есть работающий бессерверный API суммирования с простым веб-интерфейсом.
ТЕНДЕНЦИОННЫЕ ИСТОРИИ YOUTUBE.COM/THENEWSTACK Технологии развиваются быстро, не пропустите ни одной серии. Подпишитесь на наш канал YouTube, чтобы смотреть все наши подкасты, интервью, демонстрации и многое другое. ПОДПИСАТЬСЯ Группа, созданная в Sketch. Джессика Вахтель — писатель-маркетолог для разработчиков в InfluxData, где она создает контент, который помогает сделать мир данных временных рядов более понятным и доступным. Джессика имеет опыт разработки программного обеспечения и технической журналистики. Узнайте больше от Джессики Вахтель
