FFI for other libraries

[flip111]

I was considering to use this library with one of the examples in the D3 gallery. However it seems that a lot of them use SVG which is not in the same namespace as html 1 2 3. So i doubt it's possible to create SVG with reflex directly. Would it be easier to add that functionality to reflex or is it possible to have a foreign function interface so that variables can be passed to functions from other libraries?

[ryantrinkle]

Check out the svg branch! Support is in the works, and should be merged soon.

[flip111]

geekbumps, awesome :+1:

@ryantrinkle for future reference ... what about getting and passing variables to other libraries? I think it will be impossible to add every possible functionality into reflex (just too much). So an FFI would be good i think

[ryantrinkle]

For that, take a look at http://weblog.luite.com/wordpress/ and other materials relating to ghcjs https://github.com/ghcjs/ghcjs/. Also, bear in mind that reflex doesn't exclusively run via javascript - it can also use webkitgtk as a backend, so the FFI for that would be this: https://hackage.haskell.org/package/webkitgtk3-javascriptcore

[flip111]

Thanks @ryantrinkle

[ryantrinkle]

No problem :)

[flip111]

Seems that the svg branch is not quite ready yet?

[ 7 of 11] Compiling Reflex.Dom.Widget.Basic ( src/Reflex/Dom/Widget/Basic.hs, dist/build/Reflex/Dom/Widget/Basic.js_o )

src/Reflex/Dom/Widget/Basic.hs:591:42:
    Not in scope: type constructor or class ‘EventClass’
builder for ‘/nix/store/wy2hi3m3ni6i5drirs6xmkw0fdxs8c6h-haskell-reflex-dom-0.2.drv’ failed with exit code 1
cannot build derivation ‘/nix/store/j7rr0n797b5xsrgyyrbx0lmjl8j7miy2-ghcjs-0.1.0.drv’: 1 dependencies couldn't be built
killing process 2347
error: build of ‘/nix/store/j7rr0n797b5xsrgyyrbx0lmjl8j7miy2-ghcjs-0.1.0.drv’ failed
/home/flip111/.nix-profile/bin/nix-shell: failed to build all dependencies
It looks like a problem occurred.  Please submit an issue at https://github.com/ryantrinkle/try-reflex/issues

For:

git clone https://github.com/ryantrinkle/try-reflex.git --branch svg --single-branch try-reflex_svg
cd try-reflex_svg
./try-reflex

[ryantrinkle]

@flip111 Yep, that branch is still very much in development, but if you pull now, that particular error should be resolved. Let me know if you run into any other trouble!

[flip111]

@ryantrinkle ok i guess i will keep submitting them :)

» ./try-reflex                                                                                                                                            [15:21:56]
If you have any trouble with this script, please submit an issue at https://github.com/ryantrinkle/try-reflex/issues
Entering the reflex sandbox...
building path(s) ‘/nix/store/zw4xd4iiycww33jj3rgqbrmkx32zmv57-reflex-dom-bcc4847’
exporting git://github.com/ryantrinkle/reflex-dom (rev bcc48472ca46995a5dfe25e5176c14982c5c954e) into /nix/store/zw4xd4iiycww33jj3rgqbrmkx32zmv57-reflex-dom-bcc4847
Initialized empty Git repository in /nix/store/zw4xd4iiycww33jj3rgqbrmkx32zmv57-reflex-dom-bcc4847/.git/
remote: Counting objects: 1275, done.        
remote: Compressing objects: 100% (6/6), done.        
remote: Total 1275 (delta 0), reused 0 (delta 0), pack-reused 1268        
Receiving objects: 100% (1275/1275), 214.13 KiB | 0 bytes/s, done.
Resolving deltas: 100% (563/563), done.
From git://github.com/ryantrinkle/reflex-dom
 * [new branch]      develop    -> origin/develop
 * [new branch]      fix-dyn-pattern-match -> origin/fix-dyn-pattern-match
 * [new branch]      foreign-js-additions -> origin/foreign-js-additions
 * [new branch]      hamishmack-master -> origin/hamishmack-master
 * [new branch]      js-unification -> origin/js-unification
 * [new branch]      manyoo-develop -> origin/manyoo-develop
 * [new branch]      master     -> origin/master
 * [new branch]      old-master -> origin/old-master
 * [new branch]      pr10       -> origin/pr10
 * [new branch]      release-0.1 -> origin/release-0.1
 * [new branch]      release-0.1.1 -> origin/release-0.1.1
 * [new branch]      remove-dead-code -> origin/remove-dead-code
 * [new branch]      svg        -> origin/svg
 * [new tag]         0.2        -> 0.2
