Awesome WebSharper

A curated list of WebSharper libraries, samples and resources.

Table of Contents

• Examples
  • Applications
• Libraries
  • Reactive libraries
  • Server-side hosting
  • Other libraries
  • JavaScript library bindings
    • 3D and Game engines
    • Browser Capabilities
    • Charting and Graphs
    • Code and text editing
    • Database
    • GUI and widgets
    • Maps
    • Math
    • Mobile
    • Reactive libraries
• Resources
  • Blogs
  • Sites
  • Academic publications

Examples

• = Written in F#
• = Written in C#
• = Written for .NET Core
• = Written for .NET Framework

Applications

• 2048 - The well-known game 2048 reimplemented in F#, with a few custom rule options. Running live

• BookCollection - A client-server CRUD application using remoting and a reactive client side, with full tutorial.

• LoginWithBulma - A client-side login page using HTML templating, with full tutorial.

• Counter - Follow-up to LoginWithBulma: A client-side Model-View-Update-style counter, with full tutorial.

• PeopleAPI - A simple CRUD REST API.

• MVU TodoMVC - The classic TodoMVC app written with UI and MVU. Running live

• TodoMVC - The classic TodoMVC app written with UI. Running live

• [ Twitter Clone using Websockets.

Libraries

Libraries written with and for WebSharper.

Reactive libraries

• UI (formerly known as UI.Next) - a library for constructing server-side and reactive client-side web pages in plain C#, F#, or with HTML templates.

  • Examples: Source - Running live

  • Forms - an implementation of "Piglets" for UI. It provides a concise syntax to define forms and their validation with clear model vs rendering separation of concerns.

    • Example: Source - Running live

  • Forms.Bootstrap - Bootstrap-based widgets for Forms.

    • Example: Source - Running live

  • UI.Formlets - a more concise, although less flexible, abstraction similar to Forms.

    • Example: Source - Running live

  • Charting - An API for client-side charts similar to FSharp.Charting. Includes ChartJs-based rendering, but has back-end extensibility.

    • Example: Source - Running live

  • MVU - Model-View-Update (Elm-like) architecture for full client-side applications.

    • Example: Source - Running live

Server-side hosting

• Owin - OWIN defines a standard interface between .NET web servers and web applications. This library allows hosting WebSharper applications on any OWIN-compliant host - ASP.NET, Katana, Suave, etc.

• Owin.WebSocket - Client-side and server-side WebSockets interface for OWIN-hosted applications, including automated serialization of messages.

• ASP.NET Core - Run WebSharper applications on ASP.NET Core.

• ASP.NET MVC - Run WebSharper applications alongside ASP.NET MVC and include client-side controls in Razor pages.

• Suave - Run WebSharper applications as a Suave WebPart.

Other libraries

• Data - Proxy for FSharp.Data which allows using its JsonProvider and WorldBankProvider on the client side.

  • Example: Source - Running live

• WebSharper.Html - a library for constructing server-side and client-side web pages. Superceded by UI.

  • Piglets - an implementation of "Piglets" for WebSharper.Html. It provides a concise syntax to define forms and their validation with clear model vs rendering separation of concerns.

  • Formlets - a more concise, although less flexible, abstraction similar to Piglets.

  • Formlets.JQueryUI - JQueryUI widgets for Formlets.

  • Reactive - An imperative reactive programming library. Underlies Piglets and Formlets.

• OAuth - Authenticate users with external login providers with OAuth 1.0 or 2.0.

JavaScript library bindings

Using libraries written in JavaScript from WebSharper.

3D and Game engines

• BabylonJs - A 3D engine based on WebGL and WebAudio.

  • Example: simple 3D scenes - Source - Running live

• iioEngine - A 2D engine based on HTML5 Canvas.

• O3D - WebGL-based implementation of the (discontinued) O3D rendering and 3D math engine.

  • Example: pool game - Source - Running live

• ThreeJs - Leading 3D engine based on WebGL.

  • ThreeJs.FirstPersonControls - First-person camera controls for Three.js.

  • ThreeJs.TrackballControls - Trackball-style camera controls for Three.js.

  • ThreeJs.TransformControls - Translate/rotate/scale control gizmo for Three.js.

  • Example: simple 3D scenes - Source - Running live

Browser Capabilities

• Modernizr - Eaisily detect the browser's capabilities.

• WebAudio - Audio playback, recording and manipulation.

  • Examples: Source - Running live

• WebRTC - Real-Time Communications: media recording and peer-to-peer connections.

  • Examples: Source - Running live

• WebSpeech - Speech synthesis and recognition.

  • Examples: Source - Running live

Charting and Graphs

• ChartJs - Simple yet flexible JavaScript charting for designers & developers.

  • Example: Source - Running live

• Cytoscape - An open source software platform for visualizing complex networks and integrating these with any type of attribute data.

  • Example: Source - Running live

• D3 - Data-Driven Documents: A low-level library for data visualization.

  • Example: World Tour - Source - Running live

• Google.Visualization - Interactive charts.

  • Example: a simple bar chart - Source - Running live

• Highcharts - Interactive charts. Includes Highstock for financial data and timeline charts, and Highmaps for interactive map charts.

  • Example: HighCharts, Highmaps and Highstock graphs - Source - Running live

• JointJs - Visualize and interact with diagrams and graphs.

• Peity - mini SVG pie, donut, line or bar charts.

  • Example: Source - Running live

• Rickshaw - JavaScript toolkit for creating interactive real-time graphs.

  • Example: Source - Running live

Code and text editing

• Ace - High-performance code editor for the web.

• CodeMirror - A versatile text editor implemented in JavaScript for the browser.

  • Example: Source - Running live

• Google.CodePrettify - An embeddable script that makes source-code snippets in HTML prettier.

• HighlightJs - Syntax highlighting for the Web.

  • Example: Source - Running live

• JsPdf - HTML5 client library for generating PDFs.

  • Example: Source - Running live

• MediumEditor - Medium.com WYSIWYG editor clone.

  • Example: Source - Running live

• Remarkable - Markdown parser with Commonmark support, extensions, syntax plugins, high speed.

  • Example: Source - Running live

• TinyMce - WYSIWYG rich text editor.

  • Example: Source - Running live

Database

• MongoLab - Connect to online MongoDB instances.

  • Example: a MongoLab-backed notes application - Source - Running live

• PouchDb - CouchDB-inspired in-browser database.

GUI and widgets

• GoldenLayout - A multi-screen layout manager for webapps.

  • Example: Source - Running live

• IntroJs - Step-by-step guide and feature introduction for websites.

  • Example: Source - Running live

• JQueryUI - A collection of GUI widgets, animated visual effects, and themes implemented with jQuery.

  • Examples: Source - Running live

• MaterialUI - Material Design style widgets.

• SlickGrid - A fully open-source, javascript, client-side grid control, based on jQuery and jQueryUI and compatible with Bootstrap.

• SweetAlert - Customizable JavaScript popup messages.

  • Example: Source - Running live

• JQuery.Terminal - A plugin for creating command line interpreters in your applications.

  • Example: Source - Running live

Maps

• Bing.Maps - Embedded Microsoft Bing maps.

  • Examples: Source - Running live

• Google.Maps - Embedded Google maps.

  • Examples: Source - Running live

• Google.Maps.MarkerClusterer - Automatically cluster Google Maps marker by proximity.

• Leaflet - Embedded map library that can connect to providers like OpenStreetMap or MapBox.

  • Example: Source - Running live

Math

• GlMatrix - 3D Math library: matrices, quaternions, etc.

  • Examples with WebGL: Source - Running live

• MathJax - A JavaScript display engine for mathematics that works in all browsers.

  • Example: Source - Running live

• MathJs - An extensive math library for JavaScript. Includes proxies for .NET types such as Complex and decimal.

  • Example: Source - Running live

• Moment - Parse, validate, manipulate, and display dates and times in JavaScript.

  • Example: Source - Running live

Mobile

• JQueryMobile - A Touch-Optimized Web Framework.

• PhoneGap - PhoneGap / Cordova bindings to native phone APIs.

• PhoneJs - Now known as DevExtreme Mobile - Native-looking mobile web applications.

• Swiper - Mobile touch slider focused on performance.

  • Example: Source - Running live

• HammerJs - An open-source library that can recognize gestures made by touch, mouse and pointerEvents.

  • Example: Source - Running live

Reactive libraries

• KnockoutJs - MVVM framework for reactive applications.

• Facebook React - A JavaScript library for building user interfaces.

  • Example: a Tic-Tac-Toe game - Source - Running live

Resources

Blogs

• The WebSharper team's blog - Official announcements, releases, tutorials.

• Kimserey Lam's blog

• Youenn Bouglouan's blog

Sites

• Try WebSharper - Write client-side code in your browser and see it running immediately, in F# or C#.

• Official documentation

Academic publications

• Adam Granicz, Jozsef Uri, Andras Janko. Synthesizing User Interfaces using Functional Reactive Web Abstractions. In Fourth International Workshop on Programming Technology for the Future Web (ProWeb20), Porto, Portugal, 2020. To appear.

• Loic Denuziere, Adam Granicz. Enabling modular persistence for reactive data models in F# client-server web applications. In Modularity, Malaga, Spain, 2016. ACM

• Adam Granicz, Loic Denuziere. Functional, Reactive Web Programming in F#. In Central European Functional Programming School (CEFP), Budapest, Hungary, 2015, pp. 137-160. Springer

• Simon Fowler, Loic Denuziere, Adam Granicz. Reactive Single-Page Applications with Dynamic Dataflow. In Practical Aspects of Declarative Languages (PADL), Portland, OR, USA. 2015. Springer, PDF1, PDF2

• Loic Denuziere, Adam Granicz, Simon Fowler. Reactive Abstractions for Functional Web Applications. Submitted to Implementation and Application of Functional Languages (IFL), Koblenz, Germany, 2015. PDF

• Adam Granicz. Functional Web and Mobile Development in F#. In Central European Functional Programming School (CEFP), Budapest, Hungary, 2013, pp. 381-406. Springer

• Loic Denuziere, Ernesto Rodriguez, Adam Granicz. Piglets to the Rescue: Declarative User Interface Specification with Pluggable View Models. In Symposium on Implementation and Application of Functional Languages (IFL), Nijmegen, The Netherlands, 2013. ACM, PDF.

• Loic Denuziere, Adam Granicz, Anton Tayanovskyy. Visualizing data on the web. In Data-driven Functional Programming (DDFP), Rome, Italy, 2013, pp. 19-22. ACM

• Joel Bjornson, Anton Tayanovskyy, Adam Granicz. Composing Reactive GUIs in F# Using WebSharper. In Symposium on Implementation and Application of Functional Languages (IFL), Alphen aan den Rijn, The Netherlands, 2010. pp. 203-216. Springer

• Alex Peake, Adam Granicz. The first substantial line of business application in F#. In Commercial Users of Functional Programming (CUFP), Tokyo, Japan, 2009.