- Вопрос или проблема
- Технологический стек
- Что я нашел до сих пор
- Ответ или решение
- 1. Выбор технологического стека
- JavaScript в качестве основного языка
- React для создания пользовательского интерфейса
- 2. Библиотеки для работы с таблицами
- Material-UI с таблицей
- 3. Подключение данных и фильтрация
- 4. Реализация интерфейса
- 5. Альтернативные библиотеки
- Заключение
Вопрос или проблема
У меня есть веб-сервис, который предоставляет некоторые данные через RESTful интерфейс, где каждая конечная точка может принимать один или несколько параметров фильтра и возвращает табличные данные в виде массива объектов в JSON. Представьте данные за веб-сервисом как реляционную базу данных, и каждая конечная точка API предоставляет одну таблицу (/ отношение). Некоторые из столбцов содержат внешние ключи в другие «таблицы». Все это доступно только для чтения, никаких изменений не вносится через веб-сервис.
Я хочу создать простой интерфейс, чтобы просматривать данные в каждой таблице. Я хочу одно представление для каждой «таблицы» (т.е. конечной точки API веб-сервиса). Столбцы таблицы должны иметь способ добавления фильтров — встроенная фильтрация не должна выполняться на фронтенде; вместо этого, когда фильтр добавляется, должен быть совершен новый запрос (с добавленным фильтром) к веб-сервису. Фронтенду не нужно обрабатывать пагинацию, это также обрабатывается веб-сервисом.
Некоторая незначительная манипуляция с данными будет необходима на фронтенде. Например, таблица может содержать два столбца foo_a и foo_b, которые я хотел бы отобразить с “иерархической шапкой таблицы”, т.е. оба столбца должны иметь общий заголовок foo, а затем два отдельных столбца должны быть подписаны только как a и b соответственно.
Технологический стек
- Я разработчик на C++. Я очень мало знаю о фронтенд-разработке и действительно не хочу углубляться в разработку графического интерфейса на C++.
- Я немного знаю JavaScript/HTML/CSS и, вероятно, смогу немного поработать с сопутствующими вещами, такими как JSX, TypeScript, …
- По этой причине (и потому что веб-фронтенды могут быть развернуты централизованно и доступны из многих мест) я подумал о том, чтобы создать все это на JavaScript.
- В принципе, я также довольно хорошо знаю Python, так что это было бы вариантом, хотя я всегда считал, что разработка GUI на Python не намного лучше, чем на C++.
- Мне все равно, использует ли решение Node, React, … Однако я не хочу развертывать еще один серверный компонент. Это должно работать полностью на стороне клиента, т.е. в браузере, если это основано на JavaScript.
Что я нашел до сих пор
- Danfo.js вероятно, может обрабатывать чтение результатов JSON из веб-сервиса в DataFrames. У него также, похоже, есть способ рендеринга HTML-таблиц. Однако эти таблицы идут без какой-либо интерактивной функциональности – неясно, насколько легко добавить, например, функциональность ‘нажмите на заголовок таблицы, чтобы добавить фильтр’.
- D3 называют ‘швейцарским ножом для манипуляции данными’, но, насколько я могу судить, это больше о построении графиков и меньше о табличной визуализации.
Ответ или решение
Для создания простого фронтенда, который будет взаимодействовать с данными в формате JSON через RESTful веб-сервис, вам стоит рассмотреть применение нескольких библиотек и фреймворков, которые обеспечат необходимые функции и удобство в разработке. Ниже приведены рекомендации по выбору инструментов и подходов к реализации.
1. Выбор технологического стека
JavaScript в качестве основного языка
Поскольку вы обладаете базовыми знаниями JavaScript, это будет основным языком для разработки. JavaScript широко используется для создания динамичных и интерактивных веб-приложений. Вы можете использовать его на клиентской стороне без необходимости задействования серверной части, что соответствует вашему требованию.
React для создания пользовательского интерфейса
Рекомендую использовать React как библиотеку для построения пользовательского интерфейса. React удобен для работы с однонаправленным потоком данных и позволяет легко создавать компоненты, которые могут повторно использоваться.
- Преимущества React:
- Компонентный подход упрощает разработку, позволяя разделять интерфейс на небольшие, управляемые области.
- Широкое сообщество и множество готовых компонентов, что ускоряет процесс разработки.
- Возможность использования hooks для управления состоянием и эффектами.
2. Библиотеки для работы с таблицами
Material-UI с таблицей
Для визуализации данных в табличном формате может быть использована библиотека Material-UI. Она предоставляет готовые компоненты таблиц, которые можно использовать для отображения ваших данных.
- Преимущества Material-UI:
- Эстетически привлекательный и удобный интерфейс.
- Поддержка сортировки, фильтрации и пагинации.
- Простая кастомизация под ваши требования.
3. Подключение данных и фильтрация
При работе с JSON данными и динамической фильтрацией вы можете использовать fetch API или библиотеку Axios, чтобы делать запросы к вашему RESTful API.
- Пример использования
fetch:const fetchData = async (filter = {}) => { const response = await fetch(`https://api.example.com/data?${new URLSearchParams(filter)}`); const data = await response.json(); // Обработка данных };
4. Реализация интерфейса
-
Структура проекта:
- Создайте компоненты для каждой таблицы, используя React.
- Обеспечьте возможность ввода фильтров (например, через input поля или выпадающие меню), чтобы при изменении фильтров происходил новый запрос к API.
-
Кастомизация таблиц:
- Используйте Material-UI для создания таблиц с иерархическими заголовками. Например, можно создать заголовок с общим названием "foo" и подпунктами "a" и "b".
-
Обработка запросов:
- При добавлении фильтра обновляйте состояние компонента, чтобы получить новые данные с учетом введенного фильтра.
5. Альтернативные библиотеки
Если Material-UI вам не подходит, вы можете рассмотреть такие варианты, как:
- Ant Design – мощная библиотека компонентов, также обладает возможностями фильтрации и сортировки.
- React Table – библиотека с гибкими возможностями для отображения таблиц без строгих зависимостей от функциональности.
Заключение
Использование стека, включающего JavaScript, React и библиотеку Material-UI, обеспечит вам мощные инструменты для создания интерактивного фронтенда. Вы сможете легко интегрировать фильтрацию через REST API, отображать данные в табличном формате и кастомизировать их под ваши потребности. Убедитесь в том, что вы используете современный подход к разработке, чтобы создать удобный и эффективный интерфейс для работы с данными.