fatal: reference is not a tree: bcc48472ca46995a5dfe25e5176c14982c5c954e
Unable to checkout bcc48472ca46995a5dfe25e5176c14982c5c954e from git://github.com/ryantrinkle/reflex-dom.
builder for ‘/nix/store/wwkbwjzxm9svz6hd04mp8mpzs5pd7yai-reflex-dom-bcc4847.drv’ failed with exit code 1
error: build of ‘/nix/store/wwkbwjzxm9svz6hd04mp8mpzs5pd7yai-reflex-dom-bcc4847.drv’ failed
(use ‘--show-trace’ to show detailed location information)
building path(s) ‘/nix/store/zw4xd4iiycww33jj3rgqbrmkx32zmv57-reflex-dom-bcc4847’
exporting git://github.com/ryantrinkle/reflex-dom (rev bcc48472ca46995a5dfe25e5176c14982c5c954e) into /nix/store/zw4xd4iiycww33jj3rgqbrmkx32zmv57-reflex-dom-bcc4847
Initialized empty Git repository in /nix/store/zw4xd4iiycww33jj3rgqbrmkx32zmv57-reflex-dom-bcc4847/.git/
remote: Counting objects: 1275, done.        
remote: Compressing objects: 100% (6/6), done.        
remote: Total 1275 (delta 0), reused 0 (delta 0), pack-reused 1268        
Receiving objects: 100% (1275/1275), 214.13 KiB | 0 bytes/s, done.
Resolving deltas: 100% (563/563), done.
From git://github.com/ryantrinkle/reflex-dom
 * [new branch]      develop    -> origin/develop
 * [new branch]      fix-dyn-pattern-match -> origin/fix-dyn-pattern-match
 * [new branch]      foreign-js-additions -> origin/foreign-js-additions
 * [new branch]      hamishmack-master -> origin/hamishmack-master
 * [new branch]      js-unification -> origin/js-unification
 * [new branch]      manyoo-develop -> origin/manyoo-develop
 * [new branch]      master     -> origin/master
 * [new branch]      old-master -> origin/old-master
 * [new branch]      pr10       -> origin/pr10
 * [new branch]      release-0.1 -> origin/release-0.1
 * [new branch]      release-0.1.1 -> origin/release-0.1.1
 * [new branch]      remove-dead-code -> origin/remove-dead-code
 * [new branch]      svg        -> origin/svg
 * [new tag]         0.2        -> 0.2
fatal: reference is not a tree: bcc48472ca46995a5dfe25e5176c14982c5c954e
Unable to checkout bcc48472ca46995a5dfe25e5176c14982c5c954e from git://github.com/ryantrinkle/reflex-dom.
builder for ‘/nix/store/wwkbwjzxm9svz6hd04mp8mpzs5pd7yai-reflex-dom-bcc4847.drv’ failed with exit code 1
error: build of ‘/nix/store/wwkbwjzxm9svz6hd04mp8mpzs5pd7yai-reflex-dom-bcc4847.drv’ failed
(use ‘--show-trace’ to show detailed location information)
It looks like a problem occurred.  Please submit an issue at https://github.com/ryantrinkle/try-reflex/issues

[ryantrinkle]

Try again now :)

[flip111]

i better pastebin this now ... http://pastebin.com/P1mSRE3m

[ryantrinkle]

reflex-todomvc isn't updated yet; the easiestvway to work around that is to remove all the references to reflex-todomvc from packages.nix

[flip111]

Compiled succesfully!

For reference this is the edited packages.nix file

{ haskellPackages, platform }:

with haskellPackages;

[
  ##############################################################################
  # Add general packages here                                                  #
  ##############################################################################
  reflex
  reflex-dom

] ++ (if platform == "ghcjs" then [
  ##############################################################################
  # Add ghcjs-only packages here                                               #
  ##############################################################################

] else []) ++ (if platform == "ghc" then [
  ##############################################################################
  # Add ghc-only packages here                                                 #
  ##############################################################################

] else []) ++ builtins.concatLists (map (x: x.override { mkDerivation = drv: drv.buildDepends; }) [ reflex reflex-dom ])

[flip111]

I tried the FFI using this code https://github.com/ghcjs/ghcjs-examples/blob/master/weblog/ffi/ffi.hs (as described in the blog). I expect to see a new number every second but i only get 1<br/> and the page never stops loading (spinner icon on tab). This happened both on the normal branch as well on the svg branch.

Also i have a second question. I saw ghcjs provides some libraries that have bindings to popular javascript libraries, such as ghcjs-jquery and ghcjs-canvas. For D3.js similar bindings could be made, but then it's just "normal" javascript and not reflex/FRP. So for me it's kind of foggy right now on how to combine the FRP/SVG functionalities with this library. I think i can eventually manage to write some primitive bindings for D3.js, but for integrating it with reflex/svg i don't know where to start.

I'm reopening again because the FFI example did not work as expected.

[ryantrinkle]

Hi @flip111,

It looks like your example isn't actually using reflex, just GHCJS. I'm not entirely sure what the issue you're seeing is based on, but it seems related to this note:

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.

— https://developer.mozilla.org/en-US/docs/Web/API/Document/write

For more help with ghcjs-specific stuff, I'd recommend either heading over to https://github.com/ghcjs/ghcjs or, for more real-time help, the #ghcjs chatroom on irc.freenode.net.

It would be great to see a ghcjs-D3 or reflex-D3 binding. You might want to check out @seliopou's Elm-D3 bindings for an example of how to design something like that.

[flip111]

I understand now, the FFI has nothing to do with reflex so questions are not in the right place. For reflex-D3 i would probably have to call the specific reflex functions. I will look into that in the upcoming time.

[sboosali]

any update on the svg branch?

(As my first reflex-dom project, I'm working on a simple turn-based strategy game, where the grid has lots of different overlapping shapes. svg seems easier than images and/or styling textual elements.)

[Ericson2314]

There are svg-related things in reflex-dom-contrib. I'd guess the branch isn't needed then.