Лучшая архитектура приборной панели

Мне нужно создать панель инструментов для приложения, у панели управления будут разные кнопки, и у каждого dashlet может быть одна из следующих вещей:

Графы (JFreeCharts и некоторые диаграммы Javascript)
Таблица данных из таблиц
Данные из внешних источников
Карты

Что может быть хорошей архитектурой для такого рода приложений?

То, что я имею в виду:

Каждый dashlet должен иметь свой собственный жизненный цикл, и при загрузке приборной панели он должен просто отображать интерфейс пользовательских панелей.
После загрузки страницы каждый dashlet отправляет вызов сервера (на основе его типа) для извлечения его данных
После того, как данные были извлечены, каждый dashlet (на основе своего типа) отображает данные.

Ответ 1

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

Немного исканий в Google может иметь все преимущества и недостатки каждого, и я бы весил ваши варианты соответственно.

Что все сказано, основная проблема, которую вы поставили, на самом деле похожа на нашу. В конце концов, мы построили что-то немного другое в доме. Многие из этих инфраструктур оптимизированы для отображения единственного канонического "представления" на основе модели, отраженной БД и контроллером, для управления небольшими изменениями. По сути, на приборной панели есть множество различных модулей, которые должны делать свои собственные независимые вещи, как вы упомянули в своем вопросе. Из-за большого числа независимых модулей я чувствую, что вы можете почувствовать боль в некоторых из перечисленных выше структур.

Я не могу точно сказать, как реализовать такую архитектуру модуля, но вот некоторые эмпирические правила, которые мы использовали при разработке наших продуктов:

Дизайн модуля:

Модуль основе. (Модуль входа, модуль карты, каждый Dashlet может быть модулем и т.д.)
Модули должны иметь одну модель, могут иметь не более одной коллекции (которая есть -модель) и могут иметь один или несколько видов.
Модуль может использоваться в нескольких местах и на страницах. Единственная модель должна оставаться неизменной, но взгляды, вероятно, будут отличаться.

Rendering:

Почти весь HTML на странице написан и обновлен модулями javascript. Файлы шаблонов почти пусты, за исключением заголовков и основных лесов.
Все модули отображают свои собственные HTML-слова и заменяют их на DOM. Модуль должен иметь как можно более статическое представление HTML, готовое к работе перед вставкой в DOM. Это означает, что функции рендеринга используют ".replaceWith()" вместо ".append()".
Если простая замена HTML не является опцией (т.е. должна быть анимирована), следует определить функцию перехода, подробно описывающую, как перейти из одного отображаемого состояния в другое.
Поскольку рендеринг дорог, представления по умолчанию не обновляются автоматически при всех изменениях модели. Повторное разрастание происходит только через события. _render() является внутренним методом.

ортогональности:

Один диспетчер событий между модулями на странице Контроллер обрабатывает все кросс-эффекты между модулями.
Модули никогда не должны "выходить за пределы" своего собственного контекста DOM. Если событие в одном модуле влияет на другое, оно должно пройти диспетчер диспетчера страниц.
Каждый модуль как можно более ортогональный. Они зависят друг от друга как можно меньше.
Каждый модуль в собственном файле.

Подключение к серверу:

Все модули используют один и тот же глобальный бэкэнд-адаптер. Модули никогда не разговаривают с бэкэнд сами по себе. Это делает ваш внешний интерфейс неактивным.

Рекурсивный

Модули обычно включаются в другие модули.
Модули повторно рекурсивно рекурсивно.

Testable

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

Если кто-то знает о других фреймворках в этом направлении, пожалуйста, поделитесь!

Ответ 2

Наше веб-приложение основано именно на этой архитектуре и в производстве с конца прошлого года. Вы можете увидеть его на http://beebole.com

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

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

Ответ 3

Я бы посоветовал использовать пользовательскую веб-инфраструктуру, когда доступно так много бесплатных.

Как уже упоминалось в другом ответе, традиционные рамки стиля MVC не очень хорошо подходят для вашей "приборной панели" желаемого стиля пользовательского интерфейса. Они лучше всего используются для создания статических веб-сайтов на основе данных, полученных в другом месте. Они плохо взаимодействуют с пользовательским взаимодействием, и вам обычно приходится вручную запускать свой собственный AJAX, чтобы делать что-либо полезное без запроса страницы.

Лучшей породой веб-фреймворков, на которые следует обратить внимание, являются веб-фреймворки Web 2.0, также известные как рамки, которые помогают вам создавать веб-приложения. Важно понимать разницу между веб-сайтом и веб-приложениями. Они обычно дифференцируются, поскольку последние являются интерактивными, а первые - в основном статическими. Веб-сайты, которые также имеют некоторые интерактивные компоненты, все еще являются веб-сайтами. Хороший способ подумать об этом - спросите себя: "Это похоже на настольное приложение?".

Для разработки веб-приложений в сфере Java (JVM) я бы использовал Vaadin. Он позволяет писать код Java, похожий на программирование Swing, с использованием методов, основанных на событиях. Вы даже можете избежать написания HTML, если хотите, путем определения ваших взглядов программно. Это позволяет вам унифицировать вашу логику просмотра (в веб-приложениях, более чем обычно), что невозможно с регулярными фреймворками на основе HTML-шаблонов. Другим главным преимуществом является то, что он имеет встроенные методы, которые позволяют писать Java-код для обработки динамических, асинхронных функций, и все это автоматически переводится на JavaScript. Не нужно писать 4 разных языка во время написания своего веб-приложения, просто напишите Java для всего! Попробуйте, с удовольствием работать!

Еще одна инфраструктура веб-приложений, которая получает много внимания, Lift. У меня нет опыта с этим, но многие разработчики, с которыми я говорил, повысили его до меня. Я считаю, что он использует HTML-шаблоны с кодом Java в качестве внутреннего. Также, по-видимому, очень легко начать работу, и ваше веб-приложение развернулось. Он также имеет поддержку для работы с AJAX. Стоит посмотреть, по крайней мере.

Есть, вероятно, еще много рамок для веб-приложений, которые бы соответствовали вашим потребностям. Все они имеют преимущество в том, чтобы быть протестированными, независимо поддерживаться, обновляться и защищаться *. Если вы создадите собственные рамки для этого проекта, вам нужно все обойтись самим собой. Написанная веб-среда, которая не предлагает ничего нового, будет похожа на написанный еще один язык программирования, который не является инновационным; это просто пустая трата времени.

Ответ 4

Я думаю, что то, что вы ищете, более похоже на управление или управление вашей приборной панелью. Я создаю нечто подобное. Я бы посоветовал вам взглянуть на движок Google, который можно использовать для автоматизации и управления этим: https://developers.google.com/appengine/docs/whatisgoogleappengine

Также посмотрите на эти панели с открытым исходным кодом: https://github.com/twilio/stashboard