6 ms·

Contrary to some commenters here, I think React is just about the best thing that has happened to UI programming in recent memory. Everything I tried before it

Contrary to some commenters here, I think React is just about the best thing that has happened to UI programming in recent memory. Everything I tried before it (jQuery, Backbone, Knockout, Angular, Meteor (with Handlebars)) felt like it fell short or, in the case of the databinding-oriented ones, like a broken abstraction. I get a similar feeling when looking at Vue though I have no experience so I might be wrong. I too am a bit skeptical about hooks making what looks like pure functions act like stateful ones. I am not using hooks yet but besides from Dan Abramovs excellent articles about their rationale, I think I will look at them like a new paradigm, only using a syntax that we know from something else. In fact, I wouldn't be surprised if I some time in the future will be using React to write state machines for something that doesn't have anything to do with UI, where "rendering" composes state related to something else entirely. I could see hooks being a game changer here.

baddox 8y ago
> I too am a bit skeptical about hooks making what looks like pure functions act like stateful ones. What’s wrong with that? Any conceivable application needs to actually have state that changes over time. That’s true of all software written in a purely functional style.
- Silhouette 8y ago
  That’s true of all software written in a purely functional style. By definition, any software that is purely functional does not have explicit mutable state. In practice, it is often useful to have parts of a system written in a pure functional style but other parts that do use mutable state, either explicitly or via some mechanism that simulates it in a functional context.
