Ultra-efficient, scalable web and mobile app development

The world's most versatile web framework - develop enterprise-grade apps in stunning brevity

Download now! Learn more

Want to code online? Continue to CloudSharper!

Notebook PC Tablet

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

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...

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

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

Latest News and Events


March 17, 2014. Added new pages for the Sencha Touch, Sencha Architect, and the Sencha Ext JS extensions.

March 17, 2014. Added a new page that highlights various WebSharper extensions.

March 17, 2014. Added a handful of community-built WebSharper applications to the home page.