ellie VS elm-spa-example

Sorry I'm not being helpful (in that, I dont have a solution for you) but it would be great if you could put this up as a working demo on Ellie (https://ellie-app.com/).

There is an online editor, named Ellie, to play with the language without the need to install anything on your machine. Ellie permits to install dependencies for your code, so you can prototype an entire project with it.

After that point I started looking into how Elm works from the web dev perspective with resources like Elm in Action and Frontend Masters courses (first working in ellie-app-for-elm-dev then upgrading to vite-elm-template).

I can still give you some pointers here. First I'd suggest you read the elm guide: https://guide.elm-lang.org/ It's the best place to start with elm. When you have a question about any specific subject, you should head to the slack, or ask a question on the elm discourse: https://discourse.elm-lang.org/ . The best way to get a useful answer, is to have a concrete question, and to prepare an example of what is wrong on Ellie (https://ellie-app.com). As such people can modify your Ellie to answer you.

You can paste it to Ellie for testing

req: Request { bodyUsed: false, headers: Headers { accept: "*/*", "accept-encoding": "gzip, deflate, br", "accept-language": "en-US,en;q=0.9,la;q=0.8", connection: "keep-alive", host: "localhost:8000", origin: "https://ellie-app.com", "sec-ch-ua": '"Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"', "sec-ch-ua-mobile": "?0", "sec-ch-ua-platform": '"macOS"', "sec-fetch-dest": "empty", "sec-fetch-mode": "cors", "sec-fetch-site": "cross-site", "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4..." }, method: "GET", redirect: "follow", url: "http://localhost:8000/" } ourAnswer: Response { body: ReadableStream { locked: false }, bodyUsed: false, headers: Headers { "content-type": "text/plain;charset=UTF-8" }, ok: true, redirected: false, status: 200, statusText: "", url: "" }

https://builtwithelm.co/ lists some, but not sure what you consider large.

Not sure if you would categorize this as dev tool https://github.com/erkal/kite

And ellie certainly might be a dev-tool, but not a toy https://github.com/ellie-app/ellie

About 7 years ago, in the midst of writing Elm in Action, Richard Feldman developed rtfeldman/elm-spa-example, wrote Tour of an Open-Source Elm SPA and graciously shared both of them with the Elm community. The community's response was overwhelmingly positive and it was clear that he had addressed a major need. If you were one of the many web application developers asking "Where can I find an open-source example of an Elm Single Page Application?", then, the Elm SPA Example instantly became the canonical example that everyone was going to point you towards. This was a landmark achievement in the history of Elm.

One accidentally nice thing about that book is the elm version is still the same, so everything is still relevant. As for the SPA, I think the book had to keep things simple, but you'd probably want to look into the author's elm-spa-example next, there's a talk on youtube that goes along with that and he also also a related course on frontend maters worth exploring.

I'm following along with the update behavior of https://github.com/rtfeldman/elm-spa-example/blob/master/src/Main.elm. But I'm not sure how I propagate a message from Main.elm to User.elm to Table.elm (or deeper). How do you manage Msg passing like this?

I am building my first Elm app just following the docs from the official web site. I don't see any direct mention of styling there. Looking around, I see the elm-ui project is one, elm-css is another approach, and the example SPA that Richard Feldman made just uses a stylesheet from Bootstrap, i.e., just plain CSS. If it exists, what's the canonical way of styling an app?

A good example of this is the Elm-SPA example from Feldman: the Main.elm file is basically just glue code for the rest of the project (https://github.com/rtfeldman/elm-spa-example/blob/master/src/Main.elm).

After all that I've managed to reach my goal of being able to run Richard Feldman's Elm SPA Example in my system! 😃 Here's a working implementation compiled to WebAssembly. And for comparison, you can also check out the same code compiled to JavaScript. (Unfortunately the publicly available APIs don't seem to be returning very much data at the moment but there's not much I can do about that!)

Looking at the Real World application I could see that there were better ways to structure my modules using nested TEAs and keeping the Main module as a hub for everything in the app.

If you want to see Elm code, you might look for example projects on GitHub. (https://github.com/rtfeldman/elm-spa-example comes to mind.)

https://github.com/rtfeldman/elm-spa-example is a good example app. I'd also recommend https://codebase.show/projects/realworld in general if you're looking for example apps in various frameworks and languages. I sadly can't share anything from work as it's all private.

- How to properly structure the project. I differentiate between my core utils and the actual gui. Iced states in the documentation that it's inspired by the Elm architecture. So naturally I've read a little bit about the proposed Elm project structure. So I basically end in a structure like this spa example directory recommended by the Elm communicty: Repo