19 ms·

Learn Functional Programming Visually

354 points by polyrand 6y ago

maartenh 6y ago
This reminds me of the tree diagrams I wrote during the Term Rewriting Systems course at the Vrije Universiteit [1]. Functional programming really started to resonate with me at that time. Properties like confluence were very useful to understand distributed systems algorithms later on, and e.g. how eventual consistency plays out. [1] The teacher was awesome too. If you'd like to learn more about term rewriting systems, go take a peek at his slides http://joerg.endrullis.de/teaching/#trs http://joerg.endrullis.de/teaching/#trs (Note, just noticed that they are behind a password. A gentle email will probably get you the slides though :)
- mettamage 6y ago
  Fun to see you here! We've studied together! I'm glad I'm not the only one recommending Vrije Universiteit courses on HN, now we're a crowd :P I'll send you a PM :)
np_tedious 6y ago
Cool game! Headline here might be a little grandiose. Author has "A puzzle game inspired by functional programming" on the project's Github. I find this more apt
austincheney 6y ago
The biggest challenge with teaching functional programming is that people tend to take the word function or the concept way to seriously. They start mandating restrictions on input/output, what functions should be used for, and all kinds of other unnecessary nonsense. It’s like they need some sort of self imposed guardrails to qualify making better or more common use of functions. Like they need an official invitation before joining the party. Perhaps some of that stupidity is bound to a developer’s understanding of their language at hand. Some languages are more expensive than others. This is where the sad confused developer mandates that functional programming must be declarative... until you point out the languages Red and Rebol are functional imperative languages. It’s not some shallow wishful opinion. That is how those languages describe themselves and it’s what they look like. When you take all the stupidity, assumptions, and restrictions away functions are most universally a bag of instructions, as are classes and various other things. Functions are unique from other instruction bags in that they execute. That creates potential for instruction reuse and thus portability. Different languages impose different restrictions on where or how functions may present. In JavaScript functions are first class citizens which means they can be used anywhere a primitive may be used, which is almost everywhere. Functions can also be nested in that language which just means subdivided layers of portability/reuse. In this case, in a highly imperative way, functional programming can mean programming with a mindset of functions first, as opposed to other means of structure or extension. Again that interpretation of functional programming tends to make people uncomfortable as there are no restrictive guardrails or super specific defining rules.
- deleted 6y ago
  [deleted]
- louthy 6y ago
  > They start mandating restrictions on input/output, what functions should be used for Like what? You've thrown out a ton of generalisations, but nothing here is concrete. > When you take all the stupidity, assumptions, and restrictions away functions are most universally a bag of instructions, as are classes and various other things. If you group all things together as a 'bag of instructions' then there's no point in teaching functional concepts or any paradigm's concepts for that matter. I am reading between the lines here, but I am assuming by 'restrictions' you're referring to functions taking immutable values and returning immutable values. There are sensible reasons for this (along with referential transparency in general) that enable function composition, which is the 'super power' of functional programming. It isn't a requirement, it's just good practice, and so I can understand why FP advocates would promote it (I certainly do). A class can have those powers too if it is immutable, because ultimately any class is just a set of functions with an implicit 'this' argument, but it's often understood differently. It doesn't seem unreasonable to promote and talk about the differences in approach, especially in languages that allow you to 'cheat'. Yes, the narrow definition of a functional language is that it has first class functions. Clearly though there's techniques for success within the paradigm. Again, it's quite hard to latch onto exactly what you're saying here, but I don't think functions as structure is the argument for FP (as such), it's functions that work like mathematical functions, to leverage the centuries of knowledge of mathematical expressions, proofs, etc. Personally, I find my functional code much easier to understand, compose, test, and generally have confidence in. When I compose two functions I don't have to 'go and look inside' to see what it does first, because they're pure and declarative. The declarative nature of the functions is an artefact of following the good practice of immutable values, referential transparency, and total functions which lead to 'honest' type-signatures, it just happens on its own. I spent a reasonable part of my career in imperative-land, and honestly I wish I'd found functional programming much earlier. I write fewer bugs and I have more confidence in my code. And yes, it adds constraints that are annoying sometimes, but those constraints ultimately stop the code becoming a cognitively difficult mass of mutation or hidden complexity.
