5 ms·
It’s interesting. I’ve switched to using ‘h’ as an alias of ‘createElement’ instead of jsx. Which breaks 2 of their top 3 rules. I find it has a few nice advan
by benjaminjackman 9y ago
It’s interesting. I’ve switched to using ‘h’ as an alias of ‘createElement’ instead of jsx. Which breaks 2 of their top 3 rules.
I find it has a few nice advantages.
1. It doesn’t introduce another language with different syntax that I have to mentally flip between. Remembering stuff like surrounding variables with curlies and using = instead of : etc.
2. nesting thing also is much easier
3. It’s more concise (when createElement is aliased to h)
4. Most importantly it keeps me in the flow.
5. It’s just another function call so additional features can be added. For example I made a version using X instead of h that will parse the tag for “#id.class1.class2” tokens and add them to the props as appropriate saving a pretty decent amount of space. This is very similar to emmet so it’s nothing out of the ordinary.
6 I think HTML looks like garbage when the number of attributes overflows the line length. Js formats much nicer, it’s basically one token per line when it gets that long with indenting like the rest of the file.
7. Pulling logic out of the render call doesn’t require a as much of a code transformation.
The biggest downside by far is that I seem to be the only one that prefers this style from looking over lots and lots of tract libraries.
- globuous 9y agoFor 6, you can have each attribute on its own line when you have more than 1. Makes vertical split a breeze to use :)
- themarkn 9y agoTook me a while to get used to but now I prefer HTML this way too. It makes it really easy to understand what's happening at a glance.
- kristiandupont 9y agoWe are doing this as well and I agree that there are a number of nice things about it. I find that the closer to HTML my code is, the more I prefer JSX whereas if I am using mostly components, it starts to feel silly. In addition to your points, a nice thing about pure JS is that you can optionally add an element with a simple ? operator without having to "break" things with curly brackets. createElement excepts null/undefined as something it will just skip.
- masklinn 9y ago> I’ve switched to using ‘h’ as an alias of ‘createElement’ instead of jsx. Why just alias and not go full hyperscript? > For example I made a version using X instead of h that will parse the tag for “#id.class1.class2” tokens and add them to the props as appropriate saving a pretty decent amount of space. This is very similar to emmet so it’s nothing out of the ordinary. That reads a lot like hyperscript. You really should take a look.
- lewisl9029 9y agoHyperscript looks neat, but I'm wondering if there are any other major benefits to using it over an alias of `createElement` for someone using component oriented styling libraries like styled-components or glamorous? i.e. when there's no need to specify ids/classes for styling, the id/class shorthands become less useful.