1. itcampro@ itcamp13# Premium conference on Microsoft technologies
Developing for Windows 8
with F# and WebSharper
Adam Granicz, CEO, IntelliFactory
#granicz, #websharper
http://fpish.net/blog/adam.granicz/all/0

2. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHuge thanks to our sponsors!

3. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
3x F# MVP – 2010, 2011, 2012
(Most Valuable Professional)
Coauthor of 4 F# books, 3 of
them with Don Syme, the
designer of F#
CEO of IntelliFactory,
The F# Company
Regular speaker in numerous
conferences and developer
workshops
About me
Steering Committee member
of the Commercial Users of
Functional Programming
(CUFP) workshop,
representing F#

4. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Expert F# - 2007
Expert F# 2.0 – 2010
Visual Studio 2010 and .NET 4 Six-in-One – 2010
Expert F# 3.0 – 2012
F# Books I coauthored

5. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
We see how to do the following:
• Doing web development in F#
• Binding JavaScript libraries for F# use
• Developing a Win 8/Surface application in F#
• Sneak preview of an online development
environment that enables quick exploration
and embedded applications
• .. that makes data visualization easy and fun
In this talk…

6. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Functional core language
Powerful functional abstractions
Functional data structures
Immutability
Cool features
Active patterns
Units of measure
Type Providers
Object-orientation to interoperate with other .NET
languages
Why F#?

7. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Mature, enterprise-ready framework
Write all your server+client code in F#
Get a complete web or mobile application
Interface with any client-side JS library via F#
Powerful functional abstractions
Automatic resource management
Safe URLs, type-safe URLs
and much-much more…
WebSharper

8. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Open source project, available at:
https://bitbucket.org/IntelliFactory/websharper
Dual licensed for closed source use
Dedicated support – new features, bugfix
releases
WebSharper

9. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
open IntelliFactory.WebSharper
module Server =
[<Rpc>]
let MyServerFunction(...) = ...
module Client =
[<JavaScript>]
let MyClientFunction(...) =
...
let v = MyServerFunction(...)
...
Bridging the language mismatch

10. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
WebSharper sitelets
• Type-safe
• Composable
• First-class
Parameterized over a union type:
type Action =
| Home
| Contact
| Protected
| Login of option<Action>
| Logout
| Echo of string
Representing web applications as values

11. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileSitelets – dynamic templating
Runtime-checked, safe URLs
module Skin =
type Page = { Body : Content.HtmlElement list }
let MainTemplate =
let path = Path.Combine(__SOURCE_DIRECTORY__, "Main.html")
Content.Template<Page>(path)
.With("body", fun x -> x.Body)
let WithTemplate body : Content<Action> =
Content.WithTemplate MainTemplate <| fun context ->
{ Body = body context }

12. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Composing web applications from smaller ones
let EntireSite =
let home = Sitelet.Content ...
let authenticated = Sitelet.Protect filter <| ...
let basic = Sitelet.Infer <| fun action -> ...
Sitelet.Sum
[
home
authenticated
basic
]
Representing web applications as values

13. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Describing client-side
APIs in F# via
WebSharper
Interface
Generator (WIG)
Binding JavaScript libraries

14. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
namespace IntelliFactory.WebSharper.Facebook
module Definition =
...
let FB =
Class "FB"
|+> [ ...
"login" => ...
"getLoginStatus" => ...
"api" => ...
]
|> Requires [Res.FacebookAPI]
let Assembly =
Assembly [
Namespace
"IntelliFactory.WebSharper.Facebook" [
...; FB
] ...
]
Binding JavaScript libraries

15. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileBinding JavaScript libraries
Defining classes – useful operators
let FlashHidingArgs =
Class "FB.FlashHidingArgs"
|+> Protocol [
"state" =? T<string>
"elem" =? T<Element>
]
=? : Member

16. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileBinding JavaScript libraries
Defining optional members
let InitOptions =
Pattern.Config "FB.InitOptions" {
Required = []
Optional =
[
"appId", T<string>
"cookie", T<bool>
...
"hideFlashCallback", FlashHidingArgs ^-> T<unit>
]
}
• Typical in most JavaScript libraries
• Used heavily in configuration objects

17. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileBinding JavaScript libraries
Defining safe enumerations
let UserStatus =
Pattern.EnumStrings "FB.UserStatus"
["connected"; "not_authorized"; "unknown"]
• Typical in most JavaScript libraries
• Used heavily in configuration objects

18. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileBinding JavaScript libraries
eDSL to describe JavaScript APIs
Type Provider for TypeScript definitions
F#
WebSharper
extension
TypeScript
TypeScript
Type Provider
WebSharper
extension

19. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileBinding JavaScript libraries
Describing client-side
APIs via
TypeScript
declarations

20. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Type Provider for TypeScript definitions
type Facebook =
IntelliFactory.TypeScript.Generator<"Facebook.d.ts">
Facebook.***
Binding JavaScript libraries

21. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
An F#/WebSharper application using jQuery
Mobile
Total size: 150 LOC in F#
My Facebook Wall for tablets

22. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileMy Facebook Wall for tablets
WebSharper Facebook application showing wall posts
• Using the Facebook bindings generated via WIG and TypeScript.

23. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileIntelliMath for WinRT/8

24. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
An F#/WebSharper application using WinJS
Size: 1100 LOC in F#
IntelliMath for WinRT/8

25. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Promises
type Promise<'T> =
[<Inline "$this.then($f)">]
member this.Then(f: 'T -> 'U) = X<Promise<'U>>
[<Inline "$this.done($f)">]
member this.Done(f: 'T -> unit) = ()
Binding WinJS

26. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
module Application =
[<Inline "WinJSSetOnActivated($f)">]
let OnActivated(f: unit -> unit) = ()
module Local =
[<Inline "WinJS.Application.local.exists($f)">]
let Exists (f: string) = X<Promise<bool>>
[<Inline "WinJS.Application.local.readText($f)">]
let ReadText (f: string) = X<Promise<string>>
...
Binding WinJS

27. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Going to TypeScript declarations or WIG is the
full solution
Binding WinJS

28. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
[<JavaScript>]
let rec (|Factor|_|) = function
| NUMBER (n, rest) ->
Some (Expr.Const (Const.Number n), rest)
| ID ("x", rest) ->
Some (Expr.Const Const.X, rest)
| ID ("pi", rest) ->
Some (Expr.Const Const.Pi, rest)
| ID ("e", rest) ->
Some (Expr.Const Const.E, rest)
| LPAREN (Expression (e, RPAREN rest)) ->
(e, rest) |> Some
| _ ->
None
Parsing with active patterns

29. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
/// Pixels on the screen
[<Measure>] type px
module Events =
type Point = { x: int<px>; y: int<px> }
[<Sealed>]
type PointerPoint =
[<Stub>]
member this.pointerId = X<int>
[<Stub>]
member this.position = X<Point>
Using units of measure

30. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileExtras

31. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Aggregates and catalogs FP content about:
Q&A
Events/Conferences
Courses
User Groups
Blogs
Jobs
Developers
etc…
FPish.net

32. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Full F# language support
• Multi-project solutions
• Web and mobile Apps
• Syntax highlighting
• On the fly type checking
• Interactive exploration
• Integration with data
• Support for type providers
CloudSharper

33. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Develop, deploy, and run full web and mobile
applications with interactive programming
CloudSharper

34. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
Video…
CloudSharper

35. itcampro@ itcamp13# Premium conference on Microsoft technologies
Q & A
Get in touch
#granicz #websharper #fpishnet
http://websharper.com
http://intellifactory.com
http://fpish.net
http://www.facebook.com/intellifactory