SlideShare a Scribd company logo
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/




Copyright © 2004-2011 IntelliFactory                 Platform-Independent Mobile Applications   http://www.intellifactory.com   |3
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
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




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   |5
What do we need?




                   What would get people really excited?




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   |6
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



Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   |7
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




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   |8
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




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   |9
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




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


  A couple dozen available extensions

                              http://websharper.com/extensions




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 12
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 string




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 13
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
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
WebSharper sitelets – composing 1

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




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 16
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.ServerError


Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 17
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.ProtectedPage


Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 18
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
Powerful abstractions - Formlets


  • Type-safe
  • Composable
  • First-class

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




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 20
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




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 21
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




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

  And you get:




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 23
WebSharper formlet extensions


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




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 24
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



Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 25
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
WebSharper formlet extensions - jQM


  As you expect:




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


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




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 28
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




  Copyright © 2004-2011 IntelliFactory          Platform-Independent Mobile Applications          http://www.intellifactory.com    | 29
Other extensions – Google Maps




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


  • HTML5
         – WebGL
         – O3D
         – GlMatrix




Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 31
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

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


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


Copyright © 2004-2011 IntelliFactory   Platform-Independent Mobile Applications   http://www.intellifactory.com   | 33
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

More Related Content

Similar to Applying Functional Programming to Build Platform-Independent Mobile Applications

Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Heiko Behrens
 
Mat Marquis - JQuery Mobile
Mat Marquis - JQuery MobileMat Marquis - JQuery Mobile
Mat Marquis - JQuery Mobile
Harvard Web Working Group
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global domination
Stfalcon Meetups
 
Frontend. Global domination.
Frontend. Global domination.Frontend. Global domination.
Frontend. Global domination.
Андрей Вандакуров
 
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con InnomaticCostruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Innoteam Srl
 
IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...
IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...
IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...
darwinodb
 
Best Practices - Hybrid App Implementation V 03
Best Practices - Hybrid App Implementation V 03Best Practices - Hybrid App Implementation V 03
Best Practices - Hybrid App Implementation V 03
Kam Rezvani
 
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning Models
Shailen Sukul
 
AnDevCon: Introduction to Darwino
AnDevCon: Introduction to DarwinoAnDevCon: Introduction to Darwino
AnDevCon: Introduction to Darwino
Philippe Riand
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
Operation Mobile
 
Worklight Overview
Worklight OverviewWorklight Overview
Worklight Overview
Andrew Ferrier
 
IBM Worklight - Technical Overview
IBM Worklight - Technical OverviewIBM Worklight - Technical Overview
IBM Worklight - Technical Overview
IIC_Barcelona
 
JS for Mobile: The Enyo Framework (jsconf.us 2011)
JS for Mobile: The Enyo Framework (jsconf.us 2011)JS for Mobile: The Enyo Framework (jsconf.us 2011)
JS for Mobile: The Enyo Framework (jsconf.us 2011)
Ben Combee
 
Web app
Web appWeb app
Web app
조 용구
 
IBM Mobile portal experience
IBM Mobile portal experienceIBM Mobile portal experience
IBM Mobile portal experience
Vincent Perrin
 
PHP in a mobile ecosystem
PHP in a mobile ecosystem PHP in a mobile ecosystem
PHP in a mobile ecosystem
Ivo Jansch
 
Web app
Web appWeb app
Web app
조 용구
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Custom Development with Novell Teaming
Custom Development with Novell TeamingCustom Development with Novell Teaming
Custom Development with Novell Teaming
Novell
 
Custom Development with Novell Teaming
Custom Development with Novell TeamingCustom Development with Novell Teaming
Custom Development with Novell Teaming
Novell
 

Similar to Applying Functional Programming to Build Platform-Independent Mobile Applications (20)

Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
 
Mat Marquis - JQuery Mobile
Mat Marquis - JQuery MobileMat Marquis - JQuery Mobile
Mat Marquis - JQuery Mobile
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global domination
 
