React Without JSX, t7 To The Rescue!

Comments

[Jose Gonzalez]

Hmmm...interesting. This looks rather promising.

Some observations:

Backticks
I know, I am nick-picking. But I feel like they add unnecessary noise. And also ${}. :(

JSX
One reason I love JSX is due to its simplicity. I'm using psuedo-HTML but feels right. I like its simplicity and elegance. It's much less noisy than adding ng-* for sure. JSX is the reason why I enjoyed playing around with React far more than Angular.

Not a big deal? In small projects, it's not. But when you have a huge code base maintained by multiple devs, code readability (and simplicity) is king.

TSX
I'd love to know your opinion on TSX :)

[Rony Vidaur]

I totally agree with your comment about JSX and its simplicity and the unnecessary noise that the t7 syntax would add affecting the readability :)

Although it's always nice to have options I think I'll stick with JSX for now

[K]

I use t7 only for some POCs where stuff runs in-browser.

React Hpyerscript Helpers are also a nice alternative, with less visual clutter.

[K]

I like TypeScript very much, but I have the feeling that FB will push Flow or ReasonML much harder in the future, so I don't know if TS(X) can guarantee the same dev experience in the future, especially for things like React-Native.

On the other hand is MS embracing RN with ReactXP, so who knows :D

[Marco Scannadinari]

The backticks and ${} syntax are natively part of ES2015, defined as 'template literals'. t7 uses these so that you don't need to use an additional preprocessor/transpiler

[Jose Gonzalez]

Ah, now that makes sense.

I suppose it's a trade off at end of day. Thanks Marco for your clarification.

[Antonin J. (they/them)]

This is really cool! I have a few questions for you:

1. Can you specify a different method of element creation? Eg. instead of using React.createElement, being able to pass in Preact's h?
2. What's the performance like? I feel like it must be pretty good especially compared to the old school in-browser JSX compilation.
3. Do you have this on a CDN anywhere? I think this is would be awesome for using in CodePen or similar rapid prototyping tools

I'm a huge fan of this! :)

[Michael Toomim]

Performance looks like it might have issues:

It's highly recommended that the t7-precompiler is used when deploying to a production environment. The precompiler will greatly reduce memory usage, startup speeds and template compile times.

github.com/trueadm/t7#performance

But I would really like to see this measured to know if it's a problem in practice.

[K]

I also read HTM, an alternative to t7, has that recommendation from its creators.

[Michael Toomim]

Can you post a link please?

[K]

Sure

github.com/developit/htm

[Ryan Kennedy]

This is really neat! Lately I've been looking for an example of a "partial" parser (parser that is aware of "holes" such as template interpolations or a user's cursor in an input field) and this is a great one 😃

Small note, I think there's an interaction between the template string syntax and the dev.to markdown parser affecting the style attributes in your post: