ITCamp 2012 - Adam Granicz - Web development with WebSharper in F#
Post on 13-May-2015
384 Views
Preview:
Transcript
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development ITCamp 2012 sponsors
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Adam
Commercial Users of Functional Programming (CUFP) Tokyo, Japan – September 2011
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Books
2007 2010 2011 2012
3
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development HTML5 applications
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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.)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
This is bad because…
Developing web applications becomes extremely error-prone
Motivations
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
This is bad because…
Not one is an expert in many languages
Motivations
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
4. Inability to check client-side code before execution
JavaScript is untyped
This is bad because…
This makes development extremely error-prone
Requires a lot of time and effort to develop and maintain
Motivations
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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#
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development WebSharper
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development WebSharper
A web development platform that offers:
Pagelets, formlets, flowlets, sitelets
Automatic resource management (CSS, JS, etc.)
Web programming abstractions
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development WebSharper
A web development platform that offers:
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
(demo)
Getting Started with WebSharper
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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!") ]
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
Type-safe, composable abstraction for user interfaces:
Formlet.Yield (fun v1 v2 ... vn -> <compose all vi’s>)
<*> formlet1 <*> formlet2 ...
<*> formletn
Formlets
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
Progressive enhancement and declarative
specification:
[<JavaScript>]
let TB label msg =
Controls.Input "“
|> Validator.IsNotEmpty msg
|> Enhance.WithValidationIcon
|> Enhance.WithTextLabel label
Formlets
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Formlets
And you get:
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
Core, bundled extensions
– HTML4 + HTML5
– DOM
– EcmaScript
– jQuery
Maps jQuery UI
– Bing Maps jQuery Mobile
– Google Maps jQuery Tools
Extensions
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Mobile applications
• HTML5 – WebGL
– O3D
– GlMatrix
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Mobile applications–jQuery Mobile
As you expect:
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Mobile applications–Google Maps
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
FPish.net - “everything functional”:
• Events – webcasts, meetups, etc.
• Courses
• User groups
• Conferences
• Blogs
• Topics – Q&A
• Developers
• Companies
Extra
top related