CloudSharper Local alpha available Core team

We are excited to announce the first release of CloudSharper Local, a spin-off of CloudSharper that uses your local machine to serve the main CloudSharper front-end. CloudSharper is an awesome new way to work with F# on the web. It enables you to use F# to easily connect to various data sources and visualize data from those data sources in rich HTML5 charts and diagrams. You can also develop HTML5 games, web and mobile applications in pure F# code, and you will feel more productive than ever. CloudSharper comes with a set of project templates to easily get you started and gives you full-fledged interactive web programming capabilities to test on the fly and in small before you deploy your larger applications.

CloudSharper Local is the first in the line of CloudSharper releases. It addresses the most immediate needs of keeping your sensitive project files on your local machine and providing you with a highly customizable and extensible local development server. We'll be blogging more about the various capabilities this local server can provide and how you can further enhance it and better tailor it to your needs, but even in its basic form it can act as a file, web, and coding server, supporting all functions of the current CloudSharper front-end.

You can get started by registering your new CloudSharper account on the Home page, and downloading and starting the local server component as you log in. To dip your toes in the water, create a new empty workspace, add a new project to it from the various templates available, and hit Build (Ctrl+B). The first build might take a little while as it needs to download several Nuget packages to complete, but once your sample app is built you can test it against your running local server by choosing Deploy locally... (Ctrl+D) from the Workspace menu.

Here is a screenshot of a new workspace with the jQuery Mobile project template compiled and running, literally one minute after registering a new CloudSharper account:



And F# type checking and code completion in action within the same project:



You can add new files easily and extend your project in any direction:



Happy coding and stay tuned for more awesome enhancements!

WebSharper 2.5.93 - improved numeric performance Core team

We are happy to announce the availability of the most recent WebSharper update, version 2.5.93, released on Feb 4, 2014. This release brings a new and improved optimizer for the Core language that is used as an intermediate form during compilation to JavaScript. The optimizer is able to eliminate more JavaScript expressions, generates more readable code, and improves JavaScript performance of numeric code (such as code using for loops heavily) by 30-50%.
The release also fixes a number of bugs related to code generation and extension templates.

Bugs fixed in this release: 209, 210, 212, 213

Happy coding!

WebSharper 2.5 Release Notes Core team

We are happy to announce the general availability of WebSharper 2.5, and the corresponding new WebSharper site that has gone through a major facelift. I plan to blog about the major individual features in detail as separate blog entries, until then, here is a short list of the main changes.

Switched to NuGet

You can now grab WebSharper or WebSharper extensions directly from NuGet, on demand when your project needs them. This gives a simple distribution and upgrade model for the compiler and extensions, however, we recommend that you install WebSharper itself through the Visual Studio .VSIX extension to benefit from the various WebSharper templates.

If you have any installed legacy (2.4 or older) WebSharper binaries and you no longer wish to use them in your legacy projects, this would be a good time to uninstall those.

Upgraded to F# 3.0

For WebSharper 2.5, we decided to move to F# 3.0 to better benefit from the new language features. F# 3.1 support is coming. By default, you will also need .NET 4.5 installed, as this is the new target framework for WebSharper 2.5. Those who wish to use WebSharper 2.5 on .NET 4.0 can use the new branch created for that. See #185 for details.

Support for VS 2012 Express and VS 2013

WebSharper 2.5 now works with the full Visual Studio 2012 suite, including the free Express For Web edition. It also works with Visual Studio 2013.

Support for Web.API and OWIN

WebSharper 2.5 now supports running WebSharper sitelets via Web.API, allowing to host sitelets standalone in a variety of web containers via OWIN or integrate them with latest ASP.NET MVC and Web.API projects (via the separate websharper.webapi project).

Support for pure-F# web projects without template indirection

WebSharper 2.4 sitelets required a C# host web application. WebSharper 2.5 removes the need for these host projects and supports pure F# web projects with sitelets embedded.

More open sourced components

