5 ms·

I'm not sure I understand. Yes, there are some pitfalls to React Hooks (and, honestly, they're really slick but definitely require more cognitive overhead than

by ng12 7y ago

I'm not sure I understand. Yes, there are some pitfalls to React Hooks (and, honestly, they're really slick but definitely require more cognitive overhead than React.Component) but he doesn't really describe how Svelte solves these problems. In fact, looking at the demo code it looks pretty similar to how I'd built it in React. My trepidations concerning frameworks like Svelte come from things like this: `<input type="radio" bind:group={current} value={filter.fn}>` What does `bind:group` do? What kind of magic is going on behind the scenes to make this work? At least with React it's always easy to grok what is happening (it's all just JavaScript, after all). Of all the front-end frameworks React has the fewest magical invocations and that's one of the most important things I look for in a framework or library.

nemothekid 7y ago
You're missing his actual walkthrough of Svelte, that he likely did in the demo. I've seen Svelte enough times on HN that I'm vaguely familiar with it. Svelte, to me, at a very high level, is "Angular 1, but fast" - which might be easier to develop for, but doesn't provide the same "rails" that React does (and why I prefer it). At the end of the day, all the hang wringing about hooks and purity is about making it simple to reason about a program locally. I haven't used Svelte so I can't say for sure, but the problem Svelte (and that the Virtual DOM) solves is an issue I don't think I have. In any case his presentation was interesting enough from a FP/Programming theory POV.
- kjksf 7y ago
  For what it's worth: to me Svelte is, for the lack of a better word, "better" React. It's another evolutionary step in the same direction. I wouldn't compare it to Angular. Svelte is both easier to use (productivity) and generates faster code. To me React is 2 things: components (reusable pieces that combine state with rendering logic in JavaScript / HTML / CSS) and reactivity (rebuilding UI from state). Virtual DOM is an implementation detail that makes rebuilding UI from state fast enough in React. Svelte also provides components and reactivity but with less typing (for me, the programmer). While I know some people complain about more magic, my experience is opposite: Svelte maps more intuitively to the final JavaScript / HTML / CSS than React. And it has CSS that is scoped by default to the component which removes the need for CSS-in-JS solutions.
  - ng12 7y ago
    Too bad https://github.com/sveltejs/svelte/issues/1639 https://github.com/sveltejs/svelte/issues/1639 is still open :)
    - lioeters 7y ago
      For others who are curious, this is about TypeScript support in Svelte - an issue created a year ago. The following comment by the author sounds hopeful, that they've been working in that direction, and eventually it will happen: https://github.com/sveltejs/svelte/issues/1639#issuecomment-442974572 https://github.com/sveltejs/svelte/issues/1639#issuecomment-...
- pier25 7y ago
  I really don't see the comparison with Angular other than the use of templates. Can you elaborate? Also, what "rails" does React provide?
  - nemothekid 7y ago
    >I really don't see the comparison with Angular I haven't used Svelte so take my comparison surface level. templates, directives and the prop names all remind me of Angular. >Also, what "rails" does React provide? The "rails" that react provided that I found useful where more around opinionated data flow with props (especially with Flux).
    - pier25 7y ago
      > templates, directives and the prop names all remind me of Angular Yes, but those are commonplace in any library/framework that uses templates. Like you said, this is just a very superficial comparison. Angular is framework that comes with lots of abstractions, modules, dependency injection, etc. It's a very different beast than Svelte. > The "rails" that react provided that I found useful where more around opinionated data flow with props (especially with Flux). Right, but React is only the rendering part. You are probably refering to Redux.
atan 7y ago
bind:group is explained in the docs (https://svelte.dev/tutorial/group-inputs https://svelte.dev/tutorial/group-inputs). I don't think React would be particularly easy to grok without first having read its docs (or some kind of instructional material) either. Regarding the "magic," note that you can always inspect the generated Javascript, which is quite readable (particularly in dev mode). Given that the component code is largely self-contained (it does refer to some common shared helper functions), you might even find it easier to understand how Svelte is working than trying to follow whatever the React library is doing behind the scenes.
- ng12 7y ago
  That's not what I mean when I say "magic". Magic, to me, is having some special string in your template which is going to invoke some arbitrary logic to get something "just working". In this example, note how `group` does different things depending on what kind of input you're dealing with. That's the kind of stuff that sounds great in a demo but quickly becomes a pain in a large application. It's not about being able to learn a framework without reading the documentation, it's about how many distinct concepts you have to read the documentation for to use the framework. React is extremely conceptually light, by design, which is something I love about it.
  - atan 7y ago
    bind:group is not a "special string" but simply part of the API, in the same way useEffect is part of the React API. bind:group is no more "magical" than useEffect (both are ultimately going to "invoke some arbitrary logic"). > In this example, note how `group` does different things depending on what kind of input you're dealing with. That's the kind of stuff that sounds great in a demo but quickly becomes a pain in a large application. I really don't see how. It is relevant to exactly two kinds of inputs (radio and checkbox) and does exactly what you would expect with each (given the different behaviors of radio and checkbox inputs). > It's not about being able to learn a framework without reading the documentation, it's about how many distinct concepts you have to read the documentation for to use the framework. Sure, but looking at the right menu in the React documentation (https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html), there are actually quite a lot of concepts and API details to understand in order to become proficient in writing React apps. I would be hard pressed to say that looks any lighter or simpler than Svelte (I would actually argue the opposite -- Svelte seems simpler and more straightforward).

by ng12 7y ago

nemothekid 7y ago

You're missing his actual walkthrough of Svelte, that he likely did in the demo. I've seen Svelte enough times on HN that I'm vaguely familiar with it. Svelte, to me, at a very high level, is "Angular 1, but fast" - which might be easier to develop for, but doesn't provide the same "rails" that React does (and why I prefer it). At the end of the day, all the hang wringing about hooks and purity is about making it simple to reason about a program locally. I haven't used Svelte so I can't say for sure, but the problem Svelte (and that the Virtual DOM) solves is an issue I don't think I have. In any case his presentation was interesting enough from a FP/Programming theory POV.

kjksf 7y ago
For what it's worth: to me Svelte is, for the lack of a better word, "better" React. It's another evolutionary step in the same direction. I wouldn't compare it to Angular. Svelte is both easier to use (productivity) and generates faster code. To me React is 2 things: components (reusable pieces that combine state with rendering logic in JavaScript / HTML / CSS) and reactivity (rebuilding UI from state). Virtual DOM is an implementation detail that makes rebuilding UI from state fast enough in React. Svelte also provides components and reactivity but with less typing (for me, the programmer). While I know some people complain about more magic, my experience is opposite: Svelte maps more intuitively to the final JavaScript / HTML / CSS than React. And it has CSS that is scoped by default to the component which removes the need for CSS-in-JS solutions.
- ng12 7y ago
  Too bad https://github.com/sveltejs/svelte/issues/1639 https://github.com/sveltejs/svelte/issues/1639 is still open :)
  - lioeters 7y ago
    For others who are curious, this is about TypeScript support in Svelte - an issue created a year ago. The following comment by the author sounds hopeful, that they've been working in that direction, and eventually it will happen: https://github.com/sveltejs/svelte/issues/1639#issuecomment-442974572 https://github.com/sveltejs/svelte/issues/1639#issuecomment-...
pier25 7y ago
I really don't see the comparison with Angular other than the use of templates. Can you elaborate? Also, what "rails" does React provide?
- nemothekid 7y ago
  >I really don't see the comparison with Angular I haven't used Svelte so take my comparison surface level. templates, directives and the prop names all remind me of Angular. >Also, what "rails" does React provide? The "rails" that react provided that I found useful where more around opinionated data flow with props (especially with Flux).
  - pier25 7y ago
    > templates, directives and the prop names all remind me of Angular Yes, but those are commonplace in any library/framework that uses templates. Like you said, this is just a very superficial comparison. Angular is framework that comes with lots of abstractions, modules, dependency injection, etc. It's a very different beast than Svelte. > The "rails" that react provided that I found useful where more around opinionated data flow with props (especially with Flux). Right, but React is only the rendering part. You are probably refering to Redux.

atan 7y ago

bind:group is explained in the docs (https://svelte.dev/tutorial/group-inputs https://svelte.dev/tutorial/group-inputs). I don't think React would be particularly easy to grok without first having read its docs (or some kind of instructional material) either. Regarding the "magic," note that you can always inspect the generated Javascript, which is quite readable (particularly in dev mode). Given that the component code is largely self-contained (it does refer to some common shared helper functions), you might even find it easier to understand how Svelte is working than trying to follow whatever the React library is doing behind the scenes.

ng12 7y ago
That's not what I mean when I say "magic". Magic, to me, is having some special string in your template which is going to invoke some arbitrary logic to get something "just working". In this example, note how `group` does different things depending on what kind of input you're dealing with. That's the kind of stuff that sounds great in a demo but quickly becomes a pain in a large application. It's not about being able to learn a framework without reading the documentation, it's about how many distinct concepts you have to read the documentation for to use the framework. React is extremely conceptually light, by design, which is something I love about it.
- atan 7y ago
  bind:group is not a "special string" but simply part of the API, in the same way useEffect is part of the React API. bind:group is no more "magical" than useEffect (both are ultimately going to "invoke some arbitrary logic"). > In this example, note how `group` does different things depending on what kind of input you're dealing with. That's the kind of stuff that sounds great in a demo but quickly becomes a pain in a large application. I really don't see how. It is relevant to exactly two kinds of inputs (radio and checkbox) and does exactly what you would expect with each (given the different behaviors of radio and checkbox inputs). > It's not about being able to learn a framework without reading the documentation, it's about how many distinct concepts you have to read the documentation for to use the framework. Sure, but looking at the right menu in the React documentation (https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html), there are actually quite a lot of concepts and API details to understand in order to become proficient in writing React apps. I would be hard pressed to say that looks any lighter or simpler than Svelte (I would actually argue the opposite -- Svelte seems simpler and more straightforward).