Frustrated by Magento? Then you’ll love
It’s hard to ignore React. Facebook and the adjacent React community have turned this open source project into one of the few UI Platforms that can address the entire market of browsers, computers, and mobile devices. You don’t need to use React, but if you ignore it you do so at your own peril.
It’s an odd framework though, and reminds me a bit of the old Magento Layout XML system (the one I explain in No Frills Magento Layout) in that
- It’s a system,
- for software engineers,
- to render arbitrary trees of UI nodes,
- and whose metaphors don’t always line up with “standards based web development”.
I’m far enough along in my career to know that “standards based web development” isn’t the only way to do things, and to insist on it is to ignore the part of your job that evaluates tradeoffs — but there’s still a ton of stuff in React that is weird-to-me.
One small example — there’s a project called Next.js — it’s a framework that lets you create statically rendered sites using React components. Instead of a single HTML page that uses javascript to instantiate a React component, Next.js turns NodeJS into a web-server, renders React on the server, and serves it up as HTML to users.
It’s a neat little project — but because React is so far afield from traditional web development, it leads to some awkwardness. Like — there’s no easy built-in way to edit the HTML template. If Next.js was a person, it’d tell you you don’t need to do that — just create and style your React components.
Once you got over your software taking human form, if you asked Next.js the following
But I need to add this extra javascript or CSS to my document’s head to make my site work with other systems on the web — how can I do that?
Next.js would condescendingly pat you on the shoulder and say, friend, just use our <Head/> component.
Which, in turn, leads to code like this.
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage
This just looks bizarre to a traditional web developer. We have a <head/> element (although it’s Capital Cased, which is strange) — but it’s inside a <div/>?! What is even going on? (side note: this reminds me a lot of a similar pattern in Magento 2’s layout system)
To a React engineer, a <div/> is just an arbitrary container and this doesn’t seem out of place. To a traditional standards based web developer, a <div/> belongs in a specific part of their HTML document that’s not the head.
Like I said — I’m long in in the tooth and don’t get a lot out of these sorts of arbitrary syntax battles — but small things like this point towards less than perfect alignment between the goals of the React project and the goals of your average web developer. Keep it in mind if you venture down the React path.