8 ms·

Fable: F# to JavaScript compiler

155 points by galfarragem 9y ago

dep_b 9y ago
The first thing I worry about reading something like this is how leaky the abstraction will be. I would love to ditch JavaScript for pretty much anything else but if I need to think about the JavaScript part anyway because of certain things that I can or cannot do I prefer to think in JavaScript from the get go.
- tpetricek 9y ago
  This is a tricky one. If the abstractions were not leaky, you would not be able to interoperate with JavaScript libraries and you'd have to reimplement everything that powers the modern JS ecosystem. On the other hand, if the abstractions were too leaky, you'd lose all benefits of a nice language like F#. I think Fable strikes the right balance. There are some leaky aspects of how it compiles to JS, but this means that you can quite well use it with existing JS libraries and for things like parsing JSON (you can just cast JSON object to F# records and it'll work). So, you need to think about something about the JS part when you want to do JavaScript-y things, but you still get plenty of nice help from the F# compiler when writing the logic that the functional-first style makes so much easier. In my experience with Fable, this pragmatic approach is what makes it great.
  - microcolonel 9y ago
    > you can just cast JSON object to F# records and it'll work Isn't a "JSON object" just a string?
    - TomMarius 9y ago
      He probably wanted to say "plain JS object", which is denoted in JSON. You can put JSON in a string, but the syntax is called JSON as well.
      - tpetricek 9y ago
        Yes, that's what I meant, thanks :-). The idea is that you can just write `unbox<MyType>(jsonParse("{whatever:42}"))`.
- noir_lord 9y ago
  This is exactly why I standardised on TypeScript. Their isn't actually much of an abstraction in one direction, valid ES6 is valid TS and the types are inter-operable. Throw in better typing, proper classes, down compiling of async/await to ES3/ES5 (still magic to me) and the ability to progressively port from one to the other (and you can even get a lot of the TS benefits just by annotating your existing JS as a good first step to moving to TS) and for me it was a no-brainer. I don't think TS is a pretty language but it's a fantastic approach to getting from shitty-A to less shitty-B. Pragmatism wins for me as much as I'd love to just write everything client side in something else.
  - WaxProlix 9y ago
    I have to agree, the pragmatic and thoughtful approach that the TS team has brought to the language makes it reasonable to write in and easy enough to reason about at any given time. Plus, being a superset means that if you want to 'drop into' JS to take advantage of some quirk or whatever at any time, you can just disable your linter and do the deed. Coming from a C# and Python fan, TS hits the mark pretty solidly on all levels.
    - BigJono 9y ago
      > Plus, being a superset means that if you want to 'drop into' JS to take advantage of some quirk or whatever at any time, you can just disable your linter and do the deed. This is an exact example of what GP was talking about with leaky abstractions though. You don't have to just learn TS to use TS, you need to learn TS and JS. IMO a proper, strict typed language; and plain Javascript; are both much better options than TS.
      - Osiris 9y ago
        > You don't have to just learn TS to use TS, you need to learn TS and JS. I don't understand this. TypeScript is not a different language. It's just JavaScript with some type annotations. If you had never used JavaScript before and learned TypeScript you could immediately write plain JavaScript as well.
- jackmott 9y ago
  I haven't used it myself but the Ionide plugin for VSCode, which creates a full featured IDE experience for F#, is done in F# transpiled to javascript. The maintainers seems to enjoy it.
- nerdponx 9y ago
  People seem to love BuckleScript, so it must be possible to do this kind of thing right.
genzoman 9y ago
great! now we just need more than two people that know f#. i keed...kinda ;)
- k__ 9y ago
  some people said in the Reason3 update article that F# is better suited for JS devs than OCaml.
  - genzoman 9y ago
    i saw somewhere an article mentioning "why don't more people write f#" (mebbe it was on h/n)? I have never had to really worry about concurrency and if you've got a good familiarity with C#, you're halfway there to being a very productive in TypeScript, so I don't see exactly where F# fits in, considering the best parts of C# are its functional bits.
    - tpetricek 9y ago
      The fact that the best parts of C# are its few functional bits might be a good hint that if you had a language that was designed around those good bits, it would be so much better ;-). I don't expect to convince anyone in a HN discussion, because that's not how arguments about programming languages work, but have a look at testimonials (http://fsharp.org/testimonials http://fsharp.org/testimonials). You'll see that many people who started using F#, are very happy with it because it lets them solve problems faster with fewer bugs and they enjoy it more.
    - mcintyre1994 9y ago
      You might find this an interesting read about C#/F#: https://fsharpforfunandprofit.com/posts/is-your-language-unreasonable/ https://fsharpforfunandprofit.com/posts/is-your-language-unr...
  - delhanty 9y ago
    Here's a link to that thread: https://news.ycombinator.com/item?id=15574409 https://news.ycombinator.com/item?id=15574409
