JavaScript dependency injection

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

JavaScript dependency injection

Post by callumacrae » Sun Jul 13, 2014 7:20 pm

The phpBB front-end doesn't have any dependency injection to speak of, which isn't great; there are multiple things happening, and it could easily be split into modules.

I prefer CommonJS dependency injection, but that would require an npm-based dependency and most people here seem uncomfortable with that, even though all front-end developers are used to it now. The most common CommonJS dependency library is Browserify; I've used it before, and it's very nice.

For AMD dependency injection, RequireJS seems to be most popular. I've used it before (more than I've used CommonJS libraries), and I don't really like it (for purely syntactical reasons only; the first line ends up really long, which can very easily cause merge conflicts or ugly JS)


If you don't know what I'm talking about, check out this article by Addy Osmani.
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 958
Joined: Fri Dec 18, 2009 3:55 pm

Re: JavaScript dependency injection

Post by brunoais » Mon Jul 21, 2014 10:55 am

I don't like RequireJS for everything (and RequireJS-like loaders) because they are sooo damn slow!
Specially the 1st load... I almost can guess the websites that use it by the time it takes to load.
I really prefer having scripts on the <head> (with async, ofc) for the ones that need to be ready to work ASAP, near the end of the <body> for the ones that require some action before working, then preload other scripts that are heavy and finally, load all others at their time (except if 1 is required ASAP due to the user's interactions with the page).
That's really easy to do and I've done it some times.

I prefer using those tools such as RequireJS just for the scripts that are not required for the page to work correctly. BTW, I also hate loading bars (for page loading).

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: JavaScript dependency injection

Post by callumacrae » Mon Jul 21, 2014 12:05 pm

brunoais wrote:I don't like RequireJS for everything (and RequireJS-like loaders) because they are sooo damn slow!
Specially the 1st load... I almost can guess the websites that use it by the time it takes to load.
I really prefer having scripts on the <head> (with async, ofc) for the ones that need to be ready to work ASAP, near the end of the <body> for the ones that require some action before working, then preload other scripts that are heavy and finally, load all others at their time (except if 1 is required ASAP due to the user's interactions with the page).
That's really easy to do and I've done it some times.

I prefer using those tools such as RequireJS just for the scripts that are not required for the page to work correctly. BTW, I also hate loading bars (for page loading).
http://requirejs.org/docs/optimization.html

Obviously it's slow if you leave it as multiple files, but you're not supposed to except during development. You've read the docs, right?
brunoais wrote:BTW, I also hate loading bars (for page loading).
You what? XD
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 958
Joined: Fri Dec 18, 2009 3:55 pm

Re: JavaScript dependency injection

Post by brunoais » Mon Jul 21, 2014 1:25 pm

Seems like who failed to read the docs is the owners of pages I end up on <_>.
callumacrae wrote:
brunoais wrote:BTW, I also hate loading bars (for page loading).
You what? XD
... hate loading bars (for page loading).
They take up too much information. There's no need for such thing.
HTML + CSS is quite small, it makes no sense, in a 1MB/s connection, to take more than a couple seconds (I mean literally! 1s or 2s is all it needs!) to load the page. Then it may load extra stuff for increased interactivity.
"loading..." and such are a pain to take in. The browser already tells me what it is doing and I know I'm waiting for it to load no need to tell me or use my bandwidth just to confirm what I know.

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: JavaScript dependency injection

Post by hanakin » Mon Jul 21, 2014 4:02 pm

your assuming a 1MB connection? seems a little high IMO shoot for a test case at least half that or 25% as more and more individuals are using mobile browsers thats the connection speed you should be benching for which drives concatenation/minification/compression of all files never take the stand that anything is small enough when it comes to page load speed.

also you are professional not a novice your are assuming that people can figure out what a browser is telling them which is never the case as people are generally idiots when it comes to something they do not care to learn or know they need to.

User avatar
brunoais
Registered User
Posts: 958
Joined: Fri Dec 18, 2009 3:55 pm

Re: JavaScript dependency injection

Post by brunoais » Mon Jul 21, 2014 5:06 pm

hanakin wrote:your assuming a 1MB connection? seems a little high IMO shoot for a test case at least half that or 25% as more and more individuals are using mobile browsers thats the connection speed you should be benching for which drives concatenation/minification/compression of all files never take the stand that anything is small enough when it comes to page load speed.
To think I was clear enough :(. Sounds like I need to check again what I type...
What I mean is that in a 1 MB/s connection I should not need to wait more than 2s for the 1st paint of the page. At that stage I'm supposed to have already all content. Unfortunately, that's definitely not what happen too frequently on the web (at least, with me). Sometimes I have to wait 3-5s with a page with a turning wheel (or equivalent) in a 1MB/s connection(!!!). Now I try to imagine how it is for those who have 120KB/s or lower... Why won't the just allow the user to be entertained by the HTML, then the CSS, only then the js for interactivity?!?!
hanakin wrote: also you are professional not a novice your are assuming that people can figure out what a browser is telling them which is never the case as people are generally idiots when it comes to something they do not care to learn or know they need to.
Unfortunately for this... I'm unable to think like an idiot.

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: JavaScript dependency injection

Post by hanakin » Mon Jul 21, 2014 6:15 pm

brunois wrote:What I mean is that in a 1 MB/s connection I should not need to wait more than 2s for the 1st paint of the page. At that stage I'm supposed to have already all content. Unfortunately, that's definitely not what happen too frequently on the web (at least, with me). Sometimes I have to wait 3-5s with a page with a turning wheel (or equivalent) in a 1MB/s connection(!!!). Now I try to imagine how it is for those who have 120KB/s or lower... Why won't the just allow the user to be entertained by the HTML, then the CSS, only then the js for interactivity?!?!
ahh ok gotcha yes it should but size is not everything despite what you have herd :lol: amount of requests can play a huge factor as well
hanakin wrote: also you are professional not a novice your are assuming that people can figure out what a browser is telling them which is never the case as people are generally idiots when it comes to something they do not care to learn or know they need to.
Unfortunately for this... I'm unable to think like an idiot.[/quote]

meh... its easy what you do is get really drunk and then ask someone who is to test it for you haha.
Last edited by hanakin on Mon Jul 21, 2014 7:23 pm, edited 1 time in total.

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: JavaScript dependency injection

Post by callumacrae » Mon Jul 21, 2014 6:34 pm

And that isn't how the browser downloads documents at all—or, for that matter, how anything is downloaded over TCP. If you had a 1 MB/s connection (which is pretty slow), it'll take a lot longer than a second to download a megabyte.

Check out Paul Irish's keynote from Fluent conf this year, he explains this better than I can. Can't remember what the talk was called.
Made by developers, for developers!
My blog

User avatar
Sumanai
Registered User
Posts: 95
Joined: Sat Aug 31, 2013 11:12 am

Re: JavaScript dependency injection

Post by Sumanai » Mon Jul 21, 2014 6:51 pm

Any additional logic only slows the page load relatively literate direct insert scripts at the end of <body>
Sorry for my English.

User avatar
brunoais
Registered User
Posts: 958
Joined: Fri Dec 18, 2009 3:55 pm

Re: JavaScript dependency injection

Post by brunoais » Mon Jul 21, 2014 7:29 pm

callumacrae wrote:And that isn't how the browser downloads documents at all—or, for that matter, how anything is downloaded over TCP. If you had a 1 MB/s connection (which is pretty slow), it'll take a lot longer than a second to download a megabyte.
Check out Paul Irish's keynote from Fluent conf this year, he explains this better than I can. Can't remember what the talk was called.
Are you talking about how TCP works? I know about the slow start, don't worry ;).
Anyway, a web page of 1MB is crazy. Anything of more than 200KB is too much and 100KB should be considered the size limit one want ever a page to have. I prefer to keep them at less than 60KB, when possible (single TCP packet; almost same speed as a ping).
Although, they are broken through the other protocols it needs to go, it does not affect the TCP's slow start feature of the TCP protocol and all the (up to) ~64KB are sent in one go. The ACK is sent afterwards the content is sent to the browser's input stream, so no issues there. With this, the browser is capable of showing something to entertain the user with all non-interactive content right off the bat.

Post Reply