Back to Questions
2.1k
views 3
comments
Questions about client-only (offline?) HTML applications
websharper f# javascript offline
Hello Everyone,

I've been playing around with WebSharper for a couple of weeks now and am working on my first major sample. Hopefully, the FPish community can help me perform a sanity check to see if I'm making the following decisions for the right reasons:

(1) I decided to go with creating an offline HTML application (in the templates, it is "WebSharper 2.4 HTML Application (Sitelets)") because the website is hosted on a LAMP server and doesn't have the ability to host a DLL file or any server-side content. Any server-side functionality that the client needs is provided through an existing RESTful service. I was planning to use jQuery or some other asynchronous mechanism to retrieve/save data as needed. Is this the right decision? Should I create a "WebSharper 2.4 Web Application (Sitelets)"?

(2) When I created a couple of test offline applications, they started with sample code that includes server-side concepts. Upon compiling the application, it creates both a DLL and a HTML/JS-only set of files. Just running the HTML files off my local computer without a server seems to work. I integrated some of the Formlet examples from the manual and it looks like they are working correctly. I'm assuming that the DLL is used by WebSharper to translate some of the code from F# to JS, but I'm not sure. Is the DLL file just a by-product of the compilation process that I can ignore?

(3) When I integrated the Formlet examples into the applications, I ended up creating viewers similar to this:
type PersonFormViewer () =
  inherit IntelliFactory.WebSharper.Web.Control ()

  [<JavaScript>]
  override this.Body = PersonFormlet :> IntelliFactory.WebSharper.Html.IPagelet
However, the documentation for IntelliFactory.WebSharper.Web.Control says that it is for creating server-side ASP.NET controls. Is this the correct way to do it or should I be doing something else?

(4) From my limited understanding of .NET and WebSharper (this is the first time I've ever played with .NET, ASP or a windows-based server framework for web development), [<RPC>]-tagged sections of code should not exist in a client-only app. My mental picture of the whole RPC process is similar to how Google does it with GWT and GAE. I assume that all RPC-tagged sections are compiled to .NET code that runs on the server. Is this a correct assumption? Also, are there other parts of WebSharper that I should not use when writing a client-only application?

Those are just the questions I can think of at this time but if anyone has any advice on creating a client-only website that integrates with an existing network-based service, I would really appreciate your insights.

Thank you for your time and help,

z.

EDIT: I was able to answer question 3 myself after reading [link:groups.google.com] where Anton explains the bridging between server and client-side combinators. Apparently I did it correctly.
.
1) If all the server-side functionality is provided by a third party service, then yes, HTML Application is the good template to use.

For the interaction with RESTful services, jQuery is indeed a reasonable choice. A nice way to use it would be to create an asynchronous workflow using jQuery.ajax, something like the following (untested):
[<JavaScript>]
let asyncGet url : Async<'a> =
    Async.FromContinuations (fun (ok, err, _) ->
        let conf =
            JQuery.AjaxConfig(
                Url = url,
                Success = [| fun (res, _, _) -> ok (As<'a> res) |],
                Error = [| fun (_, msg, _) -> err (Failure msg) |]
            )
        JQuery.Ajax(conf) |> ignore)

2) Yes. Basically the compilation process is as follows:
  • Web Application (and WS Library) is a standard F# library project with an extra compilation step that generates the javascript files from the DLL.
  • HTML Application is like Web Application with a second extra step that generates the static HTML files.

So in the end, for HTML Application, all you need to deploy is the contents of the html directory; the rest can be ignored.

4) Correct again, RPC functions use the web server and cannot be used in a client-only app.

Basically, the only constraint of HTML Application is that everything that is not client-side is computed once during the extra compilation step I mentioned. Each Action is compiled into a static html page, so you are limited to a finite number of Actions (which you need to list in your Website.Actions).
By on 4/2/2012 5:11 AM ()
For anyone interested in this Ajax query, here is a version that works with RESTful web services that use JSON for the query / data format:

    [<JavaScript>]
    static member asyncGet url : Async<'a> =
      Async.FromContinuations
      <| fun (ok, _, _) ->
          let conf =
            JQuery.AjaxConfig(
              Url = url,
              Success = [| fun (res, msg, jqxhr) -> ok <| As<'a> (res, msg, jqxhr) |],
              DataType = (IntelliFactory.WebSharper.JQuery.DataType.Json :?> _)
            )
          JQuery.Ajax(conf)
          |> ignore

This is based directly on the documentation on jQuery's page. Adding a data parameter is easy as well. The added benefit is that the user has access to the result, the message from the server and the jqXHR object (if needed).

One interesting note is that it doesn't look like WebSharper can currently deal with System.Exception objects. I tried to modify and run the Error value in numerous ways, but it always resulted in either a compile-time or run-time error message.

Regards,

z.
By on 4/6/2012 11:13 PM ()
Hi Loic,

Thank you very much for your detailed reply. I'll continue on my path and see how it goes.

I'll test out the ajax inquiry you wrote as well. Having just a little experience with jQuery, I'm still trying to learn the intricacies of how to make it work for me. There is a similar query at [link:groups.google.com] but I haven't really tested that either.

Just for reference, here is what I wrote based on Vladimir Matveev's code:

    [<JavaScript>]
    static member GetJsonAsync(url : string, ?data : obj) = 
      Async.FromContinuations <|
        fun (ok, _, _) ->
          let cont (retData : obj, status : string) = ok (retData, status)
          match data with
          | Some d -> JQuery.GetJSON(url, d, cont)
          | None -> JQuery.GetJSON(url, cont)
          |> ignore

However, I think your query might provide a great deal more flexibility by modifying the individual .ajax() options. I'll try both to see if I can figure out which is better.

Regards,

zakaluka.
By on 4/2/2012 8:20 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us     		Built with WebSharper