How to use npm packages with ReasonML?

Question

I'm quite experienced with ReactJS and now I'm trying to learn ReasonML. But one thing that I've been struggling to understand, is how to import npm packages with React/Reason.

The instructions on the website are kinda unclear to me (https://reasonml.github.io/guide/javascript/interop/).

So, if I have a React/Reason project and want to use a npm package, how do I do it? How do I import it, using Reason lang?

Sandwich

Answer 1

First off, thanks for the feedback! I'll make sure to get this improved.

Now, to be able to use a javascript library published on npm, you'll need to either find or make some bindings for it, as a bridge between Reason/BuckleScript and JavaScript. Ideally, the bindings you need have already been written (or generated) and published to npm, but in case it hasn't you'll have to write them yourself.

Most readily available bindings are listed in redex, the package index, and will include instructions on how to use it. But if they don't, all you need to do is run npm install --save <package-name>, as usual, then add the package name to the bs-dependencies array in bsconfig.json (see also the BuckleScript manual). Make sure to run bsb -make-world to get the new dependency built, then you should be able to use the modules exported by the bindings directly.

If there are no bindings, and you want to make your own, all you need to do is add the javascript package as normal using npm install --save <pacakge-name>, then just start writing externals. How to do so is described in the BuckleScript manual. You may also find my FFI cheatsheet useful.

Lastly, you're welcome to join us on our Discord where there's lots of friendly people eager to help!

Onyx

Need to add one more explicit step between adding the package to bs-dependencies and using: bsb -make-world. – Conakry

FFI is a term that I've only heard when referencing ReasonML. It may well be an OCaml thing too, but I've never heard of it in any of Java, C#, JavaScript, Haskell or LISP. So how come I've repeatedly seen that Reason developers refer to FFI as if everyone knows what it means? You can search for it reasonml.github.io/docs/en/external#docsNav but I think it would be clearer at least in SO answers if we used more general terms. – Chimerical

@Chimerical What terms would you suggest? FFI is about as general as it gets for this concept I think. "Native Bindings" or "JavaScript interop" might be more intuitive, but these terms are actually more specific not more general. – Onyx

Being as general/abstract as possible isn't really the problem as I see. It's using common terminology. As per c2.com: The term comes from CommonLisp; though it's applicable to any such interface. Other language communities don't use the term FFI as much. I'd suggest that 'interop' is a more common term, for example this Reason blog has 'interop' in the title and then uses the full 'Foreign Function Interface' when talking about FFI. – Chimerical

I guess the main reason that I've never heard of it is that I've never had to call any C/C++ code from another language which seems to be the most common FFI. Even when I've seen examples there though, I don't remember FFI, for example in this question on calling C from C# there's no mention in the question or answers about FFI. – Chimerical

The only thing that sticks in my memory is the use of the extern keyword. "Calling external routines from Bucklescript" also seems a relatively understandable way of describing the same thing with hopefully not too much loss in specificity. – Chimerical