search

edemo / PDOauth

4 stars 5 forks source link

proposal to refactor javascript #822

Open magwas opened 7 years ago

magwas commented 7 years ago

This issue is epic. It is here to discuss and plan the transformation to a maintainable frontend code. We should create individual issues from it.

I believe the following should be done:

1) use differently named classes instead of pagescript. E.g login.html would use the Login class, fiokom html would use the MyAccount class, and they both would derive from the PageScript class. Also, groups of functionality should be put aside in their own classes.

2) do not have javascript dependencies in the source code a) It is the task of the install target to obtain the javascript dependencies, and put them where the other javascripts use them. b) insall should put the dependencies to js/dependencies, so they are separated from our code

3) the html should only load one javascript. the others should be loaded from it. preferably with ES6's import, even if we have to use a transpiler due to lack of browser support.

4) DOM building should be done using DOM builders, not html snippets.

5) code should be truly unit-testable: ajax functionality should be used with dependency injection (it is done), and DOM elements should also be dependency-injected.

6) an interface should be defined to expose the status of the javascript, so end-to-end tests can check, and UI can show. whether "the page is fully loaded yet". The current window.traces stuff does something like this, but a) we need something more thorougly thought out b) there should be a single signal if the page is fully loaded, same on all pages. c) it is okay, and from the debugging perspective it is desirable to expose internal states, but that part should be treated as unsupported debug interface, as opposed to b)

Claymanus commented 7 years ago
  1. ok
  2. ok
  3. the html should only load one javascript, yes. but loading others is not effective. we should have a script running in deploy time which is able to combine them into one for each static html page.
  4. why? what is the benefit? using DOM builders produces ugly impenetrable long code
  5. using ajax for dependency injection produces lot of traffic, see 3. (same problem regarding css)
lbarjak commented 7 years ago

lebab, ES5 --> ES6 https://github.com/lebab/lebab 'babel'.split("").reverse().join("") :)