Example: Adding a very basic version of a todo app #311

faisalil · 2019-02-06T06:34:12Z

I am very new to reason, so any suggestions are welcome even if they are minor nits.
As part of this, I did a workaround to an issue in Input and made the event subscriptions Always instead of OnMount, this breaks having multiple Input fields but this needs to be fixed differently.
The goal is to make this match the full todo mvc example, however, I wanted to send something out as a start and then take some fixes to Input before continuing with this.

bryphe · 2019-02-06T06:47:28Z

@faisalil - awesome, thank you very much! Can't wait to try this out

bryphe · 2019-02-06T21:00:30Z

src/UI_Components/Input.re

@@ -87,31 +90,36 @@ let make =
     */
    let slots =
      React.Hooks.effect(
-        OnMount,
+        Always,


Nice catch on this issue @faisalil - thanks for investigating & fixing it!

bryphe · 2019-02-06T21:01:03Z

examples/TodoExample.re

+    );
+
+  let createElement = (~children, ~currentFilier, ~onPickingFilter, ()) =>
+    React.element(make(children, currentFilier, onPickingFilter));


Nit: I think currentFilier should be currentFilter?

Thanks. Fixed it.

bryphe · 2019-02-06T21:06:59Z

examples/TodoExample.re

+  };
+};
+
+module FilterSection = {


One thing you might be interested in - @jchavarri and @wokalski are looking at ways to streamline the component creation to a function / remove boiler plate here: briskml/brisk-reconciler#6

Nothing to be changed since we don't have it yet, but would be great to get your feedback on that since you have a fresh perspective!

That will be great. I will check this out. Most of the code to create a basic component didn't feel natural. glad you are looking into it.

bryphe · 2019-02-06T21:15:22Z

examples/TodoExample.re

+  | Completed
+  | NotCompleted;
+
+let textOfFilter = (filter: filter) => {


One convention that comes up in OCaml (and that Reason inherited) is a convention of using a type t with a module, especially if there are functions that use it. So you could potentially refactor this to something like:

module Filter { type t = | All | Completed | NotCompleted; let show = (v: t) => switch(v) { | All => "All" | Completed => "Completed" | NotCompleted => "NotCompleted" }; };

Not something that is strictly necessary, but it's a convention that I found interesting as I start diving into Reason - the ubiquity of a module plus a type t.

'1 Module for 1 thing': https://github.com/ostera/reason-design-patterns/blob/master/patterns/1-module-1-thing.md

It's a little bit different than thinking in an OO language - a lot of times the Module will have a core type + functions that operate on that top. So comes up a lot in the standard modules - like there is a Hashtbl.t('a, 'b) that the Hashtbl module provides functions for: https://caml.inria.fr/pub/docs/manual-ocaml/libref/Hashtbl.html

No changes necessary - just thought you might be interested in this 😎 Nice use of variants for this!

Very useful. Thanks for sharing. One goal I have in helping here is to ramp up on Reason, so thanks for this.

bryphe · 2019-02-06T21:27:14Z

Just got to play with it a bit! Overall the code looks excellent @faisalil - I just put some minor nits / commentary in, but it looks great. How was your first Reason experience?

I took a quick screen grab of testing it out in case anyone else wants to see it:

I noticed one bug that I think is a reconciler issue - when I switch between 'Completed' and 'Not Completed' tasks, sometimes the checkbox state doesn't change. The logic in the sample looks correct to me.

We could try specifiying a key for the todo items to workaround this (the element function takes an optional key parameter: https://github.com/briskml/brisk-reconciler/blob/f545ba090984794acfacd8f4ff7896a921b3d67f/lib/Brisk_reconciler.rei#L53
) and an example usage in a test case:
https://github.com/briskml/brisk-reconciler/blob/f545ba090984794acfacd8f4ff7896a921b3d67f/test/Test.re#L82

But we can track this separately, too - I do think it's possibly a value not being updated by the reconciler.

The only blocker I see is that CI is failing due to formatting - could you try running esy format & committing the changes?

So cool that you tried it out and built this @faisalil , really appreciate it!

wokalski · 2019-02-06T22:38:16Z

@bryphe oh no... I should have a couple of fixes coming in the coming days. I hope it'll get fixed!

faisalil · 2019-02-08T09:23:54Z

Thanks for the comments @bryphe , I will get to addressing the comments and fixing the merge conflicts tomorrow.

bryphe · 2019-02-08T22:29:26Z

Thanks @faisalil ! I'll publish a new version of the playground (https://www.outrunlabs.com/revery/playground/) once its in! 👍

faisalil · 2019-02-09T04:37:06Z

) and an example usage in a test case:
https://github.com/briskml/brisk-reconciler/blob/f545ba090984794acfacd8f4ff7896a921b3d67f/test/Test.re#L82

@bryphe , calling

          let key1 = Key.create();

Gives an error : "Error: Unbound value Key.create"

I am not sure about the right syntax and I cannot find any documentation on this.

faisalil · 2019-02-09T04:41:00Z

Just got to play with it a bit! Overall the code looks excellent @faisalil - I just put some minor nits / commentary in, but it looks great. How was your first Reason experience?

@bryphe, I am actually liking reason. The startup of the test app is amazing and this kind of perf is always very attractive.
The editor support is kind of week (in VSCode). I wish show definition works so you can see all the options you are calling. Do you guys use Oni? Is the support better? I am not that familiar with vim so it might be a challenge to use anything but vscode.

faisalil · 2019-02-09T04:44:15Z

Change should be ready for final review.

bryphe · 2019-02-09T19:47:20Z

@bryphe , calling

          let key1 = Key.create();

Gives an error : "Error: Unbound value Key.create"

Ah, looks like this needs to be React.Key.create - all of the brisk module is accessed behind a React module.

@bryphe, I am actually liking reason. The startup of the test app is amazing and this kind of perf is always very attractive.

Very cool! @jordwalke would be happy to hear this 😄

The editor support is kind of week (in VSCode). I wish show definition works so you can see all the options you are calling. Do you guys use Oni? Is the support better? I am not that familiar with vim so it might be a challenge to use anything but vscode.

There are still some challenges with language support - but I believe the best environment at the moment is OSX + VSCode + reason-vscode.

However, there is a really powerful language tool called merlin of ocaml/reason: https://github.com/ocaml/merlin and @andreypopp has a plugin that uses it in VSCode - https://github.com/andreypopp/vscode-merlin - I think this will be the best long-term experience, but haven't tried it yet. I'd like to bundle it in Oni2 so that reason users have a great out-of-box experience (like you get with VSCode+typescript).

Thanks for the feedback and thoughts, @faisalil !

bryphe · 2019-02-09T19:49:21Z

And the sample looks great to me, @faisalil - thanks for all your work on this! 🎉 Will merge now.

This is a sample I've wanted for a long time - fixes #42 !

* adding todoapp * reformating * Fixing the build issue

adding todoapp

f566678

bryphe reviewed Feb 6, 2019

View reviewed changes

syncing with master

940df89

reformating

ee5e363

Fixing the build issue

87d001f

bryphe merged commit 47e7b19 into revery-ui:master Feb 9, 2019

bryphe mentioned this pull request Feb 9, 2019

Example: To-do list #42

Closed

akinsho pushed a commit to akinsho/revery that referenced this pull request Feb 18, 2019

Example: Adding a very basic version of a todo app (revery-ui#311)

e0d5ff0

* adding todoapp * reformating * Fixing the build issue

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Example: Adding a very basic version of a todo app #311

Example: Adding a very basic version of a todo app #311

faisalil commented Feb 6, 2019

bryphe commented Feb 6, 2019

bryphe Feb 6, 2019

bryphe Feb 6, 2019

faisalil Feb 9, 2019

bryphe Feb 6, 2019

faisalil Feb 9, 2019

bryphe Feb 6, 2019

faisalil Feb 9, 2019

bryphe commented Feb 6, 2019

wokalski commented Feb 6, 2019

faisalil commented Feb 8, 2019

bryphe commented Feb 8, 2019

faisalil commented Feb 9, 2019

faisalil commented Feb 9, 2019

faisalil commented Feb 9, 2019

bryphe commented Feb 9, 2019 •

edited

bryphe commented Feb 9, 2019 •

edited

Example: Adding a very basic version of a todo app #311

Example: Adding a very basic version of a todo app #311

Conversation

faisalil commented Feb 6, 2019

bryphe commented Feb 6, 2019

bryphe Feb 6, 2019

Choose a reason for hiding this comment

bryphe Feb 6, 2019

Choose a reason for hiding this comment

faisalil Feb 9, 2019

Choose a reason for hiding this comment

bryphe Feb 6, 2019

Choose a reason for hiding this comment

faisalil Feb 9, 2019

Choose a reason for hiding this comment

bryphe Feb 6, 2019

Choose a reason for hiding this comment

faisalil Feb 9, 2019

Choose a reason for hiding this comment

bryphe commented Feb 6, 2019

wokalski commented Feb 6, 2019

faisalil commented Feb 8, 2019

bryphe commented Feb 8, 2019

faisalil commented Feb 9, 2019

faisalil commented Feb 9, 2019

faisalil commented Feb 9, 2019

bryphe commented Feb 9, 2019 • edited

bryphe commented Feb 9, 2019 • edited

bryphe commented Feb 9, 2019 •

edited

bryphe commented Feb 9, 2019 •

edited