shaneprrlt 6y ago
Really cool! If you had the time/energy, this would be an enjoyable mobile game.
auggierose 6y ago
Cool game, but I don't think it is actually a good idea to see this as "learning functional programming". After all, this shows some very convoluted ways of getting a simple end result ;-) Also, I've only played the first few easy levels, so I guess there will be more than "map" later on? Otherwise I would just leave the "map" word out of it.
- cush 6y ago
  As a game it seems to exercise the same parts of your brain.
- alisonkisk 6y ago
  No, it's just a misleading HN title.
alisonkisk 6y ago
Since the model is an array of pillars, the visualization has a wall is confusing. Would be better to add some space between columns, and remove the 3D/isometric effect. The mathematical problems break the "visual" model. They are harder to understand when you have to spend most of your energy doing 8 simultaneous mental conversions to base 8 while solving.
MauranKilom 6y ago
I had fun playing through all the challenges. But I don't think I walked away with a better idea of functional programming. This is closer to "learn LINQ", seeing as we're only chaining functions. I would be interested in seeing this expanded to include passing functions to functions (that is, make the user build a tree of functions, not a list). And yes, that might put you into hot water regarding how to communicate signatures and such.
franknine 6y ago
This game reminds me of Infinifactory by Zachtronics https://store.steampowered.com/app/300570/Infinifactory/ https://store.steampowered.com/app/300570/Infinifactory/
t0astbread 6y ago
Good idea but I was able to solve most of the puzzles without ever thinking about what my program was actually doing, especially in the "math" levels. In the sense that I knew what was going on, I got the concepts but I never "evaluated" the program in my head. I just made some educated guesses based on what I thought the patterns might turn into. Maybe that's deliberate here but I thought that's usually not what puzzle games want.
- alisonkisk 6y ago
  The other problem is that it's easier to brute force the small set of permutations of options, than to think it through.
spiralganglion 6y ago
This is cool. It would be improved by adding the CSS #controls { user-select: none } (with various vendor prefixes). A bit of refinement to how dragging is detected wouldn't hurt either.
wodenokoto 6y ago
What is the programming equivalent of stack equal columns? I get the map and filter operations but I can’t remember ever coming across a function like that before.
- yatac42 6y ago
  > What is the programming equivalent of stack equal columns? The game's "stack equal columns" corresponds to Haskell's Data.List.group function: > import Data.List > group [1,2,2,3,3,3,2,1,1] [[1],[2,2],[3,3,3],[2],[1,1]]
julienfr112 6y ago
What about Excel ? ;)
j1elo 6y ago
This I don't understand: Seems like whenever functional paradigms are discussed, the whole same stuff is always repeated without failure: on one hand fuzzy generalizations like "pure functions", "no side effects", "no state"... on the other, all examples always talking about using map, filter, fold, flat, zip. One would think that "functional programming" _is_ using those functions. That FP is all about Iterators and what things you can do with them. But I never see contrived real-world examples, those that really show how things are different from imperative or procedural programming. I want to see how you use stateless functional programming to control a garage door actuator. Or how you model a Car which can have their doors open or closed either by the class itself or external actors. How do you receive UDP packets, including a buffer implementation that is able to sort out-of-order packets and send retransmission requests for missing ones? That kind of stuff. Are there any resources that show these kind of "here is a list of problems, how they are typically solved, and how you could solve with FP" style examples? EDIT: This message was actually to say thank you and that TFA is an awesome resource to help understand how the Iterator methods work! And then I got lost in my semi-rant and forgot to actually say thanks :)
- gmi01 6y ago
  I share your opinion. I found the book Real World Haskell very useful http://book.realworldhaskell.org/ http://book.realworldhaskell.org/ It has a few nice chapters about system programming, database interactions and a few other use cases. Here is an educational bulletin board website built with Haskell: https://gitlab.com/gilmi/bulletin-app https://gitlab.com/gilmi/bulletin-app
