Kimserey's blog

Bring internationalization (i18n) to your WebSharper webapps in FSharp When working on webapps which need to be used by international clients, it is important to provide internationalization (i18n). I18n is the process of developing web/desktop/mobile applications which provide an easy way to change language and culture to be localized to different markets. For example, English and French markets have different language, date format and number format. The webapp needs to provide a way to switch texts and respect date and number formats. So today I will show you how you can bring i18n to your WebSharper webapp. This post is composed by three parts JS libraries WebSharper bindings to work with F# Example Here is a preview: 1. JS libraries There are three parts that needs to be configurable in order to provide i18n. the language, all text needs to be translated the date format, in some places, the days is after before the months - also days and months need to be translated ...

Get your domain name and setup SSL with Cloudflare Few weeks ago I explained how to setup a static page and host it on Github for free using github pages. Have a look at it if you missed it https://kimsereyblog.blogspot.co.uk/2016/07/from-idea-to-product-with-websharper-in.html . I also explain how we could get a custom domain name for people to access our website easily. For example I’ve setup a github page with my own name domain https://kimsereylam.com and got it served via HTTP. The problem with setting your own domain name is that your page will not be served with HTTPS. Now for the example website, it is hosted on GitHub and it’s just static data therefore communication encryption isn’t really important. But the issue is that if you share this website to others without specifying the protocol , Chrome will try to open it with HTTPS. And when it does, if you do not serve HTTPS, an ugly error page will show on the browser. This will definitely look bad and more importantly, it ...

OOP in FSharp - How to define and implement classes, abstract classes and interfaces Even though F# is a functional language, it also provides way to build application in a object oriented way. When interacting with C# libraries, it is very useful since C# is object oriented by nature. Today I would like to show you how you can define and build classes in a object oriented way. This post is composed by three parts: 1. Classes 2. Abstract classes / interfaces 3. Inheritance 1. Classes Defining classes is the same as defining record type, by using the keyword type . Classes can have constructors and members which can either be a function or a property . type MyType(name) = let mutable name = name do () // do some side effect member self.DoSomething() = () member self.PropName with get() = name and set value = name <- value new() = new MyType("default name") let mytype = new MyType()...

Undertand Xamarin Forms data bindings in F# In Xamarin.Forms, interacting with buttons, labels, lists and all other controls is done via data bindings. Data bindings is one of the core component of the MVVM pattern (model - view - viewmodel). It provides a way to isolate model - view - viewmodel and therefore allows them to be swapped independently (for example for UI changes by swapping with another view or for testing purposes by swapping the viewmodel). There is a very good tutorial on the Xamarin website about data bindings https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/data_binding_basics/ . In Xamarin.Forms, everything that can be done in XAML can be coded in C# which means that we can code everything in F# . When coding the whole view, it is easy to get mixed up between views and viewmodels. There is no visible separation compared to using XAML where it is obvious that the XAML file is the view and the code linked to the view is the viewmodel. So today I...

Create HTML componants for your WebSharper webapp with UI Next template WebSharper.UI.Next comes with a simple template engine which can be used to build doc elements. It is built using a F# typeprovider therefore gives typesafety for templating. If you never used WebSharper or WebSharper.UI.Next before, I published a tutorial few months ago on how WebSharper works and how you can use it to create SPA’s - https://kimsereyblog.blogspot.co.uk/2015/08/single-page-app-with-websharper-uinext.html WebSharper official documentation can be found here https://github.com/intellifactory/websharper.ui.next/blob/master/docs/Templates.md . In this post I will explain some of the functionalities of WebSharper.UI.Next template and give specific examples to showcase how they can be used. This post will be compose by five parts: 1. Get started with templates 2. Template holes 3. Sub templates 4. On click event 5. Value bindings The complete code can be found on GitHub - https://github.com/Ki...