
What Elm and Haskell are teaching mainstream JS [video] - begriffs
http://begriffs.com/posts/2015-11-30-functional-front-end-coding.html
======
estebanrules
Elm is definitely a very interesting language. I would recommend the following
if anyone is interested in seriously learning it:

[https://pragmaticstudio.com/elm](https://pragmaticstudio.com/elm)

~~~
danneu
And for Redux, the creator (Dan Abramov) recently released a bunch of tutorial
videos for free on egghead.io:

[https://egghead.io/lessons/javascript-redux-the-single-
immut...](https://egghead.io/lessons/javascript-redux-the-single-immutable-
state-tree)

------
DarkTree
As a year-deep front end developer, I have recently taken a strong interest in
functional programming principles and am trying to learn their use-cases.

Does anyone have ideas for small projects I can complete that will really
drive home the importance/benefits of functional programming?

~~~
danneu
The main benefit of Elm and Redux is the simplicity of their core abstraction:
that your app is just a reducing function over a stream of events from the
outside world including game ticks, mouse clicks, <input> field changes, etc.

For example, a counter that increments per click:

    
    
        initApp = { counter: 0 };
        stepApp = (action, oldApp) => oldApp.counter + 1;
        viewApp = (app) => `<p>Clicks so far: ${app.counter}</p>`;
    
        currentApp = reduce(stepApp, initApp, mouseClicks);
        currentHtml = map(viewApp, currentApp);
    

This makes it really easy to inspect, test, and reason about what's actually
happening and why since every change to your app had to be caused by an event
that triggered a step from oldApp to newApp. Redux and I think Elm come with a
debugger that even prints out `{action}, {oldState}, {newState}`. Makes it
really easy to get a reading on things.

Though it's possibly hard to appreciate this until you've battled it out in
the trenches with an abstraction that isn't so simple, especially on a large,
complex app.

I personally found Redux (w/ React) immediately accessible and think it's a
good place to start, especially if you're already coming from React or you
want to reap the benefits without leaving Javascript. I'd feel really
comfortable using Redux on any team project that was already using React and
some other Flux'y implementation.

I've also been learning Elm this past week though it's taking me far longer to
become productive since there are fewer resources and I have no ML experience.
I've managed to create a simple Spreeder.com-style speed-reader
([https://www.danneu.com/elm-speed-reader/](https://www.danneu.com/elm-speed-
reader/)), and if you look at the source code ([https://github.com/danneu/elm-
speed-reader/blob/master/Machi...](https://github.com/danneu/elm-speed-
reader/blob/master/Machine.elm#L70)), you can see that it's not much different
from the counter-app example I pitched above where the `update` function
reduces across a stream of actions including button clicks and the tick.
(Disclaimer: I'm an Elm noob)

~~~
alphanumeric0
I agree, this is one of Elm's main draws. PureScript has a library for this
style of FRP ([https://github.com/bodil/purescript-
signal](https://github.com/bodil/purescript-signal)). From the documentation,
Elm signals are like a process network
([https://en.wikipedia.org/wiki/Kahn_process_networks](https://en.wikipedia.org/wiki/Kahn_process_networks)).

In my experience I've been able to model any conceivable interactions with a
website using this model.

------
crimsonalucard
[http://www.purescript.org/](http://www.purescript.org/)

Worth mentioning when talking about this topic. Purescript is a Haskell like
language that was designed for the frontend. I'm surprised as it seems like
the presenter doesn't even know about purescript.

~~~
mikemcgowan
PureScript is mentioned on one of his slides.

------
VeejayRampay
Reading the site's description of the video, it's more like "how languages
like Haskell and Elm are informing the design of Javascript libraries like
Redux". So it's not so much Elm and Haskell TEACHING "mainstream" JS (whatever
that is) but one library merely taking hints from other programming domains
that are relevant to the particular use case it's trying to cover.

~~~
albemuth
On a podcast interview, the author of Redux mentions learning about Elm until
later, so it's more like "some libraries have converged on similar design
principles".

~~~
joshuacc
So, that's sort of true, but sort of not. Dan (author of Redux) has said that
he read the Elm Architecture document before creating Redux, and didn't fully
understand it. But he believes that it did influence the design of Redux.

> JAMISON: So had you played with or heard of ELM beforehand or did you just
> realize the parallels afterwards?

> DAN: Yeah. There's been this, I'm feeling guilty about it because I had this
> Twitter exchange with Evan. Evan was a bit uncomfortable with me not
> mentioning Elm as much as he thought I should. I felt that yeah, he's
> probably right because I read about Elm a few times before actually creating
> Redux. I'm not sure if… when you get inspired by something but don't fully
> understand it and later you kind of reproduce it but you don't really get
> this connection and you only get it later. So I think that's kind of what
> happened because I distinctly remember reading about ELM architecture but I
> was thrown out by the syntax, so I didn't fully understand what's going on
> there. Later after some initial iterations of Redux, Andrew Clark actually
> showed me how it's similar to Elm if we changed some things. We did change
> them.

> Yes, I have not actually played with Elm yet. I've seen other people playing
> with it. I've seen some demos but I have not actually played with it myself.
> I really want to but I'm stuck in maintaining and GitHub issues and I can't
> find the time. I don't know. Maybe I'm just afraid it's going to be so
> awesome that I'll just try the JavaScript development.

Source: [https://devchat.tv/js-jabber/179-jsj-redux-and-react-with-
da...](https://devchat.tv/js-jabber/179-jsj-redux-and-react-with-dan-abramov)

------
sedachv
Some developers are taking a really "creative" interpretation of the lessons
of functional programming. I am currently dealing with a codebase
(CoffeeScript) full of:

    
    
        _.reduce some_array, (result_array, object) ->
          ...
          result_array.push xyz
          ...
          return result_array
        , []

~~~
15155
In a lot of languages, stdlibs, what have you, map is implemented in terms of
a reduce like this.

In a non-lazy language, this kind of a reduce is usually necessary when you
want to omit an item efficiently from the resultant array - map does not offer
a way to do this.

~~~
sedachv
Did you miss the explicit side-effects in the code above? This isn't like a
map/filter in terms of fold, it is a very stupid way of writing a 'for' loop.

------
marrs
It's nice that JS devs are continuing to discover functional programming
techniques, but it irks me a little that this is considered to be some sort of
new development. JS has always attracted SICP-inspired programmers because of
its strong resemblance to Scheme.

Doug Crockford popularised prototypical inheritance and function programming
techniques in JS on his blog nearly 10 years ago.

KnockoutJS has been around for a similar amount of time and data flow was a
big part of its design. React and Elm are evolutions of design that has been a
part of front-end dev for a long time.

~~~
rprospero
As a recovering schemer, I often heard how Javascript is very closely related
to Scheme, but I've never really seen the resemblance. Granted, both languages
possess:

* Dynamic Typing * Garbage Collection * First Class Functions

However, Python also meets those requirements. Now, looking at it from the
Scheme perspective, Python is missing

* Tail Recursion * Macros * Continuations * Concise Language Spec

However, Javascript is also missing those same factors (though I might be
wrong about the tail recursion). Yet, I rarely hear of Python described as an
infix version of Scheme, yet I often hear that remark about Javascript.

I really want to like Javascript and I already do like Scheme, so I have a
vested interest in seeing the connection, but I'm still missing something.
What's the strong resemblance between Scheme and Javascript?

~~~
zipfle
JavaScript's scoping is much friendlier for creating closures than Python's:

    
    
        def why_is_scoping_hard():
            n = 4
            def print_n():
                print n
            def modify_n(new_value):
                n = new_value
                print n
            return [print_n, modify_n]
    
        >>> print_n, modify_n = why_is_scoping_hard()
        >>> print_n()
        4
        >>> modify_n(7)
        7
        >>> print_n()
        4
    

When you assign to a variable it is automatically created in the local scope,
shadowing a variable with the same name from an outer scope. If you don't
assign to it, you get the value from the outer scope. If you try to print it,
but then assign to it later, the print call raises an error.

~~~
sophacles
Note - in python3 variable shadowing is much more controllable - in your
example having modify_n look like:

    
    
        def modify_n(new_value):
           nonlocal n
    

(and of course the print x -> print(x) changes), will result in 4,7,7

