Clean up the entangled HTML/Javascript mess

[arnecls]

The Javascript files suffer from two major problems

• Too many HTML strings make it hard to distinguish between UI logic and rendering code
• The code is hard to read because of all the rendering code
• It is sometimes not clear which file is responsible to hold which part of the UI rendering code (namely tooltips)
• It is hard to reuse UI elements like user buttons or the tab control
• The time required to get back into the code is too damn high

Solution:

• Use external libraries for e.g. time functions
• Use a MVC (or) template engine to separate HTML from JS (React, Handlebars, Mustache, whatever)
• Keep an eye on performance!

[mroswald]

Hmm.. what about angular.js?

[arnecls]

While I did not have an in-detail look on angular, yet it seems a little too overpowered for my needs. From what I've seen react.js looks a lot better especially as it mixes up well with what I currently do. Angular would probably require a more in-depth rewrite which seem to be a lot more heavy weighted. But again - that's an opinion after having a quick look over some of the libraries/framworks/however-you-want-to-call-those available.

[mroswald]

So I'm new to angular on myself too. I was very impressed how easy it is :-) If you like I would create a branch and rebuild the calendar view.

[arnecls]

Yes and no. I would of course be interested to see how angular works out here but it might happen that there are certain aspects in angular that will make me delcine that merge request. So just to make clear what I was initially looking for

• A lightweight framework in terms of script size and overhead
• Easy to understand even if someone does not know the framework
• JQuery compatible
• MVC frameworks seem not to fit quite well for the raidplaner because the javascript part is "V and C" but not "M" as this is covered by the PHP side. So any remodeling of the data on javascript side should be avoided. Enriching is ok though.
• Good separation of HTML and JS. The most important point. I don't want to mix HTML and JS anymore. It's a mess.
• No template files (if possible). I personally think it is better to have view and control separated inside the same language. Parsing template files takes time and templates are like little programming languages of their own. Why use a new one if you already have one at your disposal? (this topic is quite broad but I don't want to write several pages of past experience here ^^).
• Widget support. I want to replace jquery UI on the long run and widgets are the most shared code fragments throughout the UI.
• Rendering speed (e.g. fast re-rendering of changed content parts). The raidplaner uses a single page approach, so only the changed things should be re-rendered (that's by the way one of the major points for react)
• Support for responsive elements. Well that's probably just a "keep in mind while re-implementing" point, but if all the scripts are rewritten the site should be made responsive, too.

Next to react.js I also looked at backbone, ember and angular. But as I said these were not in-depth looks at these frameworks. React won for me as it seems to be very lightweight, fast and non-intrusive in terms of MVC.