Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Solid.js feels like what I always wanted React to be

typeofnan.dev

Post reply on HN
Print view View original

201–210 of 444 posts

Re: Solid.js feels like what I always wanted React to be

#201

Post by _ezrr »

This reminds me a lot of Clojurescript's Reagent https://reagent-project.github.io/ (link also has a counter example)

I've tried using bare React in the past (after using Clojurescript), because I wanted my project to be more approachable for outsiders. But I couldn't really handle the (to me, and the author) unnecessary complexity that's added.

I would even say the Reagent version is even simpler than the Solid.js version, because you're using Clojure's Atom API rather than creating read / write functions. For the adventurous hearted I'd definitely recommend giving it a try!

Edit: Someone posted a Reagent counter example on codepen a few days ago: https://codepen.io/Prestance/pen/PoOdZQw

Re: Solid.js feels like what I always wanted React to be

#202

Post by leonardopainter »

orenelbaum wrote: post #94
TekMol wrote: post #68

What feels like complete insanity when it comes to React is that it needs compilation to work: render() { return The count is: {this.state.count} ; } This is not Javascript and it will need to be compiled into Javascript before it gets executed. But you can do the same in Javascript: render() { return ` The count is: ${this.state.count} `; } Using regular Javascript makes my life a thousand times easier than having t…

This is another area where Solid has an advantage over React. With React you could use Hyperscript functions so the above JSX would be React.createElement('div', null, `The count is: {this.state.count}`). With Solid you get the choice, you could use JSX, Hyperscript functions or template literals like in your example. Solid does recommend using JSX because there are some tradeoffs to using template literals without c…

Using template literals to represent html is a security issue. If the state comes from the user, they can add script tags into the html. People try to solve this with tagged templates, but then if you forget the tag, you have a security issue again. Lit checks for this, but the fact that it has to check means it is less secure than not using tagged templates. There are libraries on github for creating sql using tagged templates which have the same security issue. The problem is that if your function works with both tagged templates and plain strings, when you forget to add the tag, you will never know.

Re: Solid.js feels like what I always wanted React to be

#203

Post by TekMol »

leonardopainter wrote: post #202
orenelbaum wrote: post #94

Earlier quoted context omitted.

This is another area where Solid has an advantage over React. With React you could use Hyperscript functions so the above JSX would be React.createElement('div', null, `The count is: {this.state.count}`). With Solid you get the choice, you could use JSX, Hyperscript functions or template literals like in your example. Solid does recommend using JSX because there are some tradeoffs to using template literals without c…

Using template literals to represent html is a security issue. If the state comes from the user, they can add script tags into the html. People try to solve this with tagged templates, but then if you forget the tag, you have a security issue again. Lit checks for this, but the fact that it has to check means it is less secure than not using tagged templates. There are libraries on github for creating sql using tagge…

    If the state comes from the user, they
    can add script tags into the html
How is that different with React?

And how is it a problem? A rendering engine would set the html of some element to the html I think?

This ...

    document.body.innerHTML='alert(1)';
...does not execute the script.

Re: Solid.js feels like what I always wanted React to be

#204

Post by leonardopainter »

tobyhinloopen wrote: post #52

I always wonder why all JavaScript client-side frameworks have such distinct design. No other dev environment for building GUIs has react-like components. What’s so special about the web that we keep creating frustrating frontend frameworks for?

One reason is probably that creating UIs programmatically was historically very cumbersome in JavaScript due to various issues that are no longer relevant. That means everything had to be HTML-based hybrids of some sort.

Re: Solid.js feels like what I always wanted React to be

#205

Post by madeofpalk »

alskdjflaskjdhf wrote: post #111
lpghatguy wrote: post #13

New JS frameworks always make for compelling hello world examples. Can you branch on state or use loops over data in Solid.js? The reason _why_ React has a virtual DOM is to enable more interesting relationships between your data and your presentation. Anyone can make a framework that makes the source code for an incrementing number look pretty! As an example of this point, check out the "Simple Todos" example for So…

>In React, we render lists by using regular JavaScript idioms like loops, arrays, and array methods like map. However in Solid.js, much like traditional templating languages, we get a construct like that reinvents a concept that's already in the language. I find this a totally bizarre complaint. I've spent the past few months working on Svelte stuff and I've seen people on HN make this same complaint about Svelte's t…

A react feature that I appreciate is that it is "just javascript". It's easier to learn how to loop or have conditionals in React because it uses native JS features. It makes it easier to understand, for me.

Having templating DSLs in other frameworks isn't a deal breaker, but it's a pro of React that I appreciate.

