Crank: JSX isn't Just JavaScript™

[dfabulich]

https://github.com/bikeshaving/crank#just-javascript

Just JavaScript™
All components in Crank are just functions or generator functions. No classes, hooks, proxies or template languages are needed.

JSX isn't just JavaScript; you have to transpile it. In fact, I'd call JSX a powerful, simple, declarative template language. (And "classes" are just JavaScript, too!)

I suggest rephrasing like this instead:

No Magic
All components in Crank are just functions or generator functions. No classes, hooks, or proxies are needed.

[maoberlehner]

I'd love to showcase htm as an alternative to using JSX with this. Then Just JavaScript™ would be reality.

[monstercameron]

I'd love to showcase htm as an alternative to using JSX with this. Then Just JavaScript™ would be reality.

Wow, that is impressive, htm is interesting and would be a great combo with Crank.

[dfabulich]

I have a PR open to suggest HTM in the documentation. https://github.com/bikeshaving/crank/pull/18

[brainkim]

JSX isn't just JavaScript; you have to transpile it. In fact, I'd call JSX a powerful, simple, declarative template language. (And "classes" are just JavaScript, too!)

I agree that JSX isn’t just JavaScript. I think what I was trying to get across with that bullet point was that Crank’s solution for reactivity may be simpler than the solutions provided by others. I think literally every modern framework has called its recent API refactors for reactivity “just javascript” and I also think that relying on generators and promises puts Crank in the most natural position for holding this title. But I agree that saying Crank is “just javascript” when it uses JSX can be confusing or inaccurate.

At the same time, I dislike saying “No Magic.” Magic is fun, and I remember reading a tweet somewhere that programmers criticize code as “magical” when they don’t understand it. What I really want to capture is this. Generators and promises are old technologies (in the JavaScript-timescale). Crank leverages this tech in a simple and novel way so more of your code is portable between frameworks and you can use more of your vanilla JS knowledge.

I’m rambling. Maybe the the tagline could be “Just Functions”? There was a talk by Svelte creator Rich Harris that I saw on the internet where he says “people are horny for functions,” which I thought was really insightful lol. What do you think?

[maoberlehner]

At the same time, I dislike saying “No Magic.” Magic is fun, and I remember reading a tweet somewhere that programmers criticize code as “magical” when they don’t understand it.

I think this is the tweet you're referring to: https://twitter.com/dhh/status/1226296264469336064

[brainkim]

As far as htm goes, I have been keeping a close eye on the library and was impressed by the fact that, for instance, the latest release of htm does static node optimizations. There is also esx which is a really similar solution and does things a little differently. I’m sympathetic to both. Besides performance, the difference between htm and esx is slightly different syntax. htm makes you interpolate tags for components as in

htm`<${Footer}>footer content here<//>`

It uses that closing tag syntax which might be a little unfamiliar. I like the syntax at the end of the day but then again esx uses syntax which looks almost exactly like JSX, the downside being you have to register components.

I’m not sure which solution is better and I personally still really like JSX, but curious to hear people’s thoughts.

[gbbarroso]

Well we can actually call the createElement without JSX, right? So it's not really dependent, just highly recommended, the statement is still somewhat valid...

[workingjubilee]

It's true. https://docs.google.com/presentation/d/1_aeM_UkwS9qaSzHDz87zC9bmtvbuLbPof7RnN96SJKE/edit#slide=id.g60d3ee4d75_0_10
Found via: https://www.swyx.io/writing/svelte-metaphysics/

[btheado]

Well we can actually call the createElement without JSX, right? So it's not really dependent, just highly recommended, the statement is still somewhat valid...

I copied examples from the crank.js components docs to https://observablehq.com/@btheado/crank-js and translated them to use htm. See the very bottom of the page where I bind htm to crank's createElement just as you suggest.

[brainkim]

A relevant tweet: https://twitter.com/Rich_Harris/status/1252631313246552065

I dunno, being “Just JavaScript” seems to be a thing a lot of frameworks really love to claim and I hate to concede it so quickly!

[workingjubilee]

All language is ultimately the composition of basic units to multiply meaning, creating more and more distinct patterns. So arguably, while you are longer are speaking "just" JavaScript once you've put two functions together, at the same time, if your code is ultimately a composition of JavaScript...

While JSX is a syntax extension, usually made more tractable via compilation, I would say it is not wrong to think of it as a common dialect of JavaScript, with template strings essentially demonstrating that it is almost exactly equivalent to actual, directly executable JavaScript syntax. It is even hypothetically possible to have a JSX transformer executing at runtime, Babel let us do that for a fair while, it's just a bad idea. What people actually mean "it's just JS" is both "it's legible and familiar" which might not actually be true of much pre-2000 JS code, even if it could be executed on V8, JavaScriptCore, or IonMonkey, and also "it can execute on all browsers" which is... again, one of those things with a catch which Babel lets JS devs gloss over.

And if anyone really wants to have a headtrip on "what is JavaScript?" then consider that asm.js means JavaScript can run Doom but you wouldn't be able to read the resulting demented code unless you're one of those people who stared into bitfields for too long, nor would it necessarily be executable on, say, IE11, so...!

[brainkim]

The point has been renamed to “Just Functions” in the README/website. Thanks for the feedback!