5 ms·

I'm very curious what the better, academic version of VDOM, hooks and components that has already been done looks like in comparison to React.

antris 5y ago
Svelte does reactive UI without a VDOM at all. Every DOM operation flows from declarative instructions based on the state of the application, without a need for VDOM or hooks. The compiler is quite mature and used by countless apps in production right now. https://svelte.dev/ https://svelte.dev/ I've been using it myself and it doesn't feel academic at all. The Svelte Kit toolkit, a successor to the Sapper frameworks is also ready to use but it's not 1.0 yet so might be a bit unstable. But if you're worried about having to figure things out then you can use Sapper+Svelte or just Svelte just fine, and they're very robust and well documented.
- ZephyrBlu 5y ago
  I know what Svelte is. Svelte wasn't done before React or by "FP academics" though, which is what you said in the comment I replied to.
  - antris 5y ago
    As I said, the VDOM was novel. However, unidirectional data flow, lenses and FRP with RxJs all predate React. There was also Elm which was a full framework that was based on these concepts, and ClojureScript with its whole ecosystem that did things a bit differently. Though most people who do utilise functional programming concepts prefer not to use a framework but pick-and-choose libraries that do the job for that specific project. That means that the field was (and is) very scattered, and there's no single "React but better and made earlier". Because React is a unique combination of tools. But each of those tools have been done in one form or another many times, except for the VDOM, which I believe was novel. On another note, a React component in FP is just any regular old JS function with a signature: `(state) => HTML string`. React is such a simple concept that it wouldn't have needed any sort of library, if it weren't for the performance and DOM reset issues.
    - dmitriid 5y ago
      > However, unidirectional data flow, lenses and FRP with RxJs all predate React. They may predate React, but React made them easy. Good luck explaining how lenses work. Rx? it took the author of RxJava months to understand the concept. And he had the author of Rx.net there to explain stuff to him. [1] > there's no single "React but better and made earlier". Yes. And that is precisely the point [1] https://twitter.com/dmitriid/status/811561007504093184 https://twitter.com/dmitriid/status/811561007504093184
      - antris 5y ago
        Well that's why said > React made a huge impact on web dev and deservingly so The VDOM was revolutionary, no question about it. The comment I was replying to didn't even mention it.
        dmitriid 5y ago
        Your original comment was literally this, emphasis mine: --- start quote --- All of these concepts are variations of what has been done before in a number of ways. Mostly by "FP academics" who "live in fantasy land", until everyone else starts using them too. Transpiling, hooks and components have all been done (and done better) before React came along --- end quote --- When asked about the emphasized part, you mentioned Svelte for some reason. When called out on that, you went and listed a bunch of things, ... none of which are really better, and are quite esoteric. To the point that it took the authors of some implementations months to understand the concepts. React (pre-hooks) could be picked up in less than a day, and just worked. Re-creating React concepts from scratch was a three-page tutorial.
        antris 5y ago
        If you judge technologies based on a single anecdote you've heard on the internet then I don't think this conversation serves any purpose. I don't know what bone you have to pick with any technology other than React, but achieving declarative DOM manipulation pre-React was as simple as `(state) => $('<div>').innerText(state.message)` with the plain old jQuery. That was definitely easier than learning React, and by building a component structure with vanilla javascript functions, you could have all the functionality and expressiveness of JSX without a compile step or external libraries. Of course this would cause problems that I've described in this thread before (scroll/form state resets, performance problems etc.), so the VDOM was the missing piece of the puzzle. Overall the concept of declarative UI was incredibly simple and predated React, but the VDOM was a great thing that solved the problems people were having with declarative DOM manipulation. If React had shipped just with the VDOM implementation, it wouldn't have needed to expand into a full-fledged framework and introduce a bunch of band-aids on top it. React deservedly skyrocketed, and the VDOM was an incredible thing to introduce at the time, but every part of React is quickly becoming outdated as more FP concepts from the past are introduced into the mainstream. So all in all, React shaked things up in a good way, and finally people are ready to move on to make their apps actually reactive and taking a serious look on things that have been "academic" before.

