Download pdf - 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


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


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