9 ms·

If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?

by synu 4y ago

azangru 4y ago
If you are starting to learn front-end development today, you may question the choice of React. Consider that a decade ago, people who were starting with the frontend were learning jQuery, which is almost irrelevant now.
- ramesh31 4y ago
  >Consider that a decade ago, people who were starting with the frontend were learning jQuery, which is almost irrelevant now. It's not that simple. At the time, jQuery was absolutely pivotal in bringing about ES5 and the transpilation revolution on the front end. More or less its' entire API was subsumed by the browsers, and so jQuery became unnecessary, but far from irrelevant. I can see the same thing happening today with React/JSX. There is simply no better way of expressing a UI than JSX-like components. And FRP as a paradigm for UI development is here to stay. So the future of web dev probably looks something like Yew [0]. [0] https://yew.rs/docs/getting-started/build-a-sample-app https://yew.rs/docs/getting-started/build-a-sample-app
- outworlder 4y ago
  What would they be using instead?
  - azangru 4y ago
    They should probably start with native browser apis for DOM manipulation, and web components. And then explore the current landscape for options that alleviate the pain points discovered while learning (e.g. Lit is nice for declarative reactive components). All the while being conscious of the tradeoffs.
    - 411111111111111 4y ago
      That's a fine idea if you're not expecting the team to grow beyond the original author(s). It's a pretty terrible idea if you're going to do it in a business setting, as the original author(s) will always be it's Achilles tendon, making the project a liability before it even goes into production. Most projects use react or angular because it makes onboarding new members easier, and these frameworks really aren't as bad as some people on hn claim.
      - cercatrova 4y ago
        The phrase is Achilles' heel for which the tendon is named.
      - azangru 4y ago
        How much have you researched this space? Do you know of companies that are successfully building their products with web components? Hint: these would include Adobe, Microsoft, RedHat, and GitHub. How do they onboard new members to their terrible setup, one might wonder?
        411111111111111 4y ago
        Sure, if that's the scale of your project right from the start then creating a new framework from scratch is always an option. That's the origin of both react(Facebook) and angular(google) after all.
        RussianCow 4y ago
        > How do they onboard new members to their terrible setup, one might wonder? I can't speak for the specific companies you listed, but the number of times I've heard someone sing praises about a homegrown UI framework at their place of employment is approximately zero. The sentiment expressed about those is generally hatred and agony. That's not to say it can't be done well, but most don't. Also, a company being able to hire/onboard engineers does not imply that their onboarding process is smooth, or that their house-made framework is well designed.
- nfRfqX5n 4y ago
  If you want a job, learn react
deleted 4y ago
[deleted]
jasim 4y ago
This is diffused cultural knowledge, but most of the ideas in React can be understood as: view = render(state). It re-renders everything all the time. But practical considerations force some optimizations. Everything else in React follows from those optimizations. For example, if you destroy and re-create DOM all the time, then it loses critical information like user's cursor position and text selections. It is also slow to read and write to the DOM. Thus the need for an intermediate data structure, the virtual DOM. React re-renders the virtual DOM every time the state changes. And it then diffs the previous and current ones against each other and does just the minimal number of DOM mutations to sync it up. To speed this up a bit, array elements are denoted with "key" so (I assume) there is a way to see if an element has been added or deleted. But re-rendering the virtual DOM all the time can also be costly in terms of performance. Thus the next set of optimizations: React.memo+immutable data, and so on..
ng12 4y ago
The idea is you shouldn't really need to. You have tools to memoize expensive operations in a React-friendly way, but even then you shouldn't really have to think about render cycles. YMMV but I the only time I've ever had to really think about this stuff was when trying to frankenstein legacy jQuery code into a React app.
- RussianCow 4y ago
  In my experience, it's pretty easy to hit performance bottlenecks in React, so I don't think it's that uncommon to have to dive deeper for any reasonably complex codebase. Also, you basically have to understand the React render cycle to effectively use `useEffect` for anything more complex than "do this thing on mount".
- synu 4y ago
  I get that, but I personally enjoy understanding the full stack. I built a cpu on breadboard from kit for fun, its just something I enjoy doing.
