Purescript with Vue.js - Introduction

Posted on by Mandla Mbuli

I don’t think I am as bad as the person in this commitstrip: West Side-project story but my current side project is to get Purescript working with Vue.js.

BUT WHY!?

I came across this. It is an example application from a person called Sebastian Klingler where he uses Vue.js with Purescript and manages state using Redux. There is a video where he gives an introduction to Purescript and tell of how and why he got Redux, Vue.js and Purescript working. I was fascinated. This is not how I thought Purescript would work. My opinion of Purescript up to this point was shaped by Elm.

I tried out Elm a while ago after only briefly looking at Purescript, Reflex and Miso. I think I saw a post on reddit or something where the person said Elm is easier for beginners so I went with Elm. I felt discouraged from using Javascript with Elm. This is the boundary, the horribleness of Javascript stays over there and over here we have no runtime exception. The way I understood it, when you buy into the functional frontends (Elm, Purescript et.al) you are buying into purity. With purity comes having HTML and CSS in Javascript so that you can given them types and reason about them, CONTROL.

Except…

I have been having doubts about this. I used elm-ui and I wasn’t sure I wanted to have all that. It felt wrong. Firstly, I kinda like HTML and CSS, I can’t program in HTML and CSS (beyond the basics I need for my job) but I would like to learn. So having HTML and CSS not look like HTML and CSS is kind of a problem. Secondly, this video: Why is CSS So Weird?. So, I am thinking about this and I see the video about Vue.js and Purescript, sounds like exactly what I want. A modern templating system in the form of Vue.js and Functional programming in the form of Purescript. I also get to level up my miniscule Haskell through Purescript.

So let me see. Can I finish atleast one side project? Can I use HTML, CSS and Purescript?