The goal of this ticket is to gather all good ideas on how we could use AngularJS within Piwik and make the most of it.

• Introduce AngularJS and define some best practices
  • Good / bad practices
  • ~~When AngularJS can or should be used ~~
  • ~~Some examples ~~
  • Links to some good blog posts / videos, eg. AngularJS Recipes
  • What to consider for IE8 compatibility
  • ...
• Define / change file structure of AngularJS widgets (the earlier the better)
  • Instead of grouping files into javascript, stylesheet, templates, ... folder we could separate them by use case. Meaning under a plugin there is a folder per feature such as "siteselector" which contains all related files. For instance siteselector(-contorller.js), sitecontroller-directive.js, sitecontroller.html, sitecontroller-filter.html
  • ~~There might be especially under CoreHome plugin a folder such as "common" where files are grouped into folders "filter", "service", "directive", ... for commonly used code. ~~
• For Piwik core package: use a Package manager for Javascript such as bower.io
  • This would be used by plugins to define their JS dependencies
  • This would allow Piwik to load a given library only once, when two plugins or more require such JS lib
  • Document in developer.piwik.org this new workflow
  • Marketplace when packaging plugins, will resolve JS dependencies.
  • Builds.piwik.org when building Piwik, will resolve core JS dependencies.
• ~~We could use Karma (http://karma-runner.github.io/0.10/index.html) + MochaJS ~~(http://visionmedia.github.io/mocha/) to run and write tests.
  • Provide a karma config and write a howto setup
  • Write some test examples
• Grunt.js (http://gruntjs.com/) can be used to simplify some common tasks
  • Might be interesting for the build process as well
  • Features like Live-reload are interesting
• Documentation
  • Maybe http://grunt-docular.com/ can be used

See also:

• Introduce AngularJS to Piwik, first step: Website Selector rewrite #4690 Website selector in AngularJS
• Introduce AngularJS to Piwik Platform: rewrite All Websites selector to use AngularJS #4692 All Websites dashboard using AngularJS
• Add possibility to send feedback to the Piwik team in-context #4877 Add possibility to send feedback to Piwik team (this is using AngularJS)
• Show paging in the screen 'Manage websites' to easily manage thousands of websites #3838 Show paging in the screen 'Manage websites' to easily manage thousands of websites

Documentation

• Documentation is partly available under https://github.com/piwik/developer-documentation/blob/master/docs/angularjs-getting-started.md
• File structure is defined as well, see https://github.com/piwik/developer-documentation/blob/master/docs/angularjs-getting-started.md#code-organization--file-structure . It is not ideal yet for sure but we will hopefully fix this medium-term once we have more AngularJS based components. All components should be ideally directly under the plugins directory.