A minimal native component

The web counter from Your first Component translates line for line. Only the elements and the entry point change.

{-# LANGUAGE StaticPointers #-}
module Main where

import Miso
import Miso.Native

data Action = Increment | Decrement

app :: Component () () Int Action
app = component 0 update view

update
  :: Action
  -> Effect () () Int Action
update = \case
  Increment -> this += 1
  Decrement -> this -= 1

view
  :: Int
  -> View () () Int Action
view m =
  vfrag
    [ view_ [ onTap Increment ] [ text_ [] [ "+" ] ]
    , text_ [] [ text (ms (show m)) ]
    , view_ [ onTap Decrement ] [ text_ [] [ "-" ] ]
    ]

main :: IO ()
main = native nativeEvents (static (mountStatic app))

view_ and text_ come from Miso.Native.Element; onTap from the element's event module. nativeEvents is the Lynx equivalent of defaultEvents. Everything else — component, Effect, lenses, vfrag — is exactly the web API.

More information on how to use miso natively is available on GitHub: haskell-miso/miso-lynx (with a gallery app) and the sphynx project demonstrating cross-thread communication.