Js_of_ocaml TodoMVC Example. #1339

slegrand45 · 2015-06-13T16:36:10Z

Js_of_ocaml is a compiler of OCaml bytecode to Javascript.

OCaml is a general purpose programming language with an emphasis on expressiveness and safety. Js_of_ocaml brings nearly all the OCaml features to Javascript. And especially its powerful type system.

arthurvr · 2015-06-15T11:44:58Z

Personally I think should totally go discuss this at TasteLang but that it isn't really a good fit for TodoMVC. Mainly because this is more about the language than about an MV* framework. What does the rest think?

passy · 2015-06-16T18:05:31Z

OCaml has a really nice JS story these days and I hear it more and more, especially among people looking for a type-safe way to write web apps, where there aren't very many options out there. The implementation does a pretty nice job of separating the concerns and looks pretty similar to the Elm way, so I'm 👍.

arthurvr · 2015-06-26T21:47:43Z

examples/js_of_ocaml/build.sh

+
+js_of_ocaml +weak.js --opt 3 -o js/todomvc.js todomvc.byte
+
+# Avoid JS linters (hard to apply for auto generated JS)


Instead of this magic just ignore specific files in the config files.

arthurvr · 2015-06-26T21:49:20Z

Any active community member who's able to review the code? I don't think any of us is (or am I wrong?)

passy · 2015-06-27T07:38:26Z

I'm at a read-only level of OCaml understanding. I'll give it a more
thorough look, but it would indeed be great to have someone with actual
experience in this space to review.

On Fri, Jun 26, 2015, 22:49 Arthur Verschaeve [email protected]
wrote:

Any active community member who's able to review the code? I don't think
any of us is (or am I wrong?)

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

slegrand45 · 2015-06-29T21:41:39Z

The code has been reviewed by @Drup who is a member of the jsoo project. The code style is now much better.

passy · 2015-06-30T09:34:26Z

Oh yes, I prefer the new style a lot over the old let () ... in. Well done! :)

arthurvr · 2015-06-30T11:06:58Z

examples/js_of_ocaml/.gitignore

@@ -0,0 +1,2 @@
+_build
+*.byte


missing a newline

arthurvr · 2015-06-30T11:14:03Z

Neat work. Thanks.

arthurvr · 2015-06-30T20:34:10Z

examples/js_of_ocaml/readme.md

