Toward a Better Front End Architecture: Elm

[nelsonic]

@jfairbank's talk at Codemash 2017 is a strong contender for "Best intro to Elm" for complete beginners: https://youtu.be/EDp6UmaA9CM

[YvesMuyaBenda]

Since it comes with such a strong recommendation, I had to get the popcorn out!

[YvesMuyaBenda]

So, Elm for the complete beginner coming from Javascript is my first interpretation. I am on the stuff about static typing; there are two parts to it: (1) types as contracts, (2) modelling data with types, the algebra of types. My first thoughts is that no absolute beginner to both Elm and functional programming is going to get all the functional stuff first time round; stuff like mutability vs immutabilty, and currying. Frontend Masters was running Kyle Simpson's courses for free for a week, and his course on functional programming in Javascript would give the background for Javascripters with no functional programming background to get the maximum out of the functional programming part of the talk. As I said, the type system stuff could probably be understood at first go!

[YvesMuyaBenda]

Ah, I am now on the part where he is introducing the idea of static types in functional programming langauges being used for domain modelling at 24:50 on Union Types. The basic idea is that using the type system you can model the domain in such a way that you do not have to perform validation checks. There is an entire book about domain modelling within statically typed functional programming langauges by Scott Wlaschin. This talk is great for me, because it is like listening to stories that one has already read. For an absolute beginner to Elm, functional langauges in general, and statically typed functional programming languages in particular, it is a good exposure to the main ideas, things to research, but of course a talk can only do so much, without exercises and whatnot! The talk is excellent for gathering context, but what would be the next step?

[YvesMuyaBenda]

Evan Czaplicki once attempted to adapt the HtDP philosophy to Elm, and I think that is what an absolute beginner would need, for the emphasis in that work is starting from explicitly modeling the data in the problem domain. I also know he is working on a text that teaching fundamental principles of functional programming in Elm.

[YvesMuyaBenda]

Okay, up to error handling in Elm, and the use of Maybe.

[YvesMuyaBenda]

The introduction section on Elm tooling and the framework within its architecture is excellent. For myself, I had to read an entire book on data flow, to better grasp what these front end architectures are actually talking about when they talk about unidirecational this and that! Very very briefly touched upon the virtual dom! But the section on the communication channels gives an excellent overview of commands, subscriptions, and dom events.

Very nice short overview on the interaction of model, update, view. Probably among the most useful passages in the entire talk. I am now up to the demo on the Elm architecture.

[YvesMuyaBenda]

Okay, so I am not going to be paying too much attention to the details of the app he builds, but I am happy to have another example of a simple Elm app, so will likely look at it laters. All in all, the absolute beginner is going to have to blend resources to cover all the bases. The talk, though, is an excellent exposure to a lot of necessary ideas; it gives a person an introduction to "how to talk about all this stuff", gives googable terms: immutability, mutability, currying, unidirectional data flow, elm architecture. model, view, update, commands, subscriptions, virtual dom, etc, etc. etc. The talk sets the stage, as it were.

I am not sure how a much better talk could be given without significantly extending its length and writing exercises, essentially writing a course called "Introduction to Functional Programming in Elm, Front-End Architecture done right!": in this lesson, we are going to be talking about the concept of data flow, its use in creating reactive systems, the general approaches taken by the most famous front end frameworks, before diving into its particular implementation in Elm: unidrectional data flow is ...

So the video has been viewed and my popcorn eaten--rightio!