@diosmosis opened this Issue on September 4th 2013 Member

At the moment, there is no set of practices/concepts that guide the way UI controls are coded. The general process to add one seems to be:

1) Add controller action that echo's HTML via a template.
2) In the template, add JavaScript to add behavior.
3) Sometimes, the JavaScript is moved to a separate file and the template just invokes a function in that file.

This works, but results in messy, unclear code and does not make reusing controls easy. I think a better way to organize code (across both JavaScript & PHP) is to architect UI controls like this:

1) Create a class for the control server side that derives from a UIControl base (which in turn derives from Piwik\View).
2) Define properties (as are done currently for ViewDataTable) to allow PHP code to configure the UIControl & create a template that uses those properties.
3) Create a controller action that echos the control.
4) Create a JavaScript class that derives from a JavaScript UIControl class. This class will handle generic behavior such as asset cleanup, element resize detection, automatic initialization after ajax and anything else that comes up.

@mattab commented on September 6th 2013 Member

Would the value be for core devs, or would this improvement also help plugin developers?

@anonymous-matomo-user commented on September 12th 2013

In 6d884e19f5d870c8c0647ec2bac68fa546115578: Refs #3089, #4116, display visitor profile popup when visit in realtime map is clicked.


  • Includes new UIControl base type.
  • Fixes cleanup bugs in realtime map and popover closing.
  • Refactored realtime map so as little JavaScript as possible is included in HTML fragments.
  • Allow more than one realtime map to exist on a single page.
@anonymous-matomo-user commented on September 12th 2013

In 94799537f84f0be7a3ad2da3bf289ed2783c3b27: Refs #4116, move initElements code to utility function in UIControl.

@mattab commented on April 5th 2014 Member

We will continue this work and move to use more AngularJS based solutions, which have cool advantages like unit testing, dependency injections. In general we'll aim to build a light client app in Javascript, and the server side will move to APIs (almost no controllers).

See ticket AngularJS in Piwik #4691

This Issue was closed on April 5th 2014
Powered by GitHub Issue Mirror