- snarkypixel 6y ago
  Redux in the react world is a good example of real-world application using pure functions and functional programming concepts.
  - Jestar342 6y ago
    Likewise most of the hooks (useReducer being the obvious primary example), and functional components in general. That's how 99% of functional programming is done - state and function are separate, first class, concepts. The line is very distinct.
bhargav 6y ago
The way this works technically is really great. Kudos to the developer. The game itself ... I do not think it helped me learn anything.
keyle 6y ago
This is really cool but I am not sure it helps a person devising a plan towards the solution. It's more of an exploratory stumble-upon-solution activity.
omginternets 6y ago
I don't understand 'stack'. What's it doing, exactly?
- DaiPlusPlus 6y ago
  It adds a new layer of cubes of the specified colour. I agree this game is a bit hard because the “type” of each element passed through the functions isn’t documented (is it a cube? A column? How is a 2D shape’s cubes iterated? Does order matter?)
  - omginternets 6y ago
    Ha, ok. I was making this more complicated than it was.
  - roguas 6y ago
    Welcome to Haskell :) Just 'Align the types' :)
blackrock 6y ago
This was an overly complicated example to learn what functional programming is.
bionhoward 6y ago
Looks useful but I wish it fit on the screen on mobile! Just gotta change the width with media queries
xxxmaster 6y ago
In case you are looking for the answers -> https://pastebin.com/tbrJreNn https://pastebin.com/tbrJreNn
roguas 6y ago
I love it. It goes to show why I love/hate Haskell. . Im pretty sure most of you just look at signatures(colors) only, further I think most of you just tried a couple of different options until "type" clicks. It is pretty evident that during this you involve yourself in code puzzle / code golf. Rather than understanding the problem at hand. This is fine - until some of your "low-level" stuff leaks or your understanding of it leaks. There is also third possibility for failure - trusting the system too much, despite types being expressive they hide away a lot of "internal" logic, sometimes something looks the same, but it's not and type system doesn't capture it.

354 points by polyrand 6y ago

This reminds me of the tree diagrams I wrote during the Term Rewriting Systems course at the Vrije Universiteit [1]. Functional programming really started to resonate with me at that time. Properties like confluence were very useful to understand distributed systems algorithms later on, and e.g. how eventual consistency plays out. [1] The teacher was awesome too. If you'd like to learn more about term rewriting systems, go take a peek at his slides http://joerg.endrullis.de/teaching/#trs http://joerg.endrullis.de/teaching/#trs (Note, just noticed that they are behind a password. A gentle email will probably get you the slides though :)

mettamage 6y ago
Fun to see you here! We've studied together! I'm glad I'm not the only one recommending Vrije Universiteit courses on HN, now we're a crowd :P I'll send you a PM :)

np_tedious 6y ago

Cool game! Headline here might be a little grandiose. Author has "A puzzle game inspired by functional programming" on the project's Github. I find this more apt

austincheney 6y ago

The biggest challenge with teaching functional programming is that people tend to take the word function or the concept way to seriously. They start mandating restrictions on input/output, what functions should be used for, and all kinds of other unnecessary nonsense. It’s like they need some sort of self imposed guardrails to qualify making better or more common use of functions. Like they need an official invitation before joining the party. Perhaps some of that stupidity is bound to a developer’s understanding of their language at hand. Some languages are more expensive than others. This is where the sad confused developer mandates that functional programming must be declarative... until you point out the languages Red and Rebol are functional imperative languages. It’s not some shallow wishful opinion. That is how those languages describe themselves and it’s what they look like. When you take all the stupidity, assumptions, and restrictions away functions are most universally a bag of instructions, as are classes and various other things. Functions are unique from other instruction bags in that they execute. That creates potential for instruction reuse and thus portability. Different languages impose different restrictions on where or how functions may present. In JavaScript functions are first class citizens which means they can be used anywhere a primitive may be used, which is almost everywhere. Functions can also be nested in that language which just means subdivided layers of portability/reuse. In this case, in a highly imperative way, functional programming can mean programming with a mindset of functions first, as opposed to other means of structure or extension. Again that interpretation of functional programming tends to make people uncomfortable as there are no restrictive guardrails or super specific defining rules.

