Search This Blog

Prototyping web app made easy with WebSharper Warp

Prototyping web app made easy with WebSharper Warp

Scripting quick prototypes in WebSharper can sometimes be troublesome.
If for each prototype, a new project has to be created or code needs to be commented/uncommented, it can become quite demotivating as too many steps are required.
In F#, .fsx files are a great tool to script disposable code.
Write some isolated functions, run on FSI and then forget about it.

In this post, I will show you how you can setup a project in order to use Warp efficiently to create sitelet prototypes.
Building with .fsx is a huge advantage. It allows us to have multiple files containing completely isolated sitelets all within the same project.
Using one line command, we can boot up a sitelet to test it quickly which makes it ideal for prototyping.

This should install Warp in your \packages folder. It should also install all the references of Warp including WebSharper, WebSharper.UI.Next and others.
Warp also comes with an extra folder \tools where you should find reference-nover.fsx.
This file contains all the reference links to be loaded from your .fsx file so that you don’t need to reference everything by yourself.
You just need to load reference-nover.fsx at the head of your .fsx:

#I"../packages/"#load"WebSharper.Warp/tools/reference-nover.fsx"

This is one of the reason why I recommended to use Paket. If we were to use Nuget, the path would break each time WebSharper is updated because Nuget puts the version number in the path.Another reason is that we don’t need to add the reference to any project. We just need the libraries to be downloaded in order for us to reference it from our .fsx.

For the moment, some references are missing from reference-nover.fsx, I’ve made a PR.
Until this is merged, you will need to alter reference-nover.fsx to add WebSharper.UI.Next.Templating.dll and Intellifactory.Xml.dll if you want to use the html templates in your sitelets.

Now that we have Warp ready, we can start creating our first sitelet.

Build a sitelet

Let’s start by creating a very simple sitelet.
Create a .fsx file and put the following sitelet in:

To create the sitelet, we use Application.SinglePage which is a helper to boot SPA with a single endpoint.

The interesting part is Warp.RunAndWaitForInput which takes our sitelet as argument.
If you run this code in FSI, it will boot a selfhosted server on http://localhost:9000/ (by default).

This is fantastic! With just one single small isolated .fsx file we can boot a complete server and start serving pages. We could use another function than Application.SinglePage and have a full-blown sitelet with multiple endpoints if we wanted.

Now sending code to FSI is useful when we want to run part of the .fsx but in our case right now, we just evaluate the complete .fsx every time.
So to make this task easier, we can create a buildAndRun.cmd file which will execute the script so that we can easily restart the sitelet without having to manually sent the code to the FSI.
It consists of one single command line.

We now have all the ingredients to create powerful sitelet within a .fsx file:

RPCs

External resources

JS compilation

Boot on Owin selfhost

Benefits

The major benefit is that it makes prototyping much easier.
When I started to use WebSharper, I used to create new projects each time I had to test something.

It was slow and demotivating. I just kept the same project and every time I had to test something, I would delete the previous code.

Now I don’t do that anymore as with WebSharper.Warp, only one .fsx file needs to be created. It is easy and quick and you can be up and running a full sitelet in a matter of seconds.
This makes prototyping much more enjoyable and combined with the build script, it is quick and easy to iterate.

Conclusion

Today we saw how we could use WebSharper.Warp in a very efficient way.
Prototyping is one of the best way to take advantage of Warp since it is so easy to get started!
I hope you will try it and let me know if you have other tricks to make your journey with WebSharper even more enjoyable.
As usual, if you have any comments please leave it here or hit me on Twitter @Kimserey_Lam.
Thanks for reading!

Prototyping will be an important step in preparing to develop a solution which can fit for purpose. It will allow the developer to explore the ideas and exchange the feedback with the client.prototyping

Post a Comment

Popular posts from this blog

Absolute layout and relative layout Xamarin formsIn Xamarin Forms, layouts are used to position elements in the page.
There are multiple layouts available like stack layout, grid layout, table layout, absolute layout and relative layout.
Stack layout is straight to grasp the concept, we stack elements one by one horizontally or vertically.
Grid layout is also straight forward, we define rows and columns and we place the elements by indicating the row index and column index.
On the other hand, absolute layout and relative layout isn’t that straight forward because in Xamarin it is NOT the same as positions in CSS.So today, we will see how and when we can use absolute layout and/or relative layout in our advantage.
This post is composed by two parts: 1. Absolute layout
2. Relative layout
1. Absolute layoutThe first thing to understand is that absolute layout has nothing to do with CSS absolute position.
In Xamarin Forms. absolute layout allows us to position elements in the page by pre…

Build an accordion view in Xamarin.FormsFew weeks ago I posted about absolute and relative layouts.
Layouts are called Layouts because they contain children which are placed in a particular way.
Xamarin.Forms has a lot of layouts and views to structure pages like grid, table view or list view.Today I would like to show you how we can use some of these basic views to build an Accordion view.Here’s a preview of the Accordion view:Full source code available on GitHub - https://github.com/Kimserey/AccordionView/blob/master/Accordion/AccordionView.csThis post will be composed of four steps:Create a BindablePropertyDefine the accordion expandable sectionDefine the accordion viewUsage sample1. Create a BindablePropertyAs we saw in one of my previous post,
Xamarin.Forms works around data bindings.
View properties are bound to viewmodel properties.Default views like Label, Button, ListView or TableView come with the necessary bindable properties like BackgroundColor, TextColor, ItemsSource, It…

Use Font Awesome from your Xamarin.Forms projectIcons are important in mobile applications where space is limited.
We use icon everywhere to convey action intent like + would be to add an item or a bin would be to delete one.
There are two ways to add icons to our mobile app:with imageswith fontsToday we will see the second option - how we can add Font awesome to our Xamarin.Android project and how we can use it from Xamarin.Forms.
This post will be composed by three parts: 1. Why Font Awesome
2. Add Font Awesome to the Droid project
3. Use with Xamarin.Forms
1. Why Font AwesomeIf you are familiar with Web development, you must have encountered Font awesome http://fontawesome.io/.
It is an icon font containing lots of icon for every type of usage.
The advantaged of using a font is that we can leverage the text options, like text color or text size, to easily update the style of the icon to match our app.Let’s see how we can bring Font Awesome to the Droid project.2. Add Font awesome…