JSX
Is No Longer My Friend
Like many a developer both before and after me, the first time I saw JSX left me with a curious impression of React.
Why is there html in my JavaScript? This is a terrible idea. I feel dirty.
Fortunately, I heeded Pete Hunt’s advice and gave it five minutes. I suppressed my knee-jerk reaction, realized that JSX is just a declarative DSL (no one wants a DOM like api for creating components…), and blissfully started using React.
Since that time, I have had a lot of success with React, building several apps and training nearly a dozen developers to use it. This is thanks, in part, to JSX.
So why did I ditch JSX?
This past November, André Staltz went on a multi-tweet tirade about JSX. Quite honestly the arguments did not stick with me at the time. I was doing just fine with JSX. Yet I trusted André’s opinion and could not shake the feeling that he knew something that I didn’t.
Thus began my quest. In order to understand this hyperscript thing I decided to immerse myself in it. And as one does in the JavaScript world, I created my own hyperscript library.
Two things really hit me after I was done.
- I really hate typing
- JSX involves a fair amount of contextual switching
It’s Just JavaScript, Except It’s Not
Let’s discuss the more important of these two points first: the context switch.
JSX is a DSL that sits in the middle of your JavaScript. It has a different syntax than the rest of your code. It has different rules than you might expect. Most notably, you can evaluate any JavaScript expression by escaping it with mustaches.
This does impose a certain amount of cognitive load upon the developer. Once you get used to it, parsing it isn’t all that hard. It is the getting used to it part that sucks. Especially for developers who are learning JavaScript, React and JSX in parallel.
I have had a couple of such developers under my tutelage and I have consistently seen this trip them up.
Consider the props object, specifically the fact that it is an object.
JSX would have us believe that a prop is some magical attribute of the component. Yet when we use the prop (or create a component the old fashioned way) we realize that it is just an object.
This duality of syntax has led me to see code where props in JSX are declared like properties on an object and properties on an object declared like props in JSX.
For the developers doing this it was a constant source of frustration. They were simultaneously irritated by the fact that there were essentially two ways to do the same thing and ashamed that they could not keep them straight.
With hyperscript it really and truly is JavaScript. Our props object will always be an object. There is no secondary syntax that you must learn. If you know JavaScript, you know hyperscript.
This brings me around to the other point. JSX is pretty noisy with its tags and curly braces. Since hyperscript is just JavaScript we can make use of some of the conveniences of JavaScript to clean things up.
For instance, have you ever had a component that received a lot of props where you were mostly mapping each prop to a variable of the same name? I know I have and it quickly became annoying. Especially knowing that object shorthand is a thing in ES2015.
Hyperscript In Review
My team has been using hyperscript in the real world for nearly a month now. So far everyone on the team is enjoying the experience and there are far fewer gaffes like described before.
That isn’t to say that hyperscript doesn’t have its problems. E.g., when dealing with a large number of components in one place it can get rather ugly.
Be aware that you may experience some push back concerning hyperscript. In some cases this can be attributed to the inertia against learning better ways that André mentioned. Despite the initial shock, JSX has become the norm, the incumbent in mind share. Hyperscript is the odd, striking out against the established best practices. This makes some developers averse to adopting it. Just remember that React is founded upon rethinking best practices. Give hyperscript five minutes.
If you have reservations about trying hyperscript I will offer one more experience. I took three other developers, taught them hyperscript, had them modify all the components in a smallish app to use it, and peer reviewed the code all in the span of a single day. It really is easy to pick up.
If you’re curious about hyperscript checkout one of the libraries out there like react-hyperscript or react-hyperscript-helpers. I would love to see more developers embrace the joy of hyperscript.
