Showing posts from January, 2016

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 firstTags 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=…

Quick setup with Paket and .fsx scripts

Quick setup with Paket and .fsx scriptsPaket is a dependency manager. It is useful especially when you want to develop .fsx files where the full path of the dependencies are hardcoded in your script. It makes it easier to manage dependencies compared to Nuget because the version of the library isn’t included in the path.This post will show how to setup a new .fsx file with dependencies handled by Paket.Initialize Paket and download librariesDownload paket.boostrapper.exe from here. Place it under \.paket and run it:.paket\paket.bootstrapper.exeIt will download the latest version of paket.exe. Now run init to initialize paket for your solution:.paket\paket.exeinitYour solution is now ready to get the libraries. Now to install a library run:.paket\paket.exe add project TestProject nuget MathNet.Numerics.FSharpproject is used to specify a project and nuget is used to specify a nuget package to be downloaded. After running the command, you will now have MathNet.Numerics in your packages f…

One way to structure Web App built in F# and WebSharper

Architecture for Web App built in F# and WebSharperF# + WebSharper is an awesome combination to build web application. The only problem is that if you want to build a web app larger than a to-do list, it’s hard to find examples to use as references. It is even harder to find tutorials that touches on overall design and answer questions like:How should I start?Where should I put the code?How should I separate the code, put it in different files, with different namespaces or modules?How many layers?Asking these questions at the beginning of the development is important. All these questions if answered correctly will lead to a good structure for the application. Answered incorrectly, or not even asked, will most likely lead to unmaintainable/fragile/rigid (or whatever bad adjectives for coding) code.Over the last few months, I have been working on a web app built in F# with WebSharper and came out with an architecture that caters to extensions and decoupling. Today, I will share this str…