| Contents | |--------------| | 🍦 VanFS <br/> <sub>📱 Versatility of Web Technology <br/> for Cross-Platform App Development<sub> | | 🚀 Getting Started| | 🌐 Web Components | | ⚡️ Functional Reactive Programming (FRP)| | ⏱️ Timeline |

vanfs

🍦 VanFS

VanFS is a project template for 1:1 bindings from F# to VanJS (A tiny Reactive UI Framework without React/JSX) + WebComponents + micro FRP (Functional reactive programming)

What is VanJS?

https://github.com/vanjs-org/van

🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.

https://vanjs.org

VanJS (abbreviated Vanilla JavaScript) is an ultra-lightweight , zero-dependency , and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels like building React apps in a scripting language, without JSX. Check-out the Hello World code below:

VanJS code in JavaScript

import van from "vanjs-core"

const { a, p, div, li, ul } = van.tags
// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello =
    () =>
        div(
            p("👋Hello"),
            ul(
                li("🗺️World"),
                li(a({ href: "https://vanjs.org/" }, "🍦VanJS")),
            ),
        )

van.add(document.body, Hello())

Try on jsfiddle

VanFS is a F# project template for one-to-one direct bindings of VanJS

VanFS code in F#

module HelloApp
open Browser
open Browser.Types
open Fable.Core.JsInterop
open Van.Basic // import tags, add

let a: Tag = tags?a
let p: Tag = tags?p
let div: Tag = tags?div
let ul: Tag = tags?ul
let li: Tag = tags?li

let Hello =
    fun _ ->
        div [
            p ["👋Hello"]
            ul [
                li ["🗺️World"]
                li [a [{|href="https://vanjs.org/"|}; "🍦VanJS"]]
            ]
        ]

add [document.body; Hello()]
|> ignore

Demo

https://codepen.io/kentechgeek/pen/VwNOVOx

Components with parameters

VanJS components are just functions in JavaScript.

VanFS components are just functions in F#, and there are no strict rules like functional components in React.

However, if we aim for a consistent style for components with parameters that is similar to:

a [{|href="https://vanjs.org/"|}; "🍦VanJS"]

the following code should be more appropriate:

let Greeting: Tag =
    fun list ->
        let name: string = list[0]?name
        div [$"Hello {name}!"]

add [document.body; Greeting [{|name="Ken"|}]]
|> ignore

Here is the corresponding TSX code:

const Greeting: Component<{ name: string }> =
    ({ name }) => 
        <div>Hello {name}!</div>;

render(() => <Greeting name="Ken" />, document.body);

Why VanJS is based on Vanilla JavaScript

VanJS: About - the Story behind VanJS

But I think, in a nutshell, the best way to describe it is: VanJS is the scripting language for UI, just like bash is the scripting language for terminal.

Being the scripting language for UI , is the fundamental principle that guides the design of VanJS . It's based on JavaScript so that it can work in as many environments as possibles, not only for websites, but also for webviews which most major OSes support.

VanJS: About - How Did VanJS Get Its Name?

Under the hood, VanJS stays truthful to Vanilla JavaScript as close as possible, as there is no transpiling, virtual DOM or any hidden logic. VanJS code can be translated to Vanilla JavaScript code in a very straightforward way.

Why we should avoid using JavaScript

VanJS is a library based on Vanilla JavaScript for the well-established reasons.

However, to take full advantage of VanJS , we should consider using alternative languages instead of JavaScript , which are commonly referred to as AltJS .

One of the critical reasons is that JavaScript is not a type-safe language , which can lead to runtime errors and bugs.

The Effect of Programming Language On Software Quality

An Experiment About Static and Dynamic Type Systems Doubts About the Positive Impact of Static Type Systems on Development Time

Most notably, it does appear that strong typing is modestly better than weak typing, and among functional languages, static typing is also somewhat better than dynamic typing. We also find that functional languages are somewhat better than procedural languages. It is worth noting that these modest effects arising from language design are overwhelmingly dominated by the process factors such as project size, team size, and commit size. However, we hasten to caution the reader that even these modest effects might quite possibly be due to other, intangible process factors, e.g., the preference of certain personality types for functional, static and strongly typed languages.

In fact, in modern web development, JavaScript has increasingly become a compile target from other languages, such as TypeScript.

TypeScript -> JavaScript

VanJS can be regarded as a compile target from VanFS (AltJS)

VanFS (AltJS) -> VanJS

VanFS project includes some TypeScript code.

1. The internal mechanism of VanFS

https://github.com/ken-okabe/vanfs/blob/main/van-api/ts/basic.ts

TS code for the purpose of conversion using JS Proxy:

// unary function ([a,b,c,...]) in F#  
// -> n-ary function (a,b,c,...) in VanJS

This is under the van-api directory which is essential and we would not want to modify it to keep things working.

2. For styles and Web Components

Users must install any required CSS or Web Components .

VanJS does not provide the specific installation support beause it's just a VanillaJS.

On the other hand, VanFS clarifies the step-by-step process as below:

🚀 Getting Started

CSS

Everything we need to customize or import is located under web-imports directory.

🌐 Web Components

Import and Register the web components

/web-imports/components.ts

import {
    provideFluentDesignSystem,
    fluentCard,
    fluentCheckbox
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentCard()
    );

provideFluentDesignSystem()
    .register(
        fluentCheckbox()
    );

/web-imports/css-urls.ts

export let cssURLs = [
 "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
];

Regardless, all the required code within the VanFS project is compiled into a single VanillaJS bundle using Fable and Vite.

See: 🚀 Getting Started

Why we should avoid using TypeScript and migrate to F#

F# gives you simplicity and succinctness like Python with correctness , robustness and performance beyond C# or Java.

Undoubtedly, TypeScript is the most commonly used AltJS. It is a superset of JavaScript that adds type safety and other features. So why not use TypeScript?

There

Vanfs

Install / Use

README