ITCamp 2012 - Adam Granicz - Web development with WebSharper in F#

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Web (and Mobile) Development with WebSharper in F#

Adam Granicz – F# MVP CEO, IntelliFactory

http://fpish.net/blog/adam.granicz/all/0

#granicz


Mobile &

Development ITCamp 2012 sponsors


Mobile &

Development Adam

Commercial Users of Functional Programming (CUFP) Tokyo, Japan – September 2011


Mobile &

Development Books

2007 2010 2011 2012

3


Mobile &

Development IntelliFactory

At IntelliFactory, we specialize in:

o Building tools for functional, reactive web application development

o Building robust .NET applications in F# (web, mobile, cloud)

o Migrating to and extending legacy .NET applications in F#

o Customer-friendly, agile management of software development projects

o F# trainings, from basic to advanced, from individual to enterprise-wide

o Designing and implementing domain-specific languages


Mobile &

Development HTML5 applications


Mobile &

Development

IntelliFactory in a few words:

o Expertise: constantly seeking to push the limits and apply FP

o Diversity: we bring talents from all around the world

o Solid academic and FP professional background

o Bridging academia and industry -

o Interns – EPFL, Caltech, EPITA, Eafit, ELTE, etc.

o Sponsorship – Central European Summer School in FP

o Industry partners – Microsoft, local and multi-national firms

o A challenging place to work at – but with lots of creativity

IntelliFactory


Mobile &

Development

• Trends towards client-based applications why?

• WebSharper what?

– F# for the web and mobiles

• Concepts how?

– Pagelets

– Formlets

– Flowlets

– Sitelets

– Extensions

• Examples

– Simple web

– Mobile app (jQuery Mobile)

– Mobile app (Google Maps)

• WebSharper 3.0 what’s coming?

Agenda


Mobile &

Development

1. Applications are server-centric – the server performs too much:

Rendering presentation

Responding to events from the client

Business-logic / backend

This is bad because…

Server becomes the bottleneck

Applications are inherently slow to respond, little or no client-side interaction

Scalability issues

Motivations


Mobile &

Development Moving to client-based

Presentation

Interaction Core Logic

Moving functionality from the server to the client

Ajax in browser Extending browser capabilities

Requires JavaScript, omnipresent Silverlight, Flash, applets, etc.

Ajax

JavaScript + HTML5 Flash

Flash on client

Silverlight

.NET on client

Applets

Java on client

Client-based models (Silverlight, Flash, applets)

Server-based models (ASP.NET, PHP, JSF, etc.)


Mobile &

Development

2. Programming models and patterns fall short:

Markup vs. code-behind mismatch

Passing IDs as strings – standard ASP.NET examples:

Wiring events

Validators, validator groups


Developing web applications becomes extremely error-prone

Motivations


Mobile &

Development

3. Too many languages to understand and work with:

C#, VB, Java, etc. – business logic

HTML, HTML5, CSS – presentation

JavaScript, XML – client-side interaction

SQL, MDX – database


Not one is an expert in many languages

Motivations


Mobile &

Development

4. Inability to check client-side code before execution

JavaScript is untyped


This makes development extremely error-prone

Requires a lot of time and effort to develop and maintain

Motivations


Mobile &

Development

Benefiting more from proven ideas from functional programming

Enabling developing client-based web applications that execute

mostly on the client with occasional server communication

Removing unsafe development patterns

Using fewer languages, and translation techniques to make

development simpler

Development Trends

Functional + Client-based + Robust + Simpler


Mobile &

Development

• Mature, enterprise-ready framework

• Write all your server+client code in F#

• Compiles to a complete web application

• Interface with any client-side JS library via F#

• Powerful abstractions

• Automatic resource management

• Safe URLs, type-safe URLs

• and much-much more…

Less code (50-90% less!)

Quicker to develop

Easier to maintain

WebSharper in a nutshell


Mobile &

Development WebSharper

A web development platform that enables you to:

Program entire web applications in F#

Like “GWT for F#” – write F# get JavaScript

Develop client-based web and web-based mobile applications

Develop Client-based

web applications in F#


Mobile &


A web development platform that offers:

Nearly the entire F# language, most notably

Data types – unions, tuples, records, lists, seqs, sets, maps, etc.

Constructs – pattern matching, active patterns, computation

expressions, etc.

The F# core library -- easy to extend (see later)

