A frontend (framework) rant

I'm currently in the process of changing the chat function on this page from a basically IRC based system to a decentralized Matrix setup.

The quest for the right server software is worth a dedicated article, but this articles is about the search for a matching frontend.

A quick background:

Matrix is a decentralized chat system with optional end to end encryption. Decentralized means that with an account from contentnation.net
you can chat with others with a matrix.org account or whatever service the others use. You have support for channels a.s.o.
The end to end encryption is what makes it hard to build a frontend for (I think), so I wanted to use something already existing.

The options

These Web clients are listed on the matrix.org website, so I gave them a try:

neo "A Lightweight Webclient" https://neo.pixie.town
[chat] "a simple matrix webapp for mobile and desktop" https://chat.adb.sh
Element Web/Desktop "Element is a glossy web client with an emphasis on performance and usability" https://element.io/

Install and first look

All are checked out from the git with the newest version.
Usually you need to download the dependencies via npm install and then run some build command.

Neo

great start with those messages during npm install:

npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated validatem@0.2.0: This package is no longer updated; use @validatem/core instead, and see https://validatem.cryto.net/ for documentation
npm WARN deprecated har-validator@5.1.3: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated flat@4.1.0: Fixed a prototype pollution security issue in 4.1.0, please upgrade to ^4.1.1 or ^5.0.1.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated left-pad@1.1.3: use String.prototype.padStart()
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated chokidar@2.1.6: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated request@2.88.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated buffer@4.9.1: This version of 'buffer' is out-of-date. You must update to v4.9.2 or newer
npm WARN deprecated buffer@2.1.13: This version of 'buffer' is out-of-date. You must update to v2.8.3 or newer
npm WARN deprecated core-js@1.2.7: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is p
olyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@3.1.4: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is p
olyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.6.9: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is p
olyfilled. Please, upgrade your dependencies to the actual version of core-js.

added 1579 packages, and audited 1580 packages in 3m

51 vulnerabilities (28 low, 7 moderate, 11 high, 5 critical)

Yikes.
1579 packages? For a tiny "lightweight" chat app? And only 51 vulnerabilities and a few no longer supported version...
OK, lets give it a run anyway.
Well, from an optical perspective it is "lightweight" or not many visible features.
Also there seems to be lacking features, I get several error on my joined channels (via desktop app)
"Error: unsupported event type: m.room.power_levels" and similar m.somethings.

A quick look into the develop console: only a few errors about some loaded fonts and a lot of debug message. Not good, but OK for now.
A switch to the network tab: Are you kidding me? 1.73MB (633kB transmitted) For what? 1.28MB (379kB transmitted) minified Javascript! For a minimalistic chat.
No thanks, this is done.

Next option.

[chat]

npm WARN deprecated babel@6.23.0: In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is
polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is
polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is
polyfilled. Please, upgrade your dependencies to the actual version of core-js.

added 1830 packages, and audited 1831 packages in 10s

50 vulnerabilities (5 low, 45 moderate)

Wait a sec, did I really changed into the right directory? Jup, similar mess, but only 50 vulnerabilities so a step in the right direction *sigh* but 1830 packages? Again a "simple" web client.

ok, building, loading it up...

Hmm, dark screen, no content. Lets have a look into the console:

Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).

Wait, they aren't using eval in their script, right? That is not OK.
OK, changing the security policy to enable eval, just for testing, It already has disqualified anyway.
Now it loads, but still throws errors

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

UI is broken in some ways, odd characters a lot of "unsupported event" messages in chat and very minimalistic in view. Some optical error could be wrong encoding on my server or something, don't care right now.
But this time it is hopefully smaller in size, right? Yup "smaller" only 1.06MB (353kB transmitted). Mostly JS, This is totally insane!

Lack of features, insecure eval and inline scripts: No thanks.

Next one

Element (Web)

This is the web client from the creators of the matrix creators.
This time dependencies are downloaded via yarn. And this time no nasty surprises about deprecation or vulnerabilities. Either yarn does not show them or there are none. No idea.

Just for fun, removed the node_modules directory and ran npm install:

npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated gfm.css@1.1.2: Package no longer supported. Please use github-markdown-css instead.
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated node-pre-gyp@0.15.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
npm WARN deprecated core-js@1.2.7: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfill
ed. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@1.2.7: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfill
ed. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfil
led. Please, upgrade your dependencies to the actual version of core-js.

added 2371 packages, and audited 2372 packages in 2m

100 vulnerabilities (9 low, 91 moderate)

Why? Really, WHY?
OK, from the screenshot, there seem to be bigger functionality. So lets build it, configure it and open in browser...
First look: nice optics, looks fine, but a huge amount of features I don't want. First look in the config: not many options to turn stuff off.
Look into the console:
Lots of errors, debugs and warning, but the functionality seems fine.
Look into the network tab, almost fell from my chair. 11.36MB (4.74MB transferred). No more words.
If if I find a way to disable a lot of functionality, the stuff will still be loaded, it is one big file.

Not an option.

My opinion (rant)

Can someone start to teach efficient programming again? Are the modern hip front-end developers really so untrained that they need to include a dependency to a bloated library for 3 lines of code?
A library that becomes unmaintained after 2 or 3 days because the developer(s) moved on to the next hip thing?
Can anyone teach them to build UI without a bloated framework, the browser already comes with a fancy one included called HTML/CSS, no need for them. JUST LEARN TO PROGRAM! And there
is already this framework called vanilla.js . It is so cool that is already preloaded into the browser, no need to add it to your js file.
I tried to in the companies I worked in (in leadership positions) but even then it was a hard fight and I gave up. The developers were not able to get the job done without react, vue, angular or whatever
the newest hype is called. And guess what happened every 6 month or so. There was a new version of the former best thing in the world which broke the front-end and you had rewrite 60%+ of your
stuff or move on to the newest "best thing in the world, so much better than the one we used before".
Yes I'm old, but I grew up in a time where 3D games (with cool graphics at the time) came on single floppy disks. But programmers back then were forced to optimize for size and speed.
Nowerdays 11MB for a web UI (about 13 Floppy Disks in Amiga/Atari times) is "normal". And I was annoyed about the multi-disk games with 2 or 3 floppy disks...
Btw, the current (not very feature rich) chat UI used on Content Nation has a whopping 360kB (188kB). This already includes the other stuff with the Content Nation functionality, the chat script itself is
only 11kB (4,2kB) so don't tell me <1MB is impossible!

Final thoughts

Seems like I have to dig into the matrix protocol, maybe the SDK to see if it is possible to write my own, this time really lightweight, minimal chat UI. I tried to avoid it, but the art of programming
is lost to the hip front-end stackoverflow copy/paste and npm install <trival dependency> people (I kind of refuse to call them real developers).
I have nothing against stackoverflow, don't get me wrong.

0 comments

Report article

have read aloud