dominotw 9y ago
> export { _ as $2665$ }; Why significance does that have in javascript? http://fable.io/repl/ http://fable.io/repl/
- CapacitorSet 9y ago
  Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- steego 9y ago
  It's exporting the function with the name unicode name "(heart character here)" let (heart) x y = x + " loves " + y EDIT: I guess Hacker News doesn't support unicode characters. (Not a bad thing)
igouy 9y ago
also FunScript "F# to JavaScript with type providers" http://funscript.info/ http://funscript.info/
- tpetricek 9y ago
  Fable pretty much replaced FunScript - all the activity around F# to JavaScript translation moved from FunScript to Fable nowadays!
  - igouy 9y ago
    Thanks!
  - igouy 9y ago
    What's the licensing? "you only pay for what you get"
JasonSage 9y ago
Why not show a code sample on the homepage? None of Home, Docs, or Samples have a single code snippet on the entire page, you have to click through. Crystal and Rust are good examples of language homepages that give you an idea of what you're getting into up front. Or for a transpiled language, PureScript.
- vertex-four 9y ago
  Fable is a compiler and runtime for a language that already very much exists, and has its own documentation and landing page. F# isn't a new thing.
  - kristiandupont 9y ago
    Sure, but I would still like to see how I would use this in the context of a browser. How do I interact with existing JS libraries? How would I use it with React or something else? How would I even call window.alert()?
    - piaste 9y ago
      For React, install the appropriate library[1] and then call the functions you need from the Fable.Helpers.React.* namespace. If you want to see a complete implementation of Fable + React in action, the canonical example is https://github.com/SAFE-Stack/SAFE-BookStore https://github.com/SAFE-Stack/SAFE-BookStore For alert(), you'll find it in Fable.Import.Browser.window.alert() (In case you're wondering, the Fable convention is that the Fable.Import.* namespace is used for pure JS bindings with no business code, while libraries with an actual translation layer are placed in the Fable.Helpers.* namespace.) [1] https://www.nuget.org/packages/Fable.React/ https://www.nuget.org/packages/Fable.React/
- wtetzner 9y ago
  The front page has a link directly to the F# website: http://fsharp.org/ http://fsharp.org/, which has a bunch of resources to learn the language.
forresttrump 9y ago
Aren't languages described as 'functional' a little too often...
- wtetzner 9y ago
  They frequently are, but F# definitely falls into the functional category, unless you only consider pure functional languages like Haskell.
- Can_Not 9y ago
  Just as often as they are "No true Scotsman"'d.
zaaack 9y ago
I have been watching and trying Fable for two months after I wrote a demo in ReasonML/BuckleScript, because I need a full-stack language for my side projects and Fable is much complete and stable, and the backend story is also much better than OCaml or BS bindings for Nodejs.
- zaaack 9y ago
  Here are some real-world examples: A Server-Client full-stack scaffold: https://github.com/SAFE-Stack/SAFE-BookStore https://github.com/SAFE-Stack/SAFE-BookStore A React-Native scaffold: https://github.com/SAFE-Stack/SAFE-Nightwatch https://github.com/SAFE-Stack/SAFE-Nightwatch
Osiris 9y ago
Can anyone point to a resource for learning F# from scratch? I have tried a few tutorials but the syntax is so foreign to me that I've found it hard to grasp. What would be awesome with a project like Fable would be to have a tutorial for existing JavaScript devs to learn F#. For example, have JavaScript and F# code side-by-side.
- TheWiseOne 9y ago
  Try this course from FSharpTV: https://fsharp.tv/courses/fsharp-programming-intro/ https://fsharp.tv/courses/fsharp-programming-intro/. They have a lot of other content too but this is the introductory course that's aimed towards beginners. It might be helpful. And try the https://fsharpforfunandprofit.com/ https://fsharpforfunandprofit.com/ site too.

