SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Rethinking JavaScript for the future

Started by spiros, February 10, 2022, 02:08:18 PM

Previous topic - Next topic


The main impetus being this suggestion: Should defer loading of as much JavaScript as possible #6539, I was wondering whether it would be appropriate to widen its scope and include the possibility of a more performant JS framework in the place of jQuery (or even vanilla js) like mithril (used by Flarum among others).


Oh, just took a look at the code here and they are still loading jQuery up in the document head. That stuff is easy to change if you want to. Just shove all the js to the end, just before the body tag. phpBB does it that way and it's not a big deal to set up (always check for fucntionality, of course).


Except that it's not simple, because all the code that's in templates also has to be moved - and there's a lot of it both inline in elements and in page footers that would have to all be pushed beyond the defer footer to get it entirely at the end of page.

Huge task.


She'll be right, mate.

ETA: The other thing is that with HTML5 you can have style tags anywhere you like in the markup, so CSS that is only called as part of some javascript thingummy can be shunted to the end of the files too. Probably not so relevant with 2.1, since 2.1 can amalagamate all CSS files anyway, but handy to know.



I think there is a wider tendency of ditching jQuery.


A little comparison of the forum homepage (mobile version) loading with different frameworks:

89 - with jQuery (CDN)
91 - with jQuery (Local)
96 - without jQuery
92 - Vue.js (CDN)
87 - React & ReactDom (CDN)

F12 -> Lighthouse tool in any Chrome browser.


Were any changes made to actually leverage Vue or React in that situation? Otherwise just including the framework and not using any of their component rendering might change the scoring.


For this test, I just disabled all jQuery scripts except jQuery itself. Naturally, with a lot of additional scripts/components the indicators will change.


It would be interesting to think about a UI built around Vue components or similar, actually. I think that could be a very interesting game-changer.