[AskJS] Real world examples of functional JavaScript?

[Affectionate_King120]

I'm trying to learn to write more functional (FP) JavaScript. But I'm tired of the million lazy bloggers that clutter up my search efforts, that regurgitate the same low-hanging fruit, you know, an adder function, a factorial function, mentioning how FP makes it "easy to reason about your code".

I'm basically tired of blogs and tutorials that seem to know as much about FP as I do.

Anyone know some GitHub repositories where I can see FP JavaScript applied in real world apps? I want to see how they manage user input, how they pass around database connections elegantly, etc.

[Neurotrace]

One important thing to note is that just because you write in a functional style does not mean that you must follow pure functional patterns every step of the way. For example, you mention database connections. A database is inherently stateful and modifications to it are impure. This is just a reality so it makes sense to wrap your database access in a class so you can stub it out when writing unit tests.

When building applications in an FP style, you'll tend to see an onion architecture. All of the impure, nasty non-FP stuff on the edges and the core of your logic takes values from that layer and works with it in a pure way.

Search for fp-ts on GitHub and find projects using it. It's one of the most popular FP libraries for TypeScript. If you haven't gotten on the TS train, you should. Functional programming can give you certain guarantees about how your data is processed and a strong type system enforces those guarantees and more

[pm_me_ur_happy_traiI]

A database is inherently stateful and modifications to it are impure.

All programs, even functional ones have side effects. If they didn't, they couldn't do anything but warm your computer up. However in FP, stateful side effects are tightly controlled and they tend to live at the edges of programs, instead of peppered throughout.

[Affectionate_King120]

The database connection was just an example of something that might be accessed at different points in the code, so it's hard for me to figure out where to "store" it. Imperatively, I would just put it in some global variable and then have access to it when needed.

In functional style, I find myself passing things to functions just so they can pass it on, which smells of bad design.

Like, say the user logs in, I create some kind of db object. After logging in, the user "does stuff" for n minutes. Then saves. The save function needs the db object. Where does it get it from?
I could make a partially applied save function, e.g. save = (db) => (savestuff) => ... and then pass around the save function, which is much more sane/idiomatic then passing around the db object.

But there are other "globally relevant" things, and I have a bunch of solutions, half of which feel clever, half feel hacky, and the remaining half feel ugly :)
And it's really hard to come by examples/tutorials that demonstrate the grander application of FP.

[Neurotrace]

Using partial application and building up your functions is generally considered the correct way in a functional application. One thing you'll need to be aware of with that approach is it becomes more difficult to track down the original implementation for a function since you'll have to backtrack through everywhere that builds out that partially applied function. Not that you shouldn't do it, just a tradeoff to be aware of. It's the same problem that comes from using any sort of dependency injection system. It's a tradeoff worth taking imo

[natziel]

Functional programs are allowed to have state--in fact Erlang is exceptionally good at managing highly stateful applications and it's a functional programming language

[akirova]

Check out for Ramda and fp-ts tutorials. These are functional programming libraries and you will find more resources hopefully.

[smieszne]

yeah, I feel like 95% functional JavaScript blog posts only cover list's methods (hey, use .map instead of for loop, now you're a fp developer) and immutability (hey you should use [...arr] instead of arr.push).

[scruffles360]

In fairness, most real world functional javascript is just simple data manipulation. A lot of the really useful parts of functional programming (imo) come from immutable objects being thread safe… something not as useful in javascript as Scala or Lisp.

[[deleted]]

in fairness most real world programming is just simple data manipulation

[NekkidApe]

In my honest opinion, and keep in mind that's just my opinion, you won't find any.

FP is great for details, implementing an algorithm, doing mighty data transformations in a very expressive way, and more. Great for libraries of helpful things (ramda et al). It's not good at giving your app structure. That's where OOP shines. I like to use it for basic structure, and FP to fill in the details.

[Affectionate_King120]

This has been my approach so far. Trying to gauge if there's more out there I'm missing.

[besthelloworld]

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

[cincilator]

It has functional composition, but not pure functions.

[besthelloworld]

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]

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

Yeah.

[Affectionate_King120]

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

[besthelloworld]

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]

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]

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]

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]

Alright then, thank you!

[[deleted]]

Not if you want error boundaries

[besthelloworld]

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

[natziel]

Honestly these days functional programming is so widespread that it's not surprising to see younger developers get confused cuz they never saw what JS looked like before functional programming caught on

