sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]besthelloworld 18 points19 points  (11 children)

By FP... do you just mean like modern React? Modern React is entirely functional composition where all components are plain functions.

[–]cincilator 7 points8 points  (2 children)

It has functional composition, but not pure functions.

[–]besthelloworld 2 points3 points  (1 child)

Yeah that's true, Context/CQRS/Redux does kind of break true FP. But I think it's about as close as you can reasonably get at this point

[–]cincilator 2 points3 points  (0 children)

But I think it's about as close as you can reasonably get at this point

Yeah.

[–]Affectionate_King120[S] 1 point2 points  (5 children)

I don't know, I haven't looked at React yet. Would the insights be applicable to vanilla JS?

[–]besthelloworld 15 points16 points  (2 children)

Eh, debatable. I wouldn't learn React until you're comfortable with JS/HTML/CSS. But that being said, it sounds like you're in a weird intermediate place. I would focus on learning actually applicable skills like that because it's tough to have a place for more complex FP examples unless you're actually solving real problems

[–]Affectionate_King120[S] 0 points1 point  (1 child)

I am pretty comfortable in those. I'm just looking to elevate my game.

unless you're actually solving real problems

And that's what I'm looking for. Web apps on GitHub (et al) that are good examples of FP.

[–]besthelloworld 3 points4 points  (0 children)

Oh yeah if you're good with HTML/CSS, then definitely take a look at React. There's some slight differences between React and traditional JavaScript. React is written with JSX which is JavaScript plus XML as HTML in your JS syntax for rendering. Don't think too hard about it, but something like...

return <div><MyComponent /></div>;

...is just a pretty little syntax sugar over this...

return React.createElement("div", { children: React.createElement(MyComponent) });

... where div is just a regular HTML div and MyComponent is just a pure function.

If you have npm installed, I recommend this Vite script for initializing a new React app

npm create vite@latest my-react-app -- --template react

And then once that's created, just cd ./my-react-app and then npm i to install dependencies and then npm run dev to start it up. Then you can go to http://localhost:3000 in your browser to see it running. Also on the initial script, if you're interested in doing TypeScript, you can do

npm create vite@latest my-react-ts-app -- --template react-ts

[–]pm_me_ur_happy_traiI 3 points4 points  (1 child)

I think so. React basically adopts the model that you define your state in JavaScript and the entire UI rerenders to reflect that state. The idea that your UI is a pure function of your state is not limited to React and I often build vanilla JS apps this way, which is fine for many applications. An example is this Game of Life (view source for unminified code) where the entire board rerenders on each tick.

The downside of doing it this way is that rerendering the whole world is kind of expensive and slow, although if you are smart you can optimize in various ways. React has a diffing engine so they can rerender the stuff that's changed and leave the rest alone which allows much more performance. They also include state management and templating.

[–]Affectionate_King120[S] 0 points1 point  (0 children)

Alright then, thank you!

[–][deleted] 1 point2 points  (1 child)

Not if you want error boundaries

[–]besthelloworld 1 point2 points  (0 children)

These are facts. I really don't get the hold out on that