fable-the-what-why-and-how

WHO IS MAKING THIS PRESENTATION?

Alfonso Garcia-Caro

• Degree in Linguistics
• Lived in Japan, Germany (back in Spain now)
• 5 years .NET experience
• 2 years F# and JS experience
• Developed desktop, mobile and web apps for videogame, green energy and education industries

Working at toggl.com, the insanely simple time tracking app

Give it a try!

WHAT IS FABLE?

• F# to JS compiler
• Source maps
• Plugin system
• Framework agnostic
• Batteries charged: F# core library and some .NET BCL

NOT AND AD-HOC LANGUAGE

• F# is a general purpose language mainly targeting .NET
• Not crafted specifically to compile to JS, like Dart, TypeScript or Elm
• Allows you to reuse your knowledge: semantics, tooling and APIs

BUT BEHAVES LIKE ONE

• No runtime
• Compiles to clean JS code
• Great interoperability with JS libraries
• Adheres to standard practices and workflows
• Compatible with JS developments tools: Babel, npm, WebPack

WHY FABLE?

JavaScript is evolving at rapid pace, do we need a new language?

ES2015 adds many great features and JS development tools keep getting better and better

F# brings this and a couple more features...

• REPL
• Intellisense
• Type inference
• Custom operators
• Whitespace indentation (optional)
• Expression based programming
• Pattern Matching
• Active Patterns
• Immutable by default
• Partial application / Pipelines
• Functional core library (LINQ on steroids!)

• Observables
• String formatting
• Structural comparison
• List, array and iterable comprehensions
• Generics, unions, records and tuples
• Type aliases
• DSL embedded in the language
• Typed-stateless Async programming

• OOP: Inheritance, interfaces, abstract classes
• Custom computation expressions
• Overloading, type extensions
• Type providers (coming to Fable)
• Units of measure
• Circular dependency restriction
• Compiler directives
• An excuse for being condescendant with non-functional programming
• Don Syme retweeting you!

And the killer feature...

LEFT PADDING OUT OF THE BOX!

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 

// Explicit
"3.14".PadLeft(10)                    // "      3.14"
"3.14".PadRight(10)                   // "3.14      "
"22".PadLeft(10, '0')                 // "0000000022"

// With .NET string formatting
String.Format("{0,10:F1}", 3.14)      // "       3.1"
String.Format("{0,-10:F1}", 3.14)     // "3.1       "

// With F# typed string formatting
sprintf "%10.1f" 3.14                 // "       3.1"
sprintf "%-10.1f" 3.14                // "3.1       "
sprintf "%+010i" 22                   // "+000000022"

HOW DOES FABLE WORK?

This is what a day in the life of a compiler looks like:

As Fable works with known languages it can take advantage of existing tools.

F# compiler, like Roslyn, can be used as a service: we completed the first step for free!

Unfortunately JS is not a compiled language

...or is it?

Enter Babel

Babel generates an AST from ES2015 code, applies transformations with a pluggable system and generates ES5 JavaScript code.

Fable builds a bridge between F# and Babel AST delegating the reponsibility of code parsing and generation.

Fable adds its own AST for internal operations:

• Optimizations
• Call replacement
• Plugin system

HOW CAN I USE FABLE?

Fable can be downloaded from npm

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

mkdir temp
cd temp
npm init --yes
npm install -g fable-compiler
npm install --save fable-core
echo "printfn \"Hello World\"" > hello.fsx
fable hello.fsx
node hello.js

Compiler options

Tailor compilation to your needs:

fableconfig.json

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 

{
    "module": "commonjs",
    "outDir": "out",
    "sourceMaps": true,
    "projFile": "src/Fable.Samples.React.fsproj",
    "babelPlugins": ["transform-runtime"],
    "scripts": {
        "prebuild": "npm install",
        "postbuild": "node node_modules/webpack/bin/webpack"
    },
    "targets": {
        "debug": {
            "watch": true,
            "symbols": ["DEBUG"],
            "scripts": {
                "postbuild": "node out/server"
            }
        }
    }
}

DEMO

Console application

https://github.com/fsprojects/Fable/blob/master/samples/node/console/index.fs

TESTING

NUnit or Visual Studio tests can be compiled to JS too

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 

#r "../../../packages/NUnit/lib/nunit.framework.dll"
#load "util/util.fs"

open NUnit.Framework

[<Test>]
let ``Util.reverse works``() =
    let res = Util.reverse "yllihP"
    Assert.AreEqual("Philly", res)

Compile the tests using NUnit plugin and run them with Mocha

1: 
2: 
3: 
4: 
5: 

fable samples/node/console/tests.fsx -m commonjs
    --outDir out --plugins build/plugins/Fable.Plugins.NUnit.dll

node build/tests/node_modules/mocha/bin/mocha
    samples/node/console/out/tests.js

INTERACTING WITH JS

We don't want to just intrude the JS ecosytem, we want to take advantage of its full potential.

Because .NET community is great

F# community is fantastic

JS community is...

HUGE

...and amazing too :)

DYNAMIC PROGRAMMING WITH FABLE

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

open Fable.Core

printfn "Value: %O" jsObj?myProp    // Property access

jsObj?myProp <- 5                   // Assignment

let x = jsObj?myMethod $ (1, 2)     // Application

let y = createNew jsCons (1, 2)     // Apply `new` keyword

let data =                          // JS literal object
    createObj [
        "todos" ==> Storage.fetch()
        "newTodo" ==> ""
        "editedTodo" ==> None
        "visibility" ==> "all"
    ]

JS MACROS

Use Emit attribute to emit JS code directly

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 

open Fable.Core

[<Emit("$0 + $1")>]
let add (x: int) (y: string): float = failwith "JS only"

type Test() =
    // Rest arguments
    [<Emit("$0($1...)")>]
    member __.Invoke([<ParamArray>] args: int[]): obj =
        failwith "JS only"

    // Syntax conditioned to optional parameter
    [<Emit("$0[$1]{{=$2}}")>]
    member __.Item
        with get(): float = failwith "JS only"
        and set(v: float): unit = failwith "JS only"

FOREIGN INTERFACES

Define foreign interfaces easily to get the benefits of static checking and Intellisense

1: 
2: 
3: 
4: 
5: 
6: 
7: 

[<Import("*","string_decoder")>]
module string_decoder =
    type NodeStringDecoder =
        abstract write: buffer: Buffer -> strings
        abstract detectIncompleteChar: buffer: Buffer -> float

    let StringDecoder: NodeStringDecoder = failwith "JS only"

Use Import attribute to import external JS modules in ES2015 fashion

• Native JS, Browser and Node interfaces are included in fable-core
• More definitions can be found in npm: fable-import-xxx
• A TypeScript parser (still in development) is also available: ts2fable

DEMO

Node static server

https://github.com/fsprojects/Fable/blob/master/samples/node/server/index.fsx

DEMO

Debugging a node express server with VS Code

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

{
    "name": "Launch Node",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/samples/node/express/index.fsx",
    "outDir": "${workspaceRoot}/samples/node/express/out",
    "sourceMaps": true,
}

DEMO

Front end applications with JS frameworks: Vue, React

https://github.com/fsprojects/Fable/tree/master/samples/browser/todomvc

https://github.com/fsprojects/Fable/tree/master/samples/browser/react