https://github.com/aolney/fable-p5-demo

A simple Fable application of p5js using foreign interfaces
https://github.com/aolney/fable-p5-demo

Last synced: 17 days ago
JSON representation

A simple Fable application of p5js using foreign interfaces

• Host: GitHub
• URL: https://github.com/aolney/fable-p5-demo
• Owner: aolney
• License: apache-2.0
• Created: 2017-10-24T21:26:42.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:16:44.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T19:12:05.134Z (about 1 month ago)
• Language: F#
• Size: 2.99 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fable P5 Demo

[p5js](https://p5js.org/get-started/) is a javascript implementation of Processing. 

Because it is javascript, we can use it with Fable. 

In this case, I tried ts2fable on some [typescript definition files of p5js](https://github.com/LujunWeng/demos-p5js/tree/master/typings/p5js) to create a [Fable foreign interface](http://fable.io/docs/interacting.html).

Now we have static type checking for our p5js bindings!

## Development requirements

* [dotnet SDK](https://www.microsoft.com/net/download/core) 2.1 or higher

* [node.js](https://nodejs.org) with [npm](https://www.npmjs.com/)

* An F# editor like Visual Studio, Visual Studio Code with [Ionide](http://ionide.io/) or [JetBrains Rider](https://www.jetbrains.com/rider/).

## Building and running the app

* Install JS dependencies: `npm install`

* Install .NET dependencies: `mono .paket/paket.exe install`

* Start Webpack dev server: `npx webpack-dev-server` or `npm start`

* After the first compilation is finished, in your browser open: http://localhost:8080/

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

## Project structure

### npm/yarn

JS dependencies are declared in `package.json`, while `package-lock.json` is a lock file automatically generated.

### paket

[Paket](https://fsprojects.github.io/Paket/) 

> Paket is a dependency manager for .NET and mono projects, which is designed to work well with NuGet packages and also enables referencing files directly from Git repositories or any HTTP resource. It enables precise and predictable control over what packages the projects within your application reference.

.NET dependencies are declared in `paket.dependencies`. The `src/paket.references` lists the libraries actually used in the project. Since you can have several F# projects, we could have different custom `.paket` files for each project.

Last but not least, in the `.fsproj` file you can find a new node: `	` which just tells the compiler to look for the referenced libraries information from the `.paket/Paket.Restore.targets` file.

### Webpack

[Webpack](https://webpack.js.org) is a JS bundler with extensions, like a static dev server that enables hot reloading on code changes. Fable interacts with Webpack through the `fable-loader`. Configuration for Webpack is defined in the `webpack.config.js` file. Note this sample only includes basic Webpack configuration for development mode, if you want to see a more comprehensive configuration check the [Fable webpack-config-template](https://github.com/fable-compiler/webpack-config-template/blob/master/webpack.config.js). Deployment uses Webpack to populate the `deploy` directory and then pushes that directory to `gh-pages`.

### Web assets

The `index.html` file and other assets like an icon can be found in the `public` folder.