5 ms·

Interested to see this because I'm neither a JavaScript nor frontend dev, but over the last two weeks have been gently learning React out of curiosity, applying

Interested to see this because I'm neither a JavaScript nor frontend dev, but over the last two weeks have been gently learning React out of curiosity, applying it to a small personal project. The last time I used JavaScript was with Angular 1.x around 2013. Iirc the angular learning curve was negligible; React's is steeper, but I can't compare with modern Angular - seems it's up to 11.rc1. I get the impression React has mostly won the battle. I was wondering if maybe I should have tried Svelte instead, but React is the name I keep seeing, so figured that's where I'll peek (first?). I think the muddle I need to sort through at the moment is the old tutorials vs the new tutorials as I'm seeing multiple ways of doing things but don't yet know which are the new ways, the best practices, or the trade-offs with each.

agustif 6y ago
Good call on React vs Angular, Although Svelte is the newest cool kid in town, I'd rather go with Vue than Svelte. Also NextJS is the best way to learn React IMHO, but it adds a lot of extra stuff so maybe wait until you need it
- davidwparker 6y ago
  Besides the bigger ecosystem, curious as to why you'd go with Vue over Svelte? I've used Vue for pet projects but Svelte a lot over the last 6-months and don't think I would reach for anything else but Svelte right now. (I'm sure that opinion will change over time, but between the speed of development, and the incredibly nice / fast applications I'm able to build, I've never felt more productive (on the frontend))
  - preommr 6y ago
    I like vue a lot more. In regards to the ecosystem, tooling is much better for vue. In fact, given how similar react/vue/svelte are, the tooling makes a big difference. Other than that, I like that vue (ironically) has less magic than svelte. If I wanted to switch over to react, I could just use react+mobx for pretty much the same experience. Vue's reactivity is basically very simple observables that I can easily envision in my head. Even though it uses a dsl - there are like 6 directives that I have to remember that are pretty much common to any template engine (i.e. v-for, v-if, etc). Whereas, svelte has a lot more magical syntax that makes it perhaps more pleasant to program in, but not something I am willing to invest in until it becomes more mature. I use the object style for components and really like it because it makes things more explicit and clear. I know svelte is smaller and so it's more productive for smaller use cases, but in the long run, I like the more explicit nature for when I am switching between front-end and back-end. Also, vue is a lot easier to integrate incrementally since it does a fair amount of stuff during runtime in contrast to svelte which does the main work at compile time. The latter obviously makes it a little bit faster, but the web environment is slow enough that my other techniques (like lazy loading) are enough to cover for it.
    - davidwparker 6y ago
      I've found Svelte's tooling to be great. Can you elaborate on what's lacking and what Vue provides that's better? I come from a Rails background, so I don't tend to find anything "magical". I guess to me, it's all pretty simple so long as you take the time to read how it all works. (I understand not everyone has time to do that). I'm not sure about the incremental stuff- it may be that I'm used to it going fast. You should also checkout the latest Svelte (not public yet) from Rich, it's able to automatically show updates after every save, with state being kept within the refresh.
xxffgg557 6y ago
Thinking react vs. angular as though they are trying to "win" some universal battle is just propagated by clickbait blogging. Enterprise + larger scale teams tend towards Angular, blog posts and hip projects tend towards react.
- maclockard 6y ago
  I don't think this distinction is exactly correct. I've worked on some enterprise projects with larger scale teams that have used React. It offers a bit more control than Angular does in terms of what your frontend 'stack' is comprised of. This level of control can be appealing for large projects. I kinda see a trend that projects started after x date tend to use React over Angular, but I am unsure of what x is or how universal this is.
  - xxffgg557 6y ago
    Obviously some enterprises have used either. This is not about subjective experience. Regardless, it should be obvious to anybody that has ever worked in a massive corporation that a DIY approach with react will not be opted for. Talking about the corps where most people get jobs, not the ones that publish blog posts on hacker news
    - dragonwriter 6y ago
      > Regardless, it should be obvious to anybody that has ever worked in a massive corporation that a DIY approach with react will not be opted for. While it's public sector, I work for a fairly big, boring, enterprise org that doesn't publish anything on HN and for our apps that use a SPA framework, a “DIY approach with React” is pretty much exactly what we are doing,at least in my corner of the org. Never heard of anyone in the org using Angular (there's some shops doing jQuery/Bootstrap stuff, and some at least experimenting with Blazor which isn't surprising given how .NET-heavy the org has been.) There was a time when Angular was sort of the enterprise Java of SPA frameworks, but I think that's kinda past already, and lots of big boring enterprises missed it completely.
    - 6y ago
