Demo projects on how to get Fable working with some alternative view rendering frameworks:
Also quickly compares to Elm.
The basic steps are:
- Install alternative dom rendering framework
- Alias in webpack config (use of the
resolve
option)
Follow the guide.
Install
npm remove react react-dom
npm install inferno
// Not sure how many of these are needed... works with just inferno
// npm install inferno-compat
// npm install inferno-clone-vnode
// npm install inferno-create-class
// npm install inferno-create-element
webpack.config.js
{
resolve: {
"alias": {
"react": "inferno-compat",
"react-dom": "inferno-compat"
}
}
}
Follow the guide.
Install
npm remove react react-dom
npm install preact preact-dom
webpack.config.js
{
resolve: {
"alias": {
"react": "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat"
}
}
}
Go to the appropriate project folder and run:
npm install
dotnet build src
npm start
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from ./public
...
i 「wdm」: Compiled successfully.
😆
For elm:
cd src/elm
elm reactor
Go to http://localhost:8000 to see your project dashboard.
Open a terminal in Fable.AlternativeView
& run dotnet fsi build.fsx
. This will build all the projects (requires npm
, uglify-js
, and elm
to be installed).
These were a very quick set of tests:
- webpack switching from
mode: "development"
tomode: "production"
- Elm following the minification guide
Library | Build Mode | Size |
---|---|---|
Elm | standard | 106 KiB |
Elm | optimized + minified | 16 KiB |
Inferno | development | 829 KiB |
Inferno | production | 78.9 KiB |
Preact | development | 717 KiB |
Preact | production | 57.7 KiB |
React | development | 1750 Kib |
React | production | 172 KiB |
Informative discussion on package size Webpack Performance Budgets.
And for something different.