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. »

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. »

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. »