ritchiea 6y ago
The latest consensus is to avoid class components, use only functional components and use hooks to handle state & side effects. Ninety percent of React is building DOM, hitting APIs with an HTTP client and using useState + useEffect. And remembering that you must pass functions & data to child elements to communicate between or share logic across components.
- poyu 6y ago
  What’s the reason to avoid class components though? The official tutorial still uses it, though that could just be because it’s outdated?
  - ritchiea 6y ago
    The zeitgeist is that hooks are easier to reason about than life cycle methods, functional components are more lightweight and result in less bundled code.
    - hitekker 6y ago
      It's more of a hype train than a "zeitgeist". Major community contributors like Jared Palmer have stepped forward in the past year to critique the complexity of React hooks. https://jaredpalmer.com/blog/react-is-becoming-a-black-box https://jaredpalmer.com/blog/react-is-becoming-a-black-box https://dillonshook.com/a-critique-of-react-hooks-addendum/ https://dillonshook.com/a-critique-of-react-hooks-addendum/ Personally, I think blindly adopting the latest frontend trends is the opposite of being "radically pragmatic".
      - ritchiea 6y ago
        Ok! Your opinion is noted
      - ritchiea 6y ago
        What's more pragmatic than not being precious about what technology decision is most perfect and instead going with what's popular and has a lot of community support?
bluedevil2k 6y ago
Stay with React, don't go with the newest shiniest JS framework. React has a 3rd party solution for nearly everything so you can piece all these well-developed and well-tested modules together to make your app. Others may suggest using Hooks right from the start, so I'll act as the counterpoint. Starting with Class components is easier to understand and less is happening magically. Almost everything can be accomplished using only 3 lifecycle methods - constructor, render() and componentDidMount. Once you're comfortable with how that all comes together, start to pick up Hooks
- richeyryan 6y ago
  If you are doing asynchronous data fetching in your components, only using those three lifecycle methods will inevitably lead to bugs when your props or state update but your asynchronous call doesn't fire again because it was in componentDidMount. You need to use componentDidUpdate to trigger the call again when props or state update. Alternatively useEffect with the dependency array properly filled won't allow a stale state like that to occur.
csomar 6y ago
React is indeed very steep, but it is very productive if your application is complex enough. If you are going to use Static Site generation (react-static) and GraphQl (relay), then React quickly pays off. My experience with Vuejs/React is that Vue is easy to start with and good enough. But once you need more integration with the ecosystem, you realize that React has better support.
dragonwriter 6y ago
> Iirc the angular learning curve was negligible; React's is steeper, Almost everyone I've encountered has found React easier than Angular, though React is more prone to lead you into analysis paralysis with options, since it covers less OOTB and there are so many alternatives that interact with React for each of the other bits.

agustif 6y ago

Good call on React vs Angular, Although Svelte is the newest cool kid in town, I'd rather go with Vue than Svelte. Also NextJS is the best way to learn React IMHO, but it adds a lot of extra stuff so maybe wait until you need it

davidwparker 6y ago
Besides the bigger ecosystem, curious as to why you'd go with Vue over Svelte? I've used Vue for pet projects but Svelte a lot over the last 6-months and don't think I would reach for anything else but Svelte right now. (I'm sure that opinion will change over time, but between the speed of development, and the incredibly nice / fast applications I'm able to build, I've never felt more productive (on the frontend))
- preommr 6y ago
  I like vue a lot more. In regards to the ecosystem, tooling is much better for vue. In fact, given how similar react/vue/svelte are, the tooling makes a big difference. Other than that, I like that vue (ironically) has less magic than svelte. If I wanted to switch over to react, I could just use react+mobx for pretty much the same experience. Vue's reactivity is basically very simple observables that I can easily envision in my head. Even though it uses a dsl - there are like 6 directives that I have to remember that are pretty much common to any template engine (i.e. v-for, v-if, etc). Whereas, svelte has a lot more magical syntax that makes it perhaps more pleasant to program in, but not something I am willing to invest in until it becomes more mature. I use the object style for components and really like it because it makes things more explicit and clear. I know svelte is smaller and so it's more productive for smaller use cases, but in the long run, I like the more explicit nature for when I am switching between front-end and back-end. Also, vue is a lot easier to integrate incrementally since it does a fair amount of stuff during runtime in contrast to svelte which does the main work at compile time. The latter obviously makes it a little bit faster, but the web environment is slow enough that my other techniques (like lazy loading) are enough to cover for it.
  - davidwparker 6y ago
    I've found Svelte's tooling to be great. Can you elaborate on what's lacking and what Vue provides that's better? I come from a Rails background, so I don't tend to find anything "magical". I guess to me, it's all pretty simple so long as you take the time to read how it all works. (I understand not everyone has time to do that). I'm not sure about the incremental stuff- it may be that I'm used to it going fast. You should also checkout the latest Svelte (not public yet) from Rich, it's able to automatically show updates after every save, with state being kept within the refresh.

