This commit is contained in:
orion 2023-10-06 18:45:29 -05:00
parent 9d3fee618d
commit 20bd95ef56
Signed by: orion
GPG Key ID: 6D4165AE4C928719

View File

@ -17,7 +17,11 @@ programming language that compiles to javascript (like typescript).
</ul> </ul>
### Motivating example: React vs Halogen ### Motivating example: React vs Halogen
this frontend app: You don't have to understand exactly how these examples work,
I'm providing them simply for you to glance over and get a feeling
for reading typescript/javascript vs purescript.
This app:
1. renders `"Loading..."` until either data or error 1. renders `"Loading..."` until either data or error
1. fetches data from a server 1. fetches data from a server
1. if ok, render items in a list. if error, render error span at the bottom of the page. 1. if ok, render items in a list. if error, render error span at the bottom of the page.
@ -62,10 +66,7 @@ export const App: () => React.Node = () => {
<summary>Purescript Halogen (click to expand)</summary> <summary>Purescript Halogen (click to expand)</summary>
```haskell ```haskell
type Item = { id :: String type Item = { id :: String, title :: String, description :: String }
, title :: String
, description :: String
}
data State data State
= StateEmpty = StateEmpty
@ -74,8 +75,7 @@ data State
data Action = ActionInit data Action = ActionInit
renderItem item = renderItem item = div [] [ p [] [text item.title]
div [] [ p [] [text item.title]
, span , span
[className "small"] [className "small"]
[text item.description] [text item.description]
@ -96,11 +96,7 @@ action ActionInit = do
app = mkComponent app = mkComponent
{ initialState: StateEmpty { initialState: StateEmpty
, render: renderApp , render: renderApp
, eval: , eval: mkEval ( defaultEval { handleAction = action, initialize: Just ActionInit } )
mkEval ( defaultEval { handleAction = action
, initialize: Just ActionInit
}
)
} }
``` ```