Ellie – An Elm Live Editor

https://www.humblespark.com/ellie-announcement/

by bpierre • 9 years ago

224 84 9 years ago

humblespark.com

madnight• 9 years ago

Definitely better than http://elm-lang.org/try

napsterbr2• 9 years ago

Nice! (Still wouldn't trade it for my favorite editor + hot reload, but this kind of app help people get on board)

Elm made me enjoy frontend development again. Can't recommend it enough.

sdroadie• 9 years ago

Seems really well-suited towards teaching functional programming.

jnbiche2• 9 years ago

Cool, now if there were Vim bindings, I could really use it for something fun (don't have the patience to use arrow keys + mouse). Even crude bindings covering the basic Vi command. Anyone know what are they using for the text editor? If it's something like CodeMirror, adding Vi bindings is pretty trivial.

lukewestby5• 9 years ago

It is codemirror! We'll put this on the roadmap.

jnbiche2• 9 years ago

Thank you!

napsterbr2• 9 years ago

I feel your pain. Here's what worked for me:

Spacemacs + elm layer + elm-hot-reload. If you have two screens (or enough resolution) you can have something similar to this app with all the power of a great editor. (Sure it could be emacs + evil or Vi(m) instead)

innocentoldguy2• 9 years ago

Ellie has been quite helpful in my efforts to convert my company to Elm, so many thanks to its creators.

lukewestby5• 9 years ago

Wow, that's awesome! Can you expand on this a little either here or at ellie-app@humblespark.com? I'd love to hear how this helped.

innocentoldguy2• 9 years ago

Sure, I'll write something up this weekend.

ndreckshage• 9 years ago

Congrats Luke!

johnhenry• 9 years ago

Awesome! Anyone else having issues in chrome? The buttons along the top bar are missing for me. Woks fine in Firefox and Safari.

lukewestby5• 9 years ago

this could have been the server falling over briefly and features being turned off as a result. we weren't expecting so much attention tonight since it's friday!

allover11• 9 years ago

(Ellie is really cool, apologies for the meta comment, but):

It's a shame that all that hits me in the face with Elm code examples lately is awkward style conventions. Why do they have to be so user hostile?

Trailing brace on the next line even for this?

    type alias Model =
    { counter : Int
    }

Instead of:

    type alias Model = { counter: Int }

Comma first, when trailing comma is so much more intuitive, why this?

    Html.program
        { view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        , init = ( model, Cmd.none )
        }

instead of:

    Html.program {
        view = view,
        update = update,
        subscriptions = \_ -> Sub.none,
        init = ( model, Cmd.none ),
    }

(... which makes for better diffs too). And weird bracket soup for DOM:

    div []
        [ div [] [ button [ onClick Increment ] [ text "+" ] ]
        , div [] [ text <| toString model.counter ]
        , div [] [ button [ onClick Decrement ] [ text "-" ] ]
        ]

... when it's going to be translated to DOM anyway, why not?

    <div>
        <div><button onClick={increment}>+</button></div>
        <div>{toString model.counter}</div>
        <div><button onClick={decrement}>-</button></div>
    </div>

This is needlessly distracting from all the things that are nice about Elm.

timthelion• 9 years ago

The reason for the commas at the beginning, is that it is easier to add a new line at the end. That is, if you forbid a "last comma". Traditional languages don't let you do

    Html.program {
        view = view,
        update = update,
        subscriptions = \_ -> Sub.none,
        init = ( model, Cmd.none ),
    }

Because the parse would expect something to come after that last comma. And thus you would have the last line being special and different.

Also, it is much easier to look at this

    Html.program
        { view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        , init = ( model, Cmd.none )
        }

And see if all of the commas are actually present ;)

allover11• 9 years ago

Yep, I get the preference over a lang that can't do trailing commas, which is why I used the trailing comma style as the counter-example. In a compile-to-JS language it's hopefully possible to make trailing commas legal. They've been legal in JavaScript itself for a long time (ES5) [0]

Also, it is much easier to look at this [...] and see if all the commas are actually present.

ESLint can trivially lint that you haven't missed a comma (including the final trailing comma). The style guide/ESLint config I use (Airbnb's) enforces trailing commas. If ESLint can do it, Elm should be able to.

