News:

SMF 2.1.2 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

spiros

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).

Antechinus

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).
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

Arantor

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.
No good deed goes unpunished / All helpful urges should be circumvented

I have something to say: it's better to burn out than to fade away. There can be only one.

Antechinus

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.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

live627


spiros

I think there is a wider tendency of ditching jQuery.

Bugo

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.

Arantor

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.
No good deed goes unpunished / All helpful urges should be circumvented

I have something to say: it's better to burn out than to fade away. There can be only one.

Bugo

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

Arantor

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.
No good deed goes unpunished / All helpful urges should be circumvented

I have something to say: it's better to burn out than to fade away. There can be only one.

Advertisement: