It might be worth pointing out that this presentation comes with speaker notes (keyboard shortcut: S, or click on the gear icon at the bottom and find the link). They contain much more content (and context) than the slides alone.

Definitely worthwhile, thanks. I had viewed this presentation before but didn't know about the Speaker notes.

Same here. Thank you for the tip, GP.

The associated speaker notes are A+

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.

bind:group is explained in the docs (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.

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.

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), 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).

> bind:group is not a "special string" but simply part of the API

Right, but the difference is in the API design. React gives you a small set of tools to implement whatever functionality you need. Svelte gives you specially-crafted tools which to handle specific scenarios. Svelte gives you a command to bind input groups to a stateful value, React gives you the tools to do it yourself. The difference is subtle but experience has lead me to vastly prefer the latter, mostly because you're less reliant on the framework designer getting everything "right".

Here's a good talk which helps explain the difference: https://2014.jsconf.eu/speakers/sebastian-markbage-minimal-a...

I think React gives you more specially-crafted tools than you suggest and Svelte gives you fewer than you suggest. Even in this case, bind:group is just a shortcut -- Svelte also provides the tools to "do it yourself" if you need that ability in some special case (see https://svelte.dev/repl/3cffb15ef71f43b08872f72c527089a2?ver...).

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.

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.

Too bad https://github.com/sveltejs/svelte/issues/1639 is still open :)

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-...

I really don't see the comparison with Angular other than the use of templates. Can you elaborate?

Also, what "rails" does React provide?

>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).

> 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.

This is a very good take. DOM as a function of state has real tradeoffs but also real benefits; state as a function of state just gets out of hand. IMO React Hooks are where React jumped the shark. setState and Redux were already clunky and felt too rooted in unhelpful ideals, but hooks just took the cake.

My company's codebase uses MobX for all state and I highly recommend it. It embraces mutability and imperative code where they make sense: in your actual app state. React is there to do what it's best at: rendering DOM. That's it. Rendering remains functional and real, meaningful state is allowed to be what it is.

Glad to see there's a vocal minority who disagree with the way React Hooks are implemented. I raised my objections when it was announced (even got super kind feedback from Dan Abramov himself) - but it was too late, they "jumped the shark", as you put it. I looked up the meaning of the phrase, not sure it's totally suitable for this situation - but I feel that React crossed a threshold with its release.

I started considering alternative view libraries from that point, and continued to resist against using Hooks in my own React-based projects. The thing is, I love how React transformed web development, it's got huge mind share in the community, and there's nothing better out there yet. I just wish it had stayed small and simple, kept other concerns out of it and focused on doing its one thing only.

To add insult to injury it's fairly easy to use hooks wrong - and used wrong they are, which suggests that their learning curve is not as friendly as proponents of this pattern would wish.

Could you share some examples of hooks used wrongly in code?

useCallback used as something else than a provider of callback functions, e.g. for rendering.

Example:

  const renderItem = useCallback(() => <Item />, []);

And then:

  return renderItem();

What should have been used here is useMemo.

I've tried Svelte and while I don't love some of the dev ergonomics it's a damn fine project.

React was a great alternative to Angular back in 2015 but it's not even close to being objectively the best solution in 2019 except for its popularity. Preact or Inferno are so much faster/lightweight and are pretty much drop-in replacements for React.

BTW is there a video of this presentation somewhere?

We pretty much only use React for rendering and lifecycle (still rocking class-based components). Does Preact offer material improvements other than bundle size? If so I might look into switching.

Preact is considerably faster, but maybe React is good enough in your use case.

I also prefer using mostly class based components and some functional components for lightweight dumb components. I use Inferno for rendering and vanilla + MobX for everything else.

We certainly have performance bottlenecks in our rendering, so if a different library is faster we're definitely interested

Context here: https://www.swyx.io/writing/svelte-metaphysics

Really sad there's no recording, I feel like it would be twice as entertaining

It’s exhausting that the author of Svelte has to continually compare his project to React. It’s a huge red flag when someone can’t substantiate why something is worthwhile without criticizing adjacent projects.

I understand that React is the front-end framework du jour, but React nor any other successful project got where it is by continually criticizing others’ work.

That's the QtQuick approach.

And more Metaphysics & JS: https://youtu.be/5BuoDqVxvOM