WebSharper. Powering the richest F# web applications

Ultra-efficient, functional reactive web development
for the most demanding applications.


Download now! Learn more

Want to code online? Continue to CloudSharper!

At a glance

WebSharper builds HTML5 apps with F#, the world's finest programming language.

More

In action

See how quickly you can develop modern web apps, even if this is your first time.

Examples

Deep dive

Explore detailed WebSharper documentation, and build a solid understanding.

Documentation

Why WebSharper?


Safer

Thanks to strong typing, even on the client side.

More productive

Thanks to type inference, seamless client/server communication and powerful abstractions.

More maintainable

No more language interoperation hell, everything is written in F#.


More interoperable

Easily integrate with JavaScript libraries and take advantage of type safety and code completion with them.

More readable

Declare user interfaces, how they interact and how they appear with Formlets and Piglets.

More compatible

Develop on Windows, Linux or Mac and deploy to IIS, Apache, Nginx, Azure, AppHarbor...

Install WebSharper into your favorite IDE


Visual Studio integration
+ project templates

VSIX Installer

Xamarin Studio integration
+ project templates

Instructions

Getting Started with WebSharper



Your first WebSharper application in 2 minutes


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
namespace Bundle1

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.Google.Visualization
open IntelliFactory.WebSharper.Google.Visualization.Base

[<JavaScript>]
module Client =

   let AreaChartData () =
      let data = new Base.DataTable()
      data.addColumn(ColumnType.NumberType, "Year") |> ignore
      data.addColumn(ColumnType.NumberType, "Sales") |> ignore
      data.addColumn(ColumnType.NumberType, "Expenses") |> ignore
      data.addRows(4) |> ignore
      [   [2004; 1000; 400]
          [2005; 1170; 460]
          [2006; 660; 1120]
          [2007; 1030; 540]   ]
      |> List.iteri (fun i yearData ->
          List.iteri (fun j value ->
             data.setValue(i, j, value)
          ) yearData
      )
      data

   let Main =
      Div []
      |>! OnAfterRender (fun container ->
          let visualization = new BarChart(container.Dom)
          let options =
              BarChartOptions(
                 width = 400,
                 height = 240,
                 legend = Legend(position=LegendPosition.Bottom),
                 title = "Company Performance")
          visualization.draw(AreaChartData(), options))
      |> fun el ->
          el.AppendTo "entrypoint"


Your first WebSharper application

Steps

Prerequisites: Nuget 2.7 or newer, Visual Studio 2010 or newer

  1. Install the Visual Studio extensions
  2. Create a new WebSharper Bundle Website project
  3. Add an Nuget reference to WebSharper.Google.Visualization
  4. Open Client.fs and add the code on the left
  5. Add an entry point <div id="entrypoint"></div>
  6. to your index.html in the body tag before the script link
  7. Hit F5 and see your app running

Seamless Asynchronous Communication

Discover the joy of asynchronous programming in F#, making it trivial to write correct, readable and entirely non-blocking code, on both the server and the client.


Work with HTML markup easily

Use the same basic syntax to generate HTML on the server or create DOM nodes dynamically on the client.


Communicate with data of any shape

Want to pass complex data structures between your client and server? Share data types and code between client and server easily to ensure a consistent and reliable communication, and execution - WebSharper takes care of the rest by seamlessly converting to and from JSON.


Client-Server calls

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
type Person = { Name: string; Age: int }

module Server =
    [<Rpc>]
    let {{GetPeople:Rpc:This function is called remotely from the client and executes on the server.}} () =
        async {
            return [|
                { Name = "Alyssa P. Hacker"; Age = 29 }
                { Name = "Louis Reasoner";   Age = 45 } |]
        }

[<JavaScript>]
module Client =
    let ShowPerson p =
        {{TR:Combinators:These HTML-like combinators generate DOM nodes.}} [TD [Text p.Name];TD [Text (string p.Age)]]

    let ShowPeople people =
        Table [
            THead [TR [TH [Text "Name"];TH [Text "Age"]]]
            TBody [ {{for:Comprehensions:Use full power of F# including sequence comprehensions.}} p in people -> ShowPerson p ]
        ]

    let Main () =
        let out = Div []
        Div [
            out; Button [Text "Show People"]
            |>! OnClick (fun _ _ ->
                {{async:Async:Chain asynchronous actions seamlessly.}} {
                    let! people = Server.GetPeople()
                    do out.Clear()
                    return out.Append(ShowPeople people)
                } |> Async.Start)
        ]

Run F# Everywhere

F# is a functional-first programming language helping you tackle any problem with concise and correct code.

Compile F# code to JavaScript/HTML5 applications with WebSharper to leverage the F# advantage everywhere - whether it is client code running on mobile and desktop browsers, backend logic on the web server, or analytics in the datacenter. F# can do it all.


fsharp.org Testimonials Samples

F# and WebSharper in Action


1
2
3
4
5
6
7
type {{Person:Types:Type definitions fit a single line.}} = { Name: string; Age: int }

{{[<JavaScript>]:JavaScript:The entire module is compiled to JavaScript by WebSharper.}}
module Client =

    let DisplayName {{p:Type Inference:The type of p is inferred.}} =
        JavaScript.Alert("Person: " + p.Name)

F# Advantages:


Functional Programming Trends


Go Mobile

  • Reach millions of mobile devices by leveraging future-proof HTML5.

  • Package HTML5 WebSharper apps into native mobile applications for Android, iOS and Windows Phone using WebSharper.Mobile .

  • Extensions available for mobile-friendly libraries, including jQuery Mobile and Sencha Touch.

  • Use the same straightforward client-server communication of WebSharper as in websites.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{ExtCfg:Typed Sencha Touch config objects:Generated automatically from official documentation}}.Container(
    Fullscreen = true,
    Layout = "fit",
    Items = [|
        ExtCfg.TitleBar(
            Docked = "top",
            Title = "Sencha Touch with WebSharper"
        )
        ExtCfg.dataview.List(
            ItemTpl = "{title}",
            Data = [| {{for:Powerful syntax: Use F#'s array expressions and more}} i in 1 .. 10 -> {{New:Construct JS objects:Translates to JavaScript object literal}} ["title", string i] |]
        )
        ExtCfg.Toolbar(
            Docked = "bottom",
            Items = [|
                ExtCfg.Button(
                    Text = "Say hello",
                    Handler = fun() -> Ext.Msg.Alert("", "Hello World!")
                )
            |]
        )
    |] : ExtCfg.Component[]
).Create()

Simple apps in just a few lines of code


Sencha Touch app


Learn More

WebSharper UI.Next - a reactive foundation for your apps



Single Page Applications

Familiar with Angular.JS? Now you can do better!

Reactive DOM

Familiar with React? Construct DOM elements that react to changes.

Observable collections

It has never been easier to bind your models and views together.

Animations

Mobile friendly reactive animations and transitions.

Featured Community Apps



Here we collected an assortment of recent WebSharper applications from various community members. Please understand that live site links might go bad if their authors take them offline, but even then their project sources might serve as an inspiration to others.

FractalDraw

FractalDraw Sources Live site

WebSharper demos

WebSharper demos Sources Live site

Mobile Insurance Claims

Mobile Insurance Claims Sources Live site

MobiDevDay Sample App

MobiDevDay Sources Live site

Who uses WebSharper?




and 45k+ others who downloaded WebSharper