Kimserey's blog

Var, View, Lens, ListModel in UI.Next Last week I needed to make a two way binding for a record with nested lists . More precisely, I needed to observe all changes on this record. This changes included normal members but also lists and I needed to observe changes like adding and removing items. It took me a week to come out with a solution where I had to iterate multiple times to get to it. I started with something which was far from ideal then had a conversation on WebSharper forum with Loïc and István and came out with other better solutions. The process was as beneficial as the solution. So today I will take another approach for this blog post and instead of presenting the final solution directly, I will walk you through all the steps I took to finally come up with the solution. And as usual, the code is available on GitHub . Here are the steps: The wrong way - a mutable record - link to code The right way - lensing into members - link to code The optimised way - optimisi

How WebSharper.Warp works behind the scene Lately I’ve been very happy about how WebSharper.Warp allows me to iterate quickly and without pain. Last week, I covered how we could use WebSharper.Warp to build prototypes quickly. Check it out if you haven’t read it yet . Today, I decided to explore how WebSharper.Warp actually works behind the scene . By looking at how WebSharper.Warp works, we will learn two things: The process of compiling F# to WebSharper using WebSharper.Compiler When does the JS files get created Exploring WebSharper.Warp WebSharper.Warp is a library which allows us to boot a sitelet from a .fsx file and run the sitelet from the FSI. Here’s a short example - if you want better explanation, I covered it in last week post . The following script can be run in a .fsx . It boots up a SPA served on localhost:9000 , with JS code and makes one call to a backend endpoint to get a Hello! . We basically get all the power of WebSharper to be run from FSI. It

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. With WebSharper, it is possible to script a complete sitelets in .fsx files using WebSharper.Warp https://github.com/intellifactory/websharper.warp . 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. The code here can be found on Github https://github.

Create forms with Websharper.Forms In my previous posts, I have covered multiple aspects on how WebSharper can be used to make nice webapps by using animations , by tapping into external JS libaries or by using the built in router in UI.Next to make SPA . Today I would like to cover another aspect which is essential for making useful webapps - Forms . Most of the site we visit on a daily basis have forms. WebSharper.Forms is a library fully integrated with the reactive model of UI.Next which brings composition of forms to the next level by making composition of forms, handling validation, handling submit and displaying error an easy task. WebSharper.Forms is available in alpha at the moment on nuget - https://www.nuget.org/packages/WebSharper.Forms . What is needed to build a form The form that we will build in this tutorial will handle: Inline validation Submitting data Async operation Error handling from async operation This are the requirements I gathered during my

Create an animated menu with WebSharper.UI.Next WebSharper.UI.Next exposes a set of functions to animate elements on the page. Today we will see how we can use these functions to create an animated menu with UI.Next. The documentation for animation can be found here . The documentation has links to multiple important components of an animation. In this tutorial, we will only use the Anim.Simple . It is a function defined in Anim module which helps in creating an animation. In this post, we will see how to: Compose an animation in WebSharper Build the animated menu Compose an animation in WebSharper An animation is composed by the following components: An abstraction of animate Anim<T> An abstraction of a transition Trans<T> A duration An interpolation which uses a normalised time An easing method The two types which are used together to form an animation are Anim<T> and Trans<T> . Anim Anim<T> defines an animation between two variab