antris 5y ago

Svelte does reactive UI without a VDOM at all. Every DOM operation flows from declarative instructions based on the state of the application, without a need for VDOM or hooks. The compiler is quite mature and used by countless apps in production right now. https://svelte.dev/ https://svelte.dev/ I've been using it myself and it doesn't feel academic at all. The Svelte Kit toolkit, a successor to the Sapper frameworks is also ready to use but it's not 1.0 yet so might be a bit unstable. But if you're worried about having to figure things out then you can use Sapper+Svelte or just Svelte just fine, and they're very robust and well documented.

ZephyrBlu 5y ago
I know what Svelte is. Svelte wasn't done before React or by "FP academics" though, which is what you said in the comment I replied to.
- antris 5y ago
  As I said, the VDOM was novel. However, unidirectional data flow, lenses and FRP with RxJs all predate React. There was also Elm which was a full framework that was based on these concepts, and ClojureScript with its whole ecosystem that did things a bit differently. Though most people who do utilise functional programming concepts prefer not to use a framework but pick-and-choose libraries that do the job for that specific project. That means that the field was (and is) very scattered, and there's no single "React but better and made earlier". Because React is a unique combination of tools. But each of those tools have been done in one form or another many times, except for the VDOM, which I believe was novel. On another note, a React component in FP is just any regular old JS function with a signature: `(state) => HTML string`. React is such a simple concept that it wouldn't have needed any sort of library, if it weren't for the performance and DOM reset issues.
  - dmitriid 5y ago
    > However, unidirectional data flow, lenses and FRP with RxJs all predate React. They may predate React, but React made them easy. Good luck explaining how lenses work. Rx? it took the author of RxJava months to understand the concept. And he had the author of Rx.net there to explain stuff to him. [1] > there's no single "React but better and made earlier". Yes. And that is precisely the point [1] https://twitter.com/dmitriid/status/811561007504093184 https://twitter.com/dmitriid/status/811561007504093184
    - antris 5y ago
      Well that's why said > React made a huge impact on web dev and deservingly so The VDOM was revolutionary, no question about it. The comment I was replying to didn't even mention it.
      - dmitriid 5y ago
        Your original comment was literally this, emphasis mine: --- start quote --- All of these concepts are variations of what has been done before in a number of ways. Mostly by "FP academics" who "live in fantasy land", until everyone else starts using them too. Transpiling, hooks and components have all been done (and done better) before React came along --- end quote --- When asked about the emphasized part, you mentioned Svelte for some reason. When called out on that, you went and listed a bunch of things, ... none of which are really better, and are quite esoteric. To the point that it took the authors of some implementations months to understand the concepts. React (pre-hooks) could be picked up in less than a day, and just worked. Re-creating React concepts from scratch was a three-page tutorial.
        antris 5y ago
        If you judge technologies based on a single anecdote you've heard on the internet then I don't think this conversation serves any purpose. I don't know what bone you have to pick with any technology other than React, but achieving declarative DOM manipulation pre-React was as simple as `(state) => $('<div>').innerText(state.message)` with the plain old jQuery. That was definitely easier than learning React, and by building a component structure with vanilla javascript functions, you could have all the functionality and expressiveness of JSX without a compile step or external libraries. Of course this would cause problems that I've described in this thread before (scroll/form state resets, performance problems etc.), so the VDOM was the missing piece of the puzzle. Overall the concept of declarative UI was incredibly simple and predated React, but the VDOM was a great thing that solved the problems people were having with declarative DOM manipulation. If React had shipped just with the VDOM implementation, it wouldn't have needed to expand into a full-fledged framework and introduce a bunch of band-aids on top it. React deservedly skyrocketed, and the VDOM was an incredible thing to introduce at the time, but every part of React is quickly becoming outdated as more FP concepts from the past are introduced into the mainstream. So all in all, React shaked things up in a good way, and finally people are ready to move on to make their apps actually reactive and taking a serious look on things that have been "academic" before.