Applying Functional Programming to Build Platform-Independent Mobile Applications

Applying Functional Programming to Build
Platform-Independent Mobile Applications

Adam Granicz, CEO
IntelliFactory
granicz.adam@intellifactory.com

CUFP 2011, Tokyo, Japan - Sep 24, 2011

Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com

It’s all about business

The mobile market†

• 3.7 billion mobile users
• $1.2 trillion dollars generated:
the fastest growing industry on the planet
• $8.8 billion on mobile advertising

• $3 billion spent on consumer apps
• $6 billion spent on corporate applications
• Expected to rise sharply

† source: http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html

Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |2

It’s all about business

Reaching prospects via mobiles†

Channel Cost Reach People/$
Mobile website $30,000 36.40% 2,840
iPhone app $30,000 6.75% 527
Mobile app for
$90,000 24.04% 599
major brands

† source: http://mashable.com/2011/02/24/mobile-app-dev-cost/


Mobile development now – not looking good

• iOS – Objective-C hell + pinned to Macs + pinned
to custom development environment and tools
• Android – Java + a large API to learn
• Windows Phone - .NET + a large API to learn
• Windows Mobile - …


Mobile development now – not looking good

• Can we multi-target?
– Not easily, in fact it’s nearly impossible without
rewriting code from one language to another


What do we need?

What would get people really excited?


What do we need?

How about some of the following:
– Writing less code
– Using higher level abstractions
– Type-safe, declarative UIs
– Multi-targeting
– Scaling into desktop applications
– Scaling into the cloud

Tremendous saving on time/effort/maintainability


Native apps vs Web apps

• JavaScript is the IL …
– of client-side web applications

and is becoming the IL …

– of desktop applications: Windows 8
– of mobile applications: Android, WP7, etc.

• Some even write the server side in JavaScript


JavaScript-based mobile applications

• So let’s write mobile applications in JavaScript!

• Hey, but we have PhoneGap and all, what about
that?
– Sure, but JavaScript is hard to write, we need:
• Type safety
• Compile time guarantees
• Coding assistance – code completion, API help, etc.
– We still have N-1 unfulfilled objectives


WebSharper

• 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

Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 10

WebSharper Mobile

• Exposes mobile capabilities to JavaScript
• Provides the necessary packaging
• Enables quick and seamless multi-targeting
• Scales into the cloud


WebSharper extensions

A couple dozen available extensions

http://websharper.com/extensions


WebSharper sitelets

Strongly-typed templating, safe URLs
let Template title main : Content<Action> =
let menu (ctx: Context<Action>)=
let (!) action = ctx.Link action |> HRef
[
A [!Action.Home] -< [Text "Home"]
A [!Action.Contact] -< [Text "Contact"]
A [!(Action.Echo "Hello“)] -< [Text "Say Hello"]
A ["~/LegacyPage.aspx" |> ctx.ResolveUrl |> HRef] -< [Text "ASPX Page"]
]
|> List.map (fun link ->
Label [Class "menu-item"] -< [link]
)

Templates.Skin.Skin (Some title)

{
LoginInfo = Widgets.LoginInfo
Banner = fun ctx -> [H2 [Text title]]
Menu = menu
Main = main
Sidebar = fun ctx -> [Text "Put your side bar here"]
Footer = fun ctx -> [Text “Copyright (c) 2011 YourCompany.com"]
}


WebSharper sitelets

/// The pages of this website.
module Pages =

/// A helper function to create a hyperlink
let ( => ) title href = A [HRef href] -< [Text title]

/// The home page.
let HomePage : Content<Action> =
Template "Home" <| fun ctx ->
[
H1 [Text "Welcome to our site!"]
“Contact" => ctx.Link Action.Contact
]
...


WebSharper sitelets – composing 1

// A simple sitelet for the root of the site.
let home =
Sitelet.Content "/" Action.Home Pages.HomePage



// An automatically inferred sitelet for the basic parts.
let basic =
Sitelet.Infer <| fun action ->
match action with
| Action.Contact -> Pages.ContactPage
| Action.Echo param -> Pages.EchoPage param
| Action.Login action -> Pages.LoginPage action
| Action.Logout ->
// Logout user and redirect to home
UserSession.Logout ()
Content.Redirect Action.Home
| Action.Home -> Content.Redirect Action.Home
| Action.Protected -> Content.ServerError



// A sitelet for the protected content.
let authenticated =
let filter : Sitelet.Filter<Action> =
{
VerifyUser = fun _ -> true
LoginRedirect = Some >> Action.Login
}

Sitelet.Protect filter
<| Sitelet.Content
"/protected“
Action.Protected
Pages.ProtectedPage


WebSharper sitelets – composing final

let EntireSite =
// Compose the above sitelets into a larger one.
Sitelet.Sum
[
home
authenticated
basic
]


Powerful abstractions - Formlets

• Type-safe
• Composable
• First-class

• Dependent formlets – can express dependencies
• Flowlets – provide step-by-step layout


WebSharper formlets

let TB label msg =
Controls.Input ""
|> Validator.IsNotEmpty msg
|> Enhance.WithValidationIcon
|> Enhance.WithTextLabel label

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


WebSharper formlets

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


WebSharper formlets

And you get:


WebSharper formlet extensions

• Available for various UI control set libraries
– jQuery UI
– Yahoo UI
– Ext JS
– jQuery Mobile


WebSharper formlet extensions - jQM

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]$" "The 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



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"]
]
]



