..."extended" with SPA-like routing and a global store carrying the logged-in/logged-out state of a nominal user.
git clone https://github.com/and-pete/purescript-halogen-template-extended.git halogen-project
cd halogen-project
npm install
npm run build
npm run serve
This project can be viewed as either a fork/clone of purescript-halogen-template with extra features or as a fork/clone of Real World Halogen with the majority of its features stripped out.
The purescript-halogen-template repo is a fantastic place to start if today is Day #1 for you with Purescript's Halogen framework.
The primary purpose of this extended template is to demonstrate just two centrall features from Thomas Honeyman's excellent Real World Halogen app. Namely:
- Hash-based routing & navigation (using PureScript Routing Duplex)
- A global
Store
containing the profile of the currently logged-in user (using PureScript Halogen Store)
There are 4 components in this project: a parent Component.Router module that has 3 child routes that each correspond to a "page" of the site.
These 3 child pages are the following:
- Page.Home (displays to all users)
- Page.Login (displays only to users that are logged out)
- Page.Secrets (displays only to users that are logged in)
The app's global state (i.e. Store) (currently) contains only the logged-in/out state of the user. Through use of the PureScript Halogen Store library, the Component.Router
, Page.Home
and Page.Secrets
components are connected to this global Store
and each receive as input the new value of this state each time it changes. These components theen use this new input to update the copy of the user's profile in their own internal component state and then render themselves accordingly.
The Page.Login
component, however, is not connected to the store.
Many modules in this template project will link directly to the corresponding module in Thomas's Real World Halogen project, where you can find his comments (Main
and Conduit.AppM
are good places to start). This purescript-halogen-tempalte-extended
repositary is meant to be a cookbook-style template, so I have not included much in the way of comments (other than notes to myself).
There are many features of the Real World Halogen project that are beyond the scope of this extended template. For example:
- Sending requests to a server using purescript-affjax
- Encoding/decoding JSON using purescript-codec-argonaut
- Proper forms and validation using purescript-halogen-formless (Formless)
- Integrating JavaScript libraries into your project using PureScript's FFI ("Foreign Function Interface")
- Logging
- How to integrate an interface (or "Capability") for CRUD-style operations
Comments, feedback, etc. are all always welcome.
Enoy! -Peter :)