Frontend. Global domination.
Frontend. Global domination.Frontend. Global domination.
Frontend. Global domination.
 
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con InnomaticCostruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
 
IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...
IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...
IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...
 
Best Practices - Hybrid App Implementation V 03
Best Practices - Hybrid App Implementation V 03Best Practices - Hybrid App Implementation V 03
Best Practices - Hybrid App Implementation V 03
 
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning Models
 
AnDevCon: Introduction to Darwino
AnDevCon: Introduction to DarwinoAnDevCon: Introduction to Darwino
AnDevCon: Introduction to Darwino
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
Worklight Overview
Worklight OverviewWorklight Overview
Worklight Overview
 
IBM Worklight - Technical Overview
IBM Worklight - Technical OverviewIBM Worklight - Technical Overview
IBM Worklight - Technical Overview
 
JS for Mobile: The Enyo Framework (jsconf.us 2011)
JS for Mobile: The Enyo Framework (jsconf.us 2011)JS for Mobile: The Enyo Framework (jsconf.us 2011)
JS for Mobile: The Enyo Framework (jsconf.us 2011)
 
Web app
Web appWeb app
Web app
 
IBM Mobile portal experience
IBM Mobile portal experienceIBM Mobile portal experience
IBM Mobile portal experience
 
PHP in a mobile ecosystem
PHP in a mobile ecosystem PHP in a mobile ecosystem
PHP in a mobile ecosystem
 
Web app
Web appWeb app
Web app
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Custom Development with Novell Teaming
Custom Development with Novell TeamingCustom Development with Novell Teaming
Custom Development with Novell Teaming
 
Custom Development with Novell Teaming
Custom Development with Novell TeamingCustom Development with Novell Teaming
Custom Development with Novell Teaming
 

Recently uploaded

HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 

Recently uploaded (20)

HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 

Applying Functional Programming to Build Platform-Independent Mobile Applications

  • 1. 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
  • 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.html Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |2
  • 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. 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. 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 Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |5
  • 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. 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 Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |7
  • 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 JavaScript Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |8
  • 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 objectives Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com |9
  • 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 maintain Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 10
  • 11. WebSharper Mobile • Exposes mobile capabilities to JavaScript • Provides the necessary packaging • Enables quick and seamless multi-targeting • Scales into the cloud Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 11
  • 12. WebSharper extensions A couple dozen available extensions http://websharper.com/extensions Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 12
  • 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 string Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 13
  • 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. 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. WebSharper sitelets – composing 1 // A simple sitelet for the root of the site. let home = Sitelet.Content "/" Action.Home Pages.HomePage Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 16
  • 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.ServerError Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 17
  • 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.ProtectedPage Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 18
  • 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. Powerful abstractions - Formlets • Type-safe • Composable • First-class • Dependent formlets – can express dependencies • Flowlets – provide step-by-step layout Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 20
  • 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 ... <*> formletn Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 21
  • 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.WithFormContainer Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 22
  • 23. WebSharper formlets And you get: Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 23
  • 24. WebSharper formlet extensions • Available for various UI control set libraries – jQuery UI – Yahoo UI – Ext JS – jQuery Mobile Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 24
  • 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.Flowlet Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 25
  • 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. WebSharper formlet extensions - jQM As you expect: Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 27
  • 28. Other extensions • GIS – Google Maps – Bing Maps • Visualization – Infovis – Protovis – Google Visualization Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 28
  • 29. 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 Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 29
  • 30. Other extensions – Google Maps Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 30
  • 31. Other extensions • HTML5 – WebGL – O3D – GlMatrix Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 31
  • 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 code Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 32
  • 33. Extra FPish.net - “everything functional”: • Events – webcasts, meetups, etc. • Courses • User groups • Conferences • Blogs • Topics – Q&A • Developers • Companies Copyright © 2004-2011 IntelliFactory Platform-Independent Mobile Applications http://www.intellifactory.com | 33
  • 34. 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

Editor's Notes

  1. Need more icons: MVC, Linq
  2. Need more icons: MVC, Linq