We have open sourced WebSharper Mobile, the component that supplies packaging and Visual Studio templates for Android and Windows Phone; and several key extensions (Bing Maps, Google Maps, Google Visualization, WebGL, Google O3D, GlMatrix, jQuery UI, jQuery Mobile).

New extensions

We have released two new extensions (D3, and HighCharts), and have several upcoming ones in the pipeline for HTML5 games, mobile application development, and charting and visualization.

Introducing Piglets

Pluggable Interactive GUIlets - Piglets - are an improved formalism similar to formlets, that provides for better UI and logic separation. We have published the first results of this new formalism in our upcoming IFL 2013 paper.

Experimental: Bundling support

WebSharper can now merge all offline dependencies into a single bundle file, making it easier to package Single Page Applications and offline sitelets, and manage optional and on-demand loading of resources. To use bundling you can supply an additional command line argument (bundle) to websharper.exe, or simply use the new Visual Studio project template (Website Bundle) that we added to the VSIX installer. This is an experimental feature, see #128 for details.

TypeScript support for generated JS code descriptors

WebSharper now outputs .d.ts files for each generated JavaScript file, making it easier to interface with those files from TypeScript. This is an experimental feature, see ticket #144 for details.

TypeScript type provider for TypeScript 0.9.x

We have work underway to augment WebSharper 2.5 with a new TypeScript type provider that can read TypeScript declarations and create WebSharper extensions out of them on the fly. This component is released separately and its availability will be announced shortly.

WebGL

We moved the WebGL bindings to the main WebSharper repository, so you can now develop WebGL-based mobile and web applications without an extension. See ticket #159 for details.

A ton of smaller enhancements and fixes

Bug fixes and extended proxy support for .NET methods: #70, #71, #72, #73, #74, #75, #77, #78, #79, #80, #83, #86, #87, #90, #91, #92, #93, #96, #101, #107, #109, #110, #111, #112, #114, #117, #118, #123, #125, #126, #133, #134, #136, #139, #145, #148, #152, #153, #154, #156, #158, #160, #161, #162, #163, #164, #165, #166, #169, #170, #172, #176, #177, #178, #180, #182, #183, #184, #186, #187. This includes support for for/while syntax in async workflows, array and string slicing (#136), better DateTime and TimeSpan support (#134), improved compilation strategies for sequence operations (#145) and mutable variables (#148)

Happy coding!

WebSharper vs FunScript Core team

