Simple, fast & type safe web applications
Flame is a PureScript front-end framework inspired by the Elm architecture with focus on simplicity and performance. Featuring:
-
Message based state updating – see Handling events
-
Subscriptions – see Handling external events
-
Server side rendering – see Rendering the app
-
Performance comparable to native JavaScript frameworks – see benchmarks
-
Parse HTML into Flame markup with breeze
Quick start
Install:
spago install flame
Example counter app:
module Counter.Main where
import Prelude
import Effect (Effect)
import Web.DOM.ParentNode (QuerySelector(..))
import Flame (Html, Update, Subscription)
import Flame as F
import Flame.Html.Element as HE
import Flame.Html.Attribute as HA
-- | The model represents the state of the app
type Model = Int
-- | Data type used to represent events
data Message = Increment | Decrement
-- | Initial state of the app
model :: Model
model = 0
-- | `update` is called to handle events
update :: Update Model Message
update model = case _ of
Increment -> model + 1 /\ []
Decrement -> model - 1 /\ []
-- | `view` is called whenever the model is updated
view :: Model -> Html Message
view model = HE.main "main" [
HE.button [HA.onClick Decrement] "-",
HE.text $ show model,
HE.button [HA.onClick Increment] "+"
]
-- | Events that come from outside the `view`
subscribe :: Array (Subscription Message)
subscribe = []
-- | Mount the application on the given selector
main :: Effect Unit
main = F.mount_ (QuerySelector "body") {
model,
view,
update,
subscribe
}