Technology stack and best practices for an interactive web application

Question

I'm trying to pick a technology stack for an interactive web application.

Project requirements:

1) Application is actually a full-screen board, holding a number of rectangle objects which interact with one another.

2) One lead user (demonstrator) is able to add new objects to the board, and to determine the position, angle, facing and the size of them. An ideal way to do that would be if a user could drag a simple left click selection on an empty space on the board, while being able to rotate that selection during the time the right click is also pressed. Upon releasing the mouse the rectangle object would be drawn on the selected surface.

3) The demonstrator can resize the objects, rotate them and move the objects around by dragging them (while being able to rotate them while moving if the right click is also pressed). It would be really nice if I could measure how much the objects moved in the process (in arbitrary measurement units).

4) A number of observers / users / clients can join the demonstration room and observe:

• I would prefer that they observe the moving of the objects in real time. If not,

• I would like that they can see the animation which translates the object from its previous position to its new position. If not,

• It would be acceptable if the object just moves instantaneously to its new position.

5) Number of supported observers:

• I need to seamlessly support 50.

• I would like to support up to a thousand.

• Please suggest an arbitrary number that the technology stack could support with a cheap non-dedicated server at start (but with the option for upgrade later and how it would scale with the number of supported clients).

6) The demonstrator can nominate another user to be an "assistant demonstrator" and get full privileges, but separate jurisdiction (cannot move demonstrator's objects, only add / move / delete his own)

7) It must be able to work without Flash or Java installed (which effectively leaves them out of the equation).

Bonus points:

1) Scalability (responsive design) and how it affects the Canvas ("resolution" should stay the same, pixel size should adjust, while keeping the same aspect ratio of 16:9)

2) Mobile device support - Able to work reasonably well (maybe without some advanced aspects) on newer mobile devices and tablets

3) Observers have the option to also move the objects around (only client-side, in their browser), while being able to revert back (sync) to the actual (current) state.

What comes to my mind:

The first thing that comes to my mind is:

• HTML5 Canvas and a JS library for drawing and manipulating objects on it ( fabricjs seems promising)

• node.js with a suitable framework (Meteor seems to be in full swing at the moment, and equipped to handle real-time synchronizing with lots of clients)

But I am not really familiar with either and cannot judge if they would be the optimal stack to develop this project on.

Do you have any recommendations? I have experience with jQuery / PHP / AJAX and haven't ventured much outside of them, but have no qualms learning something new, especially if it's fairly modern and interesting.

PS: I'm at a loss as to how to tag this question, so feel free to tag it however you deem appropriate.

Answer 1

Maybe the CollabSketch Vaadin plugin https://github.com/Mazku/collabsketch_vaadin with the source available here might give you a starting point. Vaadin comes with push and mobile support and the required tech knowledge could be Java + Vaadin(GWT) + Maven + Tomcat