MobileFrontend/JS code organization

Current state
Currently JavaScript code in MobileFrontend is divided into separate modules. Each of them is responsible for a distinct feature in the mobile frontend, e.g.  folds and unfolds sections in articles,   adds additional feature to the mobile watchlist (thumbnails). The concept is similar to plugins.

Some modules use the  function which expects an object with an   function as its argument. After the main code is initialized the  function of each module is called.

Other modules simply do something, which can be binding to an event of the  object or performing some actions after the DOM is ready.

There is no guidelines as to how modules should look like. They are usually a collection of functions that perform everything needed for the given module without following any programming paradigms. Object oriented patterns are not used, there are no separate objects which would take care of different parts of a particular feature, like interpreting data from APIs (model) and building user interface (controllers/views/templates).

Very often a single JavaScript function has multiple responsibilities, like fetching data from the API, fetching data from DOM, manipulating this data and rendering the user interface.

Problems
The lack of code modularity causes three main problems:


 * It makes code reuse or even noticing that a part of the code could be reused harder.
 * It makes reviewing the code more tedious. When even a small change is introduced in a large function that has many responsibilities, the reviewer often has to reread the whole function to understand that small change.
 * It makes testing more difficult. A piece of code that has many responsibilities can not be unit-tested which often leads to not testing that code at all.