[0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

akio6• 9 years ago

Traditional languages don't let you do [...] Because the parse would expect something to come after that last comma.

Which languages are you referring to? Almost every language I'm aware of allows trailing commas.

C, C++, Java, Python, C#, Javascript (somewhat), Ruby, Objective-C, Perl, PHP, Elixir, Rust, and Go all allow trailing commas.

bobwaycott• 9 years ago

And thus you would have the last line being special and different.

Except you've now traded the last line being special for the first line being special.

eweise• 9 years ago

<div> is html while div[] is elm code. Are you asking why not support html in the elm code? IMO its much much nicer to just program the DOM in elm than translate between elm and html. Also, I type my code any old way such as { counter: Int }. When I save elm-format reformats automatically.

ujal2• 9 years ago

You can use elm-format and never think about formatting again. Instead of mixing html and js why not use function calls for everything. I believe there would be no jsx if javascript would allow function calls without the parens.

dannyobrien• 9 years ago

Yep, I think the emerging tradition with Elm is just to leave it to elm-format. I wonder if tooling may end up being the answer to composability and boilerplate too, though I'm not sure quite yet how.

akio6• 9 years ago

It's a shame its maintainers are so hostile towards customization.

https://github.com/avh4/elm-format/issues/210

Existenceblinks2• 9 years ago

What actually distract people are boilerplate/composability, lack of fancy types, package publishing openness and slow-paced community. Don't get me wrong, I like Elm, this is just my observation.

Fr0styMatt883• 9 years ago

The boilerplate issue is frustrating. It sometimes seems like the Elm resources out there all stop at toy examples; SPAs with only three or four different screens without components that need to manage internal view state.

Really I think it's just the stage of adoption that the language is in. It really is cutting-edge in that way and everyone is figuring out the best way to do things. It's early, early days.

In my current project, I've used templating to solve this. I ended up with a huge Elm main program that was 90% case-statements to call the appropriate update, view or other functions (eg- passing JSON data from the back-end server to the appropriate places). I got cranky enough with it that I made a templates version of it using the doT.js library and a script.

Now I can specify the subscreens I want in my application in a JSON file and have a script take that and my Elm code template and spit out a perfectly readable main.elm file which then gets compiled as normal. It's actually turned out really well for my purposes.

ludwigvan• 9 years ago

Can't upvote this enough.

I am sure one gets used to it after some time, but prepending lines with comma, just because it makes it easier to add new lines is so so ugly and takes away from the main intent for newcomers.

This is akin to starting each sentence in English with a dot!

Existenceblinks2• 9 years ago

Reading the comma style, to me, is cleaner. But typing it while writing the record type is urgggg! It is this cycle: type words -> enter -> repeat tabs -> type comma -> type words Or you will have to keep hitting `save` command for auto-formatting.

montibbalt• 9 years ago

Not only have I gotten used to it (pretty much immediately), I get really annoyed when it's the other way.

michaelscott2• 9 years ago

I don't read code like I read a novel. I read it in an attempt to understand the writer's intentions, and what the code is meant to accomplish. I find the leading commas to be far easier to scan than the other way around.

nilkn3• 9 years ago

Regarding "weird bracket soup", isn't the HTML version "weird arrow soup"? I suspect you're just used to seeing HTML, so you forgive it for its ugliness and oddities.

The main difference is that the Elm "bracket soup" is just a composition of functions and is subject to some type checking by the compiler. Elm view code as such can easily be restructured and refactored using the simple laws of function composition, which are very powerful, especially in combination with a strict type system.

allover11• 9 years ago

As I alluded to I think the HTML version is less weird because it is close to what you're going to see when you open your browser DevTools. So the JSX/HTML style requires less mental gymnastics overall.

Also there are some things about Elm's DOM style in particular that are especially awkward, compared to other function-style dom creation syntax [0], like the [ ] everywhere.

The main difference is that the Elm "bracket soup" is just a composition of functions

So is the JSX counterexample I gave, (it de-sugars to function calls), which is why elmx [1] can exist, and seems like an improvement to me.

[0] https://github.com/hyperhype/hyperscript [1] https://github.com/pzavolinsky/elmx

Fr0styMatt883• 9 years ago

The DOM syntax makes perfect sense, but you have to realise it's not a 'transformation' in the sense of taking a stream of text and converting it into a stream of HTML for the browser. It's just Elm code that returns DOM nodes.

The HTML functions in Elm tend to take two parameters: a list of attribute values and a list of child DOM nodes. Again, this is all code. The list values you specify are again just functions that get evaluated.

It's a little less obvious because of the syntax style of Elm, but it does let you write the function calls out in such a way that they express that tree structure.

It bears repeating: your Elm div example, at the top level, is a single function call with the first parameter '[]' being an empty list (because you aren't assigning the node any attributes like a DOM id or CSS class) and the second parameter being a list that'll be made up of the DOM nodes that result from each of the function calls within it.

This was one of the biggest mental roadblocks I had to get past when learning Elm. Just forget the idea of HTML and think instead of DOM tree-of-nodes and a lot falls into place. The 'view' function you write will return a DOM tree data structure which is then taken and applied to the browser document. You pass in your model as a parameter to that function and then other functions you call within this DOM-generating code you've written will use that data to return different DOM contents depending on it.

allover11• 9 years ago

Yes I do understand all that, as I'm a React dev, in which render() methods and 'pure function components' work in exactly the same way (take props and state as input and return dom-creation-calls).

That is why I used JSX as a counterexample. Basically I'm questioning Elm's choice to stick with the raw dom-creation-function-style vs adopting a JSX equivalent.

akio6• 9 years ago

Elm definitely tries painfully hard to be different, which is only exacerbated by its one-true-way attitude.

Regarding HTML, you may want to look at elmx [0]. It accomplishes exactly what you described.

[0] https://github.com/pzavolinsky/elmx

ZenoArrow• 9 years ago

"Regarding HTML, you may want to look at elmx [0]."

In a similar vein...

https://marketplace.visualstudio.com/items?itemName=Rubymani...

https://atom.io/packages/html-to-elm

Tehnix3• 9 years ago

There are reasons for all these, the first two are both to optimize for VCS changes, since adding something to your first to examples would now only generate a minimum diff[0]. That, and considering Elms roots in Haskell, this is the common style for things there.

The last one is because all html in Elm are just regular Elm functions. This means no special syntax to manipulate html, and you have the power of all of Elm at your fingertips, without shoehorning it into a new syntax. [1]

Honestly some quite silly arguments...

[0] You can read some of the benefits on the style here https://github.com/avh4/elm-format/blob/master/README.md

[1] Explained a bit down the page https://guide.elm-lang.org/architecture/user_input/buttons.h...

akio6• 9 years ago

What if you want to change the first item of a list? If you're going for smallest diff (which I'm not even convinced is a worthwhile consideration in language design), then allover's example is clearly superior to Elm's current convention.

kweinber• 9 years ago

Commas-first give you an obvious visual clue when you forget a comma and let the reader immediately know that the current line is a continuation and not a new expression.

allover11• 9 years ago

Linters (or in Elm's case), the compiler, should tell you when you forget a comma.

Indents let the reader know the current line is a continuation.

Comma-first also creates worse diffs than (enforced) trailing comma.

rmb81• 9 years ago

This is beautiful. I'm sure it'll make picking up Elm much easier. Good job!

zachrose2• 9 years ago

By "live" is the intention that the program will recompile without losing the state of the running app? I remember seeing a cool Elm demo of that, but it seems like Ellie requires recompilation.

gregpardo• 9 years ago

My thoughts exactly. Title is misleading. If I have to click compile or hot reload it's not really a live editor. You can't change values and watch them update on the fly.

lukewestby5• 9 years ago

¯\_(ツ)_/¯ idk it's just a neat name. the env is more "live" than downloading the platform, setting up an editor and running the compiler and package manager from the terminal. i mean, is the name elm misleading because it's not a programming language for trees?

dennyabraham• 9 years ago

as a ruby dev that constantly dips into irb over syntax and semantic questions, a tool like this really helps me think at the same increment with elm!

ShaneWilton2• 9 years ago

This is incredibly cool! I'm running an Elm workshop for my coworkers next week, and this will provide a much better experience than having them install everything locally.

stuaxo• 9 years ago

Can there be an option for it not to be pink ?

It's a bit much in the morning.

alimw3• 9 years ago

It's got some interesting design decisions for what's potentially a cool classroom tool. If it appeals to girls that's great, but I'd have to hope it wouldn't actually repel the boys.

alimw3• 9 years ago

I don't know who I've offended but I hope it wasn't the developers. I genuinely think this is very cool, and if I can get my boss on board I will try using it in my class.

savanaly• 9 years ago

Not suggesting this as a perfect alternative, but you could use Stylish to change the header color. Since I already have stylish installed on my chrome it only took about five seconds to open it and add a style rule like

    .components_header_Header {
      background-color: #000080;
    }

drdaeman• 9 years ago

Just tried Elm yesterday (not using this editor, though). Neat and simple.

But I found the documentation to be of a really low quality, and I believe good docs are the most important thing for any language aiming for developers' adoption.

At least the docs on elm-lang.org weren't any good - maybe there's some alternative projects out there?

let rant_ = [

I just wanted to have a thin non-breakable space (U+202F) and haven't found anything about actual syntax in the "syntax" document, nor anywhere around that. Syntax docs is just a bunch of examples with a short notes - a quick cheatsheet at best.

Then I wanted to browse Html package contents and see what's the difference between beginnerProgram and program and what else do they have in stock (with Haskell I always had good idea of module's contents by reading docs on Hackage), but the docstrings were nearly meaningless, not even listing the arguments. "Read about The Elm Architecture", really? I just came from that document (and they only cover beginnerProgram basics), hoping a module docs would give me better idea.

] in sorryAbout rant_ -- I had eventually figured it all out, but was quite disappointed.

xixixao2• 9 years ago

Try to make a type error. Beautiful.

Format seems to be in Alpha, doesn't limit line length?

It's tricky with Elm because it's written in Haskell, so compilation etc. takes long time in the browser, but this is quite nice. Should definitely push to replace /try with this.

scarhill2• 9 years ago

Clicking the About button I see:

"All content created with Ellie is released in the public domain (CC0)."

Are they claiming that any program written with Ellie is in the public domain?

(edit) I've emailed to ask their intent. I'll post an update if I get a reply.

scarhill2• 9 years ago

Evidently their intention is that if you write a program with Ellie and save it it is in the public domain. According to my correspondent, they may switch to releasing edited code with the MIT license.

I let him know that those terms would make me very reluctant to use Ellie for anything, even open source code, since the ability to apply an open source license requires that I have a copyright. I suggested that they putting a very visible statement of what they're doing on the page.

mrcactu5• 9 years ago

it's a little bit pink for my taste. There's a way to change the CSS, right?

im a huge fan of the Elm broswer. and have been using Elm with atom along with elm reactor. That has worked adequately. Most difficulties are ironed out by making sure the Elm code compiles. Then at least all the parts are fitting together.

But maybe I have written code that compiles, but doesn't express what I am wanting.

lukewestby5• 9 years ago

We're going to change the color. We've been hearing feedback that it's a little hard on the eyes.

Ellie – An Elm Live Editor

Related Stories