7 ms·

Will it make you a better React dev tho?

larve 4y ago
Author here, I actually think so. The rendering of the virtual DOM as well as hooks are fairly interesting mathematical constructs. A pattern I use a lot in web applications is the state reducer, which is really a fold over events and state. Seeing the functional nature of it (and reactive programming in general) can make for quite composable react code, while it is easy to make either a verbose mess of propdrilling or do a lot of tricky context mixing.
- tunesmith 4y ago
  I'd love to see some examples of your diagrams. Are they all hand-written or do you use online tools for them? I do quite a bit of graph diagramming but not for detailed planning of implementation. Best example I've seen along those lines are the xState tools for state charts (https://stately.ai/viz https://stately.ai/viz).
  - larve 4y ago
    I love xstate! I do use plantuml a lot for sketching, but most is done on paper or whiteboards and is quite transient in nature. I must have hundreds if not thousands of sketchbooks pages that look like this: https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b5918f9973e/Attachments/image/Sketchbooks-1657980036255.jpeg https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b... https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b5918f9973e/Attachments/image/Sketchbooks-1657980046129.jpeg https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b... https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b5918f9973e/Attachments/image/Sketchbooks-1657980062475.jpeg https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b...
    - tunesmith 4y ago
      These are great. You could probably get a lot of mileage out of a post that explores how to model a react component functionally in diagrams.
  - larve 4y ago
    https://media.hachyderm.io/media_attachments/files/109/405/564/509/630/195/original/6139cba020dbd9dc.jpg https://media.hachyderm.io/media_attachments/files/109/405/5... This looks very mundane but I do think about it very mathematically as well: user interaction with a search engine. The "encode" arrow for example is very much about NLP and tokenizing, which is a functor from the "category" of natural language to the functor of "lucene tokens" which then has a functor to "lucene queries". This is of course the very mundane typing of functions as: function parseQuery(query: NaturalLanguageString): LuceneQuery nothing spectacular, but the abstract approach means I know I can cache/batch/precompute/distribute/pipeline/modularize it. Similar mathematical concepts apply to all the other arrows, even if some are a bit wild (how does a search result influence a person's ideas?) But it means I can try to model the "wildness", and create say a probabilistic model to exercise and understand how my search engine actually performs (see for example click models and probabilistic graphical models) I hope that makes sense? edit: forgot picture link
yakshaving_jgt 4y ago
I think the best way to become a better React developer is to learn Elm, and then build your React apps the same way Elm would have forced you to.
- z5h 4y ago
  I gave an Elm talk years ago at the shared office space I used to work at. A few devs there later told me the talk helped them better understand React.
- quickthrower2 4y ago
  … and Redux was born!
  - yakshaving_jgt 4y ago
    Quite literally. https://redux.js.org/understanding/history-and-design/prior-art#elm https://redux.js.org/understanding/history-and-design/prior-...
    - nnoitra 4y ago
      Isn't Redux only used when the app becomes too complex with really complex state?
      - quickthrower2 4y ago
        I think so. Despite being an Elm fan I never used Redux. My side projects or work projects are small so local state and context were more than enough. Although Redux is like Elm, the language (Typescript or ES) make immutability hard so it doesn’t feel as natural a paradigm. Also pragmatically calling setState from an event is just easier for small projects.
        nnoitra 4y ago
        Why is Elm mentioned specifically. As far as I know (state, action) => state is just a function without side effects?
onemoresoop 4y ago
>Will it make you a better React dev tho? Will it make you write code that is more optimal and yet harder to penetrate by others?
revskill 4y ago
Yes. A React Component could be defined as a Functor with contramap function which map props with function. const renderer = props => <h1>Hello {props.pageName}</h1> const Title = ReactComponent(renderer).contramap(props => { pageName: props.title }) Title.fold({ title: 'Home page' }) // <h1>Hello Home page</h1>

Author here, I actually think so. The rendering of the virtual DOM as well as hooks are fairly interesting mathematical constructs. A pattern I use a lot in web applications is the state reducer, which is really a fold over events and state. Seeing the functional nature of it (and reactive programming in general) can make for quite composable react code, while it is easy to make either a verbose mess of propdrilling or do a lot of tricky context mixing.

tunesmith 4y ago
I'd love to see some examples of your diagrams. Are they all hand-written or do you use online tools for them? I do quite a bit of graph diagramming but not for detailed planning of implementation. Best example I've seen along those lines are the xState tools for state charts (https://stately.ai/viz https://stately.ai/viz).
- larve 4y ago
  I love xstate! I do use plantuml a lot for sketching, but most is done on paper or whiteboards and is quite transient in nature. I must have hundreds if not thousands of sketchbooks pages that look like this: https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b5918f9973e/Attachments/image/Sketchbooks-1657980036255.jpeg https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b... https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b5918f9973e/Attachments/image/Sketchbooks-1657980046129.jpeg https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b... https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b5918f9973e/Attachments/image/Sketchbooks-1657980062475.jpeg https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b...
  - tunesmith 4y ago
    These are great. You could probably get a lot of mileage out of a post that explores how to model a react component functionally in diagrams.
- larve 4y ago
  https://media.hachyderm.io/media_attachments/files/109/405/564/509/630/195/original/6139cba020dbd9dc.jpg https://media.hachyderm.io/media_attachments/files/109/405/5... This looks very mundane but I do think about it very mathematically as well: user interaction with a search engine. The "encode" arrow for example is very much about NLP and tokenizing, which is a functor from the "category" of natural language to the functor of "lucene tokens" which then has a functor to "lucene queries". This is of course the very mundane typing of functions as: function parseQuery(query: NaturalLanguageString): LuceneQuery nothing spectacular, but the abstract approach means I know I can cache/batch/precompute/distribute/pipeline/modularize it. Similar mathematical concepts apply to all the other arrows, even if some are a bit wild (how does a search result influence a person's ideas?) But it means I can try to model the "wildness", and create say a probabilistic model to exercise and understand how my search engine actually performs (see for example click models and probabilistic graphical models) I hope that makes sense? edit: forgot picture link

yakshaving_jgt 4y ago

I think the best way to become a better React developer is to learn Elm, and then build your React apps the same way Elm would have forced you to.

z5h 4y ago
I gave an Elm talk years ago at the shared office space I used to work at. A few devs there later told me the talk helped them better understand React.
quickthrower2 4y ago
… and Redux was born!
- yakshaving_jgt 4y ago
  Quite literally. https://redux.js.org/understanding/history-and-design/prior-art#elm https://redux.js.org/understanding/history-and-design/prior-...
  - nnoitra 4y ago
    Isn't Redux only used when the app becomes too complex with really complex state?
    - quickthrower2 4y ago
      I think so. Despite being an Elm fan I never used Redux. My side projects or work projects are small so local state and context were more than enough. Although Redux is like Elm, the language (Typescript or ES) make immutability hard so it doesn’t feel as natural a paradigm. Also pragmatically calling setState from an event is just easier for small projects.
      - nnoitra 4y ago
        Why is Elm mentioned specifically. As far as I know (state, action) => state is just a function without side effects?

onemoresoop 4y ago

>Will it make you a better React dev tho? Will it make you write code that is more optimal and yet harder to penetrate by others?

revskill 4y ago

Yes. A React Component could be defined as a Functor with contramap function which map props with function. const renderer = props => <h1>Hello {props.pageName}</h1> const Title = ReactComponent(renderer).contramap(props => { pageName: props.title }) Title.fold({ title: 'Home page' }) // <h1>Hello Home page</h1>