Introduction to F# web programming with WebSharper by Adam Granicz

October 12, 2022

In the Introduction to F# web programming with WebSharper presentation by Adam Granicz, he discusses his background with F# and its growing popularity in web programming. Granicz, the founder of Intellifactory, introduces WebSharper, an open-source toolset with a large F# codebase, and plans to demonstrate a practical approach by creating web applications and integrating existing JavaScript codebases using WebSharper’s Interface Generator (Wig). The video covers creating projects using the .NET CLI and WebSharper templates, defining and handling endpoints using Sitelets, returning HTML responses, computing URLs, configuring endpoints, and generating static sites. Granicz also discusses encoding HTML tags and asynchronous programming, remote procedure calls, using templates and code completion, handling content initialization, and creating UI examples using reactive programming. Additionally, he touches upon MVU (Model-View-Update) and WebSharper’s implementation of it using the webshopper.mvu package.

Introduction to F# web programming with WebSharper: A comprehensive overview

Adam Granicz began by discussing his background with F# and its growing popularity. He emphasized the increasing interest in applying F# to web programming, a trend he is well-positioned to discuss given his experience at Intellifactory. The company specializes in development tools and has created WebSharper, an open-source toolset boasting one of the largest F# codebases. Adam set the stage for a practical demonstration of creating web applications with WebSharper and integrating existing JavaScript codebases using the WebSharper Interface Generator (WIG).

 

Getting started with WebSharper

Adam walked the audience through the initial setup of WebSharper using the .NET CLI and installed templates, highlighting the minimal boilerplate code required to get started. By installing the necessary templates, users can quickly create different project types, such as a net proxy project. He demonstrated configuring an application builder and integrating it into the serving pipeline, showcasing how WebSharper represents endpoints within the type system, allowing for the creation of abstractions called sitelets. Depending on the application type, developers can build either single-page or multi-page applications.

 

Defining and handling endpoints

In the next segment, Adam explained how to define and handle endpoints in F# using sitelets. By encoding everything as objects and identifying endpoint types through pattern matching, developers can create robust web applications. He demonstrated compiling and running the application, setting up a web server to handle requests, and using pattern matching to handle different endpoint types and return values in various formats, including text and JSON.

 

Returning HTML responses and templating

Adam discussed returning HTML responses using F# and WebSharper, emphasizing the importance of differentiating between content types such as files, text, JSON, and HTML pages. He introduced the concept of sitelets, which can encapsulate and share web application functionality as libraries. Furthermore, he touched on writing client-side code in F# and embedding client-side functionality within server-side markup using helpers like “client” and “hybrid.”

 

Computing URLs and single page applications

A significant advantage of using sitelets in F# is the ability to compute URLs as typed representations, ensuring correct link generation within applications. Adam showcased how F# Single Page Applications (SPAs) can return fully formed HTML pages with WebSharper-injected content, allowing server-side types to be used as JavaScript values and automatically managing resources. This approach ensures the flexibility and minimalism required for developing microservices or full-stack client-server applications.

 

Configuring endpoints and generating static sites

Adam delved into configuring endpoints and generating static sites using F#. By using various modifiers, developers can specify query arguments, handle form data as HTML elements, and receive JSON data. He also demonstrated how to statically generate a sitelet, enabling offline functionality by generating HTML and JavaScript files for web server hosting.

 

Asynchronous programming and templating

Adam introduced asynchronous programming in F# using WebSharper, demonstrating how to handle asynchronous events and update HTML content dynamically. He recommended using templating from the ground up, which involves externalizing HTML details into template files and filling in placeholders with F#. This method ensures type safety and provides immediate compiler errors if mistakes are made, making the code more concise and efficient.

 

Remote procedure calls and type generation

The presentation covered remote procedure calls (RPC) and generating types in F#. Adam explained how to extract values, activate them, and set up interfaces and members using RPC. He provided an example of reversing a string and discussed the client-side project, where JavaScript content is generated using a type provider.

 

Reactive programming and MVU model

Adam demonstrated the benefits of using reactive programming for creating user interfaces. He explained how to bind reactive variables to input fields and update views reactively. This method is more performant than traditional methods, allowing for precise tracking of data flow and screen updates. He also introduced the Model-View-Update (MVU) model implemented in WebSharper, highlighting its advantages for functional web programming.

 

Charting functionality and future directions

Towards the end of the presentation, Adam demonstrated integrating charting functionality into web applications using WebSharper and the .NET charting library. He discussed his journey from desktop application development to web development, driven by the ease of sharing applications via the web. Adam shared his enthusiasm for F# web development, highlighting its productivity and advanced debugging tools.

 

Conclusin

Adam Granicz’s Introduction to F# Web Programming with WebSharper offered a comprehensive and practical guide to leveraging F# for web development. His detailed explanations and hands-on demonstrations made the session an invaluable resource for developers seeking to harness the power of F# and WebSharper in their web applications.

 

Additional resources

Check out more from the MeetUp Func Prog Sweden. Func Prog Sweden is the community for anyone interested in functional programming. At the MeetUps the community explore different functional languages like Erlang, Elixir, Haskell, Scala, Clojure, OCaml, F# and more.