5

GitHub - RonaldSchlenker/Vide: Reactive front-end framework for F# without depen...

 1 year ago
source link: https://github.com/RonaldSchlenker/Vide
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vide is a declarative view library written in F#. It implements a core that can be used in various application frameworks. It currently uses Fable (heart).

Vide is in an early prototype state, and it may be that many things you read here will already be obsolete!

The prototype implements the core, a Fable API, and a Fable app that demos several use cases.

The basic idea (composing state-aware functions) is described in the contribution to the 2019s 'Applied F# Challenge'.

Requirements

Building and running the app

  • Install dependencies: npm install
  • Start the compiler in watch mode and a development server: npm start
  • After the first compilation is finished, in your browser open: http://localhost:3000/

Any modification you do to the F# code will be reflected in the web page after saving.

Note: check the "scripts" section in package.json to see the commands triggered by the steps above.

Samples

All samples shown here can be executed in the branch demos/public01

Given the index.html with an "app" container and a script tag for app kickoff:

<body>
  <div id="app"></div>
  <script type="module" src="./build/app.js"></script>
</body>

In app.fs, you will find variouse samples, including the famous "Counter"-Sample, known from various frameworks:

let videApp =
    vide {
        let! count = Mutable.ofValue 0

        div {
            $"Count = {count.Value}"
        }

        button .onclick(fun _ -> count -= 1) { "dec" }
        button .onclick(fun _ -> count += 1) { "inc" }
    }

Also in app.fs, start the app by hosting it in the app-div:

let appHolder = document.getElementById("app")
let videMachine = Vide.Fable.startApp appHolder videApp (fun sender state -> ())
videMachine.Eval()




report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK