Practical Introduction to Building Browser Apps with F# and Fable

on YouTube ↗42m

" summary

Shows how to compile F# to JavaScript using Fable and build browser apps with the Elmish pattern (init/update/view) wired to React, rendering with SVG. Implements a playable Snake game (about 20×20 grid, 20–30px scale, ~200ms tick) demonstrating keyboard input, interval timer, food spawn, collision/game‑over, and immutable state via F# records and discriminated unions; uses Visual Studio Code, inspects Fable-generated JS, and reuses JavaScript libraries in production.

AI-written summary · about

" chapters (9)

1. 0:00F# and Fable intro
2. 4:56Elmish architecture
3. 9:37Snake game basics
4. 15:59Drawing with SVG
5. 24:45Snake movement & input
6. 29:16Food mechanics
7. 33:10F# benefits
8. 37:28Debugging JS
9. 40:46Libraries & extensions

" related talks

• 55mF# and Fable: re-think web developmentMaxime Mangel · NDC Oslo 2018
• 01h 01mConquer the JavaScript ecosystem with F# and Fable!Alfonso Garcia-Caro · NDC Oslo 2017
• 31mHacking F# in JS ecosystemKrzysztof Cieślak · Scale By The Bay 2019
• 42mHacking F# in JS ecosystemKrzysztof Cieślak · Codemotion Milan 2017
• 49mFunctional Web Development in F#Sergey Kalinets · .NET Fest 2017
• 57mBranching Out with ElmDave Fancher · NDC London 2017
• 43mThe F# Path to RelaxationDon Syme · .NET fwdays'21 conference
• 01h 49mPurely Functional Web Apps using React and PureScriptPhil Freeman · LambdaConf 2015