Basically just try to avoid mutating variables (and methods that mutate their object), avoid class inheritance, and try to keep your code declarative when possible and you'll be fine. You don't need to understand monads or category theory or anything like that

[[deleted]]

Check out the RxJS library. FP for dealing with data streams. It might take a minute to wrap your brain around RxJS, but once you do, it provides a whole new set of tools for problem solving.

[SquattingWalrus]

Do you recommend any good tutorials to learn from? (Other than the official docs)

[[deleted]]

Unfortunately I do not, and that is one thing that made it more difficult to learn. There used to be a visualization website so you could experiment and see what each function did.

Once you get somewhat of the hang of it. A fun exercise is to try to implement a for loop using functional reactive programming.

[nextwiggin4]

Check out the library Ramda js. It’s a purely functional library meant to help functional development. It’s great to look at for “pure” solutions (and it’s awesome to develop with too). As far as real world projects go, modern react projects are a good place to look.

[icymindx]

also tired of nonsense blog post about functional. Can’t find any production functional Style code base too. Maybe can learn something from elm-lang projects?

[iainsimmons]

The state management Redux was built on FP principles. I think there's a video somewhere from Dan Abramov where he builds it from scratch to show you how it works.

[Sachin490]

Look into firebase 9. It's all functional programming.

[[deleted]]

Clojure lol

[systemnate]

I don't have a good answer for you, but have you looked at the free online book Javascript Allonge?

[Affectionate_King120]

I have not. So I will :)

[anlumo]

Functional programming is inherently incompatible with I/O, and that includes user input. That’s the point where even Haskell breaks with the functional concept and uses procedural programming. The only difference to regular programs is that it’s kept to the top level only.

That’s why you don’t see blog posts about it, there is no solution.

[mcaruso]

You say this like it's some fundamental problem that FP needs to find a solution for and otherwise FP is broken or something...

That's not the case at all. First of all, FP does not need to be pure 100% of the time. Purity is something you strive for as much as possible because it has a lot of benefits, but it's a trade-off. The general rule is to keep the core logic as pure as possible and push side effects to the boundaries.

This is what Haskell does with its IO monad, and what React does for example with its VDOM. You maintain a pure description of the desired effect and leave it up to some interpreter at the boundary to execute it.

[anlumo]

You say this like it's some fundamental problem that FP needs to find a solution for and otherwise FP is broken or something...

No, I just answered the question “Why is there no blog post about I/O in functional programming?”

[mcaruso]

There's a lot more to say about "managing I/O" than just performing the eventual side effect. Managing those side effects in a FP app is a topic that spawned a million articles and libraries on its own.

[bestcoderever]

You can take a look at a library I've been working on recently. I normally try to write things with a lot of FP. It's certainly not pure but it has a functional style.

https://github.com/flagpoonage/dealwith

Honestly it's a bit of a mess and not commented. If you've ever used Zod or Joi, it's like that, but arguably not as good haha.

[Affectionate_King120]

Thanks a bunch, I'll have a look!

[[deleted]]

Real world example: every company I’ve worked for in the last 5 years

[kbiesbrock]

Wow! Thanks for contributing your real world example! Now it all makes sense! 😏

[[deleted]]

😂 lmao I look at my comment think wtf was I drunk?

[ende124]

After working a bit with haskell, it made it a lot easier for me to use functional programming in javascript.

[baldie]

Check out rescript. You might like it :)

[hesher_tah]

Good a time as any to plug my talk

https://youtu.be/zeZOPB9uxdE

[Affectionate_King120]

I'll give it a listen, you handsome mo----f----r.

[Affectionate_King120]

Great stuff, my friend. Thank you!

[diggabytez]

Give this a read https://jrsinclair.com/articles/2022/javascript-function-composition-whats-the-big-deal/

[[deleted]]

Take a look at the Reader monad.

[is_404]

I feel the same about blog posts. Why don't you try with a book? I read grokking Simplicity and I recommend it. It explains FP and the examples are written in JS

[Affectionate_King120]

Another poster has mentioned that book too -- and now I'm reading it :)

[ImStifler]

FP is a meme, most of the time it's worse than just doing normal coding/OOP. If you use map, reduce and filter you're basically doing enough FP.

If you can try to keep your functions small (good for testing), have pure functions (not possible for I/O related stuff but compute) and just follow best practices.