155 points by galfarragem 9y ago

The first thing I worry about reading something like this is how leaky the abstraction will be. I would love to ditch JavaScript for pretty much anything else but if I need to think about the JavaScript part anyway because of certain things that I can or cannot do I prefer to think in JavaScript from the get go.

tpetricek 9y ago
This is a tricky one. If the abstractions were not leaky, you would not be able to interoperate with JavaScript libraries and you'd have to reimplement everything that powers the modern JS ecosystem. On the other hand, if the abstractions were too leaky, you'd lose all benefits of a nice language like F#. I think Fable strikes the right balance. There are some leaky aspects of how it compiles to JS, but this means that you can quite well use it with existing JS libraries and for things like parsing JSON (you can just cast JSON object to F# records and it'll work). So, you need to think about something about the JS part when you want to do JavaScript-y things, but you still get plenty of nice help from the F# compiler when writing the logic that the functional-first style makes so much easier. In my experience with Fable, this pragmatic approach is what makes it great.
- microcolonel 9y ago
  > you can just cast JSON object to F# records and it'll work Isn't a "JSON object" just a string?
  - TomMarius 9y ago
    He probably wanted to say "plain JS object", which is denoted in JSON. You can put JSON in a string, but the syntax is called JSON as well.
    - tpetricek 9y ago
      Yes, that's what I meant, thanks :-). The idea is that you can just write `unbox<MyType>(jsonParse("{whatever:42}"))`.
noir_lord 9y ago
This is exactly why I standardised on TypeScript. Their isn't actually much of an abstraction in one direction, valid ES6 is valid TS and the types are inter-operable. Throw in better typing, proper classes, down compiling of async/await to ES3/ES5 (still magic to me) and the ability to progressively port from one to the other (and you can even get a lot of the TS benefits just by annotating your existing JS as a good first step to moving to TS) and for me it was a no-brainer. I don't think TS is a pretty language but it's a fantastic approach to getting from shitty-A to less shitty-B. Pragmatism wins for me as much as I'd love to just write everything client side in something else.
- WaxProlix 9y ago
  I have to agree, the pragmatic and thoughtful approach that the TS team has brought to the language makes it reasonable to write in and easy enough to reason about at any given time. Plus, being a superset means that if you want to 'drop into' JS to take advantage of some quirk or whatever at any time, you can just disable your linter and do the deed. Coming from a C# and Python fan, TS hits the mark pretty solidly on all levels.
  - BigJono 9y ago
    > Plus, being a superset means that if you want to 'drop into' JS to take advantage of some quirk or whatever at any time, you can just disable your linter and do the deed. This is an exact example of what GP was talking about with leaky abstractions though. You don't have to just learn TS to use TS, you need to learn TS and JS. IMO a proper, strict typed language; and plain Javascript; are both much better options than TS.
    - Osiris 9y ago
      > You don't have to just learn TS to use TS, you need to learn TS and JS. I don't understand this. TypeScript is not a different language. It's just JavaScript with some type annotations. If you had never used JavaScript before and learned TypeScript you could immediately write plain JavaScript as well.
jackmott 9y ago
I haven't used it myself but the Ionide plugin for VSCode, which creates a full featured IDE experience for F#, is done in F# transpiled to javascript. The maintainers seems to enjoy it.
nerdponx 9y ago
People seem to love BuckleScript, so it must be possible to do this kind of thing right.

genzoman 9y ago

great! now we just need more than two people that know f#. i keed...kinda ;)

k__ 9y ago
some people said in the Reason3 update article that F# is better suited for JS devs than OCaml.
- genzoman 9y ago
  i saw somewhere an article mentioning "why don't more people write f#" (mebbe it was on h/n)? I have never had to really worry about concurrency and if you've got a good familiarity with C#, you're halfway there to being a very productive in TypeScript, so I don't see exactly where F# fits in, considering the best parts of C# are its functional bits.
  - tpetricek 9y ago
    The fact that the best parts of C# are its few functional bits might be a good hint that if you had a language that was designed around those good bits, it would be so much better ;-). I don't expect to convince anyone in a HN discussion, because that's not how arguments about programming languages work, but have a look at testimonials (http://fsharp.org/testimonials http://fsharp.org/testimonials). You'll see that many people who started using F#, are very happy with it because it lets them solve problems faster with fewer bugs and they enjoy it more.
  - mcintyre1994 9y ago
    You might find this an interesting read about C#/F#: https://fsharpforfunandprofit.com/posts/is-your-language-unreasonable/ https://fsharpforfunandprofit.com/posts/is-your-language-unr...
