Data-First Online Functional Programming with F# (Adam Granicz)

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

Huge thanks to our sponsors & partners!

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#

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

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

Why F#?

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#?

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

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

Open source project, available at:
https://bitbucket.org/IntelliFactory/websharper
Dual licensed for closed source use
Dedicated support – new features, bugfix
releases
WebSharper

open IntelliFactory.WebSharper
module Server =
[<Rpc>]
let MyServerFunction(...) = ...
module Client =
[<JavaScript>]
let MyClientFunction(...) =
...
let v = MyServerFunction(...)
...
Bridging the language mismatch

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)

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

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

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 }

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

Binding JavaScript libraries
eDSL to describe JavaScript APIs
Type Provider for TypeScript definitions
F#
WebSharper
extension
TypeScript
TypeScript
Type Provider
WebSharper
extension

Describing client-side
APIs in F# via
WebSharper
Interface
Generator (WIG)

namespace IntelliFactory.WebSharper.Facebook
module Definition =
...
let FB =
Class "FB"
|+> [ ...
"login" => ...
"getLoginStatus" => ...
"api" => ...
]
|> Requires [Res.FacebookAPI]
let Assembly =
Assembly [
Namespace
"IntelliFactory.WebSharper.Facebook" [
...; FB
] ...
]

Defining classes – useful operators
let FlashHidingArgs =
Class "FB.FlashHidingArgs"
|+> Protocol [
"state" =? T<string>
"elem" =? T<Element>
]
=? : Member

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

Describing client-side
APIs via
TypeScript
declarations

Defining safe enumerations
let UserStatus =
Pattern.EnumStrings "FB.UserStatus"
["connected"; "not_authorized"; "unknown"]
• Typical in most JavaScript libraries
• Used heavily in configuration objects

Type Provider for TypeScript definitions
type Facebook =
IntelliFactory.TypeScript.Generator<"Facebook.d.ts">
Facebook.***

CloudSharper

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

An online, cloud-hosted IDE
with interactive exploration
and
An SaaS platform for
developing and running
applications

Enables you to develop, deploy, and run full web and
mobile applications with interactive programming
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

It’s extensible
… even with full applications
It can be configured
… with custom renderers
… with custom editors

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

The Workspace view

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

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.

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.

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.

… Demo …
Interactive programming in CloudSharper

Aggregates and catalogs FP content about:
Q&A
Events/Conferences
Courses
User Groups
Blogs
Jobs
Developers
etc…
FPish.net

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

Data-First Online Functional Programming with F# (Adam Granicz)

More Related Content

What's hot (15)

Viewers also liked (6)

Similar to Data-First Online Functional Programming with F# (Adam Granicz) (20)

More from ITCamp (20)

Recently uploaded (20)

Data-First Online Functional Programming with F# (Adam Granicz)