Merge pull request #270 from amplifying-fsharp/page-for-october-session

Session on Real-time event visualization using F# and Fable

Author: edgarfgp

src/content/sessions/2024-10-18.md

@@ -0,0 +1,65 @@
+---
+title: "Real-time event visualization using F# and Fable"
+preview: "Real-time event visualization"
+isDraft: true
+date: 2024-10-18T14:00:00.000Z
+slug: "2024/10/18"
+champion: "Vagif Abilov"
+zoomLink: "https://us06web.zoom.us/j/83103283643?pwd=kIYnfLSspPkQMrmcMXMVluZ96v7ucz.1"
+zoomPasscode: "real"
+issueLink: ""
+company: "Miles AS"
+youtubeId: ""
+---
+
+# Topic
+
+Real-time event visualization using F# and Fable
+
+In this session we explore how to build a real-time event visualization system using F# and Fable.
+
+### Workshop plan
+
+- Scaffolding a project with SAFE template
+- Serving the content of a file from a Saturn Web service
+- Retrieving file content using HTTP requests in a Fable app
+- Implementing playback of individual lines of a file
+- Replacing direct calls to Fable.React with Feliz
+- Adding Bulma CSS and FontAwesome to a Fable app (using CSS F# type provider)
+- From file lines player to events player (parsing text lines with Thoth.Json decoder)
+- Implementing event subscriptions using Web sockets (and Elmish.Bridge)
+- Adding live tiles (presentation of state changes)
+- Using Redux DevTools with Fable applications
+
+More details can be found at [Real-time event visualization using F# and Fable](https://github.com/object/FableWorkshop.2024/blob/main/FableWorkshop.md#workshop-plan).
+
+### Prerequisites
+
+- Visual Studio Code (running on Windows, Linux or macOS)
+- Ionide F# plugin (Ionide-fsharp) by Ionide
+- Basic understanding of F#
+- .NET Core version 8.0 or later
+- npm JavaScript package manager
+
+More details can be found at [Prerequisites](https://github.com/object/FableWorkshop.2024/blob/main/FableWorkshop.md#prerequisites)
+
+### Recommended tools and resources
+
+1. The [Elmish Book](https://zaid-ajaj.github.io/the-elmish-book)
+2. An Introduction to [Elm](https://guide.elm-lang.org/), it helps to understand of Elmish and MVU architecture
+3. REST Client [plugin](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) by Huachao Mao to be able to execute HTTP request right from Visual Studio Code
+4. Chrome browser
+5. Redux DevTools Chrome extension (remember to enable it)
+
+More details can be found at [Recommended tools and resources](https://github.com/object/FableWorkshop.2024/blob/main/FableWorkshop.md#recommended-tools-and-resources)
+
+## Champions
+
+- [Vagif Abilov](https://github.com/object)
+
+### Resources
+
+- [Real-time event visualization using F# and Fable](https://github.com/object/FableWorkshop.2024/blob/main/FableWorkshop.md#real-time-event-visualization-using-f-and-fable)
+- [Prerequisites](https://github.com/object/FableWorkshop.2024/blob/main/FableWorkshop.md#prerequisites)
+- [Recommended tools and resources](https://github.com/object/FableWorkshop.2024/blob/main/FableWorkshop.md#recommended-tools-and-resources)
+- [Elmish Book](https://zaid-ajaj.github.io/the-elmish-book)