Monday July 11th 2016

Edition 006

Fable, the compiler that emits JS you can be proud of!


by Alfonso Garcia-Caro


I love F#. More than anything I love the compiler and the editing tools.
I feel safer when I can count on the compiler to continuously check my
code (without forcing to type more than necessary) and on the type system
to guide me through the right path. It’s almost like pair-programming without
having to hear things like “Told ya so”!

I also love JavaScript. More than anything I love the incredible ecosystem
the community has managed to create. There are amazing tools for real-time
development out there and JavaScript runs everywhere now: Web, Desktop, Mobile,
IoT devices and even satellites!

Since I started programming in F#, I’ve been trying to bring together the two worlds.
There are great options available to compile F# to JS like FunScript, which powers
Ionide (but it’s not actively maintained), and WebSharper, the best choice when you
need a full Web framework and advanced features like interaction with C#, but they
didn’t completely meet my needs. Because of this and taking advantage of recent
developments in the F# and JS ecosystem, I created Fable: “yet” another compiler to JS.


What makes Fable different? It’s a lightweight tool which won’t try much more than compiling your F# code to JS, but with a philosophy similar to TypeScript. That is, staying as close as possible to JS and generate idiomatic code, to take full advantage of the great JS development tools available.

Fable is a very young project but so far has had a great reception in the community. I was recently in the F# Technology Creators Workshop in Cambridge and left with wonderful contributions: Phil Trelford added really funny games as examples, Tomas Petricek created a incredibly beautiful website, Krzysztof is helping me port Ionide to Fable and is contributing to Fable’s core too and the guys from helped make an introductory video.


Because Fable integrates F# with the JS ecosystem right from the development phase, you need to know a bit about modern JS development workflows in order to unlease its full potential. Krzysztof has written a very detailed guide to start development with F#, Fable and Webpack. Webpack brings web application development to a new level: it can automagically load your changes without refreshing the page and allow live editing without losing the state of your app. And thanks to tools like Github Electron or React Native, this experience can be extended to Desktop and Mobile development. Fable brings the power of F# to the JS realm without forcing you to trade off any of these wonderful tools.

How does Fable do this? By standing on giant’s shoulders. Fable reads the Abstract Syntax Tree (AST) parsed by the F# Compiler and, after some transformations, passes it to Babel. Babel is a tool originallly designed to convert the new Ecmascript 2015 features (classes, modules…) to ES5-compliant JavaScript code but it’s grown to do much more than that. Thanks to Babel, Fable can delegate a lot of the work and having different compiling targets (amd, commonjs, es2015…) is as easy as swapping some Babel plugins in the build chain.


So, what are you waiting for? If you love F# but were a bit jelaous of the dynamic tools JavaScript developers had to create beautiful applications, now you can have the best of the two worlds. Check the website and be sure to share with the world the fantastic app you’re about to create!

Check out the F# TV video page for Alfonso’s Fable quick start guide.

Share This Article:

Would you like to learn more?? Check out all F# courses here!

The F# Gazette

Relax and enjoy a curated selection of the best F# content straight to your inbox.

  • F# news round-up
  • Interviews with industry professionals
  • Guest articles from F# experts
  • Latest F# jobs
  • F# tools, tips, tutorials and more.