https://github.com/caringdev/model-update-view

MUV tutorial
https://github.com/caringdev/model-update-view

Last synced: about 7 hours ago
JSON representation

MUV tutorial

• Host: GitHub
• URL: https://github.com/caringdev/model-update-view
• Owner: CaringDev
• Created: 2017-08-20T23:39:28.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-11-09T11:43:23.000Z (8 days ago)
• Last Synced: 2024-11-09T12:19:28.387Z (8 days ago)
• Language: F#
• Homepage:
• Size: 825 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Model Update View

Model Update View (MUV) is an architecture well suited for functional programming.

It is also known as Elm architecture, named after the [Elm language](http://elm-lang.org/).

[Fable](http://fable.io/) is a very popular F# to JS compiler. On top, there's [Elmish](https://fable-elmish.github.io/elmish/), an extension that brings MUV to F#.

For the view part, there's [Elmish-React](https://fable-elmish.github.io/react/), using [React](https://facebook.github.io/react/) to render HTML.

A MUV program in its simplest form consists of a model, an update function returning a new model and a view rendering function.

The MUV architecture is becoming increasingly popular in latest (web) frameworks and applied in e.g. React and Vue.js

## TODO

In `src` and each sub-folder (except `Navbar`) there's a `X - TODO.md` file detailing the tasks at hand. Start with `0 - TODO.md`.

## Building and running the app

* Install JS dependencies: `yarn install`

* Restore required tools: `dotnet tool restore`

* Start `dotnet fable watch src --run npm start` (or run `start` task in VS Code)

* Open [your browser](http://localhost:8080/)

Any modification you do to the F# code will be reflected in the web page after saving. Watch the console for error messages.