Applying Functional Programming to Build                             Platform-Independent Mobile Applications             ...
It’s all about business  The mobile market†  • 3.7 billion mobile users  • $1.2 trillion dollars generated:    the fastest...
It’s all about business  Reaching prospects via mobiles†                             Channel                        Cost  ...
Mobile development now – not looking good  • iOS – Objective-C hell + pinned to Macs + pinned    to custom development env...
Mobile development now – not looking good  • Can we multi-target?         – Not easily, in fact it’s nearly impossible wit...
What do we need?                   What would get people really excited?Copyright © 2004-2011 IntelliFactory   Platform-In...
What do we need?  How about some of the following:         –    Writing less code         –    Using higher level abstract...
Native apps vs Web apps  • JavaScript is the IL …         – of client-side web applications              and is becoming t...
JavaScript-based mobile applications  • So let’s write mobile applications in JavaScript!  • Hey, but we have PhoneGap and...
WebSharper  •    Mature, enterprise-ready framework  •    Write all your server+client code in F#  •    Compiles to a comp...
WebSharper Mobile  •    Exposes mobile capabilities to JavaScript  •    Provides the necessary packaging  •    Enables qui...
WebSharper extensions  A couple dozen available extensions                              http://websharper.com/extensionsCo...
Powerful Abstractions - Sitelets  • Type-safe  • Composable  • First-class  Parameterized over a union type:  /// Actions ...
WebSharper sitelets Strongly-typed templating, safe URLs                               let Template title main : Content<A...
WebSharper sitelets  /// The pages of this website.  module Pages =      /// A helper function to create a hyperlink      ...
WebSharper sitelets – composing 1  // A simple sitelet for the root of the site.  let home =     Sitelet.Content "/" Actio...
WebSharper sitelets – composing 2  // An automatically inferred sitelet for the basic parts.  let basic =     Sitelet.Infe...
WebSharper sitelets – composing 3  // A sitelet for the protected content.  let authenticated =     let filter : Sitelet.F...
WebSharper sitelets – composing final  let EntireSite =     // Compose the above sitelets into a larger one.     Sitelet.S...
Powerful abstractions - Formlets  • Type-safe  • Composable  • First-class  • Dependent formlets – can express dependencie...
WebSharper formlets  let TB label msg =     Controls.Input ""     |> Validator.IsNotEmpty msg     |> Enhance.WithValidatio...
WebSharper formlets  type Person = { Name: string; Email: string }  [<JavaScript>]  let PersonFormlet () : Formlet<Person>...
WebSharper formlets  And you get:Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://...
WebSharper formlet extensions  • Available for various UI control set libraries         –    jQuery UI         –    Yahoo ...
WebSharper formlet extensions - jQM  let loginSequenceF =     Formlet.Do {        let! username, password, remember =     ...
WebSharper formlet extensions - jQM  Div [HTML5.Attr.Data "role" "page"] -< [    Div [HTML5.Attr.Data "role" "header"] -< ...
WebSharper formlet extensions - jQM  As you expect:Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Appl...
Other extensions  • GIS         – Google Maps         – Bing Maps  • Visualization         – Infovis         – Protovis   ...
Other extensions – Google Mapstype CurrentLocationControl() =          let setMap (map : Bing.Map) =                      ...
Other extensions – Google MapsCopyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www...
Other extensions  • HTML5         – WebGL         – O3D         – GlMatrixCopyright © 2004-2011 IntelliFactory   Platform-...
Summary  F# + WebSharper gives:  • Absolutely huge productivity gain  • Access to a growing market opportunity  • Quick pa...
Extra  FPish.net - “everything functional”:  • Events – webcasts, meetups, etc.  • Courses  • User groups  • Conferences  ...
Questions?                                                  Find out more at:                                             ...
Upcoming SlideShare
Loading in …5
×

Applying Functional Programming to Build Platform-Independent Mobile Applications

890 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
890
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Need more icons: MVC, Linq
  • Need more icons: MVC, Linq
  • Applying Functional Programming to Build Platform-Independent Mobile Applications

    1. 1. Applying Functional Programming to Build Platform-Independent Mobile Applications Adam Granicz, CEO IntelliFactory granicz.adam@intellifactory.com CUFP 2011, Tokyo, Japan - Sep 24, 2011Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com
    2. 2. 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.htmlCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |2
    3. 3. 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/Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |3
    4. 4. 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 - …Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |4
    5. 5. 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 anotherCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |5
    6. 6. What do we need? What would get people really excited?Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |6
    7. 7. 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/maintainabilityCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |7
    8. 8. 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 JavaScriptCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |8
    9. 9. 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 objectivesCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |9
    10. 10. 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 maintainCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 10
    11. 11. WebSharper Mobile • Exposes mobile capabilities to JavaScript • Provides the necessary packaging • Enables quick and seamless multi-targeting • Scales into the cloudCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 11
    12. 12. WebSharper extensions A couple dozen available extensions http://websharper.com/extensionsCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 12
    13. 13. Powerful Abstractions - Sitelets • Type-safe • Composable • First-class Parameterized over a union type: /// Actions that correspond to the different pages in the site. type Action = | Home | Contact | Protected | Login of option<Action> | Logout | Echo of stringCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 13
    14. 14. 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"] }Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 14
    15. 15. 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 ] ...Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 15
    16. 16. WebSharper sitelets – composing 1 // A simple sitelet for the root of the site. let home = Sitelet.Content "/" Action.Home Pages.HomePageCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 16
    17. 17. WebSharper sitelets – composing 2 // 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.ServerErrorCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 17
    18. 18. WebSharper sitelets – composing 3 // 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.ProtectedPageCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 18
    19. 19. WebSharper sitelets – composing final let EntireSite = // Compose the above sitelets into a larger one. Sitelet.Sum [ home authenticated basic ]Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 19
    20. 20. Powerful abstractions - Formlets • Type-safe • Composable • First-class • Dependent formlets – can express dependencies • Flowlets – provide step-by-step layoutCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 20
    21. 21. 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 ... <*> formletnCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 21
    22. 22. 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.WithFormContainerCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 22
    23. 23. WebSharper formlets And you get:Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 23
    24. 24. WebSharper formlet extensions • Available for various UI control set libraries – jQuery UI – Yahoo UI – Ext JS – jQuery MobileCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 24
    25. 25. 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.FlowletCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 25
    26. 26. WebSharper formlet extensions - jQM 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"] ] ]Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 26
    27. 27. WebSharper formlet extensions - jQM As you expect:Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 27
    28. 28. Other extensions • GIS – Google Maps – Bing Maps • Visualization – Infovis – Protovis – Google VisualizationCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 28
    29. 29. Other extensions – Google Mapstype 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 Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 29
    30. 30. Other extensions – Google MapsCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 30
    31. 31. Other extensions • HTML5 – WebGL – O3D – GlMatrixCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 31
    32. 32. 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 codeCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 32
    33. 33. Extra FPish.net - “everything functional”: • Events – webcasts, meetups, etc. • Courses • User groups • Conferences • Blogs • Topics – Q&A • Developers • CompaniesCopyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 33
    34. 34. Questions? Find out more at: http://intellifactory.com http://websharper.com http://infoq.com/articles/WebSharper CUFP 2011, Tokyo, Japan - Sep 24, 2011Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com

    ×