# Graphical Applications in Haskell with FRP and Reflex

DevFeed: [Graphical Applications in Haskell with FRP and Reflex](<https://devfeed.tech/articles/graphical-applications-in-haskell-with-frp-and-reflex-27926.md>)

Original publisher: [Read original article](<http://alt-romes.github.io/posts/lectures/2022-07-10-frp.html>)

Published: 2022-07-10T00:00:00Z

Content type: tutorial

Language: en

Sources: [Romes' Musings](<https://devfeed.tech/sources/romes-musings.md>)

Topics: [Haskell](<https://devfeed.tech/topics/haskell.md>), [Functional programming](<https://devfeed.tech/topics/functional-programming.md>), [Reflex FRP](<https://devfeed.tech/topics/reflex-frp.md>), [ui](<https://devfeed.tech/topics/ui.md>), [real-time](<https://devfeed.tech/topics/real-time.md>), [Programming](<https://devfeed.tech/topics/programming.md>), [Declarative programming](<https://devfeed.tech/topics/declarative-programming.md>)

Tags: [functional](<https://devfeed.tech/tags/functional.md>), [functional-programming](<https://devfeed.tech/tags/functional-programming.md>), [haskell](<https://devfeed.tech/tags/haskell.md>), [programming](<https://devfeed.tech/tags/programming.md>), [reactive](<https://devfeed.tech/tags/reactive.md>), [reactive-programming](<https://devfeed.tech/tags/reactive-programming.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [user-interface](<https://devfeed.tech/tags/user-interface.md>)

## AI overview

This article introduces functional reactive programming for interactive graphical user interfaces in Haskell. It explains how behaviours represent values that vary continuously over time and events represent occurrences at particular points in time, allowing programmers to describe reactive systems without handling time-related implementation details directly. The article also covers Reflex and building user interfaces with Reflex-Dom.

## Source excerpt

Contents 1 Functional Reactive Programming 1.1 Behaviours 1.2 Events 2 Reflex 2.1 Building UIs with Reflex-Dom 2.2 Reflex Combinators 3 Example: 101companies 1 Functional Reactive Programming Functional reactive programming is a general paradigm well suited to programming real-time systems in a high-level and functional way. Real-time systems or reactive systems are those that handle continuous time-varying values, discrete events in real time, and react accordingly. A good example of these systems is a mobile robot. They must take into consideration continuous inputs like wheel speed, orientation, and discrete events such as detection of another object. The class of reactive systems we're interested in here is interactive graphical UIs. A user interface has multiple components that can be seen as discrete events and continuous time-varying values. An input box, where one might write their name, is an example of a time varying value (it continously changes - whenever the user types something); a button is an example of a discrete event in time: at certain points in time the user will click the button. This will make more sense with practice and code samples. So the promise of functional reactive programming is that we can program these complicated reactive systems in a pure functional way. But how? Functional Reactive Programming introduces two key concepts: Behaviours and Events. Behaviours are first-class values that vary over continuous time. That means a behaviour is a value that changes with time and can be passed to/returned by functions. Events are first-class values that occur at some points in time. They may refer, e.g., to happenings in the real world time - such as a mouse click or a key press. And then, it says that the FRP implementation will handle all time-related details so that the programmer can describe their reactive system without thinking about what happens at any particular point in time, but rather thinking about what happens accross all poin