Elm Example #1041

passy · 2014-10-18T13:13:55Z

Early stage, keep your fingers away from that merge button!

I tried bringing the elm-todomvc a bit closer to our spec and would like us to consider including it as official example.

Before I go on with that, I'd like to get @evancz's okay for this, though. :)

Eating our own dogfood here:

Why Elm?

A functional reactive language for interactive applications. I'm personally really excited about this, because it doesn't just incrementally tries to improve things, but actually rethink the entire platform from the ground up. This enables some things that are pretty much unheard of in the vanilla JS world, like a time-travelling debugger and a highly interactive development workflow with hot code swapping.

The project has been around for a while and is still super active. There are a couple of TodoMVC implementations floating around, but this one is especially interesting because it brings the virtual DOM ideas to Elm. Here's a nice article describing this in depth: http://elm-lang.org/blog/Blazing-Fast-Html.elm

Outstanding Issues

The layout is a bit buggered right now, I'm not quite sure why. I need to read a bit about Elm's full screen rendering mode. I also haven't run the test suite yet. I'm sure there'll be a couple of edge-cases that haven't been covered yet.

hemanth · 2014-10-19T08:08:03Z

@passy++ :)

evancz · 2014-10-19T08:13:29Z

I'm excited for this! Please let me know if you run into anything, I'd like to update the elm-todomvc repo as well if anything is missing.

sindresorhus · 2014-10-19T13:03:10Z

examples/elm/Todo.elm

+    }
+
+type Task =
+    { description : String


Most other apps uses title for the todo text. Might be good to be consistent.

Good point.

sindresorhus · 2014-10-19T13:10:14Z

examples/elm/Todo.elm

+
+onEnter : Input.Handle a -> a -> Attribute
+onEnter handle value =
+    on "keydown" (when (\k -> k.keyCode == 13) getKeyboardEvent) handle (always value)


use a constant for 13 to make it more readable. per spec.

sindresorhus · 2014-10-19T13:23:49Z

Things that needs fixing:

New todo: should trim() the text and prevent adding empty todos
Editing:

The edit should be saved on both blur and enter, and the editing class should be removed. Make sure to .trim() the input and then check that it's not empty. If it's empty the todo should instead be destroyed. If escape is pressed during the edit, the edit state should be left and any changes be discarded.

Editing state should not be preserved when the page is reloaded.
On Chrome, the app is not centered, but moves to the center when some state changes, writing in the input box.

passy · 2014-10-19T14:09:39Z

Thanks, Sindre.

Addressed some of the issues, here are the remaining test failures:


  TodoMVC - elm
    When page is initially opened
      ✓ should focus on the todo input field (55ms)
    No Todos
      ✓ should hide #main and #footer (168ms)
    New Todo
      ✓ should allow me to add todo items (862ms)
      ✓ should clear text input field when an item is added (385ms)
      ✓ should append new items to the bottom of the list (1310ms)
      1) should trim text input
      ✓ should show #main and #footer when items added (426ms)
    Mark all as completed
      ✓ should allow me to mark all items as completed (1260ms)
      ✓ should allow me to clear the completion state of all items (1791ms)
      ✓ complete all checkbox should update state when items are completed / cleared (2895ms)
    Item
      ✓ should allow me to mark items as complete (1706ms)
      ✓ should allow me to un-mark items as complete (1365ms)
      ✓ should allow me to edit an item (2201ms)
      ✓ should show the remove button on hover
    Editing
      ✓ should hide other controls when editing (1271ms)
      ✓ should save edits on enter (2002ms)
      ✓ should save edits on blur (2174ms)
      2) should trim entered text
      3) should remove the item if an empty text string was entered
      4) should cancel edits on escape
    Counter
      ✓ should display the current number of todo items (789ms)
    Clear completed button
      ✓ should display the number of completed items (2797ms)
      ✓ should remove completed items when clicked (1539ms)
      ✓ should be hidden when there are no items that are completed (1424ms)
    Routing
      ✓ should allow me to display active items (1684ms)
      5) should respect the back button
      ✓ should allow me to display completed items (1910ms)
      ✓ should allow me to display all items (1931ms)
      ✓ should highlight the currently applied filter (1609ms)

passy · 2014-10-19T14:19:37Z

@evancz I think the fix for removing Todos when the text was removed requires a bit of an update to the actions structure. Could you give me a pointer on how that should be done?

evancz · 2014-10-19T22:35:14Z

So this is the case in which you edit a task such that it has no content, correct?

When you press enter while editing, you trigger UpdateTask which is implement here. I think the implementation should change to something like this:

UpdateTask id desc ->
    let update task =
            if  | task.id /= id -> Just task
                | String.isEmpty (String.trim desc) -> Nothing
                | otherwise -> Just { task | description <- desc }
    in
        { state | tasks <- filterMap update state.tasks }

