最佳仪表板架构

Question

我需要为应用程序构建一个仪表板，仪表板将有不同的小面板，每个小面板可以包含以下任何一项：

1. 图表（JFreeCharts和一些Javascript图表）
2. 表中的表数据
3. 来自外部来源的数据
4. 地图

这种应用程序的优秀架构是什么？

我目前的想法是：

1. 每个dashlet都应该有自己的生命周期，当仪表板加载时，它应该只显示dashlets的UI。
2. 页面加载后，每个dashlet都会发送一个服务器调用（基于其类型）来获取其数据
3. 获取数据后，每个小面板（基于其类型）都会呈现数据。

Answer 1

首先，有很多前端框架可以帮助您入门。一些比较流行的包括：

• Backbone
• Javscript MVC
• Sproutcore

谷歌的一些搜索可以提供各自的优缺点，我会相应地权衡您的选择。

尽管如此，你提出的基本问题实际上与我们的问题相似。最后，我们在内部建造了一些不同的东西。许多框架都经过优化，可以根据DB和Controller反映的模型显示单一的规范“视图”，以管理小的变化。事实上，仪表板上有各种不同的模块，必须按照你在问题中提到的那样独立完成。由于大量的独立模块，我觉得你可能会对上面列出的一些框架感到痛苦。

我无法确切地告诉你如何实现这样的模块架构，但是我们在设计时使用了一些经验法则：

模块设计：

• 模块为基础。 （登录模块，地图模块，每个Dashlet可能是一个模块等）
• 模块必须有一个模型，可能只有一个集合（一个模型），并且可能有一个或多个视图。
• 模块可以在多个地方和页面中使用。单数模型应保持不变，但视图可能不同。

<强>渲染：

• 页面上的几乎所有HTML都是由javascript模块编写和更新的。除了标题和基本脚手架之外，模板文件几乎是空的。
• 所有模块都呈现完整的HTML自我并将自己替换为DOM。在插入DOM之前，模块应该具有完整的静态HTML表示。这意味着渲染函数使用“.replaceWith（）”而不是“.append（）”。
• 如果简单的HTML替换不是一个选项（即需要设置动画），则应定义一个转换函数，详细说明如何从一个渲染状态转到另一个渲染状态。
• 由于渲染很昂贵，因此默认情况下，视图不会在所有模型更改上自动刷新。重新发送仅通过事件发生。 _render（）实际上是一种内部方法。

<强>正交

• 页面上的单个模块间事件调度程序Controller处理模块之间的所有交叉影响。
• 模块不应该“到达”自己的DOM上下文之外。如果一个模块中的事件影响另一个模块，则它应该通过页面控制器调度程序。
• 每个模块尽可能正交。他们尽可能少地相互依赖。
• 每个模块都在自己的文件中。

连接到后端：

• 所有模块都使用相同的全局后端适配器。模块永远不会自己与后端通信。这使您的前端后端不可知。

<强>递归：

• 模块通常包含在其他模块中。
• 模块以递归方式重新渲染。

<强>可测试：

• 因为模块呈现静态HTML，所以可以对它们进行预测测试。
• 模块必须是可测试的。
  • 标准输入 - ＆gt;模块 - ＆gt;可预测的静态HTML输出。
  • 标准事件 - ＆gt;模块 - ＆gt;可预测的静态HTML输出。

如果有人知道这些方面的其他框架，请分享！

Answer 2

我们的网络应用程序正是基于这种架构并从去年年底开始生产。您可以在http://beebole.com

看到它

我们只是优化了对自己服务器的调用。 每次加载屏幕时，只需一次调用即可获取大多数小部件所需的公共数据。

然后，如果一个小部件需要额外的数据，它就会自动调用我们的服务器。 外部小部件也调用自己的数据，但是调用另一台服务器。

Answer 3

当有太多可用的免费网站框架时，我建议不要使用自定义网络框架。

正如另一个答案中所提到的，传统的MVC风格框架并不适合您的“仪表板”所需的UI风格。它们最适合用于根据其他地方检索到的数据创建静态网站。他们不能很好地处理用户交互，你通常需要手动滚动你自己的AJAX来做任何有用的事情而不需要页面请求。

要查看的更好的Web框架是Web 2.0 fraemworks，也称为帮助您构建 Web应用程序的框架。了解网站和Web应用程序之间的区别非常重要。它们通常是后者是互动的，前者主要是静态的。也有一些互动组件的网站仍然是网站。想一想的好方法是问自己“这感觉就像桌面应用程序吗？”。

对于Java（JVM）领域中的Web应用程序开发，我会使用Vaadin。它允许您使用基于事件的方法编写类似于Swing编程的Java代码。如果您愿意以编程方式定义视图，甚至可以完全避免写HTML。这使您可以对基于常规HTML模板的框架无法实现的视图逻辑（在Web应用程序中，比平常更多）进行单元测试。另一个主要优点是它内置了一些方法，允许您编写Java代码来处理动态的异步功能，并且它们都会自动转换为JavaScript。编写Web应用程序时无需编写4种不同的语言，只需为所有内容编写Java！尝试一下，使用它很有趣！

另一个引起很多关注的网络应用框架是Lift。我没有经验，但我与之交谈的许多开发者都将它推广给了我。我相信它使用带有Java代码的HTML模板作为后端。它显然非常容易上手，您的网络应用程序也会启动。它还内置支持AJAX功能。值得研究至少。

可能还有更多适合您需求的Web应用程序框架。这些都具有经过测试，独立维护，更新和安全*的优势。如果你为这个项目推出自己的框架，你需要自己担心一切。编写一个不提供任何新内容的Web框架就像编写了另一种不创新的编程语言;这只是浪费时间。

Answer 4

我认为您正在寻找的更多是管理或控制仪表板。我正在设计类似的东西。我建议你看一下google app引擎，它可以用来自动控制它：https://developers.google.com/appengine/docs/whatisgoogleappengine

另请参阅这些开源信息中心：https://github.com/twilio/stashboard