Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JSX isn't Just JavaScript™ #20

Closed
dfabulich opened this issue Apr 17, 2020 · 12 comments
Closed

JSX isn't Just JavaScript™ #20

dfabulich opened this issue Apr 17, 2020 · 12 comments
Labels
documentation Improvements or additions to documentation

Comments

@dfabulich
Copy link

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
Copy link

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

@monstercameron
Copy link

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
Copy link
Author

I have a PR open to suggest HTM in the documentation. #18

@brainkim
Copy link
Member

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
Copy link

maoberlehner commented Apr 17, 2020

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
Copy link
Member

brainkim commented Apr 17, 2020

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
Copy link

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
Copy link

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
Copy link

btheado commented Apr 22, 2020

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
Copy link
Member

brainkim commented Apr 24, 2020

A relevant tweet: https://twitter.com/Rich_Harris/status/1252631313246552065
Screen Shot 2020-04-24 at 4 34 59 PM

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
Copy link

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 brainkim added the documentation Improvements or additions to documentation label Jul 2, 2020
@brainkim
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

7 participants