evancz · 2014-10-19T22:40:52Z

Ah, here's one that'll work better:

UpdateTask id rawDescription ->
    let desc = String.trim rawDescription
        update task =
            if  | task.id /= id -> Just task
                | String.isEmpty desc -> Nothing
                | otherwise -> Just { task | description <- desc }
    in
        { state | tasks <- filterMap update state.tasks }

I forgot to do some trimming. My one concern with the modifications so far is the proliferation of trim in the logic. I'd sort of prefer moving that higher up, either as a transform on actions.signal or into HTML, though I don't know what "the right thing" is in this case.

passy · 2014-10-20T17:26:56Z

@evancz Thanks for the input. I made those changes but didn't realize before that any input would immediately be reflected in the actual task. The issue now is that you can't add any whitespace characters before we immediately trim them. Also, whenever you delete the last character of the task, it directly disappears. I think there needs to be some intermediate state, because we also need to add the functionality to undo your changes when you hit escape.

evancz · 2014-10-20T21:08:09Z

I don't know if my message got lost or what, but here is the gist of it.

I didn't realize that either, I'll edit the elm-todomvc code to fix this issue and then ping here!

passy · 2014-10-20T21:36:41Z

@evancz Awesome!

evancz · 2014-10-23T18:37:26Z

I coded up a branch the other day that adds the desired functionality in a pleasant way, but it started running into a bizarre issue on my machine. I am at a conference this week, but I'll do my best to hunt down whatever bug I ran into and ping again.

passy · 2014-10-23T19:43:52Z

Thanks for the update, Evan. And have fun at the conference!

On Thu, Oct 23, 2014, 19:37 Evan Czaplicki notifications@github.com wrote:

I coded up a branch https://github.com/evancz/elm-todomvc/tree/trim the
other day that adds the desired functionality in a pleasant way, but it
started running into a bizarre issue on my machine. I am at a conference
this week, but I'll do my best to hunt down whatever bug I ran into and
ping again.

—
Reply to this email directly or view it on GitHub
#1041 (comment).

passy · 2014-11-07T17:51:39Z

@evancz Hey, just wanted to ping you to see if you had a chance to chase down this bug you encountered.

passy · 2014-12-07T13:42:32Z

Just for the rest, Evan is working on an updated version for the Elm 0.14 release. I'll have another look at tests and so on once that has landed:

https://github.com/evancz/elm-todomvc/tree/0.14

passy · 2014-12-26T15:59:18Z

I updated this to match the latest state in @evancz's trim branch.

I'm seeing a bit of flakiness in the test suite. I'm not sure if this is because of batched rendering or something else.

@evancz Something I hadn't thought about before is that now with the learn bar popping in from the side, the center calculation is a bit off for the first "frame" rendered (on large screens at least) and only after interacting with the app in some way it snaps into the right position. Do you have an idea how to mitigate that effect?

evancz · 2015-01-09T14:23:48Z

I just updated the code for 0.14.1 which allows Html values to flow through main. This resolves the issue with scrolling when there are a bunch of tasks, and I could imagine it fixes the centering thing you describe. Can you let me know?

The flakiness may be due to how focus works right now. Does that sound plausible?

rtfeldman · 2015-02-17T17:51:42Z

@passy I'd love to see this get merged...anything I can do to help? Is the "snapping into position after interaction" the only remaining issue?

passy · 2015-02-21T13:45:28Z

@rtfeldman Thanks for the offer! I'm going to try to bring @evancz's changes back into this branch. If the snapping issue should still be there, I'll give you a shout. :)

addyosmani · 2015-02-21T13:54:32Z

@passy Appreciate you working on bringing the 0.14.1 changes back in. Do let me know if/when you need help testing.

passy · 2015-02-21T13:56:47Z

@addyosmani Just in time! I pushed a rebased, updated version just a second ago. Will run the test suite against it now, but it looks pretty awesome to me.

passy · 2015-02-21T14:02:20Z

Test suite is still flaky, but I think it's fine. Tested the failures manually and all of them were okay. But looking at the stack traces it's pretty obvious that we expect synchronous behavior whereby Elm batches operations with the next vsync. We should certainly not punish using the correct approach here. :)

addyosmani · 2015-02-21T14:41:51Z

Hah! Indeed we shouldn't. Trying this out shortly. Nice work :)

addyosmani · 2015-02-21T19:17:14Z

Manually testing the elm branch, I wasn't able to find anything out of place. Tests are (as you mention) still flaking out. Is it worth adding a note about the test failures if we believe the failures are due to our own synchrony expectations?

passy · 2015-02-21T22:07:37Z

@addyosmani Yup, going to add them to the blacklist. There are a few which unfortunately don't pass. This one is for a good reason, though. :)

