DEV Community

K
K

Posted on

React Without JSX, t7 To The Rescue!

Top comments (12)

Collapse
 
josegonz321 profile image
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 :)

Collapse
 
rnvdrs profile image
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

Collapse
 
kayis profile image
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.

Collapse
 
kayis profile image
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

Collapse
 
marcoms profile image
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

Collapse
 
josegonz321 profile image
Jose Gonzalez

Ah, now that makes sense.

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

Collapse
 
antjanus profile image
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! :)

Collapse
 
toomim profile image
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.

Collapse
 
kayis profile image
K

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

Thread Thread
 
toomim profile image
Michael Toomim

Can you post a link please?

Thread Thread
 
kayis profile image
K
Collapse
 
ryaninvents profile image
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:

`style` attribute values are missing the double-curly-braces in both examples