Posts

Showing posts from March, 2016

Var, View, Lens, ListModel in UI.Next

Var, View, Lens, ListModel in UI.NextLast 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 codeThe right way - lensing into members - link to codeThe optimised way - optimising with ListModel -…

How WebSharper.Warp works behind the scene

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.CompilerWhen does the JS files get createdExploring WebSharper.WarpWebSharper.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 makes it easy to rapidly s…

Prototyping web app made easy with WebSharper Warp

Prototyping web app made easy with WebSharper WarpScripting 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.Warphttps://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.com/Kimserey/War…

Create forms with Websharper.Forms

Image
Create forms with Websharper.FormsIn 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 formThe form that we will build in this tutorial will handle:Inline validationSubmitting dataAsync operationError handling from async operationThis are the requirements I gathered during my last project. I had to deal wi…

Create an animated menu with WebSharper.UI.Next

Image
Create an animated menu with WebSharper.UI.NextWebSharper.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 WebSharperBuild the animated menuCompose an animation in WebSharperAn animation is composed by the following components:An abstraction of animate Anim<T>An abstraction of a transition Trans<T>A durationAn interpolation which uses a normalised timeAn easing methodThe two types which are used together to form an animation are Anim<T> and Trans<T>.AnimAnim<T> defines an animation between two variables. For example if A is our initial valu…