deleted 4y ago
[deleted]
lhnz 4y ago
The new version of the official docs is currently in Beta and this is really, really good: https://beta.reactjs.org/learn https://beta.reactjs.org/learn (In fact, I'll go further than this and add that the section on "Escape Hatches" should be re-read by senior/lead engineers, as many have misconceptions due to learning concepts ad-hoc from code of mixed quality: https://beta.reactjs.org/learn/escape-hatches https://beta.reactjs.org/learn/escape-hatches)
- 9935c101ab17a66 4y ago
  Hmm. The escape hatches page is just “coming soon” for me?
  - francislavoie 4y ago
    That page is just the "category header" for a bunch of other pages. Look at the sidebar (or on mobile, hamburger menu) to see the actual content.
- deleted 4y ago
  [deleted]
RyanHamilton 4y ago
I can recommend React with Mosh: https://codewithmosh.com/p/mastering-react https://codewithmosh.com/p/mastering-react I completed it and together with the react official documentation (particularly on hooks and newer react 18 features) have learnt enough to build a good interactive application. Building the app immediately after has taught me much more. You can try patching free tutorials together but given the salary paid to good developers, paying for good training is a great investment. I chose react as I had a large application to make and I knew react had 2 critical libraries I wanted to reuse. Having now learnt react and the underlying ideas, I think Svelte (https://svelte.dev/ https://svelte.dev/) may solve the general problem better. However it has less libraries/documentation and community support. If I had more time to learn I would have considered learning it as a potentially superior solution.
- droidist2 4y ago
  What aspects of Svelte would have made it more suitable?
gregsadetsky 4y ago
Scrimba has pretty great interactive classes too. They specifically have a free React one: https://scrimba.com/allcourses?topic=react https://scrimba.com/allcourses?topic=react It's quite high quality and the learning environment is great: you're in a live code editor + hear and see the teacher's code/cursor movements.
Tiktaalik 4y ago
I've found myself needing to learn React on the go while working on an evolving React codebase, and needing to improve performance significantly and it's been very hard because casually googling for how to do things in React yields lousy hits full of extremely high level "babys first react todo app/blog" type articles. Absolutely not what I need. What I want to know is how to build things with React as performant as possible. This discussion of complex and performant apps seems elusive.

If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?

by synu 4y ago

If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?

azangru 4y ago

If you are starting to learn front-end development today, you may question the choice of React. Consider that a decade ago, people who were starting with the frontend were learning jQuery, which is almost irrelevant now.

ramesh31 4y ago
>Consider that a decade ago, people who were starting with the frontend were learning jQuery, which is almost irrelevant now. It's not that simple. At the time, jQuery was absolutely pivotal in bringing about ES5 and the transpilation revolution on the front end. More or less its' entire API was subsumed by the browsers, and so jQuery became unnecessary, but far from irrelevant. I can see the same thing happening today with React/JSX. There is simply no better way of expressing a UI than JSX-like components. And FRP as a paradigm for UI development is here to stay. So the future of web dev probably looks something like Yew [0]. [0] https://yew.rs/docs/getting-started/build-a-sample-app https://yew.rs/docs/getting-started/build-a-sample-app
outworlder 4y ago
What would they be using instead?
- azangru 4y ago
  They should probably start with native browser apis for DOM manipulation, and web components. And then explore the current landscape for options that alleviate the pain points discovered while learning (e.g. Lit is nice for declarative reactive components). All the while being conscious of the tradeoffs.
  - 411111111111111 4y ago
    That's a fine idea if you're not expecting the team to grow beyond the original author(s). It's a pretty terrible idea if you're going to do it in a business setting, as the original author(s) will always be it's Achilles tendon, making the project a liability before it even goes into production. Most projects use react or angular because it makes onboarding new members easier, and these frameworks really aren't as bad as some people on hn claim.
    - cercatrova 4y ago
      The phrase is Achilles' heel for which the tendon is named.
    - azangru 4y ago
      How much have you researched this space? Do you know of companies that are successfully building their products with web components? Hint: these would include Adobe, Microsoft, RedHat, and GitHub. How do they onboard new members to their terrible setup, one might wonder?
      - 411111111111111 4y ago
        Sure, if that's the scale of your project right from the start then creating a new framework from scratch is always an option. That's the origin of both react(Facebook) and angular(google) after all.
      - RussianCow 4y ago
        > How do they onboard new members to their terrible setup, one might wonder? I can't speak for the specific companies you listed, but the number of times I've heard someone sing praises about a homegrown UI framework at their place of employment is approximately zero. The sentiment expressed about those is generally hatred and agony. That's not to say it can't be done well, but most don't. Also, a company being able to hire/onboard engineers does not imply that their onboarding process is smooth, or that their house-made framework is well designed.
