Why are websites fundamentally divided into 3 components - Html, CSS and JavaScript? Wouldn't a single component written with a single language be a better approach in all the aspects?

No, because those are three fundamentally different things: structure, style and functionality. One language for all three wouldn't be good for any of those, it'd be mediocre at best.

HTML was designed so the end user could adapt the information and view it how they chose. For instance: a blind person could use a screen reader, Another person can do dark mode, another could translate the text in real time to their chosen language. A monolithic script/coding language removes this option completely.

That's a golden hammer approach. If you need 3 instruction sets for 3 concerns, you use 3 instruction sets.

For the web it’s because of historical reasons.
HTML came first and the web was just about documents, then styling was added and people figured an XML type syntax was not optimal for styling. The came the logic and people figured you can’t write logic with syntax in the style of XML or CSS.

You CAN do structure, styling and logic all in the same language. Like JS.

But arguably XML/HTML is a more naturallt suitable syntax to describe the markup of a document.

(But sure - In many interactive apps today though, the idea of a ”document” doesn’t hold up as well as it used to)

Ever tried to write Swing apps with java?
Ever tried GWT?

No, exactly.

Never heard of those [or at least GWT]? Well, there's a very good reason for that - mixing those 3 responsibilities in the same code really sucks. The code becomes huuuuuuuuuugely bloated. Because you have to basically write everything in the same class. Boi it's easier to read C code trashed with comments and #IFDEFs and all those 400 LoC functions than a Swing app!!!

yeah, you can use patterns to separate those responsibilities artificially. But then why merge it all into one so you would separate them later on anyways?

STRUCTURE
DESIGN
FUNCTIONALITY

Keep them separately please, with _some_ tasteful overlap where must.

@jiraTicket Sure you can do everything in JS. It's just that the result will be garbage because it will be a slow molasses, and it will break accessibility alongside - which can drag the website owner into court like Domino's.

@netikras swing is awful, I just tried it out once and I hated it. However, one framework that has one language for all three and doesn't end up in spaghetti is flutter. It's pretty good.

@Fast-Nop Well, I personally like html and css but arguably there are some sites we probably use daily and don’t consider insufferably slow that mostly do it all in Js

But sure - they all use the DOM api and CSS in certian ways so really it’s not that big of a difference coding that way imo

I’d argue markup IS sometimes just the nicest syntax for strucute. While scripts are better for ”process logic”.

A script like
* Do this
* Then do that
Is not a nicely readble way of defining a structure!

Consider this example: Write a form with age and name inputs

in some scripting language it might look like this:
AddField( { type:”number”, label: ”age”})
AddField({type:”string”, label:”name”})

In some markup language it might look like this:
<field type=”number” label=”age”>
<field type=”string” label=”name”>

Which one is more readble?

I’d argue markup languages have their place for defining a structure while scripting languages have their place for iterative logic

have you looked at flutter? it tries to combine them well. but it's still essentially dividing functionality and content, just instead of having html and css files, it has a build method with objects and children, and it has other methods & classes instead javascript. works well, but is shitty for accessibility and there's poor accessibility.

moral of the story, when you keep html and css separate, you can improve accessibility. you can improve readability for the sight-impaired easier by just changing css files, and when the html is isolated to just content and doesn't have styles, it's easier to parse to read out loud, or translate, etc. when the javascript can be isolated and taken out instead of being part of the ui, it can be disabled to improve security.

convenience is the only reason to combine them.

@netikras swing is god awful just because it's fucking swing.

To counter my own previous point

Lots of the code we write for outputting HTML, for instance in purely serverside rendered applications, is actually NOT readable like a HTML document.

It’s mostly written in a templating language and includes tons of for-loops etc that handle unreadable variables in various ways.
The fact that it output HTML doesn’t necessarily make it readble.

So in some ways writing serverside html rendering isn’t all that different from scripting.
A bit more templates perhaps.
But still not like you can glance at the code and instantly see the html like viewSource

@Fast-Nop what happened to dominos?

@iiii https://cnbc.com/2019/10/...