deleted 6y ago
[deleted]
louthy 6y ago
> They start mandating restrictions on input/output, what functions should be used for Like what? You've thrown out a ton of generalisations, but nothing here is concrete. > When you take all the stupidity, assumptions, and restrictions away functions are most universally a bag of instructions, as are classes and various other things. If you group all things together as a 'bag of instructions' then there's no point in teaching functional concepts or any paradigm's concepts for that matter. I am reading between the lines here, but I am assuming by 'restrictions' you're referring to functions taking immutable values and returning immutable values. There are sensible reasons for this (along with referential transparency in general) that enable function composition, which is the 'super power' of functional programming. It isn't a requirement, it's just good practice, and so I can understand why FP advocates would promote it (I certainly do). A class can have those powers too if it is immutable, because ultimately any class is just a set of functions with an implicit 'this' argument, but it's often understood differently. It doesn't seem unreasonable to promote and talk about the differences in approach, especially in languages that allow you to 'cheat'. Yes, the narrow definition of a functional language is that it has first class functions. Clearly though there's techniques for success within the paradigm. Again, it's quite hard to latch onto exactly what you're saying here, but I don't think functions as structure is the argument for FP (as such), it's functions that work like mathematical functions, to leverage the centuries of knowledge of mathematical expressions, proofs, etc. Personally, I find my functional code much easier to understand, compose, test, and generally have confidence in. When I compose two functions I don't have to 'go and look inside' to see what it does first, because they're pure and declarative. The declarative nature of the functions is an artefact of following the good practice of immutable values, referential transparency, and total functions which lead to 'honest' type-signatures, it just happens on its own. I spent a reasonable part of my career in imperative-land, and honestly I wish I'd found functional programming much earlier. I write fewer bugs and I have more confidence in my code. And yes, it adds constraints that are annoying sometimes, but those constraints ultimately stop the code becoming a cognitively difficult mass of mutation or hidden complexity.

shaneprrlt 6y ago

Really cool! If you had the time/energy, this would be an enjoyable mobile game.

auggierose 6y ago

Cool game, but I don't think it is actually a good idea to see this as "learning functional programming". After all, this shows some very convoluted ways of getting a simple end result ;-) Also, I've only played the first few easy levels, so I guess there will be more than "map" later on? Otherwise I would just leave the "map" word out of it.

cush 6y ago
As a game it seems to exercise the same parts of your brain.
alisonkisk 6y ago
No, it's just a misleading HN title.

alisonkisk 6y ago

Since the model is an array of pillars, the visualization has a wall is confusing. Would be better to add some space between columns, and remove the 3D/isometric effect. The mathematical problems break the "visual" model. They are harder to understand when you have to spend most of your energy doing 8 simultaneous mental conversions to base 8 while solving.

MauranKilom 6y ago

I had fun playing through all the challenges. But I don't think I walked away with a better idea of functional programming. This is closer to "learn LINQ", seeing as we're only chaining functions. I would be interested in seeing this expanded to include passing functions to functions (that is, make the user build a tree of functions, not a list). And yes, that might put you into hot water regarding how to communicate signatures and such.

franknine 6y ago

This game reminds me of Infinifactory by Zachtronics https://store.steampowered.com/app/300570/Infinifactory/ https://store.steampowered.com/app/300570/Infinifactory/

t0astbread 6y ago

Good idea but I was able to solve most of the puzzles without ever thinking about what my program was actually doing, especially in the "math" levels. In the sense that I knew what was going on, I got the concepts but I never "evaluated" the program in my head. I just made some educated guesses based on what I thought the patterns might turn into. Maybe that's deliberate here but I thought that's usually not what puzzle games want.

alisonkisk 6y ago
The other problem is that it's easier to brute force the small set of permutations of options, than to think it through.