Many .NET libraries/namespaces -- easy to extend (see later)

Uniform, Extensible Development Model


Mobile &



Pagelets, formlets, flowlets, sitelets

Automatic resource management (CSS, JS, etc.)

Web programming abstractions


Mobile &



ASP.NET integration

Via server controls that add client-side functionality

MVC.NET integration

Plain HTML/HTML5+JavaScript projects

Visual Studio 2008/2010/2011 integration

Project templates

Compiler integration

Single-click deployment

Seamless tool and environment

integration


Mobile &

Development

(demo)

Getting Started with WebSharper


Mobile &

Development Pagelets – Client-side functionality

Defining client-side functionality

module HelloWorld = open IntelliFactory.WebSharper open IntelliFactory.WebSharper.Html [<JavaScript>] let Main () = let welcome = P [Text "Welcome"] Div [ welcome Input [Type “button"; Value "Click me!"] |> OnClick (fun e args -> welcome.Text <- "Hello, world!") ]


Mobile &

Development Pagelets

Integrating with ASP.NET [<JavaScriptType>] type HelloWorld() = inherit IntelliFactory.WebSharper.Web.Control() [<JavaScript>] override this.Body = HelloWorld.Main () <ws:HelloWorld runat=“server” />

ASP.NET markup

F# type for server control

Integration with ASP.NET


Mobile &

Development

module YourWebApplication = open IntelliFactory.WebSharper ... [<Rpc>] let YourServerFunction (...) = ... [<JavaScript>] let YourClientFunction () = let data = YourServerFunction (...) ... [<JavaScript>] let Main () = ...

Client-server communication

Client-server communication

Seamless communication


Mobile &

Development

Type-safe, composable abstraction for user interfaces:

Formlet.Yield (fun v1 v2 ... vn -> <compose all vi’s>)

<*> formlet1 <*> formlet2 ...

<*> formletn

Formlets


Mobile &

Development

Progressive enhancement and declarative

specification:

[<JavaScript>]

let TB label msg =

Controls.Input "“

|> Validator.IsNotEmpty msg

|> Enhance.WithValidationIcon

|> Enhance.WithTextLabel label

Formlets


Mobile &

Development

Sample formlet

[<JavaScript>]

let BasicInfoForm () : Formlet<BasicInfo> =

Formlet.Yield (fun name age ->

{ Name = name; Age = age })

<*> input "Name" "Please enter your name"

<*> inputInt "Age" "Please enter a valid age"

Formlets

Result composition

Formlet composition


Mobile &

Development

Another sample formlet

type Person = { Name: string; Email: string }

[<JavaScript>]

let PersonFormlet () : Formlet<Person> =

let nameF = TB "Name" "Empy name not allowed"

let emailF = TB "Email" "Please enter a valid email address"

Formlet.Yield (fun name email -> { Name = name; Email = email })

<*> nameF

<*> emailF

|> Enhance.WithSubmitAndResetButtons

|> Enhance.WithLegend "Add a New Person"

|> Enhance.WithFormContainer

Formlets


Mobile &

Development Formlets

And you get:


Mobile &

Development

Flowlets

Flowlets enable you to compose a sequence of formlets, in a type-safe, composable, and robust way into an F# value.

Essentially, your flowlets model a set of page transitions.

let Workflow =

Formlet.Do {

let! res1 = formlet1 ...

let! res2 = formlet2 ...

do! Formlet.OfElement (compute res1 res2)

} |> Formlet.Flowlet

Div [H1 [Text "Enter your information"]] -< [Workflow]

Flowlets


Mobile &

Development

Sitelets enable you to represent entire web sites in a type-safe, composable, and robust way. let home = Sitelet.Content "/" Action.Home Pages.HomePage let inferred = Sitelet.Infer <| fun action -> match action with | Action.Contact -> Pages.ContactPage ... let authenticated = Sitelet.Protect ... let EntireSite = Sitelet.Sum [ home authenticated inferred ]

Sitelets


Mobile &

Development

Core, bundled extensions

– HTML4 + HTML5

– DOM

– EcmaScript

– jQuery

Maps jQuery UI

– Bing Maps jQuery Mobile

– Google Maps jQuery Tools

Extensions


Mobile &

Development

Visualization

– Google Visualization

– Infovis

– Protovis

– Raphäel

Control sets

– YUI 3.X - Formlets for YUI

– ExtJs - Formlets for ExtJs

– Sencha - Formlets for Sencha

- Formlets for jQuery UI

and many other libraries... - Formlets for jQuery Mobile

Extensions


Mobile &

Development

• Exposes mobile capabilities to JavaScript

– GPS, Accelerometer, etc.

• Provides the necessary packaging

• Enables quick and seamless multi-targeting

• Scales into the cloud

WebSharper Mobile


Mobile &

Development Mobile applications

• HTML5 – WebGL

– O3D

– GlMatrix


Mobile &

Development

let loginSequenceF =

Formlet.Do {

let! username, password, remember =

Formlet.Yield (fun user pass remember -> user, pass, remember)

<*> (Controls.TextField "" Theme.C "Username: "

|> Validator.IsNotEmpty "Username cannot be empty!")

<*> (Controls.Password "" Theme.C "Password: "

|> Validator.IsRegexMatch "^[1-4]{4,}[0-9]$" “Password is wrong")

<*> Controls.Checkbox true Theme.C "Keep me logged in "

|> Enhance.WithSubmitButton "Log in" Theme.C

let rememberText = if remember then "" else "not "

do! Formlet.OfElement (fun _ ->

Div [

H3 [Text ("Welcome " + username + "!")]

P [Text ("We will " + rememberText + "keep you logged in.")]

])

}

|> Formlet.Flowlet

Mobile applications–jQuery Mobile


Mobile &

Development

Div [HTML5.Attr.Data "role" "page"] -< [

Div [HTML5.Attr.Data "role" "header"] -< [

H1 [Text "WebSharper Formlets for jQuery Mobile"]>

]

Div [HTML5.Attr.Data "role" "content"] -< [

loginSequenceF

]

Div [HTML5.Attr.Data "role" "footer"] -< [

P [Attr.Style "text-align:center;"] -< [Text "IntelliFactory"]

]

]

Mobile applications–jQuery Mobile


Mobile &

Development Mobile applications–jQuery Mobile

As you expect:


Mobile &

Development Mobile applications–Google Maps

type CurrentLocationControl() =

inherit Web.Control()

[<JavaScript>]

override this.Body =

let screenWidth = JQuery.Of("body").Width()

let MapOptions =

Bing.MapViewOptions(

Credentials = bingMapsKey,

Width = screenWidth - 10,

Height = screenWidth - 10,

Zoom = 16)

let label = H2 []

let map = Div [] |>! OnAfterRender (fun this -> // Renders a map control let map = Bing.Map(this.Body, MapOptions) map.SetMapType Bing.MapTypeId.Road setMap map) // Returns markup for this control Div [ label Br [] map ] :> _

let setMap (map : Bing.Map) =

let updateLocation() =

// Gets the current location

let loc = Mobile.GetLocation()

// Sets the label to the current location

Rest.RequestLocationByPoint(<<your-key>>, loc.Lat, loc.Long, ["Address"],

fun result ->

let locInfo = result.ResourceSets.[0].Resources.[0]

label.Text <- "You are currently at " + JavaScript.Get "name" locInfo)

// Adds a pushpin at the current location

let loc = Bing.Location(loc.Lat, loc.Long)

let pin = Bing.Pushpin loc

map.Entities.Clear()

map.Entities.Push pin

map.SetView(Bing.ViewOptions(Center = loc))

// Keep updating your location regularly

JavaScript.SetInterval updateLocation 1000

|> ignore


Mobile &

Development Mobile applications–Google Maps


Mobile &

Development WebSharper 3.0

• JavaScript translation from C# and VB

• Access to more native mobile capabilities

– Bluetooth

– Networking

– Camera

– etc.

• Stunning templates for iOS, Android, WP7


Q & A

Web and Mobile Development with WebSharper in F#

Find out more at: http://intellifactory.com

http://websharper.com

http://infoq.com/articles/WebSharper


Mobile &

Development

FPish.net - “everything functional”:

• Events – webcasts, meetups, etc.

• Courses

• User groups

• Conferences

• Blogs

• Topics – Q&A

• Developers

• Companies

Extra

ITCamp 2012 - Adam Granicz - Web development with WebSharper in F#

Technology

mobile applications

microsoft technologies

clientbased web applications

itcamp12 premium conference

clientbased development

mobile moving

clientbased applications

mobile books development