Web (and Mobile) Development                              with WebSharper in F#                                           ...
Mobile &ITCamp 2012 sponsors                                                       Development@   itcampro   # itcamp12   ...
Mobile &Adam                                                                           Development               Commercia...
Mobile &Books                                                                         Development       2007             2...
Mobile &IntelliFactory                                                                        DevelopmentAt IntelliFactory...
Mobile &HTML5 applications                                                         Development@   itcampro   # itcamp12   ...
Mobile &IntelliFactory                                                                      DevelopmentIntelliFactory in a...
Mobile &Agenda                                                                             Development• Trends towards cli...
Mobile &Motivations                                                                        Development1. Applications are ...
Mobile &Moving to client-based                                                                             Development    ...
Mobile &Motivations                                                                      Development2. Programming models ...
Mobile &Motivations                                                                        Development3. Too many language...
Mobile &Motivations                                                                      Development4. Inability to check ...
Mobile &Development Trends                                                         DevelopmentBenefiting more from proven ...
Mobile &WebSharper in a nutshell                                                   Development•   Mature, enterprise-ready...
Mobile &WebSharper                                                                    Development A web development platfo...
Mobile &WebSharper                                                                      Development A web development plat...
Mobile &WebSharper                                                                  Development A web development platform...
Mobile &WebSharper                                                                           Development A web development...
Mobile &Getting Started with WebSharper                                            Development(demo)@   itcampro   # itcam...
Mobile &Pagelets – Client-side functionality                                               Development Defining client-sid...
Mobile &Pagelets                                                                          Development Integration with ASP...
Mobile &Client-server communication                                                  Development Client-server communicati...
Mobile &Formlets                                                                   DevelopmentType-safe, composable abstra...
Mobile &Formlets                                                                   Development Progressive enhancement and...
Mobile &Formlets                                                                   Development Sample formlet [<JavaScript...
Mobile &Formlets                                                                    DevelopmentAnother sample formlettype ...
Mobile &Formlets                                                                    Development And you get:@   itcampro  ...
Mobile &Flowlets                                                                        Development Flowlets Flowlets enab...
Mobile &Sitelets                                                                    DevelopmentSitelets enable you to repr...
Mobile &Extensions                                                                 DevelopmentCore, bundled extensions    ...
Mobile &Extensions                                                                     DevelopmentVisualization     –   Go...
Mobile &WebSharper Mobile                                                          Development• Exposes mobile capabilitie...
Mobile &Mobile applications                                                        Development • HTML5      – WebGL      –...
Mobile &Mobile applications–jQuery Mobile                                             Developmentlet loginSequenceF =  For...
Mobile &Mobile applications–jQuery Mobile                                              DevelopmentDiv [HTML5.Attr.Data "ro...
Mobile &Mobile applications–jQuery Mobile                                          Development As you expect:@   itcampro ...
Mobile &Mobile applications–Google Maps                                                                    Developmenttype...
Mobile &Mobile applications–Google Maps                                            Development@   itcampro   # itcamp12   ...
Mobile &WebSharper 3.0                                                             Development• JavaScript translation fro...
Find out more at:                            http://intellifactory.com                              http://websharper.com ...
Mobile &Extra                                                                      DevelopmentFPish.net - “everything func...
Upcoming SlideShare
Loading in...5
×

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

395

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
395
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. Mobile &ITCamp 2012 sponsors Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  3. 3. Mobile &Adam Development Commercial Users of Functional Programming (CUFP) Tokyo, Japan – September 2011@ itcampro # itcamp12 Premium conference on Microsoft technologies
  4. 4. Mobile &Books Development 2007 2010 2011 2012 3@ itcampro # itcamp12 Premium conference on Microsoft technologies
  5. 5. Mobile &IntelliFactory DevelopmentAt 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
  6. 6. Mobile &HTML5 applications Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  7. 7. Mobile &IntelliFactory DevelopmentIntelliFactory 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
  8. 8. Mobile &Agenda 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?@ itcampro # itcamp12 Premium conference on Microsoft technologies
  9. 9. Mobile &Motivations Development1. Applications are server-centric – the server performs too much: Rendering presentation Responding to events from the client Business-logic / backendThis is bad because… Server becomes the bottleneck Applications are inherently slow to respond, little or no client-side interaction Scalability issues@ itcampro # itcamp12 Premium conference on Microsoft technologies
  10. 10. Mobile &Moving to client-based Development Moving functionality from the server to the clientAjax in browser Extending browser capabilitiesRequires JavaScript, omnipresent Silverlight, Flash, applets, etc. Ajax Applets Silverlight Java on client .NET on client JavaScript + HTML5 Flash Flash on client Client-based models Core Logic (Silverlight, Flash, applets) InteractionServer-based models Presentation(ASP.NET, PHP, JSF, etc.)@ itcampro # itcamp12 Premium conference on Microsoft technologies
  11. 11. Mobile &Motivations Development2. Programming models and patterns fall short: Markup vs. code-behind mismatch Passing IDs as strings – standard ASP.NET examples: Wiring events Validators, validator groupsThis is bad because… Developing web applications becomes extremely error-prone@ itcampro # itcamp12 Premium conference on Microsoft technologies
  12. 12. Mobile &Motivations Development3. 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 – databaseThis is bad because… Not one is an expert in many languages@ itcampro # itcamp12 Premium conference on Microsoft technologies
  13. 13. Mobile &Motivations Development4. Inability to check client-side code before execution JavaScript is untypedThis is bad because… This makes development extremely error-prone Requires a lot of time and effort to develop and maintain@ itcampro # itcamp12 Premium conference on Microsoft technologies
  14. 14. Mobile &Development Trends DevelopmentBenefiting more from proven ideas from functional programmingEnabling developing client-based web applications that execute mostly on the client with occasional server communicationRemoving unsafe development patternsUsing fewer languages, and translation techniques to make development simplerFunctional + Client-based + Robust + Simpler@ itcampro # itcamp12 Premium conference on Microsoft technologies
  15. 15. Mobile &WebSharper in a nutshell 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 developEasier to maintain@ itcampro # itcamp12 Premium conference on Microsoft technologies
  16. 16. Mobile &WebSharper Development 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
  17. 17. Mobile &WebSharper Development 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
  18. 18. Mobile &WebSharper Development 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
  19. 19. Mobile &WebSharper Development 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
  20. 20. Mobile &Getting Started with WebSharper Development(demo)@ itcampro # itcamp12 Premium conference on Microsoft technologies
  21. 21. Mobile &Pagelets – Client-side functionality Development 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
  22. 22. Mobile &Pagelets Development Integration with ASP.NET Integrating with ASP.NET F# type for server control [<JavaScriptType>] type HelloWorld() = inherit IntelliFactory.WebSharper.Web.Control() [<JavaScript>] override this.Body = HelloWorld.Main () ASP.NET markup <ws:HelloWorld runat=“server” />@ itcampro # itcamp12 Premium conference on Microsoft technologies
  23. 23. Mobile &Client-server communication Development Client-server communication module YourWebApplication = open IntelliFactory.WebSharper ... [<Rpc>] let YourServerFunction (...) = ... [<JavaScript>] let YourClientFunction () = Seamless communication let data = YourServerFunction (...) ... [<JavaScript>] let Main () = ...@ itcampro # itcamp12 Premium conference on Microsoft technologies
  24. 24. Mobile &Formlets DevelopmentType-safe, composable abstraction for user interfaces:Formlet.Yield (fun v1 v2 ... vn -> <compose all vi’s>)<*> formlet1<*> formlet2...<*> formletn@ itcampro # itcamp12 Premium conference on Microsoft technologies
  25. 25. Mobile &Formlets Development Progressive enhancement and declarative specification: [<JavaScript>] let TB label msg = Controls.Input "“ |> Validator.IsNotEmpty msg |> Enhance.WithValidationIcon |> Enhance.WithTextLabel label@ itcampro # itcamp12 Premium conference on Microsoft technologies
  26. 26. Mobile &Formlets Development Sample formlet [<JavaScript>] let BasicInfoForm () : Formlet<BasicInfo> = Result composition Formlet.Yield (fun name age -> { Name = name; Age = age }) <*> input "Name" "Please enter your name" <*> inputInt "Age" "Please enter a valid age" Formlet composition@ itcampro # itcamp12 Premium conference on Microsoft technologies
  27. 27. Mobile &Formlets DevelopmentAnother sample formlettype 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
  28. 28. Mobile &Formlets Development And you get:@ itcampro # itcamp12 Premium conference on Microsoft technologies
  29. 29. Mobile &Flowlets 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]@ itcampro # itcamp12 Premium conference on Microsoft technologies
  30. 30. Mobile &Sitelets DevelopmentSitelets enable you to represent entire web sites ina type-safe, composable, and robust way.let home = Sitelet.Content "/" Action.Home Pages.HomePagelet inferred = Sitelet.Infer <| fun action -> match action with | Action.Contact -> Pages.ContactPage ...let authenticated = Sitelet.Protect ...let EntireSite = Sitelet.Sum [ home authenticated inferred ]@ itcampro # itcamp12 Premium conference on Microsoft technologies
  31. 31. Mobile &Extensions DevelopmentCore, bundled extensions – HTML4 + HTML5 – DOM – EcmaScript – jQueryMaps jQuery UI – Bing Maps jQuery Mobile – Google Maps jQuery Tools@ itcampro # itcamp12 Premium conference on Microsoft technologies
  32. 32. Mobile &Extensions DevelopmentVisualization – Google Visualization – Infovis – Protovis – RaphäelControl 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
  33. 33. Mobile &WebSharper Mobile Development• Exposes mobile capabilities to JavaScript – GPS, Accelerometer, etc.• Provides the necessary packaging• Enables quick and seamless multi-targeting• Scales into the cloud@ itcampro # itcamp12 Premium conference on Microsoft technologies
  34. 34. Mobile &Mobile applications Development • HTML5 – WebGL – O3D – GlMatrix@ itcampro # itcamp12 Premium conference on Microsoft technologies
  35. 35. Mobile &Mobile applications–jQuery Mobile Developmentlet 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
  36. 36. Mobile &Mobile applications–jQuery Mobile DevelopmentDiv [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"] ]]@ itcampro # itcamp12 Premium conference on Microsoft technologies
  37. 37. Mobile &Mobile applications–jQuery Mobile Development As you expect:@ itcampro # itcamp12 Premium conference on Microsoft technologies
  38. 38. Mobile &Mobile applications–Google Maps Developmenttype 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 = override this.Body = // Sets the label to the current location Bing.Map(this.Body, MapOptions) let screenWidth = Rest.RequestLocationByPoint(<<your-key>>, JQuery.Of("body").Width() loc.Lat, loc.Long, ["Address"], map.SetMapType Bing.MapTypeId.Road fun result -> setMap map) let locInfo = let MapOptions = // Returns markup for this control Bing.MapViewOptions( result.ResourceSets.[0].Resources.[0] Div [ Credentials = bingMapsKey, label.Text <- label Width = screenWidth - 10, "You are currently at " + Br [] Height = screenWidth - 10, JavaScript.Get "name" locInfo) map Zoom = 16) ] :> _ // Adds a pushpin at the current location let loc = Bing.Location(loc.Lat, loc.Long) let label = H2 [] 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
  39. 39. Mobile &Mobile applications–Google Maps Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  40. 40. Mobile &WebSharper 3.0 Development• 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
  41. 41. Find out more at: http://intellifactory.com http://websharper.com http://infoq.com/articles/WebSharper Web and Mobile Development with WebSharper in F# Q&A@ itcampro # itcamp12 Premium conference on Microsoft technologies
  42. 42. Mobile &Extra DevelopmentFPish.net - “everything functional”:• Events – webcasts, meetups, etc.• Courses• User groups• Conferences• Blogs• Topics – Q&A• Developers• Companies@ itcampro # itcamp12 Premium conference on Microsoft technologies
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×