External JS library with WebSharper in F#

External JS library with WebSharper in F#

When building web apps with WebSharper in F#, one of the most common question is:

How do we integrate external JS library with WebSharper in F#?

It is indeed an interesting question since one of the good side of JS is the number of good libraries out there which will save you a lot of time and effort.

WebSharper provides directives to call external JS libraries within F#. Today I would like to explore how we can integrate a JS libraries into our WebSharper project with UI.Next.
I will demonstrate how you can extend WebSharper.JQuery to add a tag input functionality with autocompletion.
For the tag input and formatting we will use Bootstrap Tags Input library and to provide autocompletion, we will use Typeahead.js.

Here’s a preview of the result:

Understand how to use the JS library first

Tags input with Typeahead.js works as an extension of JQuery.
To use it, you needs to define an input with an attribute data-role="tagsinput".

<input id="tags" data-role="tagsinput" />

And call .tagsinput from JQuery on your input by passing a configuration which contains the typeahead configuration source.

In this example I just set the source property which is a function called to fetch the data to present in the autocompletion. It is called every time the input is modified.the first argument is the value of the input and the second argument is a callback used to populate the autocompletion dropdown.

Build a link from F# to the JS librairy

WebSharper provides two directives to interact with JS libraries Direct and Inline. Direct will allow you to link a JS function to an F# signature and call it as if it was in F#. Inline will do the same but will inline the JS translation to the call function. You can find the documentation here.

As we saw earlier, tags input is built as an extension method of JQuery. WebSharper has the bindings to JQuery already built in so what we want is to extend WebSharper JQuery to put tags input just how it is done in JS.
In F#, it is possible to extend types by using the with keyword and omitting the =. It allows us to write the following:

X<unit> is provided by WebSharper and indicates to WebSharper that this method is just a placeholder and that it does not have any implementation. You can view it as a placeholder implementation, it tells WebSharper to look for the JS implementation instead of the F# implementation.

So far we just defined an F# definition which serves as a bridge between our F# code and the JS code. To define the JS code, we need to use the Inline attribute. Here’s how to do it:

First we add the Inline attribute and place the JS code in quotes. If you compare both, the original JS and the one in quote, you will notice that the only differences are the special characters $0 and $1.

Those special characters represent the arguments of the F# function where $0 represents the current instance this, it will be our JQuery instance since the function is an extension of JQuery and $1 is the first argument. Here we have only one argument of type FuncWithArgs<string * (string [] -> unit), unit>.

When we give a tuple as argument of function, WebSharper can’t tell whether we want a tuple as argument or if we want a function with multiple arguments. In our case, source is a function with two arguments so giving it a tuple will result in a single argument which is incorrect. To indicate to WebSharper that we want a function with multiple arguments, we must use FuncWithArgs<input, ouput> (thanks to István for the info).
Then if we examine the input type string * (string [] -> unit), we have a tuple composed by the query string and a callback function taking an array of string to show in a autocompletion dropdown and returning unit. This signature represents exactly what source is.

We are done now with the link from F# to JS libraries.

How do we call it?

We now have a bridge to the JS library ready to be used. We need to create the input and call the JQuery extension.

Conclusion

Today we saw how easy it is to integrate an external JS library and create a bridge between our F# code in WebSharper and some functions of the JS library, you can find the full code here. Of course you can use that for other libraries, It is very useful and I have done it this way for few libraries like Bootstrap or Cropbox, you can have a look at the implementation of my Cropbox bridge to F# here and it worked pretty well for me. Hope you enjoyed this tutorial, like always hit me on twitter @Kimserey_Lam if you have any comments and thanks for reading!

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…