Simple Routing

Let’s look at routing in Halogen. We will start by implementing a router ourselves to show that just because we are using Halogen it doesn’t mean we can’t use the Html api as well. We need an app that informs us of the best variety of potato depending on how we want to cook them. A vital quality of life tool. Setup First setup the project as per here. »

Parent Component

In the last post we covered writing a child component. Now let’s code up a parent component that will create and contain these components as well as coordinate the communication between them. Create a new file under src called Parent.purs. Stick the following in the header: module Parent where import Prelude import Child as Child import Data.Array ((..)) import Data.Const (Const) import Data.Maybe (Maybe(..)) import Data.Symbol (SProxy(..)) import Data.Traversable (traverse_) import Halogen as H import Halogen. »

Child Components

Our last post made a mildly complex component. Let’s now look at creating multiple components within our page and have them communicate. We will create a component that simulates a simple chat client. The parent component will create several of these chat components , and will receive messages from them and send it to its siblings. Setup First setup the project as per here. The Child component Lets start with the child component. »

Slightly More Involved Page

Following from the last post where we made a very simple component in Halogen, let’s now make a slightly more involved one. Here, I want to show how it is possible to use Purescripts strong typing to model our data in such a way that it will be impossible to create an application that can be in an invalid state. If we do something invalid, our code should not compile. »

Refactoring to Monads, Applicatives and Functors

It takes a bit of practice to get used to using Functors, Applicatives and Monads so here are some common patterns I have found that are more succinct when refactored. Hopefully it will help speeding up the journey to becoming a Functor ninja. Nested Maybes If you have a series of nested case statements on Maybes : nestedMaybePre :: Maybe Int -> Maybe Int nestedMaybePre maybe = case maybe of Nothing -> Nothing Just value -> case evenThing value of Nothing -> Nothing Just num -> Just num Since Maybe is a monad, you can instead chain them using bind (>>=) : »

A simple page

Halogen is based on a collection of components each maintaining its own state. Lets create a simple app based on a single component, and then take it from there. Our App is going to be a very basic web page that asks someone their name and then says hello. Setup First setup the project as per here. Code Ok, let’s write some code. If you open ./src/Main.purs you will see Spago has given us a simple initial main function. »

Higher Kinded Types in Purescript

We’ve seen how we can create simple types in Purescript. Purescripts allows us to take these types even further. We can have types that can take parameters that allow us to create new types. For example, in the previous post we had the Planet type : data Planet = Mars | Neptune | Uranus Supposing we then had the requirement to represent no planet at all. After all, some aliens just roam around the Galaxy without coming from any particular planet. »

Setting up a Halogen project

Ensure you have Spago installed. Spago is a build and package management tool for Purescript. (There are other options - Spago is the best.) Then create a directory for your project (here I am calling it simple-project) and initialise Spago. In the command line : ➜ mkdir simple-page ➜ cd simple-page ➜ spago init Initializing a sample project or migrating an existing one.. Upgrading the package set version to "psc-0.13.3-20190831" Package-set upgraded to latest tag "psc-0. »

Types in Purescript

First and foremost Purescript is a very strongly typed language. All functions must have their types defined. This is a typical example of a function definition : length :: Array -> Int The length function above has to take an Array, and it is guaranteed to return an Int. There is no situation where anything else will happen - guaranteed! Purescript has a compile stage where it will take all the Purescript code and convert it into Javascript. »