Make Creating an Elm Project as Easy as Elixir

AdamBrodzinski commented 8 years ago

One of the most frustrating things about Elm is getting a project up and running. Sure the online editor examples are nice but to actually use it for a project you typically have to string together things like Gulp, Grunt, create an empty HTML, google what the hello world HTML looks like for elm, etc.. There's a lot of overhead to just get going.

However, I think elm make could help out and perhaps take a cue from the tooling provided with Elixir. Typing in mix new my_app will create a standard folder structure with an empty module (MyApp in this case) and a test that passes with mix test.

Coming from the JS world I was ecstatic to see such an awesome way to get started. It was a breath of fresh air for someone with "JS Fatigue". I think a lot of people coming to Elm are tired of the JS ecosystem as well (i've talked to several who have went back to React/Redux because getting a toolchain running was a hassle).

I think a little bit of effort here would go a long way. I'm also happy to help out in any way I can.

Problems to Solve

eliminate the need for NPM and 1000 modules to run an Elm app in dev
two make commands to get an app up and running with Hello World (init and serve)
create a standard elm app structure
generate this structure with one command
watch the filesystem and re-compile on change
eliminate the need to Grunt, Gulp, Webpack to use Elm
eliminate the need for a simple server (like python, etc..)
Proposal

elm make --watch

Watches the src folder by default and optionally watches another folder. Any changes to the files will clear the terminal, re-run the compiler and print any messages needed. Replaces grunt-contrib-watch and grunt-clear

`elm server`

Starts up a server and servers an index.html if present. This eliminates burdening the user to create a simple server setup just to open the app for development. Replaces open http://localhost:8000 && python -m SimpleHTTPServer. Perhaps making this a flag to elm make makes sense? eg.. elm make --watch --server all in one command?

`elm make new my_app`

Finally the most controversial... some sort of standard (basic) file structure and a generator to get you there. Ideally my vision is to be able to run new and then run server to get a hello world.

I really don't want to install yet another generator to do this basic stuff.... I think a more opinionated, complex structure may be a good fit for that. For this i'm imaging that we just setup an elm-package file, index.html, and a Main.elm file. Putting the elm and perhaps index file in src makes sense to me.

Some people won't wont to generate HTML, which is fine, and passing a --no-html flag could omit the html. I would go as far as including a basic empty css file as well, but this is much more subjective.

Example:

my_app ⇒ tree
.
├── elm-package.json
├── elm-stuff
src
├── index.html
└── Main.elm

The Main.elm file could import the Html module and could print out "Hello World" inside a div and an h1 to give a nice first impression to Elm. This also makes it very easy to start playing right away. The markup could use a css-class from the aforementioned generated CSS file

Thoughts?

tobyhede commented 8 years ago

Found this because I am trying to get a project built and digging through the internals of elm-make to get a watcher working to compile changed files. The above seem like good ideas.

svanderbleek commented 8 years ago

elm reactor is already a pretty nice server, it also eliminates the need for watch.

evancz commented 8 years ago

It sounds like you have not used elm-reactor. How does that change this issue?

AdamBrodzinski commented 8 years ago

@evancz @svanderbleek thanks for your feedback, much appreciated!

I've used elm-react to get started on day 1 but it (from what I could find) doesn't support CSS and can't use an index.html that I provide (which loads the css).

Ultimately this means I need to drop into JS again to get live reload working with CSS and any index.html file I need (an older app is using JS routing with an Elm file for each route change).

tomek-he-him commented 8 years ago

@AdamBrodzinski @mthadley: There’s git.io/elm-live, which I created exactly for this purpose. Hope it helps 🙂

evancz commented 8 years ago

There were some bugs in elm-reactor that got fixed with 0.17.1. The problems with CSS and index.html should be fixed now. If that is true, can we close this and, if necessary, open a new issue that takes the new information into account?

mthadley commented 8 years ago

It seems like elm-reactor is the tool that was created to solve these problems, so it probably makes more sense to move the issue to that repo.

I think one of the main problems users were having with it was having to drop back into something like webpack to do things they felt were necessary in their app (CSS and custom index.html). I'm not sure what exactly was changed in 0.17.1, but I'm guessing elm-reactor still doesn't solve this?

AdamBrodzinski commented 8 years ago

If 0.17.1 will let you use a custom html page in the same way as a simple http server and will auto re-compile code then we can close this issue. I didn't realize custom html was in the scope of reactor at the time of creating this.

The other thing mentioned that wouldn't be covered is a basic app structure and boilerplate to get started. This really boils down to opinions on structure and how the community wants first elm experience to be like. I mentioned Elixir because it was the first language i've tried that blew me away as far as great tooling and having passing tests already setup, standard file structure, etc...

I'll let someone re-open that if they feel like it's needed. The tooling for production and general productivity for SPAs just isn't there for me yet... will check back next year though.

elm-lang / elm-make