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

transcript

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

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:

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

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)

Technology