Elm Example

addyosmani · 2015-02-21T22:41:23Z

Merged away. Please feel free to add the entry to the blacklist whenever suits :)

rtfeldman · 2015-02-22T07:09:07Z

Awesome! Thanks so much for making this happen @passy! 😺

passy · 2015-02-22T12:50:43Z

@rtfeldman I just juggled some commits around, all the hard work was done by @evancz. 😃

evancz · 2015-02-22T12:57:40Z

Just wanted to chime in and say thanks to @passy as well, I'm super excited to see Elm on the site! :)

sindresorhus reviewed Oct 19, 2014
View reviewed changes

passy force-pushed the elm branch from bd8ea60 to 16eb09b Compare October 19, 2014 13:04

sindresorhus reviewed Oct 19, 2014
View reviewed changes

sindresorhus force-pushed the master branch 2 times, most recently from fb43982 to 18d4f47 Compare October 19, 2014 22:29

passy mentioned this pull request Dec 7, 2014

Turn repo into pull request? evancz/elm-todomvc#7

Closed

passy force-pushed the elm branch 2 times, most recently from 6e81873 to 49d34ed Compare December 26, 2014 15:46

passy mentioned this pull request Jan 1, 2015

Remaining TodoMVC test failures evancz/elm-todomvc#11

Closed

evancz mentioned this pull request Feb 17, 2015

PR for official todomvc repo? evancz/elm-todomvc#13

Closed

passy and others added 3 commits February 21, 2015 13:52

Add Elm 0.14 example

a979286

Add Elm to the frontpage

0fe9e8d

Elm: Sync with @evancz/elm-todomvc/trim

db75d2b

Elm: Update to new App CSS

20385de

passy force-pushed the elm branch from 49d34ed to 20385de Compare February 21, 2015 13:56

addyosmani added a commit that referenced this pull request Feb 21, 2015

Merge pull request #1041 from tastejs/elm

6773ba8

Elm Example

addyosmani merged commit 6773ba8 into master Feb 21, 2015

addyosmani deleted the elm branch February 21, 2015 22:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Elm Example #1041

Elm Example #1041

passy commented Oct 18, 2014

hemanth commented Oct 19, 2014

evancz commented Oct 19, 2014

sindresorhus Oct 19, 2014

passy Oct 19, 2014

sindresorhus Oct 19, 2014

sindresorhus commented Oct 19, 2014

passy commented Oct 19, 2014

passy commented Oct 19, 2014

evancz commented Oct 19, 2014

evancz commented Oct 19, 2014

passy commented Oct 20, 2014

evancz commented Oct 20, 2014

passy commented Oct 20, 2014

evancz commented Oct 23, 2014

passy commented Oct 23, 2014

passy commented Nov 7, 2014

passy commented Dec 7, 2014

passy commented Dec 26, 2014

evancz commented Jan 9, 2015

rtfeldman commented Feb 17, 2015

passy commented Feb 21, 2015

addyosmani commented Feb 21, 2015

passy commented Feb 21, 2015

passy commented Feb 21, 2015

addyosmani commented Feb 21, 2015

addyosmani commented Feb 21, 2015

passy commented Feb 21, 2015

addyosmani commented Feb 21, 2015

rtfeldman commented Feb 22, 2015

passy commented Feb 22, 2015

evancz commented Feb 22, 2015

Elm Example #1041

Elm Example #1041

Conversation

passy commented Oct 18, 2014

Why Elm?

Outstanding Issues

hemanth commented Oct 19, 2014

evancz commented Oct 19, 2014

sindresorhus Oct 19, 2014

Choose a reason for hiding this comment

passy Oct 19, 2014

Choose a reason for hiding this comment

sindresorhus Oct 19, 2014

Choose a reason for hiding this comment

sindresorhus commented Oct 19, 2014

passy commented Oct 19, 2014

passy commented Oct 19, 2014

evancz commented Oct 19, 2014

evancz commented Oct 19, 2014

passy commented Oct 20, 2014

evancz commented Oct 20, 2014

passy commented Oct 20, 2014

evancz commented Oct 23, 2014

passy commented Oct 23, 2014

passy commented Nov 7, 2014

passy commented Dec 7, 2014

passy commented Dec 26, 2014

evancz commented Jan 9, 2015

rtfeldman commented Feb 17, 2015

passy commented Feb 21, 2015

addyosmani commented Feb 21, 2015

passy commented Feb 21, 2015

passy commented Feb 21, 2015

addyosmani commented Feb 21, 2015

addyosmani commented Feb 21, 2015

passy commented Feb 21, 2015

addyosmani commented Feb 21, 2015

rtfeldman commented Feb 22, 2015

passy commented Feb 22, 2015

evancz commented Feb 22, 2015