Package

purescript-concur-react

Repository
ajnsit/purescript-concur
License
MIT
Uploaded by
ajnsit
Published on
2019-04-16

Join the chat at https://gitter.im/concurhaskell Join the chat at https://gitter.im/concurhaskell Purescript-Concur-React on Pursuit

Concur UI Lib is a brand new client side Web UI framework that explores an entirely new paradigm. It does not follow FRP (think Reflex or Reactive Banana), or Elm architecture, but aims to combine the best parts of both. This repo contains the Concur implementation for Purescript, using the React backend.

Documentation

Work in progress tutorials are published in the Concur Documentation site

API documentation is published on Pursuit.

Performance

Purescript-Concur is reasonably light. The entire uncompressed JS bundle, including react and all libraries, for the entire example application in this repo clocks in at 300KB. You can build this bundle yourself with the command npm run prod.

This leads to pretty fast initial load times. Running the Chrome audit on https://ajnsit.github.io/purescript-concur/ produces -

Ports to other languages

  1. Concur for Haskell - The original version of Concur written in Haskell.
  2. Concur for Javascript - An official but experimental port to Javascript.

Installation

You can quickly get a production setup going (using Parcel) by cloning the Purescript Concur Starter.

Else you can also install purescript-concur manually using bower -

bower install purescript-concur-react

Building examples from source

git clone https://github.com/ajnsit/purescript-concur.git
cd purescript-concur
npm install
# Build examples
npm run ps
# Check examples
open html/index.html

External React Components

Concur supports using external React components. For example, there is an ongoing effort to create concur bindings for SemanticUI-React. Look at the Sources, and the Demo.

Examples

Demo and Source for composing all the examples in one page.

Individual example sources -

  1. Hello World! Shows simple effectful widgets with state using StateT. Source.
  2. A simple counter widget without using StateT. Source.
  3. Focus counter demonstrates a stateful widget, with multiple event handlers, and no action types needed! Source.
  4. A login widget. Source.
  5. Concur has Signals! Sample counting widget implemented with Signals! Source.
  6. A Full-featured TodoMVC implementation with Signals. Source.
  7. A Fully editable tree in ~30 lines of code (with Signals). Source.
  8. A Postfix calculator. Source.
  9. Using AJAX and handling JSON responses. Source.
  10. A small widget to Visualise CSS color codes. Source.
  11. Asynchronous timers which can be cancelled. Source.
  12. A Routed widget which demonstrates routing. Source.
  13. The Elm Architecture example demonstrates how Concur subsumes "The Elm Architecture". Source.
  14. Performance test - A huge list of 50 thousand parallel buttons. This has two variants, fast (uses slightly lower level interface) and slow (idiomatic concur code). Source.
  15. Tail Recursion demo - Since Concur is purely functional in nature, its primary mode of iteration is via recursion. Purescript in general is NOT stack stafe with tail recursion; It uses tricks like tailRec and tailRecM. However, Concur performs trampolining to make monadic recursion completely stack safe. This example demonstrates that by making a huge number of tail recursive calls in a short span of time. Source.