Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
184 lines (114 sloc) 7.38 KB

This small project is done as a part of "developer day" in my team. We dedicate one day to learn something totally new. This is the first time we're doing it but we'd like to have it once a month.

I chose to use WebSharper and create a simple web app for conference speakers (as DevDay organizer I tend to have my database of past and future speakers for better organization).

I was writing this summary as the day went.

11:00

Started with being asked couple of times to provide username and password to Github account from command line on Windows.

I tried Windows Credential Manager to store it but with no luck. I installed Github for Windows but with no luck either.

11:15

Screw that, I'm switching to WebSharper already.

I started with CloudSharper, this required from me to install "CloudSharper Local component" so it uses your local environment to run programs.

Git-credential-winstore solved my problem with saving credentials for github (thanks Maciek). They say they're storing credentials in Windows Credential Manager but I haven't seen anything more than I've added there. Anyway, they've probably added it in a correct way.

"System.Net.WebException: The remote server returned an error: (407) Proxy Authentication Required."

is the first thing I got from running CloudSharper service on my machine. Why I haven't thought about it earlier. This issue on Bitbucket doesn't look good. It's possible I have to switch to Visual Studio. Yikes.

11:35

Installing plugin for Visual Studio...

This is what you get after classical File->New Project: New Project with WebSharper

I chose HtmlApplication.

12:00

Traditionally we're going together for a lunch with my team. Time for a status update from other folks.

Kuba created a Pull Request for AngularJS. Great! He'll switch to Ionic soon.

Other guys are playing with:

  • creating iOS 8 CocoaTouch framework
  • Yeogurt (don't ask me but it's React, MongoDB and Node probably)
  • React itself
  • FunScript

14:00

This was fast, maybe too fast in creating a project and trying to start from there. Went back to reading documentation.

This getting started page and how to run examples comes in handy.

14:35

Reading was useful, I could create an empty app but got stuck on creating Html from Client.fs which is supposed to do the following:

let Main () =
    let welcome = P [Text "Welcome"]
    Div [
        welcome
        Button [Text "Click Me!"]
        |>! OnClick (fun e args ->
            welcome.Text <- "Hello, world!")
    ]
do Main () |> fun res -> res.AppendTo "entrypoint"

But this isn't compiling yet.

14:45

Correcting the file for the fifth time trying to understand what is wrong. I don't know if significant whitespace is the best idea in F#. Mark Rendle in his talk has probably a view on this.

16:00

Ok, apart from being dragged to do another thing (I was too weak to avoid distraction this time) I'm back and ready with working example. Of course checking namespaces was too hard for me at the beginning.

Changing

open IntelliFactory.WebSharper.Html

to

open IntelliFactory.WebSharper.Html.Client

saved the day. Let's go back to building my awesome app.

16:25

It's compiling, ok. But it shows me a blank page. Cannot insert a proper markup inside a div which I selected to be my entry point.

Ok, I don't know why but changing

do Main () |> fun res -> res.AppendTo "entrypoint"

invocation to doing the same at the end of Main function resulted (at last) in WORKING SIMPLE HELLO WORLD APPLICATION IN WEBSHARPER! YAY!

This is how I changed the code:

let Main () =
    let welcome = P [Text "Welcome"]
    Div [
        welcome
        Button [Text "Click Me!"]
        |>! OnClick (fun e args ->
            welcome.Text <- "Hello, world!")
    ]
	|> fun res -> res.AppendTo "entrypoint"

17:10

It's funny but there's actually more to learn than to create when you start developing web apps with WebSharper. Or maybe it's just me. You can have Sitelets, Pagelets, Formlets and Piglets, yes, Piglets. And Html templates. Let's say I wanted to optimize for building an actual application in my spare few minutes I have with this inno dev Day so I chose Formlets for now.

18:40

Good thing is that the solution I created on Windows with Visual Studio 2013 works on Xamarin 5.7!

This is how it looks like:

Hello World

21:00

Working on adding at least one Formlet which contains some input form.

22:30

Finally I have some code that has one input form and a submit button. What a day! Here's the code:

[<JavaScript>]
module Client =

	let processResult s = Console.Log("test")

	let nameInput = 
		Controls.Input ""
			|> Validator.IsNotEmpty "Enter non-empty value"
			|> Enhance.WithValidationIcon
			|> Enhance.WithTextLabel "Name of the speaker"
			|> Enhance.WithSubmitAndResetButtons
			|> Enhance.WithFormContainer

	let Main =
		Div [
			nameInput.Run (fun s ->
				processResult s)
		]
		|> fun res -> res.AppendTo "entrypoint"

And it looks like this:

Final app

Impressive, right? :)

Summary

I spent the whole day trying to make a web app allowing me to manage conference speakers for DevDay (both invited previously and future ones). I wanted to use WebSharper desperately because I really want to learn this technology.

I managed to create a simple web app with some input fields. Simultanously I was creating this summary and a blog post about the whole day. Seems like I got excited about doing something totally different from my normal activities during this devDay.

WebSharper looks like a powerful product. It integrates with Visual Studio and Xamarin. It has its own Web IDE - Cloudsharper. It has a lot of concepts - Sitelets, Pagelets, Formlets, Piglets. It's definitely something you have to spend 5 minutes with. I don't think that one day looking here and there is enough for me to grasp language (I'm not proficient with F# for sure), new platform and new concepts all at once. I will be continuing playing with it as part of other initiatives and simply in my spare time.

The whole devDay was exciting! Sometimes I was frustrated that things do not work but it's normal in IT, I got used to that.

I would recommend other teams spending time on something totally unrelated to the day to day work. We want to have this "developer day" once a month!