shubhamjain 8y ago
One reason I love Vue over React is how beginner friendly it is. You can't make a "Hello World" app in React without getting bombarded with concepts and terms—states, props, JSX, stateful components. Just look that the "Getting Started" example of Vue [1] and compare it React's [2]. You don't need anything more than a notepad to get the first example running. Progressing down Vue, you realize how they have tried to prioritize convenience. For example, using "v-on:keyup.enter" you can map an action to "Enter" key without writing code for handling that key. I liked the React's approach but it seems its focus is on purity of abstractions than convenience. Don't even get me started on Redux which is epitome of needless complexity—containers, reducers, event emitters? Was all that really needed? Note: I have no idea how Vue fares when code base is huge, but my intial impression makes me feel it's far better choice than React. [1]: https://vuejs.org/v2/guide/#Declarative-Rendering https://vuejs.org/v2/guide/#Declarative-Rendering [2]: https://reactjs.org/tutorial/tutorial.html https://reactjs.org/tutorial/tutorial.html
- danabramov 8y ago
  >Just look that the "Getting Started" example of Vue [1] and compare it React's [2]. Thanks for feedback! The linked React guide is intended to be a pretty comprehensive tutorial — not a getting started guide in the same sense. I wouldn’t say they’re comparable in how much about either of them teaches you about using a library. Maybe it’s not obvious from the wording. If you do want a simple “getting started” guide that doesn’t require any tools, it’s right here: https://reactjs.org/docs/add-react-to-a-website.html https://reactjs.org/docs/add-react-to-a-website.html And you can progressively learn all important concepts starting from here: https://reactjs.org/docs/hello-world.html https://reactjs.org/docs/hello-world.html Another common destination is this guide, which matches the Vue one in purpose a bit more closely: https://reactjs.org/docs/thinking-in-react.html https://reactjs.org/docs/thinking-in-react.html The “get started” link on the React page links to resources for people with different experience levels: https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html Hope that helps!
  - shubhamjain 8y ago
    Fair enough. These seem much better for starting out. However, the progression in Vue's guide is much better thought out. Step 1: Get a simple "Hello world" running. Step 2: Get something dynamic on screen. Step 3: A simple if statement. Step 4: A loop. Step 5: User Input. By the end of the guide, I know all there is to know to make a very simple interactive component.
    - danabramov 8y ago
      Thanks for feedback. I do think the “main concepts” guide goes in roughly the same order but I agree there could be a more condensed single-page version of it. We’ll keep it in mind for the future!
  - Silhouette 8y ago
    The linked React guide is intended to be a pretty comprehensive tutorial — not a getting started guide in the same sense. I wouldn’t say they’re comparable in how much about either of them teaches you about using a library. Maybe it’s not obvious from the wording. FWIW, I think the current introductory material on the React site is not as effective as how things were in the early days. IMHO, a significant benefit of React in its original form was its simplicity. The whole API practically fit on a single screen. You could write a tutorial that showed the basics of rendering a component or two on a single screen. Today React itself has become more complicated, and the tooling around it even more so, and I'm not sure that extra complexity offers a good return. Just as a demonstration of my point, please imagine for a moment that you are a developer who understands the basics of the modern JS world but is new to React. Go to the React site and find the instructions on how to just install React with npm or yarn, the way you probably would with any other JS library. OK, so there's nothing readily visible. No, really. How to just install React like every other JS library in the world isn't even described on the introductory pages. Well, maybe you try running {package manager} {install command} react That used to do the obvious thing, but now it doesn't because even the essentials are divided among multiple packages with non-obvious names. So at this point, just a couple of minutes after you decided to give React a try, you're already confused about how it works in NPM and thinking basic documentation is missing, and you haven't even installed it or written a line of code yet. Maybe you find a link somewhere to the page about the "most popular and approachable toolchains". OK, that looks promising. You click the link and... you're confronted with create-react-app, Gatsby, Next.js and a bunch of other dubious, heavyweight tools, not that you know that because you've never heard of them. But there's still no sign of how to just install React and try it out like any other JS library. So you go to the kitchen, make a coffee, come back and ask your mentor whether it's really necessary for you to use such a complicated and difficult tool, and whether you can just use Vue instead. This comment is based on a true story. :-(
dkersten 8y ago
> I think React is just about the best thing that has happened to UI programming in recent memory. I completely agree that it’s the best thing that has happened to web UI programming in recent memory, but for me, personally, I think Qt’s QML is the best thing that has happened to UI programming in general in recentish years. I like using react, especially from clojurescript using re-frame and I’m very thankful that it exists, but QML has been some of the most pleasant complex UI development I’ve done in the last few years. Now, if only Qt were more like re-frame, then I’d be super happy, but I love the declarative nature of QML and the anchor-based layouts.
olavgg 8y ago
You mention a lot of frameworks and libraries that abstract frontend development into its own "kind". I feel like you're already colored with the "crap" they come with. They all abstract something very simple into something that doesn't scale well for solving many of the common challenges for frontend development. They are all leaky abstractions. Of all these I have used jQuery and React, but I prefer plain vanilla over these. No breaking changes, no hype cycle, excellent documentation and with good old design patterns any complex problem is easily solvable. Believe it or not, but managing state is dead simple with just vanilla javascript.
- Vinnl 8y ago
  > Believe it or not, but managing state is dead simple with just vanilla javascript. Keeping state and the view in sync, however, is not. For example, if you have a list of TODO's that the user can edit in the browser, and that you want to be able to send to the back-end, every time the user adds a TODO, you'll have to remember to update both the model and the DOM. Likewise after an edit or deletion. These tools really do solve a problem.
  - olavgg 8y ago
    There is a design pattern for that called Observer pattern.

baddox 8y ago

> I too am a bit skeptical about hooks making what looks like pure functions act like stateful ones. What’s wrong with that? Any conceivable application needs to actually have state that changes over time. That’s true of all software written in a purely functional style.

Silhouette 8y ago
That’s true of all software written in a purely functional style. By definition, any software that is purely functional does not have explicit mutable state. In practice, it is often useful to have parts of a system written in a pure functional style but other parts that do use mutable state, either explicitly or via some mechanism that simulates it in a functional context.

shubhamjain 8y ago

One reason I love Vue over React is how beginner friendly it is. You can't make a "Hello World" app in React without getting bombarded with concepts and terms—states, props, JSX, stateful components. Just look that the "Getting Started" example of Vue [1] and compare it React's [2]. You don't need anything more than a notepad to get the first example running. Progressing down Vue, you realize how they have tried to prioritize convenience. For example, using "v-on:keyup.enter" you can map an action to "Enter" key without writing code for handling that key. I liked the React's approach but it seems its focus is on purity of abstractions than convenience. Don't even get me started on Redux which is epitome of needless complexity—containers, reducers, event emitters? Was all that really needed? Note: I have no idea how Vue fares when code base is huge, but my intial impression makes me feel it's far better choice than React. [1]: https://vuejs.org/v2/guide/#Declarative-Rendering https://vuejs.org/v2/guide/#Declarative-Rendering [2]: https://reactjs.org/tutorial/tutorial.html https://reactjs.org/tutorial/tutorial.html

danabramov 8y ago
>Just look that the "Getting Started" example of Vue [1] and compare it React's [2]. Thanks for feedback! The linked React guide is intended to be a pretty comprehensive tutorial — not a getting started guide in the same sense. I wouldn’t say they’re comparable in how much about either of them teaches you about using a library. Maybe it’s not obvious from the wording. If you do want a simple “getting started” guide that doesn’t require any tools, it’s right here: https://reactjs.org/docs/add-react-to-a-website.html https://reactjs.org/docs/add-react-to-a-website.html And you can progressively learn all important concepts starting from here: https://reactjs.org/docs/hello-world.html https://reactjs.org/docs/hello-world.html Another common destination is this guide, which matches the Vue one in purpose a bit more closely: https://reactjs.org/docs/thinking-in-react.html https://reactjs.org/docs/thinking-in-react.html The “get started” link on the React page links to resources for people with different experience levels: https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html Hope that helps!
- shubhamjain 8y ago
  Fair enough. These seem much better for starting out. However, the progression in Vue's guide is much better thought out. Step 1: Get a simple "Hello world" running. Step 2: Get something dynamic on screen. Step 3: A simple if statement. Step 4: A loop. Step 5: User Input. By the end of the guide, I know all there is to know to make a very simple interactive component.
  - danabramov 8y ago
    Thanks for feedback. I do think the “main concepts” guide goes in roughly the same order but I agree there could be a more condensed single-page version of it. We’ll keep it in mind for the future!
- Silhouette 8y ago
  The linked React guide is intended to be a pretty comprehensive tutorial — not a getting started guide in the same sense. I wouldn’t say they’re comparable in how much about either of them teaches you about using a library. Maybe it’s not obvious from the wording. FWIW, I think the current introductory material on the React site is not as effective as how things were in the early days. IMHO, a significant benefit of React in its original form was its simplicity. The whole API practically fit on a single screen. You could write a tutorial that showed the basics of rendering a component or two on a single screen. Today React itself has become more complicated, and the tooling around it even more so, and I'm not sure that extra complexity offers a good return. Just as a demonstration of my point, please imagine for a moment that you are a developer who understands the basics of the modern JS world but is new to React. Go to the React site and find the instructions on how to just install React with npm or yarn, the way you probably would with any other JS library. OK, so there's nothing readily visible. No, really. How to just install React like every other JS library in the world isn't even described on the introductory pages. Well, maybe you try running {package manager} {install command} react That used to do the obvious thing, but now it doesn't because even the essentials are divided among multiple packages with non-obvious names. So at this point, just a couple of minutes after you decided to give React a try, you're already confused about how it works in NPM and thinking basic documentation is missing, and you haven't even installed it or written a line of code yet. Maybe you find a link somewhere to the page about the "most popular and approachable toolchains". OK, that looks promising. You click the link and... you're confronted with create-react-app, Gatsby, Next.js and a bunch of other dubious, heavyweight tools, not that you know that because you've never heard of them. But there's still no sign of how to just install React and try it out like any other JS library. So you go to the kitchen, make a coffee, come back and ask your mentor whether it's really necessary for you to use such a complicated and difficult tool, and whether you can just use Vue instead. This comment is based on a true story. :-(

dkersten 8y ago

> I think React is just about the best thing that has happened to UI programming in recent memory. I completely agree that it’s the best thing that has happened to web UI programming in recent memory, but for me, personally, I think Qt’s QML is the best thing that has happened to UI programming in general in recentish years. I like using react, especially from clojurescript using re-frame and I’m very thankful that it exists, but QML has been some of the most pleasant complex UI development I’ve done in the last few years. Now, if only Qt were more like re-frame, then I’d be super happy, but I love the declarative nature of QML and the anchor-based layouts.

olavgg 8y ago

You mention a lot of frameworks and libraries that abstract frontend development into its own "kind". I feel like you're already colored with the "crap" they come with. They all abstract something very simple into something that doesn't scale well for solving many of the common challenges for frontend development. They are all leaky abstractions. Of all these I have used jQuery and React, but I prefer plain vanilla over these. No breaking changes, no hype cycle, excellent documentation and with good old design patterns any complex problem is easily solvable. Believe it or not, but managing state is dead simple with just vanilla javascript.

Vinnl 8y ago
> Believe it or not, but managing state is dead simple with just vanilla javascript. Keeping state and the view in sync, however, is not. For example, if you have a list of TODO's that the user can edit in the browser, and that you want to be able to send to the back-end, every time the user adds a TODO, you'll have to remember to update both the model and the DOM. Likewise after an edit or deletion. These tools really do solve a problem.
- olavgg 8y ago
  There is a design pattern for that called Observer pattern.