> How did you manage your js files ? Did you put everything in a single file ? If not, what scheme did you take up on to split the files ?
Since I have the benefit of having all my customers' systems on chrome/ff (evergreen variety) I can use latest js features that are stable. So most of my main project (a CMS for schools to manage date sheet, exams, result, attendance, homework, assignments, etc) is divided into features/modules.
There are a few project wide classes (es6) that are all in one file /main.js (about 1000 line file, nothing outrageous). Then every feature can have any number of individual pages (mostly two). So for example attendance has two pages take.php and view.php. Each page with it's own js file, an average of 300-500 lines per page, though a couple js files go as far as 1500.
At the end most pages have about 2 or in some cases 3 js files that are included in the header. It used to be kind of a mess when I wasn't using classes but now it's all pretty much as good as it will get at my current skill level.
> What about minification and obfuscation of js ?
My overall static page load is about 30kb to 50kb on average (excluding api/json calls) so minification is not something that I had to look into but I can easily do it with a babel flag. I mentioned babel in my original comment because some of the site is also exposed to parents that can be from any device/browser. So I use babel to compile (and if I want, minify/obfuscate) some of my code as well.
> And since you are not using jquery, did you manually set event handlers (onclick, onchange) in the html ?
I think even in jquery you would have to set manual event handlers. But I have a `Node.prototype.on = (e, f) => this.addEventListener(n, f);` somewhere in main.js. So setting event handlers is not as verbose but I never needed anything more than that. Not sure what other advantage jquery provides over `node.on('click', e => {})`. Inline event handlers are yuck. My html/js/css are strictly segregated.
I mostly keep my interface simple and focused on one single task so I never needed frameworks like react either. I keep DOM interaction to minimum. Only place where I think something is left to be desired in my work flow is generating DOM nodes from my json api responses. I have it down to as simple as I can but it's still pretty verbose. But I don't want to include and figure out an entire framework just to do this one task that I am not completely satisfied with but isn't that big of a trouble either.
Whew that turned out to be longer than I expected.
Since I have the benefit of having all my customers' systems on chrome/ff (evergreen variety) I can use latest js features that are stable. So most of my main project (a CMS for schools to manage date sheet, exams, result, attendance, homework, assignments, etc) is divided into features/modules.
There are a few project wide classes (es6) that are all in one file /main.js (about 1000 line file, nothing outrageous). Then every feature can have any number of individual pages (mostly two). So for example attendance has two pages take.php and view.php. Each page with it's own js file, an average of 300-500 lines per page, though a couple js files go as far as 1500.
At the end most pages have about 2 or in some cases 3 js files that are included in the header. It used to be kind of a mess when I wasn't using classes but now it's all pretty much as good as it will get at my current skill level.
> What about minification and obfuscation of js ?
My overall static page load is about 30kb to 50kb on average (excluding api/json calls) so minification is not something that I had to look into but I can easily do it with a babel flag. I mentioned babel in my original comment because some of the site is also exposed to parents that can be from any device/browser. So I use babel to compile (and if I want, minify/obfuscate) some of my code as well.
> And since you are not using jquery, did you manually set event handlers (onclick, onchange) in the html ?
I think even in jquery you would have to set manual event handlers. But I have a `Node.prototype.on = (e, f) => this.addEventListener(n, f);` somewhere in main.js. So setting event handlers is not as verbose but I never needed anything more than that. Not sure what other advantage jquery provides over `node.on('click', e => {})`. Inline event handlers are yuck. My html/js/css are strictly segregated.
I mostly keep my interface simple and focused on one single task so I never needed frameworks like react either. I keep DOM interaction to minimum. Only place where I think something is left to be desired in my work flow is generating DOM nodes from my json api responses. I have it down to as simple as I can but it's still pretty verbose. But I don't want to include and figure out an entire framework just to do this one task that I am not completely satisfied with but isn't that big of a trouble either.
Whew that turned out to be longer than I expected.