The world around us is producing data at an enormous speed and in huge quantities. Processing this complex, multifaceted data, turning it into information and visualizing it to drive business decision making is the paramount challenge for today’s corporate software developers. In this talk, I will demonstrate the unique data-driven capabilities of F# and how these can be used to connect to a multitude of heterogeneous data sources to obtain structured, strongly-typed data that can be processed in a functional style, and presented and visualized in stunning HTML5 output that is guaranteed to win everyone’s attention. By the end of the talk, you will become familiar with CloudSharper, the world’s first online F# development environment, and will have mastered key data visualization techniques that will make you a better and more informed developer.

1. Premium community conference on Microsoft technologies itcampro@ itcamp14#

2. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Data-First Online Functional
Programming with F#
Adam Granicz, CEO, IntelliFactory
@granicz, @websharper, @cloudsharper
http://fpish.net/blog/adam.granicz/all/0

3. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Huge thanks to our sponsors & partners!

4. Premium community conference on Microsoft technologies itcampro@ itcamp14#
4x F# MVP – 2010-2014
(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#

5. Premium community conference on Microsoft technologies itcampro@ itcamp14#
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

6. Premium community conference on Microsoft technologies itcampro@ itcamp14#
How to do
interactive,
data-driven,
web programming
In an online development environment that
enables quick data exploration and
visualization
In this talk you will learn about

7. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Why F#?

8. Premium community conference on Microsoft technologies itcampro@ itcamp14#
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#?

9. Premium community conference on Microsoft technologies itcampro@ itcamp14#
FSharp.Data – provides quick, type-safe
access to all sorts of data sources
CSV files
Relational databases
REST data sources
World Bank database
Freebase databases
etc.
Type Providers

10. Premium community conference on Microsoft technologies itcampro@ itcamp14#
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

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

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

13. Premium community conference on Microsoft technologies itcampro@ itcamp14#
WebSharper
What do I get with WebSharper?
1. Automatic resource management
=> no need to include dependencies by hand
=> each page loads only the resources it needs
2. Type-safe access to JavaScript libraries via F#
=> dozens of extensions available (visualizations, charts, …)
=> has its own eDSL for describing JavaScript APIs
=> TypeScript type provider (in supported version)

14. Premium community conference on Microsoft technologies itcampro@ itcamp14#
WebSharper
What do I get with WebSharper?
3. Uniform programming model (everything is F#)
=> write all server and client code in F#
4. Client-Server applications
=> [<JavaScript>] vs [<Rpc>] annotations
=> Seamless communication via RPC
=> No need to worry about how to pass data

15. Premium community conference on Microsoft technologies itcampro@ itcamp14#
WebSharper
What do I get with WebSharper?
5. Composable functional programming
abstractions
=> Pagelets: to represent dynamic markup and behavior
=> Sitelets: to represent web applications
=> Formlets: to represent complex and dependent
web forms
=> Flowlets: to represent sequences of user forms,
wizzards

16. Premium community conference on Microsoft technologies itcampro@ itcamp14#
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

17. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Sitelets – 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 }

18. Premium community conference on Microsoft technologies itcampro@ itcamp14#
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

19. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Binding JavaScript libraries
eDSL to describe JavaScript APIs
Type Provider for TypeScript definitions
F#
WebSharper
extension
TypeScript
TypeScript
Type Provider
WebSharper
extension

20. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Describing client-side
APIs in F# via
WebSharper
Interface
Generator (WIG)
Binding JavaScript libraries

21. Premium community conference on Microsoft technologies itcampro@ itcamp14#
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

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

23. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Binding 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

24. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Binding JavaScript libraries
Describing client-side
APIs via
TypeScript
declarations

25. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Binding 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

26. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Type Provider for TypeScript definitions
type Facebook =
IntelliFactory.TypeScript.Generator<"Facebook.d.ts">
Facebook.***
Binding JavaScript libraries

27. Premium community conference on Microsoft technologies itcampro@ itcamp14#
CloudSharper

28. Premium community conference on Microsoft technologies itcampro@ itcamp14#
What is CloudSharper?
An online integrated development environment
(IDE) for developing web and mobile applications.
Language neutral - can be used with any language
First phase targets .NET (F#) development
F# - full language support
C# - not yet, but coming
JavaScript – full language support
Syntax highlighting for dozens of languages

29. Premium community conference on Microsoft technologies itcampro@ itcamp14#
What is CloudSharper?
An online, cloud-hosted IDE
with interactive exploration
and
An SaaS platform for
developing and running
applications

30. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Enables you to develop, deploy, and run full web and
mobile applications with interactive programming
CloudSharper

31. Premium community conference on Microsoft technologies itcampro@ itcamp14#
What is CloudSharper?
Multi-project solutions with full build support
Web and mobile applications
On-the-fly type checking
Integration with data and other providers
Interactive data exploration, REPL

32. Premium community conference on Microsoft technologies itcampro@ itcamp14#
It’s extensible
… even with full applications
It can be configured
… with custom renderers
… with custom editors
What is CloudSharper?

33. Premium community conference on Microsoft technologies itcampro@ itcamp14#
CloudSharper
Has three “screens” to help you navigate better:
Dashboard: Account settings, Templates/Workspaces
Workspace: Your current project
Deploy: Once built, you can preview your project

34. Premium community conference on Microsoft technologies itcampro@ itcamp14#
The Workspace view

35. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Charting and Visualization
Built in support for Ext
JS charting via a native
F# API in Interactive
Works with any other
JavaScript visualization
and charting library
through WebSharper
extensions

36. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Documenting projects
Full markdown support,
and documentation via
README.*.md, with
multiple code formatters.
Coming up: Full
ApiStack.net integration –
generating and
integrating full API
references within
CloudSharper.

37. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Developing mobile applications

38. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Developing mobile applications
Accessing native mobile capabilities
GPS, Camera, Accelerometer, Calls,
Contacts, …
1. PhoneGap Cordova for WebSharper
2. Some features are available in HTML5
Geolocation, local storage, etc.

39. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Developing mobile applications
Packaging for Android/iOS/WP/etc.
1. WebSharper Mobile
Has basic support for building/packaging for
Android and Windows Phone, but no iOS/etc.
2. PhoneGap Build
An online service to build for all kinds of mobile platforms.

40. Premium community conference on Microsoft technologies itcampro@ itcamp14#
… Demo …
Interactive programming in CloudSharper

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

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