Explain the Elm Architecture in "Plain JS" before learning Elm Language?

[nelsonic]

The issue of the "Elm Learning Curve" was raised in: #45
and scrolling down to to @lucymonie's list we see the Elm Architecture at number four ...

this seems fairly logical (initially) because the Elm Guide
uses the Elm Language to explain the Elm Architecture: https://guide.elm-lang.org/architecture

i.e. it assumes that people already understand the (Core) Elm Language...
This is a fair assumption given the ordering of the Guide however...

Hypothesis

I hypothesize that if we explain the Elm Architecture (in a bit more detail)
using a language people are already familiar with (i.e JavaScript) before diving into the Elm Language it will "flatten" the learning curve.

tl;dr

Analogy

Let us briefly "reason by analogy": Picture yourself learning a new (human/foreign) language.

This scenario assumes you have a First (Human) Language (e.g: English¹) and you are learning another one, let's assume the new language is your second language. (you with me so far?)

Imagine (in this scenario) that you have never written an essay before (in any human language)
so you don't understand essay structure.

The teacher has just spent the lesson going through the basic vocabulary in the new language,
and now gives you a homework assignment: "write an essay using all the words you've learned!"

If you have never written an essay before, this could easily overwhelm you.

I posit that (at least for some people) understanding the Architecture
in a Language they already know (i.e. JS) might make it easier.

¹If your first (human) Language is not english, substitute for your own.

First Principals

Axioms

1. JavaScript is (by far) the "most popular" programming language by any measure.
2. Most people will not learn Elm as their first (programming) language.
3. Familiarity with a subject aids comprehension of topics that build on that knowledge.
   e.g: Algebra skills aid in learning Physics.
   or (simpler): knowing how to ride a bicycle will help with a motorcycle.

JavaScript is the most popular programming language on GitHub by every measure.
It could be argued that more code exists off GitHub in "Enterprise" (Closed Source) repositories,
but we have no way of reliably quantifying it.

We know that a vanishingly small number of people use/know elm (evidenced by "star count"),
the idea that someone would learn elm as their first programming language is unlikely.
Richard Feldman spends the first hour of his Elm Course comparing elm to JS (ES2015).
This is not "proof" that "everyone" learning Elm already knows JavaScript, but it's substantive.

I propose writing a separate tutorial just for the Elm Architecture in "Plain JavaScript".
I made an attempt to distil the Architecture in ES5 JS yesterday:
https://github.com/nelsonic/practice/blob/master/elm.html
But think it deserves a comprehensive treatment ...

[gabrielperales]

@NeSonic , maybe this repo can help you with that task https://github.com/anler/elm-architecture-cover .

[nelsonic]

Morning @gabrielperales, how are you today ? 😉
https://github.com/anler/elm-architecture-cover and https://github.com/kaleidos/olmo are a good examples however I think we can do much better
by:
a) clearly stating what the assumptions/prerequisites are (and minimising them!)
b) smaller steps
c) even more basic examples
d) tests!!

[newswim]

Wonder if you saw this repo with a few nice .md overviews -> https://github.com/elm-guides/elm-for-js

[nelsonic]

Hi @newswim, yeah the elm-guides are good, however they are still taught in Elm.
I am proposing explaining the Elm Architecture in (Plain) JavaScript to people who know JavaScript and encouraging them to build a JavaScript application using the Elm Architecture.
I expect that once people understand the Elm Architecture and have used it in JS,
that part of the "Elm Learning Curve" will be much easier.

[nelsonic]

JavaScript's dominance cemented for the foreseeable future:
http://www.stanforddaily.com/2017/02/28/cs-department-updates-introductory-courses

[YvesMuyaBenda]

@nelsonic So the aim is to translate Elm concepts into the corresponding JavaScript concepts? If you write up a commentary on the JavaScript code implementing the Elm counter example, then I will be happy to read it, and ask no-nothing JavaScript questions.

As for the learning curve, there are two basic approaches; to stay within your analogy of language learning:

(1) The person could first learn how to structure essays in their own language. The person could learn from the ground up in the new language, starting with a small set of easily understood concepts, and then creating increasingly complex structures. I am more than happy to use your exposition as an exercise in learning more about JavaScript, by seeing how the concepts get translated

(2) The person could learn from the ground up in the new language, starting with a small set of easily understood concepts, and then creating increasingly complex structures, with detailed explanations of the why and how at each step. In this case, I would just say bite the bullet and learn functional programming from the ground up, using the HTDP approach, primarily because they already have a large infrastructure of varied pedagogical materials, from middle-schooler to graduate level computer science, in which is embedded interactive programming within the functional style. The main reason why one gets these learning curves is that most folk are not skilled at teaching, of transferring information, though they may be excellent engineers; pretty much the best material I have seen were written by university level instructors with a lot of experience teaching, who have battle-tested their materials extensively.

The main corollary of this situation is that there is rarely a good sequence of examples that escalate nicely in complexity, and in the examples that exist, there is often not too good an explanation of the thought process used to construct the final concept, which is why I tend to google for TDD materials, since breaking down a problem into tiny incremental steps is kind of the de-facto standard within that community, whether it be a tic-tac-toe game, or the game of chess.

[nelsonic]

@YvesMuyaBenda the HtDP approach https://en.wikipedia.org/wiki/How_to_Design_Programs
would be a good one.
My plan is to build up the concepts of the Elm Architecture using TDD.
Will ping you when there's something coherent. 😉

[YvesMuyaBenda]

@nelsonic Looking forward to the ping man! Looking forward to the ping! It is is a bit difficult going from the initial idea to something coherent, no? But that is where the fun lies, the stretching out of one's mind.

[nelsonic]

Done: https://github.com/dwyl/learn-elm-architecture-in-javascript
@lucymonie, @YvesMuyaBenda, @newswim feedback very much appreciated!

Are the tutorial steps clear enough for complete beginners?

CC: @Cleop, @rjmk, @jrans, @jruts, @katbow, @gabrielperales, @benjaminlees, @Shouston3, @SimonLab, @andrewMacmurray, @Danwhy, @jackcarlisle, @naazy, @Conorc1000, @roryc89

[newswim]

This is FANTASTIC, good work @nelsonic !!