xxffgg557 6y ago

Thinking react vs. angular as though they are trying to "win" some universal battle is just propagated by clickbait blogging. Enterprise + larger scale teams tend towards Angular, blog posts and hip projects tend towards react.

maclockard 6y ago
I don't think this distinction is exactly correct. I've worked on some enterprise projects with larger scale teams that have used React. It offers a bit more control than Angular does in terms of what your frontend 'stack' is comprised of. This level of control can be appealing for large projects. I kinda see a trend that projects started after x date tend to use React over Angular, but I am unsure of what x is or how universal this is.
- xxffgg557 6y ago
  Obviously some enterprises have used either. This is not about subjective experience. Regardless, it should be obvious to anybody that has ever worked in a massive corporation that a DIY approach with react will not be opted for. Talking about the corps where most people get jobs, not the ones that publish blog posts on hacker news
  - dragonwriter 6y ago
    > Regardless, it should be obvious to anybody that has ever worked in a massive corporation that a DIY approach with react will not be opted for. While it's public sector, I work for a fairly big, boring, enterprise org that doesn't publish anything on HN and for our apps that use a SPA framework, a “DIY approach with React” is pretty much exactly what we are doing,at least in my corner of the org. Never heard of anyone in the org using Angular (there's some shops doing jQuery/Bootstrap stuff, and some at least experimenting with Blazor which isn't surprising given how .NET-heavy the org has been.) There was a time when Angular was sort of the enterprise Java of SPA frameworks, but I think that's kinda past already, and lots of big boring enterprises missed it completely.
  - 6y ago

ritchiea 6y ago

The latest consensus is to avoid class components, use only functional components and use hooks to handle state & side effects. Ninety percent of React is building DOM, hitting APIs with an HTTP client and using useState + useEffect. And remembering that you must pass functions & data to child elements to communicate between or share logic across components.

poyu 6y ago
What’s the reason to avoid class components though? The official tutorial still uses it, though that could just be because it’s outdated?
- ritchiea 6y ago
  The zeitgeist is that hooks are easier to reason about than life cycle methods, functional components are more lightweight and result in less bundled code.
  - hitekker 6y ago
    It's more of a hype train than a "zeitgeist". Major community contributors like Jared Palmer have stepped forward in the past year to critique the complexity of React hooks. https://jaredpalmer.com/blog/react-is-becoming-a-black-box https://jaredpalmer.com/blog/react-is-becoming-a-black-box https://dillonshook.com/a-critique-of-react-hooks-addendum/ https://dillonshook.com/a-critique-of-react-hooks-addendum/ Personally, I think blindly adopting the latest frontend trends is the opposite of being "radically pragmatic".
    - ritchiea 6y ago
      Ok! Your opinion is noted
    - ritchiea 6y ago
      What's more pragmatic than not being precious about what technology decision is most perfect and instead going with what's popular and has a lot of community support?

bluedevil2k 6y ago

Stay with React, don't go with the newest shiniest JS framework. React has a 3rd party solution for nearly everything so you can piece all these well-developed and well-tested modules together to make your app. Others may suggest using Hooks right from the start, so I'll act as the counterpoint. Starting with Class components is easier to understand and less is happening magically. Almost everything can be accomplished using only 3 lifecycle methods - constructor, render() and componentDidMount. Once you're comfortable with how that all comes together, start to pick up Hooks

richeyryan 6y ago
If you are doing asynchronous data fetching in your components, only using those three lifecycle methods will inevitably lead to bugs when your props or state update but your asynchronous call doesn't fire again because it was in componentDidMount. You need to use componentDidUpdate to trigger the call again when props or state update. Alternatively useEffect with the dependency array properly filled won't allow a stale state like that to occur.

csomar 6y ago

React is indeed very steep, but it is very productive if your application is complex enough. If you are going to use Static Site generation (react-static) and GraphQl (relay), then React quickly pays off. My experience with Vuejs/React is that Vue is easy to start with and good enough. But once you need more integration with the ecosystem, you realize that React has better support.

dragonwriter 6y ago

> Iirc the angular learning curve was negligible; React's is steeper, Almost everyone I've encountered has found React easier than Angular, though React is more prone to lead you into analysis paralysis with options, since it covers less OOTB and there are so many alternatives that interact with React for each of the other bits.