Restructuring/rewriting the app

[richdho]

As what I said in #43, the purpose of restructuring/rewriting the app is to bring developers/contributors a more friendly development environment. There are tons of ways of doing things in Javascript/Angular today, and here are some of my thoughts:

The quick way(add some dev tools):

• Keep the code base as what it is.
• Add Unit testing(karma)
• Add Live reloading(watch the code change and reload the browser automatically)

The time-consuming way(rewriting, a new repo may be required)

• Restart the project with a yoemen generator by following this style guide
• Follow TDD principle (Test-driven)
• Rewrite the code according to the style guide
• Unit testing, live reloading and build process are included in the generator

Any suggestions are welcome.

[junhan-z]

Nice! Will send more following PRs to contribute.

[junhan-z]

I saw some methods are quite duplicated in different files. for example, the getProviderByName in loweb.js and the getSourceName in app.js. Probably they can be reused?

[listen1]

@junhan-z yes, it belongs to "provider" and should be moved there.
Indeed, I'm thinking about how to make "provider" a better module. (indeed, if I make it an independent repo, it would be better.) Do you agree guys?

[listen1]

"provider" can be a javascript module to fetching info from music site, It even can be used without angular, so anyone who is interested to develop tools to use those music site resource can feel free to use that module.

that module loads submodules. Every submodule is one source provider, users can config to load necessary submodules to fetching music site needed.

[wild-flame]

Sounds good! it would be good to make those module independent of this app so that the API are separated.

Moreover, I also think TDD would be a good idea, especially when more people are here to contribute. It could make refactoring much easier.

[richdho]

I know a little bit about TDD or unit testing. But to best of my knowledge, I am afraid that the current file structure make the test not so easy to write. The better way is to put the app into many components, each component only does one job and one job only, which promotes easier testing and mocking.

Having said that, we can still write a small number of tests for major controllers/services/features/etc

[junhan-z]

@richdho I agree with your point that we don't need to start applying TDD in a hurry, given the fact that current app works well. What we can do is, as you and the author @listen1 said, decoupling the code to modules and adding unit tests accordingly. Such tests help us make sure we won't break anything while make it easier to add and test future features. This task could be a long term goal for this project. However it should be fun and we can learn much from it.

So I think let's make an initial plan and start from small parts.

[listen1]

I also has little experience about TDD for complicate project. As you have seen, the app.js has too many ability and should be split into modules, but the dependencies there are complicated. So I suggest as @junhan-z , tdd can be done step by step. First, split function into different files and then fit into TDD best practice.

@richdho I'm reading the TDD best practice solutions. I'm still confused about how to organize functions into their recommend structure. So I'll keep reading.

And Today I read angular modules of this project and make a quick list for later use.

There are several main modules:

category 1: main backend module

• player control (sound manager, play/pause, prev/next music, load last song when ready)
• source provider (loweb.js): fetching any information from source site.

category 2: model

• my playlist (CRUD)

category 3: view(UI) helper

• player helper (draggable progress bar, playmode, volume control, etc.)
• page title show
• tab control
• dialog control ( with history supported)
• window control ( with history supported)
• lyrics
• search bar control
• infinite scrolling

category 4: Utils

• last.fm syncer
• notification (notice.js)
• configuration import/export
• hotkey
• auto height to hide slider bar
• open url in new tab

[listen1]

found a simple project template for angular TDD:
https://github.com/angular/angular-seed

[richdho]

@listen1 That one is from the Angular team, it can't be wrong if we use this one. But we do have another option: https://github.com/johnpapa/generator-hottowel
Give it a try, install it, it comes with a sample app that helps you understand Angular module/unit test/structure better.

The author writes this style guide. Watch this video for his explanation

[listen1]

Restructuring app roadmap:

• Stage1: Service Layer
  Split several key service to individual service provider, so controller and view can easily use them global. The top service is fetching music info from music sites. Make as many service as possible to let product CORE code base as minimum as possible.

• Stage2: Structure / Support flexible UI
  Follow generator best practice to rebuild Structure. Support use different UI code to change theme.