Ru
Ru

Обзор

Steroids for React - это фреймворк, созданный для создания сложных и гибких SPA приложений на React.

Направления прикладного использования фреймворка

  • Создание различных сайтов, (например сайт интернет-магазина)
  • Создание CRM и ERP систем
  • Создание SPA приложений
  • Создание панелей администратора
  • Создание личных кабинетов

Используя традиционные библиотеки, мы создали экосистему с продуманной архитектурой, в которой уже есть роутинг, авторизация, локализация, формы, списки, работа с бекендом, хранилищем и так далее.

Всё это позволяет сделать старт проекта максимально быстрым.

Экосистема фреймворка Steroids

Вся экосистема состоит из нескольких репозиториев:

  • react (пакет в npm - @steroidsjs/core) - основная core часть фреймворка. Содержит логику подключения различных библиотек (react, redux, axios и т. д.), содержит core часть всех ui-компонентов, содержит набор логических компонентов для работы с конкретным функционалом (работа с localstorage, работа с redux и т. д.)
  • react-bootstrap (пакет в npm - @steroidsjs/bootstrap) - содержит view части всех ui-компонентов, scss-стили фреймворка
  • react-webpack (пакет в npm - @steroidsjs/webpack) - содержит конфигурации webpack для проектов на фреймворке Steroids
  • eslint-config (пакет в npm - @steroidsjs/eslint-config) - содержит конфигурацию eslint для проектов на фреймворке Steroids
  • ssr (пакет в npm - @steroidsjs/ssr) - содержит сервер для Server Side Rendering для проектов на фреймворке Steroids
  • boilerplate-react шаблон проекта на фреймворке Steroids

Отдельно стоит отметить логические компоненты, входящие в экосистему Steroids. Они находятся в core части - в репозитории react. Области их использования:

  • для авторизации - компонент JwtHttpComponent
  • для локализации - LocaleComponent и встроенная функция __(), в которую можно оборачивать строки
  • для работы с backend - компонент HttpComponent
  • для работы с локальным хранилищем браузера - компонент ClientStorageComponent

А так же для других функций, таких как добавление метрик в приложение (MetricsComponent), подгрузка внешних API: Google Maps, Yandex Maps (ResourceComponent), авторизация в социальных сетях (SocialComponent), работа с технологией websocket (WebSocketComponent).

Данная экосистема имеет архитектуру, подходящую под большинство проектов, так как включает в себя широкий спектр функциональности, имеет под капотом множество подключенных популярных для React библиотек. Экосистема охватывает множество потребностей современных веб-приложений, такие как авторизация, локализация, Server Side Rendering, метрики, работа с Google Maps и многое другое.

Ключевые особенности

  • Продуманная архитектура, подходящая для большинства проектов.
  • Набор UI компонентов для создания функционального интерфейса.
  • Компоненты разделены на core и view части, что позволяет использовать бизнес-логику компонентов для разной вёрстки и стилей.
  • Использование заранее описанных мета-данных сущностей.
  • Код написан на TypeScript с описанием типов.
  • Высокое покрытие кода тестами.
  • Работа с метаданными, приходящими с бэкенда.

Минимальные технические требования для запуска и использования Steroids

  • Операционная система Windows 10+, MacOS, Ubuntu, Linux
  • Браузеры Chrome, Firefox, Safari, Edge, IE 10+
  • NodeJs 16+
  • Менеджер пакетов yarn или npm

Используемые зависимости

"Под капотом" мы используем наиболее привычные библиотеки для более быстрого погружения разработчика:

Поддерживаемые окружения

  1. Браузеры
    • Современные десктопные и мобильные браузеры (две последних версии, настраивается через @steroidsjs/webpack).
    • Старые браузеры: поддержка осуществляется через полифиллы (polyfills) с помощью @babel/preset-env.
  2. Серверное окружение
    • Рендеринг на сервере (Server-Side Rendering).
  3. Desktop-приложения
    • Electron.

Ссылки

Здесь представлены ссылки на статьи о начале работы со Steroids: