Всего несколько месяцев назад мы сделали open-source фреймворк, react-crux. С помощью этого фреймворка любой разработчик может написать простой интерфейс для управления объектами в системе без необходимости писать значительный HTML-код.
Итак, для кого важна реакция?
React-Crux подходит любому разработчику, который ..
- Необходимо создать панель администратора для выполнения основных операций CRUD над сложными объектами в системе.
- Требуется простой интерфейс CMS для управления объектами в базе данных со сложными отношениями.
- Не хочет предоставлять доступ к инструментам БД напрямую своим бизнес-партнерам, но хочет предоставить аналогичные функции
- Хочет написать функциональную красивую CMS менее чем за час
И зачем именно нужен React-Crux?
В любом бизнесе у нас есть много сущностей, которые не привязаны к пользователю. Для компании электронной коммерции это могут быть продукты, категории, продавцы, предложения, города и т. Д. Для стартапа в области здравоохранения, такого как cure.fit, это членство, центры, кухни, сотрудники, тренировки, пункты меню, спрос, врачи, тесты. , клиники и др.
Существует реальная бизнес-потребность в ежедневном создании и изменении этих сущностей. Есть три основных способа, как стартапы достигают этого
- Многие инженеры продолжают заниматься созданием объектов и управлением ими напрямую с помощью инструментов управления базами данных. Это приводит к четырем проблемам
- Личная пропускная способность инженеров становится узким местом, когда предприятия хотят делать что-то быстро.
- Каждый раз, когда инженер переключает проекты / команды, требуется тщательное KT / документация.
- Более того, инженерам довольно быстро становится скучно, потому что давайте посмотрим правде в глаза - манипулирование сущностями - это не то, чем кто-то хочет заниматься каждый день, особенно когда их талант можно направить на более сложные проекты.
- Этот процесс подвержен ошибкам вручную! Любой незначительный промах в критических областях может привести к катастрофическим последствиям для продукта в реальном мире.
2. Несколько инженеров создают пользовательские интерфейсы для бизнес-команд. Это определенно лучше, чем предыдущий вариант, но даже лучшие инженеры тратят время на создание этих пользовательских интерфейсов, и давайте согласимся, это определенно не лучшее использование их времени.
3. И еще несколько, развертывают очень сложные инструменты CMS, доступные на рынке. Это кошмар для поддержания или внесения каких-либо изменений в
Решение
После разработки пары инструментов CMS мы быстро сообразили, что для экономии времени и усилий на разработку мы преимущественно копируем вставляемый код из одного инструмента в другой. Несмотря на это, на разработку / проектирование / создание нового инструмента пользовательского интерфейса все равно ушел день или два. Должен был быть способ получше и с меньшими затратами времени!
Как и многие другие решения, это решение возникло из-за лени - лени бэкенд-инженеров писать интерфейсный код.
Мы подумали, что пользовательский интерфейс может быть просто конфигурацией, которая обеспечивает внешний вид всего пользовательского интерфейса. Оглядываясь назад, это кажется тривиальным, потому что почти все инструменты CMS делают следующее:
- Обеспечьте навигацию по типам сущностей
- Показать объекты в виде списка / таблицы
- Показать сводный / подробный вид любого объекта
- Предоставить элементы управления для создания новой сущности, изменить / удалить существующую сущность, выполнить проверки
- Обеспечивает поиск / фильтрацию / сортировку / разбиение на страницы по указанной выше таблице
Итак, в идеале, если вы определили сущность подробно и задали некоторые предпочтения пользовательского интерфейса, фреймворк мог бы построить общий пользовательский интерфейс. Этот фреймворк является ключевым моментом
«Реагировать» в react-crux
Crux в настоящее время реализован в react и поэтому может использоваться только в приложениях пользовательского интерфейса, написанных на reactjs. Однако эта концепция имеет смысл для любой инфраструктуры пользовательского интерфейса, и мы хотели бы увидеть и проанализировать аналогичную реализацию для AngularJS, Vue, react-native, Android, Flutter или iOS.
Независимая от сервера платформа пользовательского интерфейса
Поскольку фреймворк полагается на простой API REST для извлечения и изменения данных, response-crux не зависит от того, что является стеком на стороне сервера.
Подключается к существующим приложениям
React-crux наконец-то дает вам компонент реакции, который можно добавить в любую существующую кодовую базу.
Итак, сколько стоит использовать cure.fit?
Почти 20 дашбордов / инструментов CMS на cure.fit были созданы с использованием react-crux. Они используются различными командами, в том числе
- Культовые бизнес-команды и операционные команды
- EatFit Business и операционные команды
- Команды роста и ценообразования
- Команды EatFit Kitchen
- Кроссовки CultFit Master
- Команды EatFit RnD
- Менеджеры по продукту
- Инженеры
Это привело к огромному увеличению производительности, поскольку после написания бизнес-логики и сервера API для развертывания CMS требуется всего час или два, а не пара дней. Все, что нам нужно сделать, это написать конфигурацию response-crux!
Конфигурация React-Crux
Несмотря на то, что конфигурация и примеры размещены на внешних веб-сайтах с большим количеством деталей, мы можем рассказать об основах в самом этом сообщении в блоге.
Рассмотрим пример простой таблицы сотрудников, в которой хранятся четыре поля на каждого сотрудника.
- Имя - строка произвольной формы
- Возраст - число
- Электронная почта - строка в свободной форме
- Пол - раскрывающийся список существующих значений.
Вот как выглядит простая конфигурация react-crux.
Затем React-crux преобразует конфигурацию в правильный пользовательский интерфейс, который выглядит следующим образом
А интерфейс модификации выглядит как
Это очень простой пример, который помогает проиллюстрировать, для чего предназначен инструмент. Вы можете заглянуть на сайт живых примеров, чтобы увидеть более сложные и реальные примеры.
Функции, доступные по умолчанию
- Возможность создавать объекты, которые имеют вложенные структуры (поддерживается любой уровень вложенности) или поля, которые представляют собой списки вложенных объектов
- Возможность выбора значений из раскрывающегося списка, который получает питание статически или из другой таблицы с сервера.
- Возможность фильтрации объектов локально на клиенте или на стороне сервера
- Автозаполнение полей на основе локального списка или серверного API
- Флажки, средства выбора даты и времени, цветовые палитры.
- Загрузка файлов и изображений
- Возможность вводить настраиваемые компоненты реакции
Настройка пользовательского интерфейса
React-crux внутренне использует react-bootstrap, поэтому вы можете внедрить свои собственные стили начальной загрузки, и он просто подберет их. Таким образом вы сможете сохранить внешний вид своей организации / команды во всех пользовательских интерфейсах.
Документация и примеры
Более подробная документация доступна на нашей странице github, примеры также живы.
Что дальше?
React-crux уже используется в cure.fit в такой степени, что теперь он является выбором по умолчанию для создания новой CMS. Мы также одновременно работаем над новыми функциями и требованиями (самым большим из которых является отзывчивый пользовательский интерфейс).
Мы также ищем способ очистить схему и сделать ее стандартной и совместимой со схемами БД. Таким образом, нам не нужно будет писать повторяющиеся схемы (одну для БД, а другую - для реакции).
Продолжая ту же мысль, мы также работаем над генератором схем, который сделает этот инструмент еще более удобным для разработчиков.
Мы будем рады, если вы попробуете и услышите ваши отзывы на нашей странице github. И что нам еще больше хотелось бы, так это просматривать любые запросы на включение, чтобы улучшить этот инструмент.
Автор Анкит Гупта
Отредактировал Эша Савла
