How would it sound to be able to write front-end apps for the Web in  functional style and with type safety? Enter Fable, a F# to Javascript compiler with both those in mind. Fable transpiles F# to ES2015 JavaScript so code written in F# can run anywhere JavaScript runs - the browser, Node.js, Electron,React Native or generally V8.

Yes of course with Typescript you can have type safety when transpiling to Javascript and since Fable does the same for F#, in terms of performance they should be equivalent. The difference is in the language itself. Although F# is a multi-paradigm language, it's big advantage is its concise syntax which renders it much easier to read and comprehend, and its default properties of immutability, rich types which let you easily represent your data or your domain and powerful pattern matching abilities for defining complex behaviors.

If you come from an imperative paradigm going functional, F# is also much easier to pick up than the purely functional Haskell. Additionally Fable has access to some of the .NET Base Class Libraries and most of the FSharp.Core ones in comparison to Haskell's sole native libraries equivalent. (To learn about Haskell, check the excellent "Free Course On Functional Programming in Haskell" by Professor Graham Hutton from the University of Nottingham). It's not in Fable's interest to support all of the base class library; it uses the part that makes sense under the assumption that the transpiled code will run inside a JavaScript runtime, and most of the BCL wouldn't be usable in that context.

Apart from summoning the power of the .NET BCL and FSharp.Core, Fable also interoperates and integrates with JavaScript APIs and libraries too. Some F#/.NET types have counterparts in JS. Fable takes advantage of this to compile to native types that are more performant and reduce bundle size. The most important common types are:

• Strings and Booleans, which behave the same in F# and JS.  
  
  
• Chars, which are compiled as JS strings of length 1. This is mainly because string indexing in JS gives you another string. But you can use a char as a number with an explicit conversion.
  
  
• All numeric types, which become JS number (64-bit floating type), except for int64, uint64, bigint and decimal.
  
  
• Arrays (and ResizeArray), which compile to JS arrays. Numeric arrays compile to Typed Arrays in most situations, though this shouldn't make a difference for most common operations like indexing, iterating or mapping. You can disable this behavior with the typedArrays option.
  
  
• Any IEnumerable (or seq), which can be traversed in JS as if it were an Iterable.
  
  
• DateTime, compiles to JS Date.
  
  
• Regex, compiles to JS RegExp.
  
  
• Mutable dictionaries (not F# maps) compile to ES2015 Map.
  
  
• Mutable hashsets (not F# sets) compile to ES2015 Set.
  
  
• Most of F# OOP features, which are compatible with Fable: interfaces and abstract classes, structs, inheritance, overloading, etc. However, due to some limitations of ES2015 classes the generated code uses the prototype chain instead.

Tooling wise, you're still on Javascript since, despite Fable bringing a lot of familiarity for F# and .NET developers, the target runtime is still JavaScript and this difference impacts several important areas:

• Your web UI dependencies will be NPM dependencies, not .NET dependencies.
  
  
• Your build tools will include web app development tools (e.g. webpack).
  
  
• In most cases, building and running a Fable project only requires calling npm install and npm start.

Coding wise, with Fable you can for instance write Promises by either the Pipeline API or using F#'s built-in computation expressions, resulting in code like this:

There are already very useful libraries, extensions and tools for Fable such as the Feliz library which fully supports the React API so that it can be used to build React applications that should feel very familiar to those who already know React, by mapping the concepts one-to-one from React and Javascript over to F# .

Fable.Lit is a comprehensive suite of tools to write Fable apps by embedding HTML into your F# code with the power of Google's Lit.

Hawaii-A dotnet CLI tool to generate type-safe F# and Fable clients from OpenAPI/Swagger/OData services.

Fable.Formatting.Markdown-A port of FSharp.Formatting.Markdown for Fable. This will allow you to format markdown into HTML inside your Fable application.

Fable Simple PWA-when you want to build a Progressive Web application using Fable. 

More resources here

Finally and excitingly,down the road there are plans for Fable to target Python and, even further ahead, PHP Rust and Lua!

More Information

Fable

Related Articles

Free Course On Functional Programming in Haskell

Functional Programming Patterns With RamdaJS 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info