Elm Architecture in Vanilla JS

[Robert Muller]

Greetings. I'm an OCaml guy, teaching Web Apps for the first time and finding my way through the insanity that is HTML + CSS + JS and trying to impart something sensible to students for how to structure their vanilla JS apps to conform to the the Elm Architecture (model-view-update). First time through, I'm not savvy enough to know how to properly fake the Elm Architecture in vanilla JS.

IN PARTICULAR: I'd like to write a simple TODO app where the model is a record containing a list of todo items and a list of completed items. I'd like to write the app along the lines of:

let app = { 

                 view : view,         //   : model -> element 

                 update : update   //  : model -> model

               }  

But I'm getting bollixed-up with the basic wiring. It's very basic stuff. E.g., let's say I have an addItem button; I assume that I want to wire-up the event listener to deliver the new item to the model (an update). Obviously these are executed asynchronously. But then what are the proper manners for displaying the model in the DOM? For a simple synchronous 8-queens solver example that I did, I wrote a reasonable runApp function using the JS setInterval function. But I'm not sure if this is kosher for the asynchronous case.

Any advice here? Any pointers to Vanilla JS examples written using the Elm Architecture?

Thank you! Your reply would help me and my 60 students!

Bob Muller

[Witold Szczerba]

Hi,

so you want to carry The Elm Architecture (TEA) to the "vanilla JS" world. I came across recently an article: "How I converted my React app to VanillaJS". React is quite similar to TEA, actually it's React/Redux that is similar, but still, I think you could find something useful there.

https://hackernoon.com/how-i-converted-my-react-app-to-vanillajs-and-whether-or-not-it-was-a-terrible-idea-4b14b1b2faff#.zgqzwurva

Regards,

Witold Szczerba

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Robert Muller]

Thank you! Very informative and laugh-out-loud funny! Really helpful, thanks! - Bob

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/XJ6yP_Mq7M0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss+unsubscribe@googlegroups.com.

[Eric G]

There was a discussion on this awhile back on reddit, see https://www.reddit.com/r/elm/comments/5q4nji/closest_elm_architecture_in_js/

My personal favorite and I believe closest to Elm (0.16) is outlined here:
https://github.com/paldepind/functional-frontend-architecture

On Saturday, February 25, 2017 at 7:46:31 PM UTC-5, Robert Muller wrote:

Thank you! Very informative and laugh-out-loud funny! Really helpful, thanks! - Bob

On Sat, Feb 25, 2017 at 7:27 PM, Witold Szczerba <witold...@gmail.com> wrote:

Hi,

so you want to carry The Elm Architecture (TEA) to the "vanilla JS" world. I came across recently an article: "How I converted my React app to VanillaJS". React is quite similar to TEA, actually it's React/Redux that is similar, but still, I think you could find something useful there.

https://hackernoon.com/how-i-converted-my-react-app-to-vanillajs-and-whether-or-not-it-was-a-terrible-idea-4b14b1b2faff#.zgqzwurva

Regards,

Witold Szczerba

On Sun, Feb 26, 2017 at 12:52 AM, Robert Muller <robert....@gmail.com> wrote:

Greetings. I'm an OCaml guy, teaching Web Apps for the first time and finding my way through the insanity that is HTML + CSS + JS and trying to impart something sensible to students for how to structure their vanilla JS apps to conform to the the Elm Architecture (model-view-update). First time through, I'm not savvy enough to know how to properly fake the Elm Architecture in vanilla JS.

IN PARTICULAR: I'd like to write a simple TODO app where the model is a record containing a list of todo items and a list of completed items. I'd like to write the app along the lines of:

let app = { 

                 view : view,         //   : model -> element 

                 update : update   //  : model -> model

               }  

But I'm getting bollixed-up with the basic wiring. It's very basic stuff. E.g., let's say I have an addItem button; I assume that I want to wire-up the event listener to deliver the new item to the model (an update). Obviously these are executed asynchronously. But then what are the proper manners for displaying the model in the DOM? For a simple synchronous 8-queens solver example that I did, I wrote a reasonable runApp function using the JS setInterval function. But I'm not sure if this is kosher for the asynchronous case.

Any advice here? Any pointers to Vanilla JS examples written using the Elm Architecture?

Thank you! Your reply would help me and my 60 students!

Bob Muller

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/XJ6yP_Mq7M0/unsubscribe.

To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.

[YuFan Lou]

As an aside, since you mentioned OCaml, maybe you'd be interested in BuckleScript: https://github.com/bloomberg/bucklescript

Robert Muller於 2017年2月25日星期六 UTC-5下午6時52分44秒寫道：

[Robert Muller]

Thank you. I am following BuckleScript; it's terrific but I cannot (yet) teach OCaml or Elm to WebApps students. I don't think it will be long, but for now I have to stick with JS.
Best,

RM

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/XJ6yP_Mq7M0/unsubscribe.

To unsubscribe from this group and all its topics, send an email to elm-discuss+unsubscribe@googlegroups.com.