spiralganglion 6y ago

This is cool. It would be improved by adding the CSS #controls { user-select: none } (with various vendor prefixes). A bit of refinement to how dragging is detected wouldn't hurt either.

wodenokoto 6y ago

What is the programming equivalent of stack equal columns? I get the map and filter operations but I can’t remember ever coming across a function like that before.

yatac42 6y ago
> What is the programming equivalent of stack equal columns? The game's "stack equal columns" corresponds to Haskell's Data.List.group function: > import Data.List > group [1,2,2,3,3,3,2,1,1] [[1],[2,2],[3,3,3],[2],[1,1]]

julienfr112 6y ago

What about Excel ? ;)

j1elo 6y ago

This I don't understand: Seems like whenever functional paradigms are discussed, the whole same stuff is always repeated without failure: on one hand fuzzy generalizations like "pure functions", "no side effects", "no state"... on the other, all examples always talking about using map, filter, fold, flat, zip. One would think that "functional programming" _is_ using those functions. That FP is all about Iterators and what things you can do with them. But I never see contrived real-world examples, those that really show how things are different from imperative or procedural programming. I want to see how you use stateless functional programming to control a garage door actuator. Or how you model a Car which can have their doors open or closed either by the class itself or external actors. How do you receive UDP packets, including a buffer implementation that is able to sort out-of-order packets and send retransmission requests for missing ones? That kind of stuff. Are there any resources that show these kind of "here is a list of problems, how they are typically solved, and how you could solve with FP" style examples? EDIT: This message was actually to say thank you and that TFA is an awesome resource to help understand how the Iterator methods work! And then I got lost in my semi-rant and forgot to actually say thanks :)

gmi01 6y ago
I share your opinion. I found the book Real World Haskell very useful http://book.realworldhaskell.org/ http://book.realworldhaskell.org/ It has a few nice chapters about system programming, database interactions and a few other use cases. Here is an educational bulletin board website built with Haskell: https://gitlab.com/gilmi/bulletin-app https://gitlab.com/gilmi/bulletin-app
snarkypixel 6y ago
Redux in the react world is a good example of real-world application using pure functions and functional programming concepts.
- Jestar342 6y ago
  Likewise most of the hooks (useReducer being the obvious primary example), and functional components in general. That's how 99% of functional programming is done - state and function are separate, first class, concepts. The line is very distinct.

bhargav 6y ago

The way this works technically is really great. Kudos to the developer. The game itself ... I do not think it helped me learn anything.

keyle 6y ago

This is really cool but I am not sure it helps a person devising a plan towards the solution. It's more of an exploratory stumble-upon-solution activity.

omginternets 6y ago

I don't understand 'stack'. What's it doing, exactly?

DaiPlusPlus 6y ago
It adds a new layer of cubes of the specified colour. I agree this game is a bit hard because the “type” of each element passed through the functions isn’t documented (is it a cube? A column? How is a 2D shape’s cubes iterated? Does order matter?)
- omginternets 6y ago
  Ha, ok. I was making this more complicated than it was.
- roguas 6y ago
  Welcome to Haskell :) Just 'Align the types' :)

blackrock 6y ago

This was an overly complicated example to learn what functional programming is.

bionhoward 6y ago

Looks useful but I wish it fit on the screen on mobile! Just gotta change the width with media queries

xxxmaster 6y ago

In case you are looking for the answers -> https://pastebin.com/tbrJreNn https://pastebin.com/tbrJreNn

roguas 6y ago

I love it. It goes to show why I love/hate Haskell. . Im pretty sure most of you just look at signatures(colors) only, further I think most of you just tried a couple of different options until "type" clicks. It is pretty evident that during this you involve yourself in code puzzle / code golf. Rather than understanding the problem at hand. This is fine - until some of your "low-level" stuff leaks or your understanding of it leaks. There is also third possibility for failure - trusting the system too much, despite types being expressive they hide away a lot of "internal" logic, sometimes something looks the same, but it's not and type system doesn't capture it.