Got asked to compare WebSharper to TypeScript on StackOverflow, doing it here instead. Disclaimer: I work for IntelliFactory and in fact develop WebSharper, so I am obviously biased. Good things to say about FunScript: seems to be entirely unrestricted (I could not even locate a license file) has some very talented people hacking on it (but not as the day job) has this wonderful idea of using TypeScript definition files to provide typed API for JavaScript libraries (however, at this moment it[...]
>> Read the full article on t0yv0.blogspot.com

jQuery Mobile page reuse with Websharper Core team

I have been reworking an older WebSharper jQuery Mobile app which used one sitelet (compiled to HTML file) for each JQM page. I decided to use another approach: a single-page application with JQM pages generated lazily and reused if needed. JQM has a sample which that gives an example of page reuse, so I implemented it with WebSharper. The resulting framework is easy to expand and manage.



First some helper functions for building page content:

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
namespace Sample

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.JQuery
open IntelliFactory.WebSharper.JQuery.Mobile
open IntelliFactory.WebSharper.Html

[<JavaScript>]
module App =
    let mobile = Mobile.Instance

    let HeaderDiv cont =
        Div [ HTML5.Attr.Data "role" "header" ] -< cont

    let ContentDiv cont =
        Div [ HTML5.Attr.Data "role" "content" ] -< cont

    let PageDiv id' cont =
        Div [
            HTML5.Attr.Data "role" "page"
            Id id'
        ] -< cont |>! OnAfterRender (fun el ->
            JQuery.Of el.Body |> Mobile.Page.Init
        ) 

    let ListViewUL cont =
        UL [
            HTML5.Attr.Data "role" "listview"
            HTML5.Attr.Data "inset" "true"
        ] -< cont   

Then the sample data, now stored locally, but it could be modified easily to make a web request for example using WebSharper's automatic RPC implementation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//module App continued
    type CategoryData =
        {
            Name        : string
            Description : string
            Items       : string list
        }

    let getCategoryData category =
        match category with
        | "animals" -> Some { 
                Name = "Animals"
                Description = "All your favorites from aardvarks to zebras."
                Items = [ "Pets"; "Farm Animals"; "Wild Animals" ] }
        | "colors" -> Some { 
                Name = "Colors"
                Description = "Fresh colors from the magic rainbow."
                Items = [ "Blue"; "Green"; "Orange"; "Purple"; "Red"; "Yellow"; "Violet" ] }
        | "vehicles" -> Some { 
                Name = "Vehicles"
                Description = "Everything from cars to planes."
                Items = [ "Cars"; "Planes"; "Construction" ] }
        | _ -> None

Now, lets define the pages. A simple record can contain the DOM element of the page, and a function that should be run on page load (first use and reuse too). It returns a bool deciding if we should proceed with the page change or cancel it.

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
//module App continued
    type JQMPage =
        {
            Html: Element
            Load: unit -> bool
        }

    // Page Ids
    module Ids =
        let [<Literal>] HomePage  = "home"
        let [<Literal>] ItemsPage = "items"
    module Refs =
        let [<Literal>] HomePage  = "#home"
        let [<Literal>] ItemsPage = "#items"

    // State
    let mutable selectedCategory = None

    let HomePage =
        let createListItem category text =
            LI [
                A [ HRef ""; Text text ]
                |>! OnClick (fun _ _ ->
                    selectedCategory <- Some category    
                    Refs.ItemsPage |> mobile.ChangePage
                )
            ] 
        {
            Html =
                PageDiv Ids.HomePage [
                    HeaderDiv [ H1 [ Text "Categories" ] ]
                    ContentDiv [
                        H2 [ Text "Select a Category Below:" ]
                        ListViewUL [
                            createListItem "animals"  "Animals"
                            createListItem "colors"   "Colors"
                            createListItem "vehicles" "Vehicles"
                        ]
                    ]
                ] 
            Load = fun() -> true
        }

    let ItemsPage =
        lazy
        let title = H1 []
        let description = P []
        let itemsList = ListViewUL []
        {
            Html =
                PageDiv Ids.ItemsPage [
                    HTML5.Attr.Data "add-back-btn" "true" ] -< [
                    HeaderDiv [ title ]
                    ContentDiv [
                        description 
                        ListViewUL [ itemsList ]
                    ]
                ]
            Load = fun() ->
                match getCategoryData selectedCategory.Value with
                | Some categoryData ->
                    title.Text <- categoryData.Name
                    description.Text <- categoryData.Description
                    itemsList.Clear()
                    categoryData.Items |> List.iter (fun i -> (LI [Text i]) |> itemsList.Append)
                    JQuery.Of itemsList.Body |> Mobile.ListView.Refresh
                    true
                | None -> false
        }
        
    let getJQMPage pageRef =
        match pageRef with
        | Refs.HomePage  -> Some HomePage
        | Refs.ItemsPage -> Some ItemsPage.Value
        | _ -> None

Any pages can be initialized lazily, so the app loads as fast as possible. We will want to load the #home page when the application starts, so there it is not needed. The helper function getJQMPage matches the inner page hash URLs to the JQMPage records we defined.

Finally we have to define a Web.Control which handles the creating of pages on page change requests and loads the #home page initially. The event handler for PageBeforeChange checks if the DOM node for the required page has been inserted already and initializes it if it has'nt been. If Load() would return false we cancel the page change.

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
type AppControl() =
    inherit Web.Control()

    [<JavaScript>]
    override this.Body =
        Mobile.Events.PageBeforeChange.On(JQuery.Of Dom.Document.Current, fun (e, data) ->
            match data.ToPage with
            | :? string as pageUrl -> 
                match App.getJQMPage pageUrl with
                | Some pageObj ->
                    let body = JQuery.Of "body"                  
                    let toPage =
                        match body.Children pageUrl with
                        | p when p.Length = 0 ->
                            let page = pageObj.Html
                            body.Append page.Body |> ignore
                            (page :> IPagelet).Render()
                            JQuery.Of page.Body
                        | p -> p
                    if not (pageObj.Load()) then e.PreventDefault()
                | None _ -> ()
            | _ -> ()
        )
        upcast Div [] |>! OnAfterRender (fun _ -> App.Refs.HomePage |> App.mobile.ChangePage)

WebSharper allows for an easy composition of dynamically created pages which can make creating mobile apps a quick and fun process.

WebSharper, PhoneGap, and Ripple: easier native HTML5 apps Core team

We are experimenting with PhoneGap, PhoneGap Build, Ripple emulator and WebSharper. If successful, this will let you write truly cross-platform native mobile apps in F#, quickly pre-testing them in Chrome, and then generating various installers (Android, Windows, iOS - yes, iOS!) without even having to install the SDK. Current mobile HTML 5 application story is this: either you create a mobile-friendly website and have users navigate to it, or you wrap your HTML 5 app into a native app - th[...]
>> Read the full article on t0yv0.blogspot.com

TypeScript: initial impressions Core team

There are several things under the TypeScript umbrella: a type system, language spec, JavaScript-targeting compiler and tooling that provides interactive code completion. I have tried TypeScript on a few small projects, the latest one being TypedPhoneGap. I also worked extensively with the language spec, wrote a parser and analyzer for the `.d.ts` contract specification fragment, pondered the semantics, and engaged in little flamewars on the language forum. My conclusion, in short, is this: the[...]
>> Read the full article on t0yv0.blogspot.com

WebSharper: From F# power features to JavaScript interop Core team

I recently gave a talk at MLOC-JS about binding JavaScript libraries for use in WebSharper. Several people reported that the video posted was hard to navigate, clicking on the timeline caused the audio and the video go out of sync. Thanks to the helpful folks at Ustream, this problem was quickly fixed and the updated video from the talk is available at (same place as before):

WebSharper: From F# power features to JavaScript interop (includes a sneak preview of CloudSharper!)

Enjoy!

Automate, automate, automate.. Core team

Latest snapshot of the WebSharper repositories (Bitbucket and at GitHub) showcases some build automation I finally managed to get working. It starts from MSBuild that uses NuGet to pull dependencies, including build dependencies, and then jumps to FAKE - using the alpha pre-release FAKE version has solved some F# version problems I faced earlier. It builds a lot of code, creates an output NuGet package, and also creates several Visual Studio templates that it packages up into a VSIX extensibil[...]
>> Read the full article on t0yv0.blogspot.com

WebSharper for Windows 8 Desktop Core team

In addition to increasingly popular web applications, HTML and JavaScript-based applications have also made an appearance on the desktop with Windows 8. The WinJS API allows the creation of full-blown Windows 8 desktop applications combining the rich built-in features of Windows 8 and the tremendous capabilities of existing JavaScript libraries.

And of course, where HTML and JavaScript run, so does WebSharper :) We are therefore happy to announce the upcoming release of WebSharper for Windows 8 Desktop. This will include full WinJS bindings as well as a set of Visual Studio templates to get you quickly started with the development of desktop applications with WebSharper.

As a preview of the capabilities offered by WebSharper for Windows 8 Desktop, we are releasing a simple yet inclusive application on the Windows Store.



This is a simple function plotting application that demonstrates the combined use of Windows 8 styles and controls and JavaScript goodness.

The above screenshot shows the HTML5 Canvas used to draw the functions, Windows 8-styled titles and buttons, as well as Windows 8 specific controls such as the ListView for the history panel on the right.

The screenshot below features an external JavaScript library, MathJax, which renders mathematical equations using TeX's robust layout algorithm.



We are very much looking forward to putting WebSharper for Windows 8 Desktop in your hands to see what you can do with it!