marionette 开发监控面板，如何组织代码

想开发个ducksboard.com 这样的面板。不知道具体该怎么组织的代码。
https://ducksboard.com/tour/
大致样子是整个面板有很多widget，个数不定。

每个widget的行为和样子都是不一样的，比如有的是饼图，线图，有的是文字。有的是动态的（每隔几秒，或是有新数据时候刷新），有的是静态的。

目前想法：

整个面板是一个CompositeView，使用 jquery.gridster管理每个格子的位置和大小。数据大致是

[{”col”:1,”row”:1,”size_x”:3,”size_y”:3,”widget”:”53cdc843d61f0418d865032b”},{”col”:4,”row”:1,”size_x”:3,”size_y”:3,”widget”:”53cdc843d61f0418d865032b”}]

重写onRenderCollection，把 this.attachHtml function改成

this.grister.add_widget(childView.el, childView.size_x, childView.size_y, childView.col, childView.row);

这样应该是把每个widget的小区域画出来了吧。

主要问题是 里面每个subview都是不一样的。比如有PieView，TextView。每一个subview，负责自己的行为和外貌