交互式Web应用程序的技术堆栈和最佳实践

Question

我正在尝试为交互式Web应用程序选择技术堆栈。

项目要求：

1）应用程序实际上是一个全屏板，其中包含许多相互交互的矩形对象。

2）一个首席用户（演示者）能够将新对象添加到板上，并确定它们的位置，角度，朝向和大小。 这样做的理想方法是，用户可以将简单的左键单击选择拖到板上的空白区域，而又可以在按下右键的同时旋转该选择。 释放鼠标后，将在所选表面上绘制矩形对象。

3）演示者可以调整对象的大小，旋转对象并通过拖动对象来移动对象（如果还按下右键，则可以在移动的同时旋转对象）。 如果我可以测量对象在过程中移动了多少（以任意测量单位），那将是非常好的。

4）许多观察员/用户/客户可以加入演示室并观察：

• 我希望他们实时观察物体的运动。 如果不，

• 我希望他们可以看到动画，该动画将对象从之前的位置转换为新的位置。 如果不，

• 如果对象只是瞬时移动到其新位置，那将是可以接受的。

5）支持的观察员人数：

• 我需要无缝支持50。

• 我最多支持一千个。

• 请提出一个技术栈可以在开始时使用便宜的非专用服务器支持的任意数量（但可以选择以后进行升级，以及如何随支持的客户机数量扩展）。

6）演示者可以提名另一个用户为“辅助演示者”并获得全部特权，但是具有单独的权限（不能移动演示者的对象，只能添加/移动/删除自己的对象）

7）它必须能够在没有安装Flash或Java的情况下工作（有效地使它们脱离了方程式）。

奖励积分：

1）可伸缩性（响应式设计）及其如何影响Canvas（“分辨率”应保持不变，像素大小应调整，同时保持16：9的相同长宽比）

2）移动设备支持-能够在较新的移动设备和平板电脑上正常运行（也许没有某些高级方面）

3）观察者可以选择也移动对象（仅在客户端，在其浏览器中），同时能够恢复（同步）到实际（当前）状态。

我想到的是：

我想到的第一件事是：

• HTML5 Canvas和一个用于在其上绘制和操作对象的JS库（ fabricjs看起来很有希望）

• 具有合适框架的node.js（Meteor目前似乎如火如荼，并且能够处理与许多客户端的实时同步）

但是我都不是很熟悉，也无法判断它们是否是开发此项目的最佳堆栈。

你有什么建议？ 我在jQuery / PHP / AJAX方面有丰富的经验，并且没有在它们之外进行任何尝试，但是对学习新东西没有丝毫兴趣，尤其是当它相当现代且有趣时。

PS：我对如何标记这个问题一无所知，因此，只要您认为合适，就可以随意标记。

Answer 1

也许CollabSketch Vaadin插件 https://github.com/Mazku/collabsketch_vaadin以及此处可用的源可能为您提供了一个起点。 Vaadin带有推送和移动支持，所需的技术知识可能是Java + Vaadin（GWT）+ Maven + Tomcat