nfRfqX5n 4y ago
If you want a job, learn react

deleted 4y ago

[deleted]

jasim 4y ago

This is diffused cultural knowledge, but most of the ideas in React can be understood as: view = render(state). It re-renders everything all the time. But practical considerations force some optimizations. Everything else in React follows from those optimizations. For example, if you destroy and re-create DOM all the time, then it loses critical information like user's cursor position and text selections. It is also slow to read and write to the DOM. Thus the need for an intermediate data structure, the virtual DOM. React re-renders the virtual DOM every time the state changes. And it then diffs the previous and current ones against each other and does just the minimal number of DOM mutations to sync it up. To speed this up a bit, array elements are denoted with "key" so (I assume) there is a way to see if an element has been added or deleted. But re-rendering the virtual DOM all the time can also be costly in terms of performance. Thus the next set of optimizations: React.memo+immutable data, and so on..

ng12 4y ago

The idea is you shouldn't really need to. You have tools to memoize expensive operations in a React-friendly way, but even then you shouldn't really have to think about render cycles. YMMV but I the only time I've ever had to really think about this stuff was when trying to frankenstein legacy jQuery code into a React app.

RussianCow 4y ago
In my experience, it's pretty easy to hit performance bottlenecks in React, so I don't think it's that uncommon to have to dive deeper for any reasonably complex codebase. Also, you basically have to understand the React render cycle to effectively use `useEffect` for anything more complex than "do this thing on mount".
synu 4y ago
I get that, but I personally enjoy understanding the full stack. I built a cpu on breadboard from kit for fun, its just something I enjoy doing.

deleted 4y ago

[deleted]

lhnz 4y ago

The new version of the official docs is currently in Beta and this is really, really good: https://beta.reactjs.org/learn https://beta.reactjs.org/learn (In fact, I'll go further than this and add that the section on "Escape Hatches" should be re-read by senior/lead engineers, as many have misconceptions due to learning concepts ad-hoc from code of mixed quality: https://beta.reactjs.org/learn/escape-hatches https://beta.reactjs.org/learn/escape-hatches)

9935c101ab17a66 4y ago
Hmm. The escape hatches page is just “coming soon” for me?
- francislavoie 4y ago
  That page is just the "category header" for a bunch of other pages. Look at the sidebar (or on mobile, hamburger menu) to see the actual content.
deleted 4y ago
[deleted]

RyanHamilton 4y ago

I can recommend React with Mosh: https://codewithmosh.com/p/mastering-react https://codewithmosh.com/p/mastering-react I completed it and together with the react official documentation (particularly on hooks and newer react 18 features) have learnt enough to build a good interactive application. Building the app immediately after has taught me much more. You can try patching free tutorials together but given the salary paid to good developers, paying for good training is a great investment. I chose react as I had a large application to make and I knew react had 2 critical libraries I wanted to reuse. Having now learnt react and the underlying ideas, I think Svelte (https://svelte.dev/ https://svelte.dev/) may solve the general problem better. However it has less libraries/documentation and community support. If I had more time to learn I would have considered learning it as a potentially superior solution.

droidist2 4y ago
What aspects of Svelte would have made it more suitable?

gregsadetsky 4y ago

Scrimba has pretty great interactive classes too. They specifically have a free React one: https://scrimba.com/allcourses?topic=react https://scrimba.com/allcourses?topic=react It's quite high quality and the learning environment is great: you're in a live code editor + hear and see the teacher's code/cursor movements.

Tiktaalik 4y ago

I've found myself needing to learn React on the go while working on an evolving React codebase, and needing to improve performance significantly and it's been very hard because casually googling for how to do things in React yields lousy hits full of extremely high level "babys first react todo app/blog" type articles. Absolutely not what I need. What I want to know is how to build things with React as performant as possible. This discussion of complex and performant apps seems elusive.