Каждую неделю появляются новые инструменты и технологии. Например, стремительно развивается сфера искусственного интеллекта (ИИ). Почти каждый день выпускается новый сервис или модель. То же самое можно сказать и об экосистеме JavaScript, которая постоянно расширяется за счет новых библиотек и фреймворков.
Кажется, что поспеть за этим прогрессом невозможно. Поэтому так важно иметь надежный стек, на который можно положиться. Стек, готовый к использованию для разработки современных веб-приложений.
Здесь представлен проверенный технологический стек, который я использую для создания веб-приложений.
Вы можете воспользоваться ссылками на инструменты, используемые в каждой части стека, если еще не знакомы с ними.
Фронтенд
Для фронтенда я предпочитаю использовать React. Являясь пользователем React в течение последних лет, считаю его отличным инструментом для разработки веб-приложений. Рекомендую объединять его с Next.js, чтобы упростить создание React-приложений с рендерингом на стороне сервера.
Правда, иногда Next.js бывает несколько категоричен, поэтому я не следую многим его соглашениям. Зато он облегчает процесс создания React-приложений. Использую его маршрутизатор приложений и компонент Image.
Серверные действия новой версии Next.js (Server Actions) не могу порекомендовать, поскольку у меня еще не было возможности опробовать их. С учетом сказанного, мой выбор для интеграции API — React Query в паре с Axios. Они хорошо работают вместе, и мне нравится, как React Query упрощает кэширование и управление данными.
Для стилизации предпочитаю использовать Tailwind CSS. Он не самый лучший, но с его помощью легко создавать дизайн. Правда, синтаксис Tailwind CSS бывает несколько перегружен, но думаю, можно простить ему этот недостаток за простоту использования. Работа Tailwind CSS в паре с shadcn/ui — отличный способ упростить создание компонентов, особенно если вам нравятся минималистичные дизайны.
В общем, мой стек фронтенда таков:
- React Query и Axios;
Бэкенд
Для бэкенда я предпочитаю использовать Node.js. Как и в случае с React, являюсь пользователем Node.js в течение последних лет и считаю его отличным инструментом для создания веб-приложений. Рекомендую применять его в паре с Nest.js для создания конечных точек, необходимых для фронтенда.
Мне нравится, как организован Nest.js и как он упрощает создание API с помощью декораторов. Правда, иногда он приводит в замешательство своей магией кода, неизвестно откуда взявшегося, или проблемами, возникающими из-за круговой зависимости. Но если разобраться в том, как это работает, и изучить документацию Nest.js, можно преодолеть эти сложности.
Поскольку каждому веб-приложению требуется база данных, предпочитаю использовать PostgreSQL (Supabase) вместе с TypeORM. Библиотека TypeORM обладает отличной документацией. Это одна из самых надежных ORM-технологий, которые я использовал. Она существует уже довольно долгое время и отличается безупречной интеграцией с Nest.js.
В общем, мой стек бэкенда выглядит следующим образом:
- PostgreSQL (Supabase) и TypeORM.
Инфраструктура/развертывание
Для развертывания, хостинга и даже настройки SSL предпочитаю использовать Coolify. Недавно освоив этот инструмент, уже успел оценить его помощь в настройке веб-приложений. Если раньше мне нравилось использовать Vercel или GCP с Cloud Run, то теперь я воздерживаюсь от этих бессерверных решений, поскольку понял, что гораздо лучше иметь выделенный сервер. Для своих нужд покупаю VPS у Digital Ocean.
К счастью, Coolify легко настраивается, имеет варианты самостоятельного хостинга и отличную документацию. Он значительно облегчает развертывание веб-приложений и упрощает настройку SSL.
Я использую этот инструмент совместно с Cloudflare для DNS и CDN, а также покупаю на этой платформе легко управляемые домены.
И наконец, в мой стек входит Github. Я соединяю его с Coolify для CI/CD, затем подключаю к Discord для получения уведомлений о развертывании.
В общем, мой стек развертывания выглядит следующим образом:
Электронная почта
Электронная почта — один из инструментов, которые кажутся необязательными, но на самом деле являются необходимыми. Среди множества почтовых сервисов я выделил для себя Resend. Этот простой инструмент значительно упрощает отправку электронных писем.
Если Resend служит для отправки электронных писем, то @react-emails помогает создавать шаблоны этих писем. Раньше создание надежных шаблонов писем было для меня проблемой, но библиотека @react-emails устранила ее.
Resend можно использовать в паре с Supabase, если вас устраивают услуги этой базы данных.
В общем, мой email-стек выглядит следующим образом:
Аутентификация
Настроить аутентификацию пользователей мне обычно помогает Supabase. Для бэкенда я использую сервис авторизации, предлагаемый Supabase, создавая конечную точку и вызывая API этой платформы. Supabase также предоставляет свой фронтенд SDK, но я предпочитаю настройку на бэкенде.
Поскольку я объединяю Postgres с Supabase, то при необходимости могу создать собственный сервис аутентификации. Мой стек достаточно гибок для этого. Главное преимущество собственного сервиса аутентификации заключается в том, что данные пользователей находятся в вашем распоряжении, а не на сторонних сервисах.
В общем, мой стек аутентификации таков:
Хранилище
Хранить изображения я предпочитаю с помощью ImageKit. За долгое время использования он отлично себя зарекомендовал как в мобильных, так и в веб-приложениях, Мне нравится, как ImageKit упрощает хранение изображений и облегчает работу с ними по ходу дела.
Для общего хранилища пока не нашел подходящего варианта. Предполагаю, что смогу использовать Cloudflare R2, AWS S3 или даже Supabase Storage. Но возможности их опробовать еще не было. Я пока не работал над веб-приложениями, которым нужны файлы или общее хранилище.
В общем, мой стек хранилища выглядит следующим образом:
- ImageKit (для изображений);
- Cloudflare R2, AWS S3 или Supabase Storage (для общего хранилища).
Стоимость
При такой настройке обычно ориентируюсь на $20-30. Это стоимость VPS (virtual private server — виртуальный приватный сервер) у DigitalOcean — предпочитаемого мной провайдера. Вероятно, можно найти более дешевый сервер, но меня устраивает этот вариант. Думаю, покупка у провайдера Hetzner обойдется дешевле, чем у DigitalOcean.
У многих других сервисов есть щедрые бесплатные уровни. Они будут полезны тем, кто хочет просто попрактиковаться!
Заключение
Этот стек доказал свою эффективность и помог мне быстрее создавать веб-приложения. Иметь такой надежный стек, на который можно положиться, чрезвычайно важно. Не всегда все решают новейшие инструменты или технологии — куда полезнее использовать инструментарий, наиболее подходящий для конкретной работы.
Мне известны и другие инструменты, но в большинстве случаев этого набора достаточно для создания необходимых мне веб-приложений. Особенно эффективно они работают при объединении в удачно подобранные пары.
Мой стек не идеален, но он помогает мне реализовывать свои идеи и ускоряет разработку веб-приложений.
Надеюсь, он поможет и вам быстрее создавать веб-приложения. А возможно, станет отправной точкой вашего стека, на который вы сможете положиться.
Читайте также:
- Добавление 3D-элементов на сайты с помощью Babylon.js и Vite
- 10 CSS-однострочников для преобразования веб-приложения
- 15 сайтов, экономящих время разработчика
Читайте нас в Telegram, VK и Дзен
Перевод статьи JM Santos: My Tech Stack For Building Web Apps Today
