Francium is a Haskell library to help build interactive applications that run in the web browser. Francium applications use GHCJS to compile Haskell to Javascript, allowing one to use all the Haskell libraries and extensions they are already familiar with.
In terms of paradigms, Francium uses reactive-banana as its underlying FRP framework, and follows in the style of React for rendering. Users build their application by describing a network of discrete events and continuously varying behaviours - influenced by those events - in order to finally produce interactive HTML.
As a small example of a Francium application, below demonstrates a basic counter application, allowing the user to increment and decrement a counter.
import Francium
import Francium.Hooks
import VirtualDom
main :: IO ()
main = react counterApp
counterApp :: Frameworks t => Moment t (Behavior t HTML)
counterApp =
do
-- We register two hooks to observe the users interaction with our
-- application. 'newClickHook' provides us with an event that occurs whenever
-- the target element is clicked, and a hook that we can bind to clickable
-- elements.
(increment,incrHook) <- newClickHook
(decrement,decrHook) <- newClickHook
-- We fold over the stream of all increment and decrement events to produce
-- a single time varying integer. Whenever @increment@ happens, we add 1
-- and whenever @decrement@ happens we subtract 1.
let counter =
accumB (0 :: Int)
(unions [fmap (const (+ 1)) increment
,fmap (const (subtract 1)) decrement])
-- Finally, we produce a time varying HTML fragment. To do so, we transform
-- the counter value - an 'Int' - into a 'HTML' fragment. We do this by
-- using 'fmap'. 'fmap' takes a function that views the counter value, and
-- we use "Francium.HTML" to produce a HTML tree.
return (fmap (\n ->
into body_
[into h1_ ["Counter"]
-- Here we render the counter, by 'show'ing the value
-- of @n@.
,into p_
["The counter currently reads: ",text (show n)]
-- Here we build the increment and decrement buttons
-- and apply the necessary hooks.
,applyHooks decrHook
(into button "-1")
,"/"
,applyHooks incrHook
(into button "+1")])
counter)For a more detailed example, see the todo-mvc example in this repository.