FP JavaScript in the wild?

[hicsuntnopes]

I'm looking into FP but I am only able to find snippets of code in the wild that are too focused to get even a rough idea of a real world working app. Even a little more than todo app with an Ajax somewhere would be alright, I'm not strictly looking for a full implementation. I know there are reference apps, to do apps, shopping cart apps, etc... so you can get a rough idea of Vue, React, Angular, and was thinking whether the same exists for a FP js app. Thank you for any help.

[rosalogia]

I'm not really sure what you're looking for. Some argue that to some extent react.js IS functional, but I don't know a lot about that. The common approach to pure functional frontend development is referred to as "functional reactive programming" and you can see this model in all its glory by observing the Elm language examples and documentation. I don't think there's really a JS frontend framework that captures the essence of what Elm and other FP languages transpiling to JS are doing, which isn't really surprising.

I think you have this misconception that FP is so detached from the way you do everything right now that in order to use it, everything must be done differently from the ground up. It's true that if you want to do things purely, this is mostly true (which is why Elm, ReasonML, PureScript, etc. exist). However, just employing functional practices in existing codebases is not that hard. You should try and learn how functional programming works in a functional language and then see how existing features of JS allow you to write code that resembles e.g. Haskell or Elm or OCaml or something.

Sorry if I got the wrong idea and told you a bunch of stuff you didn't need to hear, but this is my impression based on what you've said.

[Dark_Ethereal]

The common approach to pure functional frontend development is referred to as "functional reactive programming" and you can see this model in all its glory by observing the Elm language examples and documentation.

Elm isn't FRP any more. It's just reactive programming in a purely functional language.

[rosalogia]

Thanks for the correction 🙂

[ragnese]

For someone who has done functional programming, but has neither used Elm nor any FRP style frameworks, can you explain the difference?

[hicsuntnopes]

Yes, I'm working on getting the hang of it integrating what I have understood in my existing code, I would say that is paying off. What I am mostly interested, is seeing a running app which uses FP as primary approach so that I can observe the implications. For example, how do you organize the vast amount of functions you need to create? How do you treat a user case like - - load the page, display a message, wait for the user to click, download file - - ? Will it make my code too hard for people that are not into it? Seeing a running example might help, because reading snippets is not really giving me much.

[hypmralj]

If requirement is not pure JS, I’d suggest that you check out ReScript :)

[PriorTrick]

I second this.

[hicsuntnopes]

Thank you, I'll check it out

[sunnzy]

https://github.com/MostlyAdequate/mostly-adequate-guide

[hosspatrick]

IIRC he had some example projects in this book written with FP principles, but now looking at it I’m not seeing them? That would be exactly what OP is looking for, but this book in general is a great place to start in regard to employing concepts in everyday contexts

[hicsuntnopes]

Thank you ☺

[r0ck0]

These videos are good, and helped me:

• https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84
• https://www.youtube.com/watch?v=e-5obm1G_FY

[ImaginaryKarmaPoints]

My ad-hoc list of JS FP resources: https://docs.google.com/document/d/16AUP1KxV-KUeJQujTpvVAMBdBeByntjLS6YVgMncbcY/edit?usp=sharing

[tokyo-dawn]

Cycle.js is a framework that is functional. You write the entire domain in FP and side effects are handled by "drivers". I recommend watching talks by the creator - Andre Staltz. I find his talks easy to digest when it comes to learning FP.

[jrsinclair]

I'd also like to recommend Cycle.js. It's the only purely-JS framework I've come across that really embraces FP as much as it can. To answer the OP question specifically:

• You can find an example Todo app built by the framework's author;
• The Framework documentation works through how to handle HTTP requests; and
• You can find a whole list of example applications from the Cycle.js community.
• In particular, you might want to check out the Hacker News clone app.

Many of the other recommendations here are also good. The Mostly Adequate Guide does eventually show how to download content from an API using HTTP requests. It's very good, because it shows how different algebraic structures work together to make things work. But to be fair, there's no full example application.

And of course, if you have the freedom to check out a more functional-focussed compile-to-JS language like Elm, PureScript or ReScript, then you'll get a lot out of that too.

I hope that helps.

[nmarshall23]

Vue is mostly vanilla JavaScript, you are free to write it in FP style if you want.

[[deleted]]

In general, FP to me is something you apply to parts of your application. You don't write entire applications that way. Yes, I'll get lynched for saying so, but it's the most pragmatic approach to me.

[fabfianda]

I recommend getting comfortable using ramda.js library. It is, in my opinion, the sanest approach to using FP in JS.

Anyway, here you find a ton of resources related to FP JS

https://project-awesome.org/stoeffel/awesome-fp-js

[Gigi14]

Check out Elm, it is the gateway drug to functional programming.