purview: A simple, fun way to build websites

[ bsd3, library, web ] [ Propose Tags ]

A simple, fun way to build websites with Haskell.

The main points:

  • It's server side rendered and uses websockets to communicate HTML updates and to receive events.

  • State can be broken up into small components.

  • Attributes flow down to concrete HTML, events bubble up to handlers.

  • Handlers can send further events to a parent handler or themselves

It's inspired by Phoenix LiveView, React, Redux, and Redux-Sagas.


[Skip to Readme]

Downloads

Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees

Candidates

Versions [RSS] 0.1.0.0, 0.2.0.0, 0.2.0.1, 0.2.0.2
Change log ChangeLog.md
Dependencies aeson (>=1.5.6 && <2.3), base (>=4.7 && <5), blaze-builder (>=0.4.2 && <0.5), bytestring (>=0.10.12.0 && <0.13), http-types (>=0.12.3 && <0.13), raw-strings-qq (>=1.1 && <1.2), stm (>=2.5.0 && <2.6), template-haskell (>=2.15.0 && <2.21), text (>=1.2.4.1 && <2.2), wai (>=3.2.0 && <3.3), wai-websockets (>=3.0.1 && <3.1), warp (>=3.3.0 && <3.4), websockets (>=0.12 && <0.13) [details]
License BSD-3-Clause
Copyright 2023 Ian Davidson
Author Ian Davidson
Maintainer bontaq@gmail.com
Category Library, Web
Home page https://github.com/purview-framework/purview#readme
Bug tracker https://github.com/purview-framework/purview/issues
Source repo head: git clone https://github.com/purview-framework/purview
Uploaded by bontaq at 2023-09-29T20:59:15Z
Distributions LTSHaskell:0.2.0.2
Downloads 102 total (15 in the last 30 days)
Rating (no votes yet) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Docs uploaded by user
Build status unknown [no reports yet]

Readme for purview-0.2.0.2

[back to package description]

Purview

A simple, fun way to build websites with Haskell. It's inspired by Phoenix LiveView, React, and Redux + Sagas.

The main points:

  • It's server side rendered and uses websockets to communicate HTML updates and to receive events.
  • State can be broken up into small components.
  • Attributes flow down to concrete HTML, events bubble up to state handlers.
  • Handlers can send further events to a parent handler or themselves

It's still in early development so expect things to break or be missing!

What it looks like

module Main where

import Prelude hiding (div)

import Purview 
import Purview.Server


data CountEvent = Increment | Decrement
  deriving (Show, Eq)

view :: Int -> Purview CountEvent m
view count = div
  [ h1 [ text (show count) ]
  , div [ onClick Increment $ button [ text "increment" ]
        , onClick Decrement $ button [ text "decrement" ]
        ]
  ]

-- passes state down to the child and maintains type safety of actions
countHandler :: (Int -> Purview CountEvent m) -> Purview () m
-- arguments are initial actions, initial state, and then the reducer
countHandler = handler' [] (0 :: Int) reducer
  where
    reducer Increment state = (state + 1, [])  -- new events can be added in the []
    reducer Decrement state = (state - 1, [])

-- url is passed in to the top level component by `serve`
component url = countHandler view

main = serve defaultConfiguration component

More detailed docs on the use and particulars of Purview are mainly on Hackage.

Overview of how it works

Using an imagined example of getting the time, here's how events flow when the user clicks "check time"

  1. The event is sent from the browser in a form like

    { event: click, value: undefined, location: [0], childLocation: [0,0] }

  2. The event is put onto the channel for the event loop to process

  3. It goes down the tree to find the event in Haskell by childLocation

  4. It takes that event and applies it to the handler found by location

  5. The handler does its work in a green thread, creating a new event that looks like

    { event: stateChange, fn: state -> state, location: [0] }

  6. The state change event is put onto the channel for the event loop to process

  7. By going down the tree it applies the state change fn to the latest state in the tree, returning a new tree

  8. Any HTML changes are sent to the browser, completing the loop

Contributing

Anything is welcome, including examples or patterns you found nice. There's still a lot to discover.

The roadmap is, loosely, determined by adding things required to build real websites. The first two site-based goals:

  1. The Purview website itself, which will have more in depth tutorials (so requiring at least navigation)
  2. A stripe-based checkout (requiring communication with javascript)

Installation

  1. Install stack
  2. stack build

Running Tests

  1. The same as above with stack and build
  2. stack test