Re: Solid.js feels like what I always wanted React to be

#206

Post by Kuinox »

mlajtos wrote: post #196
Kuinox wrote: post #183

Earlier quoted context omitted.

https://svelte.dev/blog/virtual-dom-is-pure-overhead It is a huge performance issue. I tried to do a pokedex in react, you have to use a virtual list, because react/virtual dom is too slow, doing any operation on a plain list with 1k element, like filtering lead to multiples seconds freeze. This also lead to a lot of issues, like not being able to ctrl+f text being out of screen in a virtual list.

I also did sort-of Pokedex a long time ago [0], but haven't seen any performance issues. No virtualization whatsoever. Code [1] is rather simple. [0]: https://mlajtos.github.io/lb-pokedex/build/ [1]: https://github.com/mlajtos/lb-pokedex

I ran a profiling tool. I searched "zz" then deleted these.

Deleting it caused a 120ms UI freeze (and I notice it :p):

Profiling report: https://share.firefox.dev/3C3OhIq

Given I had slightly more entries (a hundred more) and that I had way more node per entry, it led me with way worse performance.

Instead of a plain list I have a little summary card per pokemon (which is why I have more node per entry).

The naive implementation in Vue run flawlessly(sadly no preview):

https://github.com/Kuinox/kuinox_pokedex/

Note that the react implementation do weird thing because I tried to get around the issue without success.

Re: Solid.js feels like what I always wanted React to be

#207

Post by leonardopainter »

TekMol wrote: post #203
leonardopainter wrote: post #202

Earlier quoted context omitted.

Using template literals to represent html is a security issue. If the state comes from the user, they can add script tags into the html. People try to solve this with tagged templates, but then if you forget the tag, you have a security issue again. Lit checks for this, but the fact that it has to check means it is less secure than not using tagged templates. There are libraries on github for creating sql using tagge…

If the state comes from the user, they can add script tags into the html How is that different with React? And how is it a problem? A rendering engine would set the html of some element to the html I think? This ... document.body.innerHTML=' alert(1) '; ...does not execute the script.

https://developer.mozilla.org/en-US/docs/Web/API/Element/inn...

Re: Solid.js feels like what I always wanted React to be

#208

Post by madeofpalk »

LAC-Tech wrote: post #175
stocknoob wrote: post #67

Earlier quoted context omitted.

For the other Americans, “used xyz in anger” means “used xyz in production”. https://english.stackexchange.com/questions/30939/is-used-in...

Weird. I'm not British by I say "used xyz in anger" because I read lots of other programmers saying it. Had no idea it was regional, thought it was hacker lingo like "grok".

Australian living in England as a dev for 5 years. Never heard of "used in anger" in any context. Weird.

Re: Solid.js feels like what I always wanted React to be

#209

Post by toshk »

littlecranky67 wrote: post #169
oaxacaoaxaca wrote: post #93

Earlier quoted context omitted.

I have the same complaint about hooks. Most people seem to ignore that tidbit, but to me it's really frustrating. Plus I recently hit more hook issues when putting a setInterval inside a useEffect. There's no way to do a normal didMount/willUnmount workflow without other hacks (i.e. useRef) just to set up a simple timer. Maddening! Edit: after writing this I went and read the article. Same scenario I was bitching abo…

People always use the setInterval() issue as a footgun. The real footgun is people not reading the documentation for the framework they use, because the exact example is handled in the official react docs [0]. I always advice aspiring react devs to understand why this exact setInterval() doesn't work (and why there is the need for the rule-of-hooks), because it will automatically create an understanding how hooks and…

When I started with classes, I hardly had to read the docs, few hours and was good to go. For many developers I worked with at the time this was the case.

React was easy coming from jQuery, Backbone other frameworks at the time.

With effects, i've read the docs many times. I still don't fully understand how it's supposed to work.

I don't seem to get the feeling / abstract concept behind it and it still surprises me at times when it fires / or not.

Too much magic for me. But maybe im getting old :).

Re: Solid.js feels like what I always wanted React to be

#210

Post by toshk »

parentheses wrote: post #82

This article hits on something I've felt for a long time. The idea that "hooks are superior" to me is ridiculous. If a linter is required to tell me when I'm writing a bug that is not immediately obvious, that is a failing in the framework to round those edges. Lints are not rounded edges! Solid is nice and _seems_ to fix the issues with hooks, but as another comment mentioned, the challenge is with building at scale…

With Class components it was often easier to create Pure components, or do a shouldcomponent update check to optimize performace. They later introduced memo for functional components.
Post reply on HN