- delhanty 9y ago
  Here's a link to that thread: https://news.ycombinator.com/item?id=15574409 https://news.ycombinator.com/item?id=15574409

dominotw 9y ago

> export { _ as $2665$ }; Why significance does that have in javascript? http://fable.io/repl/ http://fable.io/repl/

CapacitorSet 9y ago
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
steego 9y ago
It's exporting the function with the name unicode name "(heart character here)" let (heart) x y = x + " loves " + y EDIT: I guess Hacker News doesn't support unicode characters. (Not a bad thing)

igouy 9y ago

also FunScript "F# to JavaScript with type providers" http://funscript.info/ http://funscript.info/

tpetricek 9y ago
Fable pretty much replaced FunScript - all the activity around F# to JavaScript translation moved from FunScript to Fable nowadays!
- igouy 9y ago
  Thanks!
- igouy 9y ago
  What's the licensing? "you only pay for what you get"

JasonSage 9y ago

Why not show a code sample on the homepage? None of Home, Docs, or Samples have a single code snippet on the entire page, you have to click through. Crystal and Rust are good examples of language homepages that give you an idea of what you're getting into up front. Or for a transpiled language, PureScript.

vertex-four 9y ago
Fable is a compiler and runtime for a language that already very much exists, and has its own documentation and landing page. F# isn't a new thing.
- kristiandupont 9y ago
  Sure, but I would still like to see how I would use this in the context of a browser. How do I interact with existing JS libraries? How would I use it with React or something else? How would I even call window.alert()?
  - piaste 9y ago
    For React, install the appropriate library[1] and then call the functions you need from the Fable.Helpers.React.* namespace. If you want to see a complete implementation of Fable + React in action, the canonical example is https://github.com/SAFE-Stack/SAFE-BookStore https://github.com/SAFE-Stack/SAFE-BookStore For alert(), you'll find it in Fable.Import.Browser.window.alert() (In case you're wondering, the Fable convention is that the Fable.Import.* namespace is used for pure JS bindings with no business code, while libraries with an actual translation layer are placed in the Fable.Helpers.* namespace.) [1] https://www.nuget.org/packages/Fable.React/ https://www.nuget.org/packages/Fable.React/
wtetzner 9y ago
The front page has a link directly to the F# website: http://fsharp.org/ http://fsharp.org/, which has a bunch of resources to learn the language.

forresttrump 9y ago

Aren't languages described as 'functional' a little too often...

wtetzner 9y ago
They frequently are, but F# definitely falls into the functional category, unless you only consider pure functional languages like Haskell.
Can_Not 9y ago
Just as often as they are "No true Scotsman"'d.

zaaack 9y ago

I have been watching and trying Fable for two months after I wrote a demo in ReasonML/BuckleScript, because I need a full-stack language for my side projects and Fable is much complete and stable, and the backend story is also much better than OCaml or BS bindings for Nodejs.

zaaack 9y ago
Here are some real-world examples: A Server-Client full-stack scaffold: https://github.com/SAFE-Stack/SAFE-BookStore https://github.com/SAFE-Stack/SAFE-BookStore A React-Native scaffold: https://github.com/SAFE-Stack/SAFE-Nightwatch https://github.com/SAFE-Stack/SAFE-Nightwatch

Osiris 9y ago

Can anyone point to a resource for learning F# from scratch? I have tried a few tutorials but the syntax is so foreign to me that I've found it hard to grasp. What would be awesome with a project like Fable would be to have a tutorial for existing JavaScript devs to learn F#. For example, have JavaScript and F# code side-by-side.

TheWiseOne 9y ago
Try this course from FSharpTV: https://fsharp.tv/courses/fsharp-programming-intro/ https://fsharp.tv/courses/fsharp-programming-intro/. They have a lot of other content too but this is the introductory course that's aimed towards beginners. It might be helpful. And try the https://fsharpforfunandprofit.com/ https://fsharpforfunandprofit.com/ site too.