Material UI: Framework Stupidity That Keeps On Giving
It’s funny how every time I do a hit piece on some dumbass nose-breathing half-tweet framework, someone comes along and says “You should try this one, it doesn’t have any of the problems you’re talking about”. Why funny? Because it’s apparent those who say it never bothered reading the article.
MUI had a number of recommendations after my Semantic UI article, and to say it lacks the problems is to be 100% ignorant of what problems I was complaining about.
As with every other framework, it slops presentational classes into the markup, willy-nilly mixes font metrics, has broken layouts for non-standard font-size users, and results in using two to ten times the code needed to do the flipping job!
When you use classes like this:
<div class="MuiContainer-root MuiContainer-maxWidthMd css-18kddpf">
<div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4 css-1tz8m30">
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-1twzmnh">
<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-ctmtb0">I would normally say you might as well go back to using tables for layout, but that’s unfair. To tables for layout, which would be better quality code than this!
And for what? What any competent coder would write as:
<article>I’m not kidding about that either, as I’ll soon show you.
You look at their sample templates page:
The markup generated by every single one of them is inept incompetent garbage. AGAIN, proving what I’ve said about the people using frameworks in the first place. The people who MAKE these systems do not know enough HTML or CSS to be telling others how to use web technologies. Let’s use their album example since it’s something most every front-end framework has a template for.
See how the auto-generated content pulled from the META here on Medium doesn’t even tell you it’s the album example? Yeah, that. Further evidenced by their garbage broken document structure flipping the bird at accessibility!
Seriously, starting the document with a H6 doing H1’s job, an H1 doing H2’s job, H2 doing H3’s job, and the final H6 doing H2’s job? These clowns don’t even understand the most basic of HTML usage! ALMOST as if they chose their headings based on the default appearance and not their meaning… as I keep saying, the bleeding edge of the worst of mid-90’s browser-wars era idiocy.
I mean sure, their system has allowed a page writer to use as much JSX as the markup alone for the page would be:
But when you look at the markup being vomited up client-side (saved as TXT on my hosting)
https://cutcodedown.com/for_others/medium_articles/materialUI/album/original.markup.txt
It’s a 32k train wreck of incompetence, with static style in the markup, presentational classes, endless pointless META not one legitimate UA gives a flying purple fish about… to do what any sane/competent developer likely wouldn’t even waste 5k on?
I mean seriously, if we kicked this garbage “MUI” framework to the curb — much less ignoring the presence of react.js that I’d likely just replace with a simple port 80 http listener with request.write and template literals — there’s little reason for the markup of such a page to read much more than:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta
name="viewport"
content="width=device-width,height=device-height,initial-scale=1"
>
<meta
name="description"
content="MUI is a steaming pile, a train wreck laundry list of how NOT to build faster, beautiful, and more accessible websites or applications."
>
<meta
property="twitter:image"
content="https://mui.com/static/social-previews/default-preview.jpg"
>
<meta
property="og:image"
content="https://mui.com/static/social-previews/default-preview.jpg"
>
<link
rel="stylesheet"
href="album.screen.css"
media="screen"
>
<link
rel="shortcut icon"
href="/favicon.ico"
>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap"
>
<title>
Album Layout
</title>
</head><body> <header>
<h1>Album Layout</h1>
</header>
<main>
<section class="album">
<header>
<h2>Album Layout</h2>
<p>
Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.
</p>
<ul class="actions">
<li><strong><a href="#">Main Call To Action</a></strong></li>
<li><a href="#">Secondary Action</a></li>
</ul>
</header>
<article>
<img
src="https://source.unsplash.com/random"
alt="Random Image"
>
<h3>Heading</h3>
<p>
This is a media card. You can use this section to describe the content.
</p>
<ul class="actions">
<li><a href="#">View</a></li>
<li><a href="#">Edit</a></li>
</ul>
</article>
<!-- repeat the above article 8 more times -->
<!-- .album --></div>
</main>
<footer>
<h2>Footer</h2>
Something here to give the footer a purpose!<br>
© Your Website 2021.
</footer>
</body></html>THAT is why I keep calling these systems ignorant incompetent garbage. Even if you broke it into template literals for the cards and applied all the node.js native / vanilla code needed to make it work, it’s unlikely that the code run server-side needs be as large as theirs especially if you take the metric arse-load of “import” into the equation.
And that’s before we talk about their bungling amateurish CSS, or the presence of client side scripting on a page that isn’t doing a blasted thing to warrant the presence of scripting!
Now sure, they only had to write around 4k of JSX to build that page’s template without the actual content, but is that really worth the utter lack of proper semantics, broken navigation, broken layouts, slow loading, and general middle finger to usability and accessibility? To avoid writing what? 3.5k of CSS?
See this live demo of my rewrite:
https://cutcodedown.com/for_others/medium_articles/materialUI/album/album.html
And the corresponding CSS: https://cutcodedown.com/for_others/medium_articles/materialUI/album/album.screen.css
Which cleans up all the accessibility issues, opens it up to variable items per line up to 4 across not just 3/1, gets rid of a slew of row-level containers that served zero legitimate purpose, and is even fully responsive without resorting to media queries. Even gets rid of the stupid “let’s make things larger for smaller displays” issues with the wrapping since we’re just letting flow do its job. Not even five minutes “work”. Took me longer to write this article than it did the rewrite of said page!
The kicker is, I can’t even blame the garbage that is React for this one. This is entirely on this “materials UI” idiocy where it is plainly evident — as I say about most every front-end framework — the clowns who created it aren’t qualified to write a single blasted line of HTML, much less have the gall to tell any of us how to do so. Their entire system doesn’t even TRY to maintain the separation of concerns, leverage why CSS is separate from HTML, to use proper accessible semantic markup, and on the whole is DESIGNED to tell users of the result to go plow themselves!
I’ve seen some “holy hell” stupid in my time, but this one is easily in the top three. NOT that it surprises me one bit. Idiocy like React just breeds more levels of idiocy. Stupid is as stupid does.