Functional Programming for the Web: PureScript Foreign Import and DOM Events

Kevin B. Greene
14 min readMay 18, 2020

Source: PureScript Tutorial

Previously in this Series

So, to this point we have PureScript set up on our computers and we have been able to read some text from an HTML page. Not that interesting, but along the way we have looked at monads, pattern matching, type and data constructors, do notation… quite a bit actually. We’re going to continue here directly from where we left off last time with some more interesting DOM manipulation, including event handling, and import JavaScript into our PureScript project.

Changing the DOM

We saw last time that in PureScript we must use monads to perform impure operations in a pure manner. That means that if we interact with the DOM (something outside of our application) we must wrap that as an Effect. Anytime you deal with state outside of your application (user input, printing to the screen, posting to or getting from a remote API…) you are performing a side effect and in PureScript we have a type to represent that.

Let’s look back at the function we wrote last time to read text from the DOM.

--

--

Kevin B. Greene

Experienced Software Engineer, passionate about functional programming and the open web.