Давайте попробуем собрать свой идеальный boilerplate для full-stack разработки. В статье мы будем постепенно собирать шаблон для быстрого запуска стартапов.

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

Что будем собирать?

Мы будем собирать шаблон для B2B веб-приложения. Начнем с выбора технологий для front-end части. Сфокусируемся на скорости разработки, наличии готовых примеров и размере community. Не будем использовать какие-либо вендорлок библиотеки, наш проект не должно зависеть от конкретного сервис-провайдера. Мы будем использовать 100% Open Source технологии без дополнительных коммерческих сборов и платных лицензий. Никаких Vendor Lock-in и заказных обзоров от вендоров!

Нужно понимать, если наш стартап будет успешным, то нам бы не хотелось переписывать все с нуля из-за плохого выбора технологий, это дорого.

Front-end

Все чаще принято говорить про «мета-фреймворк» (front-end meta-frameworks). На сегодня можно выделить Angular, Astro, Next.js, Remix, Nuxt, SolidStart, SvelteKit. Все они смотрят друг за другом, впитывают и адаптируют идеи и подходы друг друга. Если вам интересно детеальнее сравнить фичи, то я бы порекомендовал доклад Addy Osmany c Google I/O 2024 (слайд взят оттуда), плюс есть статья в блоге prismic "Understanding the JavaScript Meta-framework Ecosystem" с поверхностным озором мета фреймворков, ну и целая куча статей сравнений react vs vue, svelt vs react и др. Эти статьи имеют ограниченное время жизни, они теряют свою актуальность с каждым новым релизом, так как фреймворки берут особенности и идеи друг у друга.

Есть неплохое сравнение популярности на основе «звездочек» на гитхабе, оно коррелирует с размером community и трендами в мире JavaScript.

Тут можно видеть, как vue был в какой-то момент популярнее react или как постепенно теряет популярность jQuery. Помимо звездочек, согласно данным из опроса stackowerflow, Node.js и React.js — наиболее распространенные веб-технологии, используемые всеми респондентами.

Учитывая тренды, можно сказать, что React (на первом слайде представлен как мета-фреймворк Next.js) не дает кому-либо себя обогнать.

Мы будем использвать React + Next.js, так как это самый популярный набор для старта.

С чего начать разбираться? Если вы ничего не знаете о React, то лучше всего — с https://react.dev/learn. А для Next.js лучше всего начать с https://nextjs.org/docs. 

Но одного фреймворка мало. Для быстрой разработки нам понадобится UI библиотека.

UI библиотека

Хороший обзор React UI библиотек с подробным описанием есть в блоге prismic.

Фактически есть два лидера: MUI (Material UI) и Ant. MUI имеет платную версию с расширенным набором компонентов. Например, если вы хотите иметь возможность сортировать колонки таблицы используя Drag & Drop, то для MUI вам понадобится pro версия, в то время как в Ant это доступно без оплаты в примерах. В целом, в Ant чуть больше примеров и готовых компонентов.

Стартовый набор b2b компонентов

Чтобы нам не изобретать Layout, Auth и Permission компоненты, не заниматься созданием библиотеки для получения данных и не создавать свои тулы для realtime обновления данных, мы можем взять refine.

Это набор React компонентов, которые так или иначе приходится изобретать для любого B2B-приложения. Я рекомендую пройти официальный tutorial, чтобы понять основную концепцию и базовые абстракции, используемые в Refine.

У Refine есть набор шаблонов для админ-панелей с поддержкой ant и mui, который можно использовать для быстрого старта. Это подойдет для быстрого старта b2b-стартапа.

Поддержка переводов

Мы будем сразу делать наш продукт международным и нам понадобится что-то для интернационализации. Но, если вы боретесь за размер front-end бандла, то можно вообще не использовать переводы или использовать что-то свое на vanilla-js. Я люблю библиотеки с возможностью выгрузки переводов в сервис, чтобы отдать это профессиональному переводчику или ChatGPT.

Какие есть варианты? В документации Next.js собраны все популярные i18n библиотеки. Из этого списка можно выделить react-i18next, lingui и tolgee, они связаны с облачными сервисами для переводов. Выберем react-i18next, тк в ней есть возможность поднять свой сервис переводов с некоторой логикой и не зависеть от облачного провайдера и примеры интеграции с refine.

Сборка

Мы выбрали технологии, теперь осталось все это собрать в одном месте. 

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

Для организации работы в монорепозитории мы будем использовать workspaces. А чтобы наш проект собирался быстрее, мы будем использовать turbo, он позволит ускорить сборку проекта и хорошо работает с Next.js.

Выделяйте все внешние зависимости в пакеты. У нас будет packages/ui — для всех внешних UI библиотек и React компонентов и packages/i18n — для переводов. Код нашего фронта мы поместим в apps/web.

Что получилось?

Я собрал монорепозиторий для фронта, на базе React, Refine, Antd, i18next, Next.js. В проекте есть поддержка переводов и детектирование языка пользователя. Поддержка стилизации компонентов Antd с возможность переключения темы dark и light.

Результат можно посмотреть в github репозитории и демо, развернутом на Vercel.

Статья получилась объемной и затрагивает только front-end, если она наберет популярность, то я продолжу сборку, и мы посмотрим на то, какие есть варианты для back-end.

Да начнется холивар в комментах. Пишите свои предложения и мысли.