Frontend in F#? Hold my beer!
summary
Backend codebase becomes a working web UI using Fable + Elmish MVU compiled to JavaScript, with HTTP via JS interop and React components for JSON/XML viewing. Styling uses the Fulma wrapper so minimal CSS knowledge is needed, with targeted tweaks (overflow:auto for a vertical scrollbar, responsive column sizes). State is immutable and debuggable with Redux devtools time-travel. A legacy 1,000+ line mixed app is replaced by 7 F# files (~400 lines) and the approach proves practical in production.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:56Motivation for F# frontend
- 6:50Why functional frontend
- 12:36Elm architecture basics
- 15:12Fable: F# to JS
- 19:12F#/Fable app build
- 22:44Setting up the development environment
- 23:26App model in F#
- 25:18State update messages
- 26:50Update function
- 28:43Initial view with Fable React
- 30:08UI with Fulma
- 33:55Layout and responsiveness
- 38:56JSON formatting with React
- 40:18Redux DevTools debugging
- 43:13Live coding summary
- 45:55Conclusion and Q&A
related talks
55mF# and Fable: re-think web development
37mFull Stack Web in F#
43mFunctional UI, Functional Apps
46mSAFE apps with F# web stack
41mWriting Reliable Web Apps With Elm
31mMake the Back-End Team Jealous: Elm in Production
38mThe challenges and benefits of a functional reactive frontend
25mPure Functions & Paladins Building TTRPGS with F# and MVU (v1)