+
+Various code improvements from [Gabriel Radanne](https://github.com/Drup).
+
+Based on [Elm implementation](https://github.com/evancz) by Evan Czaplicki.


https://github.com/evancz

make this a link on the name itself

arthurvr · 2015-07-11T11:00:03Z

Thanks for your nice work!

samccone · 2015-07-11T21:55:54Z

examples/js_of_ocaml/index.html

+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+	</head>
+	<body>
+		<div id="todomvc"></div>


it looks like you are using the 2.0 spec however this root element is an ID, can you switch it to a class?

Is this an absolute requirement? The standard way with js_of_ocaml is to select first an element by its id and then use it to plug the application. I could select the <div> element with the getElementsByClassName method but unfortunately this method is for now only available in the development version of js_of_ocaml.

Is this an absolute requirement? I do not think so, however our test suite does a lookup on this element to determine what version of the spec to use when testing, so clearly this does pose some issues.

What do you think?

Could we have an id attribute and a class attribute? ie something like:

<div id="todomvc" class="todoapp"></div>

Otherwise, if the idea is to ban any id attribute, i have no solution for now until the next release of js_of_ocaml (which will include the getElementsByClassName method).

By the way, can you confirm that the needed class name is todoapp? Or is it todomvc? I looked at the file https://github.com/tastejs/todomvc-app-template/blob/master/index.html and i only saw a todoapp class name. Thanks.

samccone · 2015-07-13T13:14:34Z

we look for todoapp here is the commit that adds the logic.
45b15b5

For now doing both is an OK solution, thanks for chatting with me, and thanks for the awesome work.

ps I tried compiling this app locally by following your instructions and ran into all kinds of errors when installing dependencies, Do you think you might be able to expand the setup instructions for how to compile this app, thanks!

slegrand45 · 2015-07-13T16:22:53Z

I added the "todoapp" class. Thank you for your feedback about your attempt to compile the application. I made a test by starting from a clean environment. And indeed it's not as simple as it seems... So i updated the building instructions. I think it's a lot better now.

samccone · 2015-07-13T17:29:58Z

looks like we are in need of a rebase 🌐

slegrand45 · 2015-07-14T10:55:07Z

After some fixes, there are still 3 failed checks. They are all from the routing part and they all fail because of "stale element reference: element is not attached to the page document". Not sure if i can apply some workarounds?

samccone · 2015-07-14T12:26:50Z

@slegrand45 how recently have you rebased off of master? We Very recently merged a fix #1371

arthurvr · 2015-07-15T09:59:23Z

Seems like some unrelated commits got into this PR. Can you rebase and get them out?

slegrand45 · 2015-07-15T21:29:25Z

It's strange because i already made a rebase... Anyway, i used the following commands:

git checkout js_of_ocaml
git fetch upstream
git rebase upstream/master
git push -f

Strangely enough, i had several conflicts about my own commits during the rebase (?). I used --skip to resolve them. I had also to use "push -f" because git said that my local branch and "origin/js_of_ocaml" have diverged (?). It seems that the PR is now clean again. But i hope i didn't introduce some mess 😟

Besides, the CI log still shows some "stale element reference" (?).

samccone · 2015-07-16T04:41:39Z

yep @slegrand45 looks like you uncovered some more flake 👏

samccone · 2015-10-06T17:06:59Z

hey @slegrand45 would you mind rebasing this off of master and squashing your commits down?

Js_of_ocaml is a compiler of OCaml bytecode to Javascript. OCaml is a general purpose programming language with an emphasis on expressiveness and safety. Js_of_ocaml brings nearly all the OCaml features to Javascript. And especially its powerful type system.

slegrand45 · 2015-10-07T20:28:03Z

Seems ok!

samccone · 2015-10-09T03:27:17Z

@passy I will let you have final 👍 on this

passy · 2015-10-09T19:36:13Z

@slegrand45 I'm seeing some odd rendering errors among other things. Is the latest version on your branch up to date?

slegrand45 · 2015-10-09T21:06:19Z

@passy Yes it's the latest version. What are the errors you are seeing?

passy · 2015-10-09T22:43:28Z

Rendering is broken like on the screenshot and I've only tried a few things that all weren't quite right, focus lost after creating an item, no selection when entering edit mode etc. Do you see those things on your end too?

slegrand45 · 2015-10-10T15:00:26Z

Ok, i see what you mean. Indeed, i have the same problems. I'm working on it right now to fix it.

slegrand45 · 2015-10-10T17:11:31Z

@passy I think it should be better now.

passy · 2015-10-10T19:27:37Z

@slegrand45 Oh yes, way better! 🌵 I'm checking it now. :)

passy · 2015-10-10T19:42:51Z

Passing the integration tests with flying colors! Checking with drool now.

passy · 2015-10-10T20:16:34Z

I took me way longer than it should have to find this GIF, but it was worth it and I'm super excited about landing this. Thanks so much @slegrand45! Also thanks @arthurvr and @samccone for the review! 😻

slegrand45 · 2015-10-10T20:23:13Z

Thank you very much to all the team! 😃

LouisAyroles · 2021-07-20T03:39:58Z

Hello everyone, note sure if it's the right place to ask this :/

Do you have an example with version of dependencies ?
Because I have serious problem to make it work..

When I'm trying with latest opam,eliom config I have problem with js_of_ocaml.deriving.syntax not found.

I've tried many different ways and I'm still stucked..

Thx for yout help. 😄

slegrand45 · 2021-07-20T15:56:04Z

Hi,

Indeed, some packages have been renamed since 2015. @LouisAyroles I have sent a PR to fix that: #2155. You can also take a look at the examples at https://github.com/slegrand45/examples_ocsigen. These examples should compile and run without any problem. If not, please send an issue report.

arthurvr reviewed Jun 26, 2015
View reviewed changes

arthurvr reviewed Jun 30, 2015
View reviewed changes

examples/js_of_ocaml/.gitignore

@@ -0,0 +1,2 @@

_build

*.byte

Copy link

Member

arthurvr Jun 30, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing a newline

arthurvr reviewed Jun 30, 2015
View reviewed changes

samccone reviewed Jul 11, 2015
View reviewed changes

slegrand45 force-pushed the js_of_ocaml branch 2 times, most recently from 0b90397 to df745b3 Compare July 15, 2015 20:37

slegrand45 force-pushed the js_of_ocaml branch from df745b3 to b6d468f Compare October 7, 2015 20:22

Remove the white background under the info footer

cee45fa

slegrand45 added 3 commits October 10, 2015 18:55

Fix focus

33fcb55

Set an empty state if restoring the stored one fails

12184e6

Sync the built js with the latest source code version

f82a9a4

passy closed this in b25d4e2 Oct 10, 2015

slegrand45 deleted the js_of_ocaml branch October 10, 2015 20:20


		js_of_ocaml +weak.js --opt 3 -o js/todomvc.js todomvc.byte

		# Avoid JS linters (hard to apply for auto generated JS)


		Various code improvements from [Gabriel Radanne](https://github.com/Drup).

		Based on [Elm implementation](https://github.com/evancz) by Evan Czaplicki.

Js_of_ocaml TodoMVC Example. #1339

Js_of_ocaml TodoMVC Example. #1339

Conversation

slegrand45 commented Jun 13, 2015

arthurvr commented Jun 15, 2015

passy commented Jun 16, 2015

arthurvr Jun 26, 2015

Choose a reason for hiding this comment

arthurvr commented Jun 26, 2015

passy commented Jun 27, 2015

slegrand45 commented Jun 29, 2015

passy commented Jun 30, 2015

arthurvr Jun 30, 2015

Choose a reason for hiding this comment

arthurvr commented Jun 30, 2015

arthurvr Jun 30, 2015

Choose a reason for hiding this comment

arthurvr commented Jul 11, 2015

samccone Jul 11, 2015

Choose a reason for hiding this comment

slegrand45 Jul 11, 2015

Choose a reason for hiding this comment

samccone Jul 13, 2015

Choose a reason for hiding this comment

slegrand45 Jul 13, 2015

Choose a reason for hiding this comment

samccone commented Jul 13, 2015

slegrand45 commented Jul 13, 2015

samccone commented Jul 13, 2015

slegrand45 commented Jul 14, 2015

samccone commented Jul 14, 2015

arthurvr commented Jul 15, 2015

slegrand45 commented Jul 15, 2015

samccone commented Jul 16, 2015

samccone commented Oct 6, 2015

slegrand45 commented Oct 7, 2015

samccone commented Oct 9, 2015

passy commented Oct 9, 2015

slegrand45 commented Oct 9, 2015

passy commented Oct 9, 2015

slegrand45 commented Oct 10, 2015

slegrand45 commented Oct 10, 2015

passy commented Oct 10, 2015

passy commented Oct 10, 2015

passy commented Oct 10, 2015

slegrand45 commented Oct 10, 2015

LouisAyroles commented Jul 20, 2021

slegrand45 commented Jul 20, 2021 • edited Loading

slegrand45 commented Jul 20, 2021 •

edited

Loading