@Fast-Nop
But that pizza tracker is so great! *stab stab stab*

@SortOfTested I remember an article about a shop owner who really paid attention to accessibility. When asked why he cared about disabled people, he answered that they wanted to shop like anyone else, that he wanted their money, and his competition didn't.

The main reason is really historical and compatibility.
In the past, languages were more specialized and UI systems did use separate languages for different aspects of the UI. Like html, css, js or c# and xaml or android java and xml or iOS objective-c and xml based interfaces.
But now we have flutter, jetpack compose and SwiftUI.
It is just one modern programming language which is good at coding logic and declaring UI layouts and styles.
So, with the right language it makes sense to have only one "thing" for the UI.
I'm sure many web devs will disagree but In my opinion this is the future. Web will be behind for a long time because it's hard to replace the established tech.

@Lensflare Let's just take a look at https://flutter.dev/ and see whether these people should have any business in developing websites.

- 13.6 MB page size (WTF)
- not even scaled images
- server side compression missing
- 3.6 MB of render blocking JS (WTF!)
- Google pagespeed: 14% mobile, 44% desktop
- invalid HTML
- they can't even get their heading levels right
- tons of accessibility errors
- and I could go on and on.

Yeah, the future of the web consists of shitty websites made by folks who already fail at basics because their understanding doesn't go further than what they see on their screen.

@Lensflare languages should be domain specific to be more effective. Jack if all trades but master of none is good for testing the idea but not for a final product.

Yea.... Didn't all start with HTML having inline styling and scripting? It gets messy fast, so yea we separate things. As others have mentioned Java Swing and AWT

@Fast-Nop I don't say flutter is the future. I'm not a fan of it my self. I‘m just saying that this kind of tech is the future. It might even be something that doesn't translate to the old html,css tech. But as I said, it will take very long because it's hard to replace this industry standard. Other platforms will evolve faster and are even doing right now.

@TheBeardedOne Java is an old language and absolutely not good for declaring UI. Same goes for HTML,CSS,JS in isolation. That's why extra extra languages were invented and used for this domains.

Modern languages like kotlin and swift (maybe dart, too. But I'm not sure) however are absolutely capable of doing stuff for different domains. For instance, they can do stuff what is normally done in xml and html (layout), but even more safely, shortly and clearly. And they can do things what normally css and xml does (style) in a secure ans safe way.
If you are not convinced that this is really better than having a separate language, than you are stuck in the old model of thinking in the old languages.

Modern languages are not only able to perform tasks for different domains, they are even better at it than the extra domain specific languages.

Take Plot (github) for example. This is html generated from swift. And the swift source is more clear and secure than html is.

One more point about HTML:

HTML is actually doing 2 different things/domains.
It is declaring layout (div/table/list) and it is declaring semantic content (button/text-input/form)

So why don't people complain about that? If you want different languages for different domain, then why is it for HTML ok to cover those two different domains?
The answer is of course because html is good at both.
And if a languages is good at different things, it is obviously fine.

The exact same reasoning can be applied to modern languages. They are good at all the domains and there is no reason to separate those domains into different languages.

The problem is that many devs don't believe that those languages are good at many domains. But that is because they just didn't use them in practice.

@Lensflare Tables and lists are not for layout, they are also semantic. Abusing them for layout is outdated by about 20 years.

And it doesn't matter which page of which oh-so-modern and oh-so-future stuff it is - it's invariably a big pile of turd by people who think they can do next-gen tech but actually don't even understand HTML, let alone CSS.

@Fast-Nop my bad. You are right about tables and lists. But the point is still that html does cover both, semantics and layout.

Why so salty about my Plot example? It's not supposed to be the next big thing or even replace html. It's just an example for something which does what html does, just by the power of modern language features and not a highly specialized domain specific language. I wanted to show that you don't necessarily need extra languages for everything. 🙄

@Lensflare The point is that change alone doesn't equate improvement. I'm just sceptical that people like the Flutter crew are able to deliver improvement given that they clearly don't even understand current tech.