@mattab opened this issue on February 17th 2014

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: - #4690 Website selector in AngularJS - #4692 All Websites dashboard using AngularJS - #4877 Add possibility to send feedback to Piwik team (this is using AngularJS) - #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.

@gaumondp commented on February 17th 2014

Just wanted to add some input on user case when the Piwik server doesn't get access to the internet :

Please take into consideration that those nice installers/packages managers don't make sense to few of your users if they don't have a master configuration to set a local directory instead of external URLs.

Same apply for the Marketplace or GeoIP download.

Dali

@tsteur commented on February 17th 2014

@dalidev those tools are meant for development, not production

@gaumondp commented on February 17th 2014

Everything is ok then !

@mattab commented on March 11th 2014

Increasing priority of tickets in alignment with our vision of a powerful open platform

@tsteur commented on March 12th 2014

In a5533127b5a42bc2bcd580dadf0b8d26e5843199: refs #4691 moved components temporarily into a folder named angularjs

@tsteur commented on March 12th 2014

In cae443f9528ea433061ce3a0f2190fed07826e18: refs #4691 fixing filenames

@tsteur commented on March 12th 2014

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.

@mattab commented on March 27th 2014

A great candidate for an AngularJS rewrite would also be the segment editor.

@tsteur commented on March 29th 2014

In 9e9441e65b5cdc816c998291562da6402494e0da: refs #4691 started to add support for unit tests by using karma + mochajs +chai/expect.js

@tsteur commented on March 30th 2014

In 25f7c2c20a5b65784fb3c957d09ca5db8bbea017: refs #4691 use chai instead of expect.js, run tests by default only in PhantomJS, added missing node modules

@tsteur commented on March 30th 2014

In 70eeaccdb7856b023362888225c7cb825019a777: refs #4691 wondering if we can easily enable travis for angularjs tests

@tsteur commented on March 30th 2014

In 11acb3f4cc8833a913ff0bb2875d7996b64400c1: refs #4691 install npm before running tests

@tsteur commented on March 30th 2014

In 9164d29b2b2f8e22fb012817dbde9ae58f3447ed: refs #4691 added missing version field

@tsteur commented on March 30th 2014

In 1b7e42b45a1e8c1c7f0b1e4cc86ef1cd4e53f78c: refs #4691 should make sure we have latest node version

@tsteur commented on March 30th 2014

In 53e4de5d5ade1370d4bbb2493870862668f66cfb: refs #4691 updated doc

@tsteur commented on March 30th 2014

In 7c1a73db9d5683ccb074012a1e735124f21a74a4: refs #4691 assume yes to all queries

@tsteur commented on March 30th 2014

In 329a293095d7c8a981529c08ec3ba8da90ece12f: refs #4691 added more test cases

@tsteur commented on March 30th 2014

In 275b6b0f0a771aa480ec0b5fc7265487263aa464: refs #4691 make sure to install correct package

@tsteur commented on March 30th 2014

In ad5de13b37c8c5ef99de1bd6c33eed08a3d4013f: refs #4691 fix file name

@tsteur commented on March 30th 2014

In 18a35b36cc1d9255d4214114eb69cebbe7ad2b41: refs #4691 log only errors

@tsteur commented on March 31st 2014

In 735c091090f0a49f1900bf8358ef1d1847b52519: refs #4691 added more example tests and fixed a bug found because of the tests

@tsteur commented on March 31st 2014

Read more about how to run and write tests here: https://github.com/piwik/piwik/blob/master/tests/angularjs/README.md

@tsteur commented on March 31st 2014

Removing yoeman for now, not really needed at the moment

@tsteur commented on March 31st 2014

In cd043e682d6b4ddf58b44a25ed983e2ee690362d: refs #4691 use spec and mocha reporter, prepared usage of jshint

@tsteur commented on March 31st 2014

In 5c326f6171cb1e6c570064b9bfa8b47f4d060140: refs #4691 make sure mocha reporter is there

@tsteur commented on March 31st 2014

In c62423bf2029bf71506d672d9558ad9db6bf464b: refs #4691 _test.js => _spec.js

@julienmoumne commented on April 27th 2014

ref #3838

@tsteur commented on May 5th 2014

I'm closing this ticket for now. We can create tickets for the not yet resolved items once we need/want/decide to use them.

@mattab commented on May 6th 2014

Great effort Thomas!

Letting users and developers modify the interface via JavaScript will be a great achievement, and much needed for our vision to build the best open platform for analytics.

This issue was closed on May 6th 2014
Powered by GitHub Issue Mirror