As you expect:


Other extensions

• GIS
– Google Maps
– Bing Maps
• Visualization
– Infovis
– Protovis
– Google Visualization


Other extensions – Google Maps

type CurrentLocationControl() = let setMap (map : Bing.Map) = let map =
inherit Web.Control() let updateLocation() = Div []
// Gets the current location |>! OnAfterRender (fun this ->
let loc = Mobile.GetLocation() // Renders a map control
[<JavaScript>] let map =
// Sets the label to the current location
override this.Body =
Rest.RequestLocationByPoint(<<your-bingmaps-key>>,
let screenWidth = loc.Lat, loc.Long, ["Address"], Bing.Map(this.Body, MapOptions)
JQuery.Of("body").Width() fun result ->
map.SetMapType(Bing.MapTypeId.Road)
let locInfo =
let MapOptions = result.ResourceSets.[0].Resources.[0]
setMap map)
Bing.MapViewOptions( label.Text <-
"You are currently at " +
// Returns markup for this control
Credentials = bingMapsKey, Div [
JavaScript.Get "name" locInfo)
Width = screenWidth - 10, label
Height = screenWidth - 10, Br []
// Adds a pushpin at the current location
Zoom = 16) map
let loc = Bing.Location(loc.Lat, loc.Long)
] :> _
let pin = Bing.Pushpin loc
let label = H2 [] map.Entities.Clear()
map.Entities.Push pin
map.SetView(Bing.ViewOptions(Center = loc))

// Keep updating your location regularly
JavaScript.SetInterval updateLocation 1000
|> ignore


Other extensions – Google Maps


Other extensions

• HTML5
– WebGL
– O3D
– GlMatrix


Summary

F# + WebSharper gives:
• Absolutely huge productivity gain
• Access to a growing market opportunity
• Quick path to multiple platforms
• Scaling to desktop and to the cloud

Advocates functional programming to
– Use more powerful abstractions
– Cut development time
– Produce shorter, more maintainable code


Extra

FPish.net - “everything functional”:
• Events – webcasts, meetups, etc.
• Courses
• User groups
• Conferences
• Blogs
• Topics – Q&A
• Developers
• Companies


Questions?

Find out more at:
http://intellifactory.com
http://websharper.com
http://infoq.com/articles/WebSharper
CUFP 2011, Tokyo, Japan - Sep 24, 2011

Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com

Applying Functional Programming to Build Platform-Independent Mobile Applications

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Applying Functional Programming to Build Platform-Independent Mobile Applications

Ähnlich wie Applying Functional Programming to Build Platform-Independent Mobile Applications (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Applying Functional Programming to Build Platform-Independent Mobile Applications

Hinweis der Redaktion