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.
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.
Two things really hit me after I was done.
- I really hate typing
- JSX involves a fair amount of contextual switching
Let’s discuss the more important of these two points first: the context switch.
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.
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.